@extends('web.layouts.master')
@section('css')
<style>
.back_btn{
	float: right;
    background: #F78C1E;
	color:#fff;
    border: 1px solid #F78C1E;
}
.back_btn :hover{
	float: right;
	background:#fff !important;
    color: #F78C1E;
    border: 1px solid #F78C1E;
}
.gallery_pics:hover {
  cursor: pointer;
}
.gallery_pics.fullscreen img {
  width: 100%;
  height: 100%;
}
.gallery_pics.fullscreen {
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
}
.gallery_section{
	-webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}
</style>
@endsection
@section('content')
   <!--Inner Top Title-->
   <section id="inner-page-title" >
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="page-title">
              <h4>Gallery</h4>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{ route('web') }}">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    Gallery
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--About Us-->
      <!--About Us-->
  <section id="content-abt" class="gallery_section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="info-section-box">
			<ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
			  <li class="nav-item" role="presentation">
				<a class="nav-link active" id="ex1-tab-1" data-bs-toggle="tab" href="#ex1-tabs-1" role="tab" aria-controls="ex1-tabs-1" aria-selected="true"><i class="fas fa-images"></i>Images</a
				>
			  </li>
			  <li class="nav-item" role="presentation">
				<a class="nav-link" id="ex1-tab-2"  href="{{route('audio-gallery')}}" aria-controls="ex1-tabs-2" aria-selected="false"><i class="fas fa-volume-up"></i>Audio</a
				>
			  </li>
			  <li class="nav-item" role="presentation">
				<a class="nav-link" id="ex1-tab-3" href="{{route('video-gallery')}}" aria-controls="ex1-tabs-3" aria-selected="false"><i class="fas fa-video"></i>Video</a
				>
			  </li>
			</ul>
			<div class="tab-content" id="ex1-content" onload="getPics()">
			@if(request()->id)
				<a href="{{route('gallery')}}"><button class="btn btn-success back_btn"><i class="fa fa-arrow-left"></i></button></a>
				@endif
				<div class="tab-pane fade show active gallery_pics_holder" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
					@if(isset($image_folders) && count($image_folders) > 0)
						@foreach($image_folders as $key => $folder)
							<div href="#" class="tab-img">
								<div class="folder-icon">
									<a href="{{ route('gallery',$folder->id)}}"><img src="{!! url('/').'/'.('web/assets/gallery/img/folder1.jpg') !!}" class="img-fluid"/>
									<div class="folder-link"><h5>{{$folder->folder_name}}</h5></div></a>
								</div>
							</div>
						@endforeach
					@endif
					<!-- <div href="#" class="tab-img">
						<div class="folder-icon">
							<a href="#"><img src="{!! ('web/assets/gallery/img/folder1.jpg') !!}" class="img-fluid"/>
							<div class="folder-link"><h5>Holy Event</h5></div></a>
						</div>
					</div> -->
					@if(count($result) > 0)
						@foreach($result as $key => $row)
						@php
						if(request()->id && $row->image != NULL ){
							$row->image = url('/').'/'.'sunn_galaa_aakaas_kee/public/gallery/images/'.$row->folder_name.'/'.$row->image;
						}
						else if($row->image != NULL){
							
							$row->image = url('/').'/'.'sunn_galaa_aakaas_kee/public/gallery/images/'.$row->image;
						}
						@endphp
							<div class="tab-img">
								<div class="img-tab gallery_pics">
									<img src="{{$row->image}}" class="img-fluid" onclick="myFunction(this);"/>
								</div>
							</div>
						@endforeach
					@endif
				</div>
				
			</div>
			
		
          </div>
        </div>
      </div>
	  <div class="row">
            <div class="col-md-8">{!! $result->links('pagination::bootstrap-4') !!}</div>
             <div class="col-md-4 text-right mt-10">{!! pageDetail($result) !!}</div>
       </div>
    </div>
  </section>



@endsection
@section('script')
<script>
	$(document).ready(function() {
  $('.gallery_pics').click(function(e) {
    // Change Selector Here
    $(this).toggleClass('fullscreen');
  });

  //password protected
 @if($passwordProtected == 0)
  run();
  @else
  $("#content-abt").removeClass("gallery_section"); 

  @endif
});
function run(){
	var password = prompt("Password Please");
	//Change to your own Password
	if(password != '0123456789'){
	// document.body.innerHTML = '';
	// document.body.innerHTML = 'Password Failed! Reload to Renter Password';
	alert('Invalid Password');
	}else{
		$.ajax({
         url: "{{route('set-gallery-page-session')}}",
		 success: function() {
			$("#content-abt").removeClass("gallery_section"); 
		 }
    	});    
		
	
	}
} 

</script>
@endsection