@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_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" id="ex1-tab-1" href="{{route('gallery')}}" 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 active" id="ex1-tab-3" data-bs-toggle="tab" href="#ex1-tabs-3" role="tab" 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('video-gallery')}}"><button class="btn btn-success back_btn"><i class="fa fa-arrow-left"></i>Back</button></a></div>
				</div>
				@endif
			  <div class="tab-pane fade show active" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
			  @if(isset($video_folders) && count($video_folders) > 0)
						@foreach($video_folders as $key => $folder)
							<div href="#" class="tab-img">
								<div class="folder-icon">
									<a href="{{ route('video-gallery',$folder->id)}}"><img src="{!! ('web/assets/gallery/img/folder1.jpg') !!}" class="img-fluid"/>
									<div class="folder-link"><h5>{{$folder->folder_name}}</h5></div></a>
								</div>
							</div>
						@endforeach
					@endif
					@if(count($result) > 0)
						@foreach($result as $key => $row)
						@php
						if(request()->id && $row->video != NULL ){
							$row->video = url('/').'/'.'sunn_galaa_aakaas_kee/public/gallery/video/'.$row->folder_name.'/'.$row->video;
						}
						else if($row->video != NULL){
							$row->video = url('/').'/'.'sunn_galaa_aakaas_kee/public/gallery/video/'.$row->video;
						}
						if($row->video_thumbnail != NULL){
							$row->video_thumbnail = url('/').'/'.'sunn_galaa_aakaas_kee/public/gallery/video/thumbnail/'.$row->video_thumbnail;
						}
						@endphp
				<div class="tab-img">
							<div class="video-box">
							<!-- <video width="100%" controls poster="{{$row->video_thumbnail}}"> 
    							<source src="{{$row->video}}" type="video/mp4"> 
    						</video>  -->
								<video  muted="" controls loop=""
								src="{{$row->video}}" type="video/mp4"
								width="100%">
								<img src="{{$row->video_thumbnail}}" alt="Fast">
							  </video>
							  <h5 class="text-center">{{$row->title}}</h5>
							</div>
						</div>
						@endforeach
					@endif
						<!-- <div class="tab-img">
							<div class="video-box">
								<video muted="" autoplay="" loop=""
								src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"
								width="100%">
								<img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast">
							  </video>
							  <h5 class="text-center">Video Title</h5>
							</div>
						</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>


@endsection
@section('script')
<script>
	$(document).ready(function() {
  //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 != 'IT@12345'){
		alert('Invalid Password');
  		window.location.reload();
	}else{
		$.ajax({
         url: "{{route('set-gallery-page-session')}}",
		 success: function() {
			$("#content-abt").removeClass("gallery_section"); 
		 }
    	}); 
	
	}
} 

</script>
@endsection