@extends('layouts.app')

@section('head-title')
    <title>Covet Foundation Gallery</title>
@endsection

@section('head-style')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/style.css')}}">
<style type="text/css">

.overlay-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100% - 89px);
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.5);
}

.grid-item:hover .overlay-link {
  opacity: 1;
}

.text-link:hover {
  background-color: white;
  color: black;
}

.text-link {
  color: white;
  border: 1px solid white;
  padding: 10px 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transition: .5s ease;
  text-align: center;
}

@media only screen and (max-width:767px){
  .overlay-link{
    opacity: 1;
    background-color: rgba(0,0,0,0.3);
  }
}
</style>
@endsection

@section('content')
<div id="gallery">
	<section id="first-section">
		<div class="container-fluid">
			<div class="row">
				<div class="grid gallery-container">
					@foreach ($galleries_items[0]->articles->reverse() as $item)
						<div class="grid-item col-xs-12 col-sm-4 padding-right-0 padding-left-0 text-center">
              @if($item->article_languages[0]->sub_title == 'SUMMIT')
                <a href="http://www.designandcraftsmanship.com/" target="_blank">
                  <img src="/imgs/gallery/{{ $item->slug }}.jpg" alt="" class="img-responsive">
                  <div class="overlay-link">
                    <a href="http://www.designandcraftsmanship.com/" target="_blank"><div class="text-link">VIEW MORE</div></a>
                  </div>
                </a>
              @elseif($item->article_languages[0]->sub_title == 'TECHNIQUE')
                <a href="https://www.covetfoundation.com/masters-craftsmanship/techniques" target="_blank">
                  <img src="/imgs/gallery/{{ $item->slug }}.jpg" alt="" class="img-responsive">
                  <div class="overlay-link">
                    <a href="https://www.covetfoundation.com/masters-craftsmanship/techniques" target="_blank"><div class="text-link">VIEW MORE</div></a>
                  </div>
                </a>
              @else
                <img src="/imgs/gallery/{{ $item->slug }}.jpg" alt="" class="img-responsive">
              @endif

							<h4>{{ $item->article_languages[0]->title }}</h4>
							<p>{{ $item->article_languages[0]->sub_title  }}</p>
							<p>
								<a href="https://www.facebook.com/sharer/sharer.php?u={{ url('/imgs/gallery')}}/{{$item->slug}}.jpg" target="_blank"><i class="fab fa-facebook"></i></a>
								<a href="https://plus.google.com/share?url={{ url('/imgs/gallery')}}/{{$item->slug}}.jpg" target="_blank"><i class="fab fa-google-plus-square"></i></a>
								<a href="https://pinterest.com/pin/create/button/?url=https://www.covetfoundation.com/masters-craftsmanship/gallery&media={{ url('/imgs/gallery')}}/{{$item->slug}}.jpg&description=We%20want%20to%20celebrate%20and%20honour%20the%20craftsmanship%20and%20every%20single%20person%20who%20creates%20soulful%20pieces%20with%20their%20own%20hands.%20A%20tribute%20to%20all%20makers%20for%20their%20wisdom,%20storytelling,%20and%20for%20building%20history%20with%20beautiful%20creations%20through%20ancient%20techniques%20and%20raw%20materials.%20We%20stand%20up%20for%20the%20ones%20that%20keep%20the%20art%20of%20craftsmanship%20alive.%20We%20support%20those%20who%20devote%20themselves%20to%20the%20excellence%20of%20craftsmanship." target="_blank"><i class="fab fa-pinterest-square"></i></a>
							</p>
						</div>
					@endforeach
				</div>
		    </div>
		</div>
	</section>
</div>
@endsection

@section('foot')
    <script type="text/javascript">
    	$(document).ready(function() {
    		function isotope(){
				var iso = new Isotope( '.grid', {
				  itemSelector: '.grid-item'
				});
			}
			$(window).on('load', function(){
				isotope();
			});

			$(window).resize(function(){
				isotope();
			});
    	});
    </script>
@endsection