@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 active" id="ex1-tab-2" data-bs-toggle="tab" href="#ex1-tabs-2" role="tab" 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('audio-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-2" role="tabpanel" aria-labelledby="ex1-tab-2">
			  	@if(isset($audio_folders) && count($audio_folders) > 0)
						@foreach($audio_folders as $key => $folder)
							<div href="#" class="tab-img-1">
								<div class="folder-icon">
									<a href="{{ route('audio-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->audio != NULL ){
							$row->audio = url('/').'/'.'sunn_galaa_aakaas_kee/public/gallery/audio/'.$row->folder_name.'/'.$row->audio;
						}
						else if($row->audio != NULL){
							$row->audio = url('/').'/'.'sunn_galaa_aakaas_kee/public/gallery/audio/'.$row->audio;
						}
						@endphp
				<div class="tab-img-1">
							<div class="audio-box bg-audio">
								<h5 class="text-center">{{$row->title}}</h5>
								<audio controls class="w-100">
								<source
								  src="{{$row->audio}}"
								  type="audio/mpeg"
								/>
								<!-- <source
								  src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg"
								  type="audio/ogg"
								/>
								<source
								  src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.wav"
								  type="audio/wav"
								/>
								Audio not supported -->
							  </audio>
							</div>
						</div>
						@endforeach
					@endif
						<!-- <div class="tab-img">
							<div class="audio-box bg-audio">
								<h5 class="text-center">Audio Title</h5>
								<audio controls class="w-100">
								<source
								  src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
								  type="audio/mpeg"
								/>
								<source
								  src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg"
								  type="audio/ogg"
								/>
								<source
								  src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.wav"
								  type="audio/wav"
								/>
								Audio not supported
							  </audio>
							</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