@extends('web.layouts.master')
@section('css')
<link href="{!! asset('web/assets/css/lightbox.min.css') !!}" rel="stylesheet" />

<style>
.back_btn{
	
    background: #F78C1E;
	color:#fff;
    border: 1px solid #F78C1E;
}
.back_btn :hover{
	float: right;
	background:#fff !important;
    color: #F78C1E;
    border: 1px solid #F78C1E;
}
.back-img {
    text-align: right;
    margin-bottom: 20px;
}
.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">
			@if(request()->id)
				<div class="row">
					<div class="back-img"><a href="{{route('gallery')}}"><button class="btn btn-success back_btn"><i class="fa fa-arrow-left"></i>Back</button></a></div>
				</div>
				@endif
				<div class="row photo-grid">
				<div class="tab-pane fade show active gallery_pics_holder gallery_sec" 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" id="fold">
								<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">
                <a href="{{$row->image}}" data-lightbox="example">
                            <span class="">
									<img src="{{$row->image}}" class="img-fluid"/>
          </span>
          </a>
					
								</div>
							</div>
						@endforeach
					@endif
				</div>
				</div>
				
			</div>
			
		
          </div>
        </div>
      </div>
	  <div class="row" id="page-sec">
            <div class="col-md-9">{!! $result->links('pagination::bootstrap-4') !!}</div>
             <div class="col-md-3 text-right mt-10">{!! pageDetail($result) !!}</div>
       </div>
    </div>
  </section>
<!----Modal------------>
<div class="modal" tabindex="-1" role="dialog" id="password_modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Enter Password</h5>
        <button type="button" class="close close_btn" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
	  <form id="password_form">

      <div class="modal-body">
			<div class="form-group">
				<label>Password</label>
				<input type="password" name="password" id="password" placeholder="Please enter your password here" class="form-control"/>
			</div>
		
      </div>
      <div class="modal-footer">
        <button type="button" id="ok_btn" class="btn btn-primary">Ok</button>
        <button type="button" class="btn btn-secondary close_btn" data-dismiss="modal">Close</button>
      </div>
	  </form>
    </div>
  </div>
</div>
<!----Modal----------->

@endsection
@section('script')
<script type="text/javascript" src="{!! asset('web/assets/js/lightbox-min.js') !!}"></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");
	$('#password_modal').modal('show');
	$('#ok_btn').click(function(){
		var password = $('#password').val();
		
		//Change to your own Password
		if(password != 'IT@12345'){
		alert('Invalid Password');
			window.location.reload();
		}else{
			$.ajax({
			url: "{{route('set-gallery-page-session')}}",
			success: function() {
				$("#content-abt").removeClass("gallery_section"); 
			}
			});    
		$('#password_modal').modal('hide');
			
		
		}
	});
	$('.close_btn').click(function(){
		$('#password_modal').modal('hide');

	});
	
} 
Fancybox.bind("[data-fancybox]", {
    // Your custom options
});
</script>
@endsection