@extends('layouts.app-gallery')

@section('head-title')
    <title>Covet Foundation {{ $artisanInfo->article_languages[0]->title }} Gallery</title>
@endsection

@section('head-style')
	<style type="text/css">
		html, body {
		    height: 100%;
		}

		#app {
		    height: 100%;
		    width: 100%;
		    display: table;
		    background-color: #000;
		}

		#artisan-gallery{
		    display: table-cell;
		    height: 100%;
		    vertical-align: middle;
		    background-color: #fff;
		}

		.carousel-inner .item{
			max-width: 100%;
			height: 100vh;
			background-color: #f7f7f7;
		}

		.carousel-inner .item img{
			max-height: 100vh;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		#gallery div{
			-webkit-transition: width 0.3s ease-out;
		    -moz-transition: width 0.3s ease-out;
		    -o-transition: width 0.3s ease-out;
		    transition: width 0.3s ease-out;
		    overflow:hidden;
		}

		#gallery{
			display: flex;
		}

		#side-menu{
			position: relative;
			padding: 0 20px;
			overflow: auto !important;
		}

		#side-menu.col-md-1 #page-number-total{
			display: none;
		}

		#menu-key{
			position: absolute;
			top: 50%;
			right: 5px;
			font-size: 20px;
			z-index: 10000;
		}

		#artisan-name{
			font-size: 1.5em;
			font-weight: bold;
		}

		#page-number-total{
			line-height: 26px;
		}

		#side-menu-content-social p{
			margin: 0;
		}

		#side-menu-content-social ul{
			list-style: none;
			padding: 0;
			font-size: 20px;
			margin: 0;
		}

		#side-menu-content{
		    display: flex;
		    height: 100%;
		    justify-content: space-around;
		    flex-flow: column;
		}

		#side-menu.col-md-1 #side-menu-content{
			text-align: center;
		}

		#side-menu.col-md-1 #side-menu-content-text{
			display: none;
		}

		#side-menu.col-md-4 #side-menu-content ul li{
			display: inline;
		}

		#carousel-example-generic{
			height: 100vh;
		}

		#gallery-container{
			background-color: #f7f7f7;
		}

		#gallery-container-controls{
			position: absolute;
			top: 0;
			right: 0;
			background-color: #fff;
			color: #000;
			height: 30px;
			line-height: 30px;
			font-weight: bold;
			font-size: 12px;
		}

		@media (max-width: 991px) {
			#gallery-container-controls{
				width: 100%;
				top: inherit;
				bottom: 0;
				left: 0;
			}

			#side-menu {
			    position: absolute;
			    left: 0;
			    top: 0;
			    width: 279px;
			    z-index: 999;
			    background: #fff;
			    height: 100%;
			}

			#side-menu.opened{
				visibility: visible;
				opacity: 1;
			}

			#side-menu.closed{
				visibility: hidden;
				opacity: 0;
			}

			#gallery-container-controls{
				width: 100%;
				line-height: 30px;
				float: right;
			}

			#gallery-container-controls ul{
				width: 85%;
			}
		}

		#gallery-container-controls ul{
			list-style: none;
			padding: 0;
			margin: 0;
			text-align: right;
			width: auto;
		}

		#gallery-container-controls ul li{
			display: inline;
			padding: 0 15px;
			border-left: 1px solid #000;
		}

		#gallery-container-controls ul li:first-child{
			border-left: 0;
		}

		#open-mobile-menu{
		    position: absolute;
		    top: 20px;
		    left: 20px;
		    z-index: 9;
		}

		#gallery-container-thumbnails{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #f7f7f7;
			overflow: auto !important;
			visibility: hidden;
			opacity: 0;
			-webkit-transition: visibility 0s linear 1s,opacity 3s ease-in-out !important;
			-o-transition: visibility 0s linear 1s,opacity 3s ease-in-out !important;
			transition: visibility 0s linear 1s,opacity 3s ease-in-out !important;
		}

		#gallery-container-thumbnails.opened{
			visibility: visible;
			opacity: 1;
		}

		.menu-line{
			width: 15px;
		    height: 2px;
		    background-color: black;
		    margin: 3px 0;
		}

		a:focus, a:visited{
			text-decoration: none;
			color: #000;
		}
	</style>
@endsection

@section('content')
<div id="artisan-gallery">
	<section id="first-section">
		<div class="container-fluid">
			<div class="row" id="gallery">
				<div class="col-md-4 opened" id="side-menu">
					<i class="fas fa-caret-left hidden-xs hidden-sm" id="menu-key"></i>
					<div class="row marg-top-20">
						<div class="col-xs-6" id="artisan-name">
							{{ $artisanInfo->article_languages[0]->title }}
						</div>
						<div class="col-xs-6 text-right hidden-xs hidden-sm" id="page-number-total">
							@php
								$directory = './imgs/artisans/'. $artisanInfo->slug .'/gallery/';
    							$filesCount = count(glob($directory . '*.jpg'));
							@endphp
							<span id="carousel-index-active-1">1</span> of {{ $filesCount }}
						</div>
						<div class="col-xs-6 text-right visible-xs visible-sm" id="page-number-total">
							<a href="#" title="" id="close-mobile-menu"><i class="fas fa-times"></i></a>
						</div>
					</div>
					<div class="row" id="side-menu-content">
						<div class="col-xs-12" id="side-menu-content-text">
							<p>{{ strip_tags($artisanInfo->article_languages[0]->body) }}</p>
						</div>
						<div class="col-xs-12" id="side-menu-content-social">
							<p>Share: </p>
							<ul>
								<li><a href="https://www.facebook.com/sharer/sharer.php?u=https://www.covetfoundation.com/masters-craftsmanship/artisans/{{$artisanInfo->slug}}/gallery" target="_blank"><i class="fab fa-facebook"></i></a></li>
								<li><a href="https://plus.google.com/share?url=https://www.covetfoundation.com/masters-craftsmanship/artisans/{{$artisanInfo->slug}}/gallery" target="_blank"><i class="fab fa-google-plus-square"></i></a></li>
								<li><a href="https://pinterest.com/pin/create/button/?url=https://www.covetfoundation.com/masters-craftsmanship/artisans/{{$artisanInfo->slug}}/gallery&amp;media=https://www.covetfoundation.com/imgs/artisans/{{ $artisanInfo->slug}}/thumbnail.jpg&amp;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></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-8" id="gallery-container" style="text-align: right;">
					<a  href="" class="btn btn-default visible-xs visible-sm" title="" id="open-mobile-menu">
						<div class="menu-line"></div>
						<div class="menu-line"></div>
						<div class="menu-line"></div>
					</a>
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						<!-- Wrapper for slides -->
						<div class="carousel-inner" role="listbox">
							@for ($i = 1; $i < $filesCount+1; $i++)
								<div class="item {{ $i == 1 ? 'active' : ''}}">
									<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/{{ $i }}.jpg"  class="img-responsive" alt="...">
								</div>
							@endfor
						</div>

						<!-- Controls -->
						{{-- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a> --}}
						<div id="gallery-container-thumbnails">
							<div class="marg-bottom-10">
								@for ($i = 1; $i < $filesCount+1; $i++)
									<a href="#" data-index="{{$i}}" title="">
										<div class="col-xs-6 col-md-3 marg-top-10" style="height: 200px; display: flex; flex-flow: column; justify-content: center;">
											<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/{{ $i }}.jpg" alt="" class="img-responsive" style="max-height: 200px;">
										</div>
									</a>
								@endfor
							</div>
						</div>
						<div id="gallery-container-controls">
							<div class="text-left visible-xs visible-sm pull-left" style="width: 15%;">
								<span id="carousel-index-active-2">1</span> of {{ $filesCount }}
							</div>
							<ul  style="">
								<li><a href="#carousel-example-generic" role="button" data-slide="prev">Preview</a></li>
								<li><a href="#carousel-example-generic" role="button" data-slide="next">Next</a></li>
								<li><a href="#" title="" id="view-all-images">View All</a></li>
								<li><a href="{{ route('frontend.artisans-individual', $artisanInfo->slug) }}" title="">Close</a></li>
							</ul>
						</div>
					</div>
				</div>
		    </div>
		</div>
	</section>
</div>
@endsection

@section('foot')
	<script src="/js/TouchSwipe/jquery.touchSwipe.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		//Enable swiping...
            $(".carousel-inner").swipe( {
                //Generic swipe handler for all directions
                swipeLeft:function(event, direction, distance, duration, fingerCount) {
                    $(this).parent().carousel('next');
                },
                swipeRight: function() {
                    $(this).parent().carousel('prev');
                },
                //Default is 75px, set to 0 for demo so any distance triggers swipe
                threshold:0
            });

    		$('#menu-key').on('click', function(e){
    			e.preventDefault();
    			if($(this).hasClass('fa-caret-left')){
    				$(this).removeClass('fa-caret-left').addClass('fa-caret-right');
    				$('#gallery-container').removeClass('col-md-8').addClass('col-md-11');
    				$('#side-menu').removeClass('col-md-4 opened').addClass('col-md-1 closed');
    				$("#artisan-name").removeClass('col-xs-6').addClass('col-xs-12');
    			}else{
    				$(this).removeClass('fa-caret-right').addClass('fa-caret-left');
    				$('#gallery-container').removeClass('col-md-11').addClass('col-md-8');
    				$('#side-menu').removeClass('col-md-1 closed').addClass('col-md-4 opened');
    				$("#artisan-name").removeClass('col-xs-12').addClass('col-xs-6');
    			}
    		});

    		$('#close-mobile-menu').on('click', function(event) {
    			event.preventDefault();
    			if($('#side-menu').hasClass('opened')){
    				$('#side-menu').removeClass('col-md-4 opened').addClass('col-md-1 closed');
    				$('#gallery-container').removeClass('col-md-8').addClass('col-md-11');
    				$('#menu-key').removeClass('fa-caret-left').addClass('fa-caret-right');
    			}
    		});

    		$('#open-mobile-menu').on('click', function(event) {
    			event.preventDefault();
    			if($('#side-menu').hasClass('closed')){
    				$('#side-menu').removeClass('col-md-1 closed').addClass('col-md-4 opened');
    				$('#gallery-container').removeClass('col-md-11').addClass('col-md-8');
    				$('#menu-key').removeClass('fa-caret-right').addClass('fa-caret-left');
    			}
    		});

    		$('#view-all-images').on('click', function(event) {
    			event.preventDefault();
    			if ($('#gallery-container-thumbnails').hasClass('opened')) {
    				$(this).text('View All');
    				$('#gallery-container-thumbnails').removeClass('opened');
    			}else{
    				$(this).text('Hide All');
    				$('#gallery-container-thumbnails').addClass('opened');
    			}
    		});
    		$('#carousel-example-generic').on('slid.bs.carousel.left slid.bs.carousel.right', function (e) {
    			$('#carousel-index-active-1, #carousel-index-active-2').text(($('#carousel-example-generic .active').index()+1));
    		});

    		$('#gallery-container-thumbnails a').on('click', function(event) {
    			event.preventDefault();
    			var index = $(this).attr('data-index');
    			$('#carousel-example-generic').carousel(parseInt(index-1));
    			$('#gallery-container-thumbnails').removeClass('opened');
    			$('#view-all-images').text('Show All');
    		});

    	});
    </script>
@endsection