@extends('layouts.app')

@section('title', $seo->meta_title ?? 'Gallery of Luxury Serviced Apartments in Ikeja | Kevron Apartments')
@section('meta_description', $seo->meta_description ?? 'View photos, videos and visual previews of Kevron Suites and Apartments in Adeniyi Jones, Ikeja, Lagos. Explore bedrooms, living areas, kitchen, balconies, PS5, snooker, smart security and guest amenities.')

@push('scripts')
@if(isset($schema) && $schema->schema_json)
<script type="application/ld+json">
{!! json_encode($schema->schema_json, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
</script>
@endif
@endpush

@section('content')
<!-- Hero / Header collage Section -->
<section class="relative min-h-[55vh] flex items-center justify-center bg-[#080D2B] text-white overflow-hidden py-16">
    <div class="absolute inset-0 bg-cover bg-center opacity-25" style="background-image: url('{{ asset('pictures/master-bedroom.jpg') }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-[#080D2B]/95 via-[#080D2B]/60 to-[#080D2B]"></div>

    <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6 pt-10">
        <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block">Visual Sanctuary Portfolio</span>
        <h1 class="text-white font-serif mb-2 leading-tight" style="color: #d1d5dc !important;">Gallery of Kevron Suites and Apartments</h1>
        <p class="text-xs sm:text-sm text-slate-300 max-w-3xl mx-auto leading-relaxed">
            Explore photos, videos and visual previews of Kevron Suites and Apartments in Adeniyi Jones, Ikeja, Lagos — including apartment interiors, bedrooms, kitchen, balconies, entertainment areas, smart security features and guest amenities.
        </p>

        <!-- Hero CTAs -->
        <div class="flex flex-wrap justify-center gap-4 pt-2">
            <a href="#main-gallery-portfolio" class="btn-pill btn-primary bg-[#D6A84F] hover:bg-[#b88c3a] text-slate-950 hover:text-white font-bold">
                View Gallery Grid
            </a>
            <a href="{{ url('/virtual-tour') }}" class="btn-pill border border-[#D6A84F] text-white hover:bg-white hover:text-slate-900 font-bold">
                Start Virtual Tour
            </a>
            <a href="{{ url('/booking') }}" class="btn-pill btn-luxury text-white hover:opacity-90 font-bold">
                Book Stay Now
            </a>
        </div>

        <!-- Trust Chips -->
        <div class="pt-6 border-t border-slate-700/60 max-w-2xl mx-auto">
            <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 text-xs font-semibold text-slate-300">
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#D6A84F]"></span>
                    1–4 Bedroom Residences
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span>
                    24-Hour Power Supply
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span>
                    High-Speed Wi-Fi
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#16A34A]"></span>
                    PS5 & Snooker Fun
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#16A34A]"></span>
                    Keyless Smart Locks
                </span>
            </div>
        </div>
    </div>
</section>

<!-- Featured Collage Grid Section -->
<section class="py-12 section-soft-blue border-b border-slate-100 dark:border-slate-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-8">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-1">Curation Highlights</span>
            <h2>Luxury Curation Strip</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 aspect-auto md:aspect-[3/1] overflow-hidden" style="border-radius: 0.1rem;">
            @php
                $featuredPics = $mediaAssets->where('is_featured', true)->take(4);
                if ($featuredPics->isEmpty()) {
                    $featuredPics = $mediaAssets->take(4);
                }
            @endphp
            @foreach($featuredPics as $index => $pic)
            <div class="relative group overflow-hidden cursor-pointer h-64 md:h-full"
                 onclick="openLightbox({{ $pic->id }}, '{{ asset($pic->file_path) }}', '{{ $pic->file_type }}', '{{ addslashes($pic->title) }}', '{{ addslashes($pic->caption ?? $pic->alt_text) }}', '{{ $pic->embed_url }}', '{{ $pic->apartmentType->name ?? '' }}', '{{ $pic->apartmentType->slug ?? '' }}')">
                <img src="{{ asset($pic->file_path) }}" alt="{{ $pic->alt_text }}" class="w-full h-full object-cover transform duration-[5s] group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent flex items-end p-4">
                    <div class="text-white space-y-1">
                        <span class="text-[9px] uppercase tracking-widest text-[#D6A84F] font-bold block">{{ $pic->galleryCategory->name ?? 'Visual' }}</span>
                        <h3 class="text-white text-xs font-semibold uppercase tracking-wider line-clamp-1" style="font-size: 0.8rem;">{{ $pic->title }}</h3>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Interactive Dynamic Main Gallery Showcase -->
<section id="main-gallery-portfolio" class="py-16 section-white border-b border-slate-100 dark:border-slate-900"
         x-data="galleryEngine()"
         @keydown.escape.window="closeLightbox()"
         @keydown.left.window="prevMedia()"
         @keydown.right.window="nextMedia()">
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-10">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">Sanctuary Gallery Showcase</span>
            <h2>Select Category & Search Media</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2">
                Click any interactive pill or search caption text keywords to filter verified en-suite room layouts, outdoor balconies, and CCTV secure fixtures.
            </p>
        </div>

        <!-- Filter & Search Command Panel -->
        <div class="flex flex-col lg:flex-row items-center justify-between gap-6 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-4 mb-8" style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
            
            <!-- Category Selector pills row -->
            <div class="flex flex-wrap items-center gap-2 max-w-full">
                <button type="button" @click="setCategory('all')" 
                        class="btn-pill text-[10px] font-bold uppercase tracking-wider px-4 py-2 transition-all focus:outline-none"
                        :class="activeCategory === 'all' ? 'btn-primary' : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200'">
                    All Photos
                </button>
                @foreach($categories as $cat)
                <button type="button" @click="setCategory('{{ $cat->slug }}')" 
                        class="btn-pill text-[10px] font-bold uppercase tracking-wider px-4 py-2 transition-all focus:outline-none"
                        :class="activeCategory === '{{ $cat->slug }}' ? 'btn-primary' : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200'">
                    {{ $cat->name }}
                </button>
                @endforeach
            </div>

            <!-- Capion keywords search input -->
            <div class="relative w-full lg:w-72">
                <input type="text" x-model="searchQuery" @input.debounce.300ms="performSearch()"
                       placeholder="Search captions, tags..." 
                       class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-full py-2 pl-4 pr-10 text-xs font-semibold focus:outline-none focus:border-[#D6A84F] text-slate-700 dark:text-white placeholder-slate-400">
                <span class="absolute right-3.5 top-2.5 text-slate-400">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </span>
            </div>
        </div>

        <!-- Skeleton Loading Panel -->
        <div x-show="loading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-12">
            @for($i=0; $i<6; $i++)
            <div class="bg-slate-100 dark:bg-slate-800 h-64 animate-pulse" style="border-radius: 0.1rem;"></div>
            @endfor
        </div>

        <!-- Main Media Grid Showcase -->
        <div x-show="!loading" id="gallery-assets-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-12">
            @include('gallery.partials.grid')
        </div>

        <!-- Dynamic High-Fidelity Custom Lightbox Modal -->
        <div x-show="lightboxOpen" 
             class="fixed inset-0 z-50 overflow-y-auto bg-slate-950/95 flex items-center justify-center p-4 backdrop-blur-sm"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             role="dialog" aria-modal="true" aria-labelledby="lightbox-title"
             id="gallery-lightbox-modal">
            
            <div class="relative max-w-5xl w-full bg-slate-900 border border-slate-800 shadow-2xl flex flex-col md:flex-row items-stretch" 
                 style="border-radius: 0.1rem; min-height: 480px;"
                 @click.away="closeLightbox()">
                
                <!-- Close Button -->
                <button type="button" @click="closeLightbox()"
                        class="absolute top-4 right-4 z-30 text-white/60 hover:text-white bg-black/40 hover:bg-black/80 rounded-full w-8 h-8 flex items-center justify-center focus:outline-none"
                        aria-label="Close lightbox">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>

                <!-- Left Navigation Trigger -->
                <button type="button" @click="prevMedia()"
                        class="absolute left-4 top-1/2 -translate-y-1/2 z-30 text-white/60 hover:text-white bg-black/40 hover:bg-black/80 rounded-full w-10 h-10 flex items-center justify-center focus:outline-none"
                        aria-label="Previous image">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
                </button>

                <!-- Right Navigation Trigger -->
                <button type="button" @click="nextMedia()"
                        class="absolute right-4 top-1/2 -translate-y-1/2 z-30 text-white/60 hover:text-white bg-black/40 hover:bg-black/80 rounded-full w-10 h-10 flex items-center justify-center focus:outline-none"
                        aria-label="Next image">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
                </button>

                <!-- Left Media Player Box -->
                <div class="flex-grow bg-black flex items-center justify-center relative min-h-[300px] md:w-3/5">
                    
                    <!-- Standard Image Renders -->
                    <template x-if="lightboxType === 'image'">
                        <img :src="lightboxSrc" :alt="lightboxTitle" 
                             class="max-w-full max-h-[75vh] object-contain transition-all duration-300">
                    </template>

                    <!-- Cinematic Video Player Renders -->
                    <template x-if="lightboxType === 'video'">
                        <div class="w-full h-full relative aspect-video bg-black flex items-center justify-center">
                            <iframe :src="lightboxEmbed + '?autoplay=1&title=0&byline=0&portrait=0'" 
                                    frameborder="0" allow="autoplay; fullscreen; picture-in-picture" 
                                    class="absolute inset-0 w-full h-full" title="Kevron Cinematic Tour"></iframe>
                        </div>
                    </template>

                    <!-- 360 Virtual Tour Renders -->
                    <template x-if="lightboxType === '3d_tour'">
                        <div class="w-full h-full relative aspect-video bg-black flex flex-col items-center justify-center p-8 text-center space-y-4">
                            <svg class="w-12 h-12 text-[#D6A84F] animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            <h4 class="text-white text-xs font-bold uppercase tracking-widest">Interactive 360 Virtual Tour Teleporter</h4>
                            <p class="text-slate-400 text-[11px] max-w-xs font-semibold leading-relaxed">Transition straight into our immersive sanctuary en-suite blueprint and walkthrough screen.</p>
                            <a :href="lightboxEmbed" class="btn-pill btn-primary text-xs py-2 px-6 font-bold">Launch Virtual Tour</a>
                        </div>
                    </template>
                </div>

                <!-- Right Caption Details Columns -->
                <div class="bg-slate-900 p-8 flex flex-col justify-between md:w-2/5 border-t md:border-t-0 md:border-l border-slate-800">
                    <div class="space-y-4">
                        <span class="text-[9px] uppercase tracking-widest text-[#D6A84F] font-bold block">Kevron verified preview</span>
                        <h3 id="lightbox-title" class="text-white text-xs font-bold uppercase tracking-wider leading-snug" x-text="lightboxTitle"></h3>
                        <p class="text-slate-400 text-[11px] font-medium leading-relaxed" x-text="lightboxCaption"></p>
                    </div>

                    <div class="space-y-4 pt-6 border-t border-slate-800">
                        <div class="space-y-1">
                            <span class="text-[9px] uppercase tracking-widest text-slate-500 block">Associated Space</span>
                            <span class="text-white text-xs font-semibold" x-text="lightboxSuiteName || 'Kevron Ikeja Property'"></span>
                        </div>

                        <!-- CTA row inside Lightbox overlay -->
                        <div class="flex flex-col gap-2 pt-2">
                            <a :href="'/booking?type=' + lightboxSuiteSlug" class="btn-pill btn-primary text-[10px] font-bold py-2.5 text-center w-full uppercase tracking-wider" x-show="lightboxSuiteSlug">
                                Book This Suite Now
                            </a>
                            <a href="{{ url('/booking') }}" class="btn-pill btn-primary text-[10px] font-bold py-2.5 text-center w-full uppercase tracking-wider" x-show="!lightboxSuiteSlug">
                                Book Staycation Now
                            </a>
                            <a :href="'/apartments/' + lightboxSuiteSlug" class="btn-pill border border-slate-700 text-slate-300 hover:text-white text-[10px] font-semibold py-2.5 text-center w-full uppercase tracking-wider" x-show="lightboxSuiteSlug">
                                View Suite Details
                            </a>
                            <button type="button" @click="closeLightbox()" class="btn-pill border border-slate-800 text-slate-400 hover:text-white text-[10px] font-bold py-2.5 text-center w-full uppercase tracking-wider">
                                Continue Browsing
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>

<!-- Crawlable SEO/GEO Fact block -->
<section class="py-12 section-soft-blue border-b border-slate-100 dark:border-slate-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4">
        <h4 class="text-[10px] font-bold uppercase tracking-widest text-[#2B3192]">Entity and neighbourhood stats</h4>
        <p class="text-[11px] text-slate-500 leading-relaxed font-semibold">
            View the gallery of Kevron Suites and Apartments in Adeniyi Jones, Ikeja, Lagos. The gallery includes apartment interiors, living areas, bedrooms, modern kitchen spaces, private balconies, seat-out areas, PS5, snooker, smart security features and neighbourhood visuals. Kevron Suites and Apartments offers luxury 1, 2, 3 and 4 bedroom serviced apartments with 24-hour power, high-speed Wi-Fi, smart locks, CCTV, airport pickup and rented car support on request.
        </p>
        <p class="text-[11px] text-slate-500 leading-relaxed font-semibold italic">
            The Kevron Suites and Apartments gallery shows visual previews of the property in Adeniyi Jones, Ikeja, Lagos, including apartment interiors, bedrooms, kitchen spaces, balconies, entertainment areas, smart security features and guest amenities.
        </p>
    </div>
</section>

<!-- Dynamic FAQs Accordion Section -->
<section class="py-16 section-white border-b border-slate-100 dark:border-slate-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-12">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">Knowledge Base</span>
            <h2>Gallery & Visual FAQs</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-sm mx-auto pt-2">
                Frequently asked queries about our database-verified en-suite photos and walkthrough guides.
            </p>
        </div>

        <div class="space-y-4" x-data="{ activeFaq: null }">
            @forelse($faqs as $index => $faq)
            <div class="border border-slate-200 dark:border-slate-800 p-4 bg-white dark:bg-slate-900" style="border-radius: 0.1rem;">
                <button type="button" 
                        @click="activeFaq = activeFaq === {{ $index }} ? null : {{ $index }}"
                        class="w-full flex justify-between items-center text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider text-left focus:outline-none">
                    <span>{{ $faq->question }}</span>
                    <span class="text-amber-500 text-sm font-sans" x-text="activeFaq === {{ $index }} ? '−' : '+'"></span>
                </button>
                <div x-show="activeFaq === {{ $index }}" x-collapse class="mt-3 text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                    {{ $faq->answer }}
                </div>
            </div>
            @empty
            <!-- Seeder Fallbacks if dynamic rows are missing -->
            @php
                $fallbackFaqs = [
                    ['q' => 'What can I see in the photo gallery?', 'a' => 'Our visual gallery provides high-resolution, database-verified photos of Kevron Suites and Apartments, including exterior facades, open-plan smart lounges, orthopaedic en-suite bedrooms, quartz kitchens, private balconies, and smart lock setups.'],
                    ['q' => 'Are the gallery photos authentic and recent?', 'a' => 'Yes. All visual media in this gallery displays real, verified, and unedited photography taken at our Adeniyi Jones, Ikeja location, giving you an accurate picture of what to expect.'],
                    ['q' => 'Can I filter photos by a specific suite layout?', 'a' => 'Yes, our media cards are tagged by suite type. You can click on specific tags or filter by room categories (like Bedrooms, Lounges, and Kitchens) to see custom visual arrangements.'],
                    ['q' => 'Are walk-through video tours available?', 'a' => 'Yes! Reroute filters to the "Videos" category or click video thumbnails inside the gallery grid to load cinema-style HD walk-through guides detailing en-suite comfort.'],
                ];
            @endphp
            @foreach($fallbackFaqs as $idx => $f)
            <div class="border border-slate-200 dark:border-slate-800 p-4 bg-white dark:bg-slate-900" style="border-radius: 0.1rem;">
                <button type="button" 
                        @click="activeFaq = activeFaq === {{ $idx }} ? null : {{ $idx }}"
                        class="w-full flex justify-between items-center text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider text-left focus:outline-none">
                    <span>{{ $f['q'] }}</span>
                    <span class="text-amber-500 text-sm font-sans" x-text="activeFaq === {{ $idx }} ? '−' : '+'"></span>
                </button>
                <div x-show="activeFaq === {{ $idx }}" x-collapse class="mt-3 text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                    {{ $f['a'] }}
                </div>
            </div>
            @endforeach
            @endforelse
        </div>
    </div>
</section>

<!-- Final CTA Section with Dark Navy Backdrop -->
<section class="section-navy py-20 relative overflow-hidden" style="background-color: #080D2B;">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6 relative z-10">
        <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block">Seen Enough to Book Your Stay?</span>
        <h2 class="text-white font-serif mb-2 leading-tight" style="color: #d1d5dc !important;">Ready to Experience Kevron Suites in Person?</h2>
        <p class="text-xs sm:text-sm text-slate-300 max-w-2xl mx-auto leading-relaxed">
            Explore our apartment options, compare the spaces and reserve your preferred luxury serviced apartment in Adeniyi Jones, Ikeja.
        </p>

        <div class="flex flex-wrap justify-center gap-4 pt-2">
            <a href="{{ url('/booking') }}" class="btn-pill btn-primary font-bold">
                Book Stay Now
            </a>
            <a href="{{ url('/apartments') }}" class="btn-pill border border-slate-700 text-white hover:bg-white hover:text-slate-900 font-bold">
                View Apartments
            </a>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%2520Suites,%20I'm%2520inquiring%2520about%2520booking%2520an%2520apartment%2520after%2520viewing%2520your%2520photo%2520gallery."
               target="_blank" rel="noopener noreferrer" class="btn-pill bg-[#16A34A] text-white hover:bg-green-700 font-bold flex items-center justify-center gap-1.5">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.73-1.455L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.966C16.59 1.978 14.12 1.03 11.5 1.03 6.073 1.03 1.648 5.4 1.643 10.83c-.001 1.705.46 3.37 1.333 4.865L1.972 22l6.239-1.626-.03-.02-.534-.1z" />
                </svg>
                WhatsApp Us
            </a>
        </div>
    </div>
</section>

<!-- Alpine JS Gallery Engine Definition -->
<script>
function galleryEngine() {
    return {
        activeCategory: '{{ $activeCategorySlug ?? "all" }}',
        searchQuery: '{{ $searchQuery ?? "" }}',
        loading: false,
        
        // Lightbox properties
        lightboxOpen: false,
        activeMediaId: null,
        lightboxSrc: '',
        lightboxType: 'image',
        lightboxTitle: '',
        lightboxCaption: '',
        lightboxEmbed: '',
        lightboxSuiteName: '',
        lightboxSuiteSlug: '',

        // List of all loaded media items for lightbox navigation
        mediaList: [],

        init() {
            this.buildMediaList();
            this.logTelemetry('view_gallery', 'load');
        },

        buildMediaList() {
            this.mediaList = [];
            // Parse grid cards to fetch lightbox sequences
            const cards = document.querySelectorAll('#gallery-assets-grid .card-luxury');
            cards.forEach(card => {
                const trigger = card.querySelector('.cursor-pointer');
                if (trigger) {
                    const clickAttr = trigger.getAttribute('@click') || trigger.getAttribute('x-on:click');
                    // Regex match to fetch params
                    const match = clickAttr.match(/openLightbox\(([^)]+)\)/);
                    if (match) {
                        const args = match[1].split(',').map(s => {
                            s = s.trim();
                            if (s.startsWith("'") && s.endsWith("'")) return s.slice(1, -1);
                            return s;
                        });
                        this.mediaList.push({
                            id: parseInt(args[0]),
                            src: args[1],
                            type: args[2],
                            title: args[3],
                            caption: args[4],
                            embed: args[5],
                            suiteName: args[6],
                            suiteSlug: args[7]
                        });
                    }
                }
            });
        },

        setCategory(slug) {
            this.activeCategory = slug;
            this.fetchFilteredAssets();
            this.logTelemetry('filter_category', slug);
        },

        performSearch() {
            this.fetchFilteredAssets();
            if (this.searchQuery) {
                this.logTelemetry('search_query', this.searchQuery);
            }
        },

        async fetchFilteredAssets() {
            this.loading = true;
            try {
                // Update Browser URL history parameter smoothly
                let url = new URL(window.location.href);
                if (this.activeCategory && this.activeCategory !== 'all') {
                    url.searchParams.set('category', this.activeCategory);
                } else {
                    url.searchParams.delete('category');
                }
                if (this.searchQuery) {
                    url.searchParams.set('q', this.searchQuery);
                } else {
                    url.searchParams.delete('q');
                }
                window.history.pushState({}, '', url.toString());

                // Fetch AJAX fragment
                const response = await fetch(url.toString() + (url.search ? '&ajax=1' : '?ajax=1'), {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const html = await response.text();
                
                document.getElementById('gallery-assets-grid').innerHTML = html;
                this.buildMediaList();
            } catch (err) {
                console.error('Error fetching filtered media assets:', err);
            } finally {
                this.loading = false;
            }
        },

        openLightbox(id, src, type, title, caption, embed, suiteName, suiteSlug) {
            this.activeMediaId = id;
            this.lightboxSrc = src;
            this.lightboxType = type;
            this.lightboxTitle = title;
            this.lightboxCaption = caption;
            this.lightboxEmbed = embed;
            this.lightboxSuiteName = suiteName;
            this.lightboxSuiteSlug = suiteSlug;
            this.lightboxOpen = true;

            // Focus trap: set focus on modal container
            this.$nextTick(() => {
                const modal = document.getElementById('gallery-lightbox-modal');
                if (modal) modal.focus();
            });

            this.logTelemetry('open_lightbox', id.toString(), id);
        },

        closeLightbox() {
            this.lightboxOpen = false;
            this.activeMediaId = null;
        },

        prevMedia() {
            if (!this.lightboxOpen || this.mediaList.length <= 1) return;
            let index = this.mediaList.findIndex(m => m.id === this.activeMediaId);
            if (index === -1) return;
            let prevIndex = (index === 0) ? this.mediaList.length - 1 : index - 1;
            let m = this.mediaList[prevIndex];
            this.openLightbox(m.id, m.src, m.type, m.title, m.caption, m.embed, m.suiteName, m.suiteSlug);
        },

        nextMedia() {
            if (!this.lightboxOpen || this.mediaList.length <= 1) return;
            let index = this.mediaList.findIndex(m => m.id === this.activeMediaId);
            if (index === -1) return;
            let nextIndex = (index === this.mediaList.length - 1) ? 0 : index + 1;
            let m = this.mediaList[nextIndex];
            this.openLightbox(m.id, m.src, m.type, m.title, m.caption, m.embed, m.suiteName, m.suiteSlug);
        },

        logTelemetry(type, key, mediaId = null) {
            try {
                fetch('{{ route('gallery.log') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        event_type: type,
                        event_key: key,
                        media_asset_id: mediaId
                    })
                });
            } catch (e) {
                // Silently swallow telemetry log failures
            }
        }
    };
}
</script>
@endsection