@extends('layouts.app')

@section('head')

@if( env('APP_THEME')=='Theme1')
<link href="{{ asset('frontend-assets/latest/css/gallery.css') }}" rel="stylesheet">
@else
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" /> 
@endif
@endsection

@section('content')



<div class="bravo-gallery">


@php 


        $title_page = $row->title;



        if(empty($title_page)){



            $title_page =  setting_item("gallery_page_list_title");



        }



    @endphp

 @if(!empty($title_page)) 

 
      @if($row->image_id)
 
@php $bg = $row->image_id; @endphp
 @else

 @php $bg = setting_item("gallery_page_list_banner"); @endphp

 @endif 
 
@if( env('APP_THEME')=='Theme1')
@section('footer')
 
<script>
    $(document).ready(function(){

    loadGallery(true, 'a.thumbnail');

    //This function disables buttons when needed
    function disableButtons(counter_max, counter_current){
        $('#show-previous-image, #show-next-image').show();
        if(counter_max == counter_current){
            $('#show-next-image').hide();
        } else if (counter_current == 1){
            $('#show-previous-image').hide();
        }
    }

    /**
     *
     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
     * @param setClickAttr  Sets the attribute for the click handler.
     */

    function loadGallery(setIDs, setClickAttr){
        var current_image,
            selector,
            counter = 0;

        $('#show-next-image, #show-previous-image').click(function(){
            if($(this).attr('id') == 'show-previous-image'){
                current_image--;
            } else {
                current_image++;
            }

            selector = $('[data-image-id="' + current_image + '"]');
            updateGallery(selector);
        });

        function updateGallery(selector) {
            var $sel = selector;
            current_image = $sel.data('image-id');
            $('#image-gallery-caption').text($sel.data('caption'));
            $('#image-gallery-title').text($sel.data('title'));
            $('#image-gallery-image').attr('src', $sel.data('image'));
            disableButtons(counter, $sel.data('image-id'));
        }

        if(setIDs == true){
            $('[data-image-id]').each(function(){
                counter++;
                $(this).attr('data-image-id',counter);
            });
        }
        $(setClickAttr).on('click',function(){
            updateGallery($(this));
        });
    }
});
</script>
@endsection
     <!--/hero_in-->
     <div class="container-fluid aboutc1 breadcrumb m-0" style=" background-image: linear-gradient(rgba(30, 73, 126, 0.31), rgba(30, 73, 126, 0.277)), @if(!empty($bg)) url({{get_file_url($bg,'large')}})@endif;">
                <nav class="breadcrumbEx">
                  <h1 class="text-center text-white">{{ $title_page }}</h1>
                  <div class="breadcrumb-wrapper text-white text-center">
                    <span>
                      <a title="Homepage" href="{{route('home')}}"
                        ><i class="fas fa-home"></i>&nbsp;&nbsp;गृहपृष्ठ</a
                      >
                    </span>

                    <span class="">&nbsp; : : &nbsp;</span>
                    <span class="" id="breadcrumbActive">ग्यालेरी</span>

                  </div>
                </nav>
              </div>
              <div class="container-fluid galleryContainer">
    <div class="row block1">
      <div class="col-12 galleryTitleCol my-3" data-aos="fade-right" data-aos-duration="1000">
          <h1 class="head-tag tx-blue">{{$title_page}}</h1>
      </div>

      <div class="col-12 gallerMainImgBox">
        <div class="gallerywrapper">
          <!-- filter Items -->
  
              @include('Gallery::frontend.layouts.details.gallery-detail') 
         
        </div>
      
      
        
      </div>
    </div>
  </div> 
@elseif( env('APP_THEME')=='Theme2')
<div class="jumbotron d-flex align-items-center justify-content-center" style="
background-image: linear-gradient(
to right,
rgba(32, 27, 31, 0.24),
rgba(32, 27, 31, 0.24)
),
url({{get_file_url($bg,'full')}});
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 50vh;
">
<div class="image-content-text text-white">
<h1>ग्यालेरी</h1>
<p class="text-center">Home | ग्यालेरी</p>
</div>
</div>

<div> 


<!-- filter Images -->
<div class="gallery galleryImgContainer mb-5 pb-5">

<div class="container my-5">
<div class="row g-3"> 
 
@include('Gallery::frontend.layouts.details.gallery-detail-theme2') 
</div> 
</div>



</div>
</div>
</div> 
<!-- End Galley Section-->
@else        
@endif  

@endif 

@endsection
@section('footer')
 
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
@endsection