{{-- resources/views/customer/agency/sections/gallery.blade.php --}}
<section class="gallery-section" style="background: white;">
    <div class="container">
        @if($section->title || $section->subtitle)
            <div style="text-align: center; margin-bottom: 4rem;">
                @if($section->subtitle)
                    <p style="color: var(--accent); font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->title)
                    <h2 style="font-size: 2.75rem; font-weight: 800; color: #111827;">
                        {{ $section->title }}
                    </h2>
                @endif
            </div>
        @endif

        @php
            $folderId = $section->getConfig('gallery_folder_id');
            $limit = $section->getConfig('image_limit', 12);

            $images = \App\Models\Gallery\GalleryImage::when($folderId, function($query) use ($folderId) {
                    return $query->where('folder_id', $folderId);
                })
                ->active()
                ->approved()
                ->public()
                ->orderBy('sort_order')
                ->limit($limit)
                ->get();
        @endphp

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
            @foreach($images as $image)
                <div style="position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s;" onclick="openLightbox{{ $section->id }}({{ $loop->index }})">
                    <img src="{{ $image->full_url }}"
                         alt="{{ $image->display_alt_text }}"
                         style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;">

                    <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;">
                        @if($image->title)
                            <h4 style="color: white; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem;">
                                {{ $image->title }}
                            </h4>
                        @endif
                        @if($image->description)
                            <p style="color: rgba(255,255,255,0.9); font-size: 0.875rem;">
                                {{ Str::limit($image->description, 60) }}
                            </p>
                        @endif
                    </div>

                    <div style="position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.9); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s;">
                        <i class="fas fa-search-plus" style="color: var(--primary);"></i>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Lightbox -->
<div id="lightbox{{ $section->id }}" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 10000; align-items: center; justify-content: center; padding: 2rem;" onclick="closeLightbox{{ $section->id }}()">
    <button onclick="prevImage{{ $section->id }}(event)" style="position: absolute; left: 2rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: none; width: 50px; height: 50px; border-radius: 50%; color: white; font-size: 1.5rem; cursor: pointer; transition: all 0.2s;">
        <i class="fas fa-chevron-left"></i>
    </button>

    <img id="lightboxImage{{ $section->id }}" src="" style="max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">

    <button onclick="nextImage{{ $section->id }}(event)" style="position: absolute; right: 2rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: none; width: 50px; height: 50px; border-radius: 50%; color: white; font-size: 1.5rem; cursor: pointer; transition: all 0.2s;">
        <i class="fas fa-chevron-right"></i>
    </button>

    <button onclick="closeLightbox{{ $section->id }}()" style="position: absolute; top: 2rem; right: 2rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: none; width: 50px; height: 50px; border-radius: 50%; color: white; font-size: 1.5rem; cursor: pointer;">
        <i class="fas fa-times"></i>
    </button>
</div>

<style>
    .gallery-section > .container > div > div:hover img {
        transform: scale(1.1);
    }

    .gallery-section > .container > div > div:hover > div,
    .gallery-section > .container > div > div:hover > div:last-child {
        opacity: 1;
    }
</style>

<script>
    let currentImageIndex{{ $section->id }} = 0;
    const images{{ $section->id }} = @json($images->map(fn($img) => $img->full_url));

    function openLightbox{{ $section->id }}(index) {
        currentImageIndex{{ $section->id }} = index;
        document.getElementById('lightboxImage{{ $section->id }}').src = images{{ $section->id }}[index];
        document.getElementById('lightbox{{ $section->id }}').style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

    function closeLightbox{{ $section->id }}() {
        document.getElementById('lightbox{{ $section->id }}').style.display = 'none';
        document.body.style.overflow = '';
    }

    function prevImage{{ $section->id }}(event) {
        event.stopPropagation();
        currentImageIndex{{ $section->id }} = (currentImageIndex{{ $section->id }} - 1 + images{{ $section->id }}.length) % images{{ $section->id }}.length;
        document.getElementById('lightboxImage{{ $section->id }}').src = images{{ $section->id }}[currentImageIndex{{ $section->id }}];
    }

    function nextImage{{ $section->id }}(event) {
        event.stopPropagation();
        currentImageIndex{{ $section->id }} = (currentImageIndex{{ $section->id }} + 1) % images{{ $section->id }}.length;
        document.getElementById('lightboxImage{{ $section->id }}').src = images{{ $section->id }}[currentImageIndex{{ $section->id }}];
    }
</script>