@extends('frontend.layouts.main')
@section('content')
    <section class="gallery-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                        <!--<h3 class="text-start">Photo</h3>-->
                        <ul class="new nav nav-pills mt-3 mb-3 d-inline-block" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link imageCategory @if(!isset(request()->slug) || request()->slug == 'all') active @endif" data-category="all" id="pills-all-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-all" type="button" role="tab" aria-controls="pills-all"
                                    aria-selected="true" style="width: 100%; text-align: left;">All Photos</button>
                            </li>
                            @foreach ($categories as $category)
                                <li class="nav-item"  role="presentation">
                                    <button class="nav-link imageCategory @if(request()->slug == $category->slug) active @endif" data-category="{{ $category->slug }}" id="pills-{{ $category->slug }}-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-{{ $category->slug }}" type="button" role="tab"
                                        aria-controls="pills-{{ $category->slug }}" aria-selected="false"
                                        style="width: 100%; text-align: left;">
                                        {{ $category->title }}
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col-lg-9">
                        <div class="loader" id="load"></div>
                        <div class="tab-content" id="pills-tabContent" style="display:none">
                            <div class="tab-pane fade show active" id="pills-all" role="tabpanel"
                                 aria-labelledby="pills-all-tab">
                                <div class="row">
                                    @foreach ($galleries as $gallery)
                                        <div class="col-lg-3 pb-md-3 mb-3">
                                            <div class="card" style="width: auto;">
                                                <!--<img src="{{ asset($gallery->image) }}" class="card-img-top" alt="..." height="221"  onclick="openImage('{{ asset($gallery->image) }}')">-->
                                                <!--<img src="{{ Storage::disk('s3')->url($gallery->image) }}" class="card-img-top" alt="..." height="221"  onclick="openImage('{{ Storage::disk('s3')->url($gallery->image) }}')">-->
                                                <img src="{{ s3_url($gallery->image) }}" class="card-img-top" alt="..." height="221"  onclick="openImage('{{ s3_url($gallery->image) }}')">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            @foreach ($categories as $category)
                                <div class="tab-pane fade" id="pills-{{ $category->slug }}" role="tabpanel"
                                     aria-labelledby="pills-{{ $category->slug }}-tab">
                                    <div class="row">
                                        @foreach ($galleries->where('category_id', $category->id) as $gallery)
                                            <div class="col-lg-3 pb-md-3">
                                                <div class="card" style="width: auto;">
                                                    <!--<img src="{{ asset($gallery->image) }}" class="card-img-top" alt="..." height="221" style="object-fit:cover; object-position: center;"  onclick="openImage('{{ asset($gallery->image) }}')">-->
                                                    <!--<img src="{{ Storage::disk('s3')->url($gallery->image) }}" class="card-img-top" alt="..." height="221" style="object-fit:cover; object-position: center;"  onclick="openImage('{{ Storage::disk('s3')->url($gallery->image) }}')">-->
                                                    <img src="{{ s3_url($gallery->image) }}" class="card-img-top" alt="..." height="221" style="object-fit:cover; object-position: center;"  onclick="openImage('{{ s3_url($gallery->image) }}')">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="col-md-12 mt-4 d-flex justify-content-center">
                            {{$galleries->links('pagination::bootstrap-4')}}
                        </div>
                    </div>
                  
            </div>
        </div>
    </section>
@endsection

<!-- Push script to layout -->
@push('scripts')
<script>
    // Function to open image in full screen or modal
    function openImage(imageUrl) {
        // Remove existing modal if any
        var existingModal = document.querySelector('.modal');
        if (existingModal) {
            document.body.removeChild(existingModal);
        }

        // Create a modal element
        var modal = document.createElement('div');
        modal.classList.add('modal');

        // Create a close button
        var closeButton = document.createElement('span');
        closeButton.classList.add('close-button');
        closeButton.innerHTML = '&times;';
        closeButton.onclick = function() {
            modal.style.display = 'none';
        };

        // Create an image element
        var image = document.createElement('img');
        image.src = imageUrl;
        image.classList.add('modal-content');

        // Append elements to modal
        modal.appendChild(closeButton);
        modal.appendChild(image);

        // Append modal to body
        document.body.appendChild(modal);

        // Show modal
        modal.style.display = 'flex'; // Changed to flex for centering
    }
</script>
<script>
    $("body").on("click",".imageCategory",function(){
        var category = $(this).attr("data-category");
        var url = "{{route('frontend.gallery.index')}}";
        window.location.href = url+'/'+category;
    });

document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'interactive') {
    //    document.getElementById('pills-tabContent').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
         document.getElementById('interactive');
         document.getElementById('load').style.display="none";
         document.getElementById('pills-tabContent').style.display="block";
      },1000);
  }
}
</script>

@endpush
<!-- Push script to layout -->