@extends('layout')
@section('content')

	<style>
		/* #panorama {
			width: 500px;
			height: 300px;
		} */
		/* .panorama{
			padding: 22px;
			margin-left: -8px;
		} */
   </style>

	@if(desktop())
   	<br/><br/><br/><br/>
	@endif
	@if(mobile())
		<br/><br/>
	@endif
	<div class="container-fluid no-padd">
		<div class="row-fluid margin-sm-0t">
			<div class="column column_container col-sm-12 ">
				<div class="column-inner ">
					<div class="wrapper">
						<div class="heading Center dark">
							<div class="title my-element"><h3 style="font-family:'Poppins'; font-weight: 600; !important;">OUR PROJECTS</h3></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	@if(desktop())
	<br/>
	@endif

	<div class="container-fluid no-padd">
		<div class="modal" id="panoroma_view" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-xl" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<!-- <h5 class="modal-title">Panorama View</h5> -->
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body text-center">
	 					<div class="row">
						 	<div class="col-12" id="panorama" style="height: 500px; width: 300px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		@if(desktop())
			<div class="row-fluid margin-sm-0t my-element text-center">
				<button class="a-btn-2 creative wow animate__fadeInUp" data-wow-duration="0.8s" id="still_btn">
					<span class="a-btn-line"></span>
					STILL IMAGES 
				</button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button class="a-btn-2 creative wow animate__fadeInUp" data-wow-duration="1s" id="walk_btn">
					<span class="a-btn-line"></span>
					WALKTHROUGH
				</button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
				<button class="a-btn-2 creative wow animate__fadeInUp" data-wow-duration="1.2s" id="tour_btn">
					<span class="a-btn-line"></span>
					360° TOUR
				</button>        
			</div>
		@endif

		@if(mobile())
		   <div class="row-fluid margin-sm-0t my-element text-center">
				<button class="a-btn-2 creative col-5 wow animate__fadeInUp" data-wow-duration="0.8s" id="still_btn">
					<span class="a-btn-line"></span>
					STILL IMAGES 
				</button>
				&nbsp;&nbsp;&nbsp;
				<button class="a-btn-2 creative col-6 mt-10 wow animate__fadeInUp" data-wow-duration="0.9s" id="walk_btn">
					<span class="a-btn-line"></span>
					WALKTHROUGH
				</button>  
				&nbsp;&nbsp;&nbsp;
				<button class="a-btn-2 creative col-5 wow animate__fadeInUp" data-wow-duration="1s" id="tour_btn" style="margin-top: 13px;">
					<span class="a-btn-line"></span>
					360° TOUR
				</button>      
			</div>
		@endif
  
		<div id="still-images-div" class="row-fluid  @if(desktop()) margin-lg-50t margin-sm-100t @endif @if(mobile()) margin-sm-40t @endif">
			<div class="col-sm-12">
				<div class="vc_column-inner ">
					<div data-unique-key="14ad5b356d917aa464e6341724c17a46" class="js-load-more" data-start-page="1"
						data-max-page="1" data-next-link="">
						<div id="still-images" class="row prague_masonry prague_count_col4 prague_gap_col15  no-footer-content prague-load-wrapper"
							data-columns="prague_count_col4" data-gap="prague_gap_col15">
							@foreach($still_images as $still_image)
								<a class="portfolio-item-wrapp" href="{{$still_image}}">
									<div class="portfolio-item">
										<div class="project-masonry-wrapper">
											<div class="project-masonry-item-img-link">
												<img src="{{$still_image}}"/>
											</div>
										</div>
									</div>
								</a>
							@endforeach
						</div> 
					</div> 
				</div> 
			</div> 
		</div>

		<div id="walkthrough-videos-div" class="row-fluid  @if(desktop()) margin-lg-50t margin-sm-100t @endif @if(mobile()) margin-sm-40t @endif" >
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
			@foreach($walkthroughs as $walkthrough)
			<div class="col-md-3 walkthrough_video">
				<a data-fancybox="video-gallery" class="project-masonry-item-img-link" href="{{$walkthrough['video']}}">
					<img src="{{$walkthrough['thumbnail']}}" class="img-thumbnail" />
				</a>
			</div> 
			@endforeach
			<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
		</div>

		<div id="360-btn-div" class="row-fluid  @if(desktop()) margin-lg-50t margin-sm-100t @endif @if(mobile()) margin-sm-40t @endif" >
			@foreach($panoramas as $panorama)			
				<a class="col-md-3 panorama" href="#" data-src="{{$panorama}}">
					<img src="{{$panorama}}" style="@if(desktop()) height: 200px; width: 400px; padding-bottom: 20px;  @endif @if(mobile()) padding: 22px; margin-left: -8px; @endif"/>
				</a>
			@endforeach
		</div>

			
	</div>   
	
	</div>


	<script>
		
	$(document).ready(function(){
		$('#walkthrough-videos-div').css('display','none');
		$('#360-btn-div').css('display','none');
	});

	$('#still_btn').on('click',function(e){
			e.preventDefault();
		$('#walkthrough-videos-div').css('display','none');
		$('#360-btn-div').css('display','none');
		$('#still-images-div').css('display','block');
		$('#still-images-div').addClass("animate__animated animate__fadeInLeft");
	});

	$('#walk_btn').on('click',function(e){
			e.preventDefault();
		$('#still-images-div').css('display','none');
		$('#360-btn-div').css('display','none');
		$('#walkthrough-videos-div').css('display','block');
		$('#walkthrough-videos-div').addClass("animate__animated animate__fadeInRightBig");
	});

	$('#tour_btn').on('click',function(e){
		e.preventDefault();
		$('#still-images-div').css('display','none');
		$('#walkthrough-videos-div').css('display','none');
		$('#360-btn-div').css('display','block');
		$('#360-btn-div').addClass("animate__animated animate__fadeInRightBig");
	});

	lightGallery(document.getElementById('still-images'), {
		addClass: 'lg-custom-thumbnails',
		appendThumbnailsTo: '.lg-outer',
		animateThumb: false,
		allowMediaOverlap: true,
	});


	$('.panorama').click(function(){
		var src = $(this).data('src');
		$('#panoroma_view').appendTo("body").modal('show');
		$('#panorama').html('');
		pannellum.viewer('panorama', {
			"type": "equirectangular",
			"panorama": src,
			"preview":src,
		});
	});
	
	</script>

@endsection