@extends('frontend.layouts.app')
@section('title')
    {{ $content_for }} -
@endsection

@push('style')
    <style>
        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* ৩ কলাম */
            gap: 20px;
        }

        .gallery a {
            display: block;
            overflow: hidden;
            height: 400px;
            border-radius: 8px;
            /* একটু রাউন্ড শেপ সৌন্দর্যের জন্য */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        .gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .gallery a:hover img {
            transform: scale(1.03);
            /* জুম ইফেক্ট */
        }

        /* =========================================
               MAGIC CSS: শেষের ছবি সেন্টারে আনার লজিক
               ========================================= */
        @media (min-width: 768px) {

            /* লজিক: যদি লাস্ট আইটেমটি (3n + 1) হয় (যেমন: ৪, ৭, ১০ নাম্বার ছবি),
                   অর্থাৎ সেটি যদি নতুন লাইনের শুরুতে একা থাকে,
                   তবে তাকে ২ নাম্বার কলামে (মাঝখানে) নিয়ে যাও।
                */
            .gallery a:last-child:nth-child(3n + 1) {
                grid-column: 2;
            }
        }

        /* মোবাইলের জন্য রেসপন্সিভ (১ কলাম) */
        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    </style>
@endpush

@section('content')
    @include('frontend.layouts.include.breadcrumb', [
        'items' => array_filter([
            $submenu ? ['name' => $submenu, 'url' => '#'] : null,
           $content_for
        ? ['name' => $content_for, 'url' => ($subsubmenu ? '#' : null)]
        : null,
            $subsubmenu ? ['name' => $subsubmenu, 'url' => null] : null,
        ]),
    ])

    <div class="main-content">
        <div class="container-fluid my-4">

            <div class="gallery">
                @forelse ($files as $file)
                    <a href="{{ asset($file->file_path) }}" class="glightbox">
                        <img src="{{ asset($file->file_path) }}" alt="Image">
                    </a>
                @empty
                    <div class="w-100 d-flex justify-content-center align-items-center" style="grid-column: 1 / -1; ">
                        <h5 class="text-muted">No media found.</h5>
                    </div>
                @endforelse
            </div>

            <div class="mb-5 mt-4">
                {{ $files->links('vendor.pagination.frontend') }}
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <script>
        const lightbox = GLightbox({
            touchNavigation: true,
            loop: true,
            autoplayVideos: true
        });
    </script>
@endpush