@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'Luxury Apartments in Ikeja, Lagos | 1–4 Bedroom Serviced Apartments')
@section('meta_description', $seo ? $seo->meta_description : 'View and compare luxury 1, 2, 3 and 4 bedroom serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja, Lagos. Check prices, amenities, availability and book your preferred apartment.')

@section('content')

<!-- Hero Banner / Page Intro -->
<section class="relative min-h-[50vh] flex items-center justify-center bg-[#080D2B] text-white section-navy overflow-hidden">
    <!-- Image overlay background -->
    <div class="absolute inset-0 bg-cover bg-center opacity-40 select-none pointer-events-none" 
         style="background-image: url('{{ asset('pictures/master-bedroom.jpg') }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-[#080D2B]/90 via-[#080D2B]/75 to-[#080D2B]"></div>
    
    <!-- Hero content -->
    <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-16 pb-8">
        <!-- Breadcrumbs -->
        <nav class="flex justify-center space-x-2 text-[10px] uppercase tracking-widest text-[#D6A84F] font-bold mb-4" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:underline">Home</a>
            <span>/</span>
            <span class="text-slate-300">Apartments</span>
        </nav>
        
        <h1 class="text-white mb-4 leading-tight max-w-3xl mx-auto" 
            style="font-family: var(--font-heading); font-size: clamp(1.4rem, 2.8vw, 1.8rem); font-weight: 400;">
            Luxury 1, 2, 3 and 4 Bedroom Apartments in Ikeja
        </h1>
        
        <p class="text-slate-300 max-w-2xl mx-auto mb-6 font-medium leading-relaxed" style="font-size: clamp(0.8125rem, 1vw, 0.875rem);">
            Explore premium serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja, Lagos — with 24-hour power, high-speed Wi-Fi, smart security, modern kitchens, private balconies, entertainment spaces, airport pickup and car-rental support on request.
        </p>

        <!-- CTAs -->
        <div class="flex flex-wrap items-center justify-center gap-4 mb-8">
            <a href="#listing-section" class="btn-pill btn-primary text-xs uppercase tracking-wider font-semibold min-h-[44px]">
                Check Availability
            </a>
            <button @click="document.getElementById('listing-section').scrollIntoView({ behavior: 'smooth' })" 
                    class="btn-pill btn-outline-gold text-xs uppercase tracking-wider font-semibold min-h-[44px] text-white hover:text-white">
                Compare Apartments
            </button>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hi%20Kevron%20Apartments%2C%20I%20am%20enquiring%20about%20your%20serviced%20apartments%20in%20Ikeja." 
               target="_blank" 
               class="btn-pill btn-luxury text-xs uppercase tracking-wider font-semibold min-h-[44px] flex items-center space-x-1.5">
                <span>WhatsApp Enquiry</span>
            </a>
        </div>

        <!-- Trust Chips -->
        <div class="flex flex-wrap items-center justify-center gap-4 text-slate-300 border-t border-slate-800/80 pt-6 max-w-3xl mx-auto">
            <div class="flex items-center space-x-1.5 text-[10px] uppercase tracking-wider font-bold">
                <span class="text-[#D6A84F] font-bold">●</span>
                <span style="font-size: 0.75rem;">From ₦150,000/night</span>
            </div>
            <div class="flex items-center space-x-1.5 text-[10px] uppercase tracking-wider font-bold">
                <span class="text-[#D6A84F] font-bold">●</span>
                <span style="font-size: 0.75rem;">8 mins to MM1/MM2</span>
            </div>
            <div class="flex items-center space-x-1.5 text-[10px] uppercase tracking-wider font-bold">
                <span class="text-[#D6A84F] font-bold">●</span>
                <span style="font-size: 0.75rem;">24-Hour Power Supply</span>
            </div>
            <div class="flex items-center space-x-1.5 text-[10px] uppercase tracking-wider font-bold">
                <span class="text-[#D6A84F] font-bold">●</span>
                <span style="font-size: 0.75rem;">Keyless Smart Locks</span>
            </div>
        </div>
    </div>
</section>

<!-- Apartments Main Interactive Section (Alpine.js State Wrapper) -->
<section id="listing-section" 
         class="section-soft-blue py-12 border-t border-[#DDE6F3] dark:border-slate-800"
         x-data="{
             comparedIds: [],
             apartmentsData: @js($apartments->keyBy('id')),
             comparisonFields: @js($comparisonFields),
             
             // Quick View state
             quickViewOpen: false,
             quickViewApartment: null,
             quickViewImageActive: 0,
             
             // Compare modal state
             compareModalOpen: false,

             // Filters state
             checkIn: '{{ request('check_in') }}',
             checkOut: '{{ request('check_out') }}',
             guests: '{{ request('guests', '2') }}',
             bedrooms: '{{ request('bedrooms', 'all') }}',
             priceMin: '{{ request('price_min') }}',
             priceMax: '{{ request('price_max') }}',
             sort: '{{ request('sort', 'recommended') }}',
             availability: '{{ request('availability', 'all') }}',
             selectedAmenities: [],
             
             isLoading: false,
             showMoreFilters: false,

             // Initialization
             init() {
                 // Pre-populate amenities from query params if any
                 const urlParams = new URLSearchParams(window.location.search);
                 const amenitiesParam = urlParams.getAll('amenities[]');
                 if (amenitiesParam.length > 0) {
                     this.selectedAmenities = amenitiesParam;
                 }
                 
                 // Apply date defaults for input constraint bindings
                 const checkInEl = document.getElementById('filter_check_in');
                 const checkOutEl = document.getElementById('filter_check_out');
                 if (checkInEl && checkOutEl) {
                     const todayStr = new Date().toISOString().split('T')[0];
                     checkInEl.setAttribute('min', todayStr);
                     
                     if (this.checkIn) {
                         const checkInDate = new Date(this.checkIn);
                         checkInDate.setDate(checkInDate.getDate() + 1);
                         checkOutEl.setAttribute('min', checkInDate.toISOString().split('T')[0]);
                     }
                 }
             },

             // Reset Filters
             resetFilters() {
                 this.checkIn = '';
                 this.checkOut = '';
                 this.guests = '2';
                 this.bedrooms = 'all';
                 this.priceMin = '';
                 this.priceMax = '';
                 this.sort = 'recommended';
                 this.availability = 'all';
                 this.selectedAmenities = [];
                 this.fetchFilteredResults();
             },

             // Trigger API Fetch
             fetchFilteredResults() {
                 this.isLoading = true;
                 
                 // Construct query params
                 const params = new URLSearchParams();
                 if (this.checkIn) params.append('check_in', this.checkIn);
                 if (this.checkOut) params.append('check_out', this.checkOut);
                 if (this.guests) params.append('guests', this.guests);
                 if (this.bedrooms) params.append('bedrooms', this.bedrooms);
                 if (this.priceMin) params.append('price_min', this.priceMin);
                 if (this.priceMax) params.append('price_max', this.priceMax);
                 if (this.sort) params.append('sort', this.sort);
                 if (this.availability) params.append('availability', this.availability);
                 
                 this.selectedAmenities.forEach(amenity => {
                     params.append('amenities[]', amenity);
                 });
                 
                 // Push history state to keep URLs crawlable
                 const newUrl = `${window.location.pathname}?${params.toString()}`;
                 window.history.pushState({}, '', newUrl);

                 params.append('ajax', '1');

                 fetch(`${window.location.pathname}?${params.toString()}`, {
                     headers: {
                         'X-Requested-With': 'XMLHttpRequest'
                     }
                 })
                 .then(res => res.text())
                 .then(html => {
                     document.getElementById('suites-grid-container').innerHTML = html;
                     
                     // Re-attach elements or handle scrolls if needed
                     document.getElementById('listing-section').scrollIntoView({ behavior: 'smooth', block: 'start' });
                     this.isLoading = false;
                 })
                 .catch(err => {
                     console.error('Error fetching filtered suites:', err);
                     this.isLoading = false;
                 });
             },

             // Quick View modal loader
             openQuickView(id) {
                 const apt = this.apartmentsData[id];
                 if (!apt) return;
                 
                 this.quickViewApartment = apt;
                 this.quickViewImageActive = 0;
                 this.quickViewOpen = true;
                 
                 // Trap focus and prevent body scrolling
                 document.body.classList.add('overflow-hidden');
                 
                 // Return focus helper
                 this.$nextTick(() => {
                     const closeBtn = document.getElementById('quick-view-close');
                     if (closeBtn) closeBtn.focus();
                 });
             },

             closeQuickView() {
                 this.quickViewOpen = false;
                 document.body.classList.remove('overflow-hidden');
                 // Focus back to triggering button
                 const trigger = document.querySelector(`[data-id='${this.quickViewApartment.id}'] button`);
                 if (trigger) trigger.focus();
             },

             // Compare operations
             toggleCompare(id) {
                 if (this.comparedIds.includes(id)) {
                     this.comparedIds = this.comparedIds.filter(x => x !== id);
                 } else {
                     if (this.comparedIds.length >= 4) {
                         alert('You can compare a maximum of 4 suites side-by-side.');
                         return;
                     }
                     this.comparedIds.push(id);
                 }
             },

             openComparison() {
                 if (this.comparedIds.length < 2) {
                     alert('Select at least 2 suites to compare.');
                     return;
                 }
                 this.compareModalOpen = true;
                 document.body.classList.add('overflow-hidden');
             },

             closeComparison() {
                 this.compareModalOpen = false;
                 document.body.classList.remove('overflow-hidden');
             },

             removeFromComparison(id) {
                 this.comparedIds = this.comparedIds.filter(x => x !== id);
                 if (this.comparedIds.length < 2) {
                     this.compareModalOpen = false;
                     document.body.classList.remove('overflow-hidden');
                 }
             }
         }">
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Sticky Booking / Filter Bar -->
        <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-5 mb-8 shadow-sm relative z-30" 
             style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
            
            <form @submit.prevent="fetchFilteredResults()" class="space-y-4">
                <!-- Row 1: Core Fields -->
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4">
                    <!-- Check In -->
                    <div class="text-left">
                        <label for="filter_check_in" class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1.5" style="font-size: 0.75rem;">Check In</label>
                        <input type="date" id="filter_check_in" x-model="checkIn" @change="
                            if (checkIn) {
                                const checkInDate = new Date(checkIn);
                                checkInDate.setDate(checkInDate.getDate() + 1);
                                document.getElementById('filter_check_out').setAttribute('min', checkInDate.toISOString().split('T')[0]);
                                if (checkOut && checkOut <= checkIn) {
                                    checkOut = checkInDate.toISOString().split('T')[0];
                                }
                            }
                        " class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2 text-xs focus:outline-none focus:border-[#2B3192] dark:focus:border-cyan-400 text-slate-800 dark:text-white" style="font-size: 0.8125rem;">
                    </div>

                    <!-- Check Out -->
                    <div class="text-left">
                        <label for="filter_check_out" class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1.5" style="font-size: 0.75rem;">Check Out</label>
                        <input type="date" id="filter_check_out" x-model="checkOut" class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2 text-xs focus:outline-none focus:border-[#2B3192] dark:focus:border-cyan-400 text-slate-800 dark:text-white" style="font-size: 0.8125rem;">
                    </div>

                    <!-- Guests -->
                    <div class="text-left">
                        <label for="filter_guests" class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1.5" style="font-size: 0.75rem;">Guests</label>
                        <select id="filter_guests" x-model="guests" class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2.5 text-xs focus:outline-none focus:border-[#2B3192] dark:focus:border-cyan-400 text-slate-800 dark:text-white" style="font-size: 0.8125rem;">
                            <option value="1">1 Guest</option>
                            <option value="2">2 Guests</option>
                            <option value="3">3 Guests</option>
                            <option value="4">4 Guests</option>
                            <option value="6">6 Guests</option>
                            <option value="8">8 Guests</option>
                            <option value="10">10 Guests</option>
                        </select>
                    </div>

                    <!-- Bedrooms -->
                    <div class="text-left">
                        <label for="filter_bedrooms" class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1.5" style="font-size: 0.75rem;">Bedrooms</label>
                        <select id="filter_bedrooms" x-model="bedrooms" class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2.5 text-xs focus:outline-none focus:border-[#2B3192] dark:focus:border-cyan-400 text-slate-800 dark:text-white" style="font-size: 0.8125rem;">
                            <option value="all">All Sizes</option>
                            <option value="1">1 Bedroom Master Suite</option>
                            <option value="2">2 Bedroom Luxury Apartment</option>
                            <option value="3">3 Bedroom Luxury Apartment</option>
                            <option value="4">4 Bedroom Luxury Apartment</option>
                        </select>
                    </div>

                    <!-- Submit & Actions Buttons -->
                    <div class="flex items-end space-x-2">
                        <button type="submit" class="btn-pill btn-primary text-xs uppercase tracking-wider font-bold py-3 flex-1 min-h-[38px] flex items-center justify-center">
                            Search Suites
                        </button>
                        <button type="button" @click="showMoreFilters = !showMoreFilters" class="btn-pill btn-outline-gold text-xs font-bold py-3 w-12 h-[44px] flex items-center justify-center !px-0" aria-label="Toggle Advanced Filters">
                            <svg class="w-5 h-5 text-slate-800 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Row 2: Advanced Collapsible Filters -->
                <div x-show="showMoreFilters" 
                     x-transition:enter="transition ease-out duration-300"
                     class="pt-4 border-t border-slate-100 dark:border-slate-800 grid grid-cols-1 md:grid-cols-4 gap-6 text-left">
                     
                     <!-- Price range sliders -->
                     <div>
                         <span class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1.5" style="font-size: 0.75rem;">Price range (₦)</span>
                         <div class="flex items-center space-x-2">
                             <input type="number" x-model="priceMin" placeholder="Min" class="w-1/2 bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-800 dark:text-white">
                             <input type="number" x-model="priceMax" placeholder="Max" class="w-1/2 bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-800 dark:text-white">
                         </div>
                     </div>

                     <!-- Availability block -->
                     <div>
                         <label for="filter_avail" class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1.5" style="font-size: 0.75rem;">Availability</label>
                         <select id="filter_avail" x-model="availability" class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2 text-xs text-slate-800 dark:text-white" style="font-size: 0.8125rem;">
                             <option value="all">Show All</option>
                             <option value="available">Available Only</option>
                         </select>
                     </div>

                     <!-- Sort Selector -->
                     <div>
                         <label for="filter_sort" class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1.5" style="font-size: 0.75rem;">Sort by</label>
                         <select id="filter_sort" x-model="sort" class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2 text-xs text-slate-800 dark:text-white" style="font-size: 0.8125rem;">
                             <option value="recommended">Recommended</option>
                             <option value="price_low_high">Price: Low to High</option>
                             <option value="price_high_low">Price: High to Low</option>
                             <option value="most_spacious">Most Spacious</option>
                             <option value="family_friendly">Best for Families</option>
                             <option value="corporate">Best for Corporate</option>
                         </select>
                     </div>

                     <!-- Reset Filters CTA -->
                     <div class="flex items-end pb-0.5">
                         <button type="button" @click="resetFilters()" class="text-xs text-[#2B3192] dark:text-cyan-400 hover:underline font-bold uppercase tracking-wider">
                             Reset All Filters
                         </button>
                     </div>

                     <!-- Amenities checkbox filters multiselect -->
                     <div class="col-span-full border-t border-slate-100 dark:border-slate-800/80 pt-4">
                         <span class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3" style="font-size: 0.75rem;">Filter by amenities</span>
                         <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3 text-xs font-semibold">
                             <label class="flex items-center space-x-2 cursor-pointer">
                                 <input type="checkbox" value="24-hour-power-supply" x-model="selectedAmenities" class="rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                                 <span class="text-slate-600 dark:text-slate-300 select-none">24h Power</span>
                             </label>
                             <label class="flex items-center space-x-2 cursor-pointer">
                                 <input type="checkbox" value="high-speed-wi-fi" x-model="selectedAmenities" class="rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                                 <span class="text-slate-600 dark:text-slate-300 select-none">High-Speed Wi-Fi</span>
                             </label>
                             <label class="flex items-center space-x-2 cursor-pointer">
                                 <input type="checkbox" value="keyless-smart-locks" x-model="selectedAmenities" class="rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                                 <span class="text-slate-600 dark:text-slate-300 select-none">Smart Locks</span>
                             </label>
                             <label class="flex items-center space-x-2 cursor-pointer">
                                 <input type="checkbox" value="playstation-5-console" x-model="selectedAmenities" class="rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                                 <span class="text-slate-600 dark:text-slate-300 select-none">PlayStation 5</span>
                             </label>
                             <label class="flex items-center space-x-2 cursor-pointer">
                                 <input type="checkbox" value="professional-snooker-table" x-model="selectedAmenities" class="rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                                 <span class="text-slate-600 dark:text-slate-300 select-none">Snooker Board</span>
                             </label>
                             <label class="flex items-center space-x-2 cursor-pointer">
                                 <input type="checkbox" value="private-balcony" x-model="selectedAmenities" class="rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                                 <span class="text-slate-600 dark:text-slate-300 select-none">Private Balcony</span>
                             </label>
                         </div>
                     </div>
                </div>
            </form>
        </div>

        <!-- Skeleton Loading view / results grid container -->
        <div class="relative min-h-[400px]">
            <!-- Loading overlay indicator -->
            <div x-show="isLoading" class="absolute inset-0 bg-slate-50/50 dark:bg-slate-950/50 backdrop-blur-[2px] z-20 flex items-center justify-center transition-all duration-300">
                <div class="flex flex-col items-center space-y-4">
                    <span class="w-8 h-8 border-4 border-amber-500 border-t-transparent rounded-full animate-spin"></span>
                    <span class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Searching suites...</span>
                </div>
            </div>

            <!-- Suites Grid -->
            <div id="suites-grid-container" class="grid grid-cols-1 md:grid-cols-2 gap-8">
                @include('apartments.partials.grid')
            </div>
        </div>

    </div>

    <!-- Floating Compare Tray (when >= 2 items are selected) -->
    <div x-show="comparedIds.length >= 2"
         x-transition:enter="transition ease-out duration-300 transform"
         x-transition:enter-start="translate-y-24"
         x-transition:enter-end="translate-y-0"
         x-transition:leave="transition ease-in duration-200 transform"
         x-transition:leave-start="translate-y-0"
         x-transition:leave-end="translate-y-24"
         class="fixed bottom-0 left-0 right-0 z-40 bg-[#080D2B]/95 text-white border-t border-slate-800 py-4 px-6 shadow-2xl flex items-center justify-between">
        
        <div class="flex items-center space-x-4">
            <span class="text-xs font-bold uppercase tracking-widest text-[#D6A84F]" style="font-size: 0.75rem;">Compare Suites (<span x-text="comparedIds.length"></span>/4)</span>
            <div class="flex -space-x-2 overflow-hidden">
                <template x-for="id in comparedIds" :key="id">
                    <div class="w-8 h-8 rounded-full border border-slate-700 bg-slate-900 overflow-hidden relative group">
                        <img :src="apartmentsData[id] && apartmentsData[id].media_assets && apartmentsData[id].media_assets[0] ? '/' + apartmentsData[id].media_assets[0].file_path : '{{ asset('pictures/master-bedroom.jpg') }}'" 
                             class="w-full h-full object-cover">
                        <button @click="removeFromComparison(id)" class="absolute inset-0 bg-red-600/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                            <span class="text-[10px] font-bold">✕</span>
                        </button>
                    </div>
                </template>
            </div>
        </div>

        <div class="flex items-center space-x-3">
            <button @click="comparedIds = []" class="text-xs text-slate-400 hover:text-white font-bold uppercase tracking-wider">
                Clear All
            </button>
            <button @click="openComparison()" class="btn-pill btn-primary text-xs px-6 py-2 bg-amber-500 text-[#080D2B] font-bold uppercase tracking-wider">
                Compare Now
            </button>
        </div>
    </div>

    <!-- Quick View Modal Frame -->
    <div x-show="quickViewOpen" 
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80"
         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"
         @keydown.escape.window="closeQuickView()">
        
        <div class="bg-white dark:bg-slate-900 w-full max-w-3xl overflow-hidden shadow-2xl relative flex flex-col md:flex-row border border-slate-200 dark:border-slate-800"
             style="border-radius: 0.1rem;"
             @click.away="closeQuickView()">
             
            <!-- Close Button -->
            <button id="quick-view-close" 
                    @click="closeQuickView()" 
                    class="absolute top-4 right-4 z-40 text-slate-400 hover:text-red-500 bg-white/80 dark:bg-slate-800/80 p-1.5 rounded-full shadow focus:outline-none" 
                    aria-label="Close modal">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>

            <!-- Left column: Gallery preview -->
            <div class="md:w-1/2 bg-slate-950 relative aspect-[4/3] md:aspect-auto">
                <template x-if="quickViewApartment && quickViewApartment.media_assets && quickViewApartment.media_assets.length > 0">
                    <img :src="'/' + quickViewApartment.media_assets[quickViewImageActive].file_path" 
                         class="w-full h-full object-cover select-none">
                </template>
                <template x-if="!quickViewApartment || !quickViewApartment.media_assets || quickViewApartment.media_assets.length === 0">
                    <img src="{{ asset('pictures/master-bedroom.jpg') }}" class="w-full h-full object-cover">
                </template>

                <!-- Dynamic image gallery pagination arrows -->
                <div class="absolute bottom-4 left-4 right-4 flex justify-between z-10" x-show="quickViewApartment && quickViewApartment.media_assets && quickViewApartment.media_assets.length > 1">
                    <button @click="quickViewImageActive = (quickViewImageActive === 0) ? quickViewApartment.media_assets.length - 1 : quickViewImageActive - 1"
                            class="bg-black/50 hover:bg-black/80 text-white w-7 h-7 flex items-center justify-center rounded-full text-xs font-bold focus:outline-none">
                        ←
                    </button>
                    <button @click="quickViewImageActive = (quickViewImageActive === quickViewApartment.media_assets.length - 1) ? 0 : quickViewImageActive + 1"
                            class="bg-black/50 hover:bg-black/80 text-white w-7 h-7 flex items-center justify-center rounded-full text-xs font-bold focus:outline-none">
                        →
                    </button>
                </div>
            </div>

            <!-- Right column: Specs detail info -->
            <div class="md:w-1/2 p-6 flex flex-col justify-between text-left">
                <div class="space-y-4">
                    <div>
                        <span class="text-[10px] text-amber-500 font-bold uppercase tracking-widest" x-text="quickViewApartment ? quickViewApartment.bedrooms_count + ' Bedroom Suite' : ''"></span>
                        <h2 class="text-slate-900 dark:text-white mt-1" style="font-family: var(--font-heading); font-size: clamp(1.1rem, 2.5vw, 1.45rem); font-weight: 400;" x-text="quickViewApartment ? quickViewApartment.name : ''"></h2>
                    </div>

                    <div class="text-xs text-slate-500 dark:text-slate-400 font-bold uppercase tracking-widest flex justify-between border-b border-slate-100 dark:border-slate-800 pb-2">
                        <span>Nightly price</span>
                        <span class="text-[#D6A84F]" x-text="quickViewApartment ? '₦' + Number(quickViewApartment.base_price_nightly).toLocaleString('en-US') : ''"></span>
                    </div>

                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed overflow-y-auto max-h-[140px] pr-2" style="font-size: 0.8125rem;" x-text="quickViewApartment ? quickViewApartment.description : ''"></p>

                    <!-- Quick specs -->
                    <div class="grid grid-cols-2 gap-2 text-center text-[10px] font-bold text-slate-400 bg-slate-50 dark:bg-slate-800/40 p-2.5" style="border-radius: 0.1rem;">
                        <div>
                            <span class="text-slate-600 dark:text-slate-300 block" x-text="quickViewApartment ? quickViewApartment.bedrooms_count + ' Bed' : ''"></span>
                        </div>
                        <div class="border-l border-slate-200 dark:border-slate-700">
                            <span class="text-slate-600 dark:text-slate-300 block" x-text="quickViewApartment ? 'Up to ' + (Number(quickViewApartment.capacity_adults) + Number(quickViewApartment.capacity_children)) + ' Guests' : ''"></span>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex flex-col gap-3">
                    <a :href="'{{ url('/booking?type=') }}' + (quickViewApartment ? quickViewApartment.slug : '') + '&check_in=' + checkIn + '&check_out=' + checkOut + '&guests=' + guests"
                       class="btn-pill btn-primary text-xs uppercase tracking-wider font-bold py-3 text-center min-h-[40px]">
                        Book This Suite
                    </a>
                    
                    <div class="flex justify-between text-[11px] font-bold uppercase tracking-wider px-2">
                        <a :href="'/apartments/' + (quickViewApartment ? quickViewApartment.slug : '')" class="text-[#2B3192] dark:text-cyan-400 hover:underline">
                            View Full Details
                        </a>
                        <a :href="'{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hi%20Kevron%20Apartments%2C%20I%20am%20interested%20in%20' + (quickViewApartment ? encodeURIComponent(quickViewApartment.name) : '')" 
                           target="_blank" 
                           class="text-emerald-600 dark:text-emerald-400 hover:underline">
                            WhatsApp Enquiry
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Compare Full-Screen Modal -->
    <div x-show="compareModalOpen" 
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80"
         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"
         @keydown.escape.window="closeComparison()">
        
        <div class="bg-white dark:bg-slate-900 w-full max-w-5xl max-h-[90vh] overflow-hidden shadow-2xl relative flex flex-col border border-slate-200 dark:border-slate-800"
             style="border-radius: 0.1rem;"
             @click.away="closeComparison()">
             
            <!-- Header -->
            <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50 dark:bg-slate-900/60">
                <div>
                    <h3 class="text-slate-900 dark:text-white" style="font-family: var(--font-heading); font-size: clamp(1.1rem, 2.5vw, 1.45rem); font-weight: 400;">Suite Comparison Matrix</h3>
                    <p class="text-xs text-slate-400 mt-1">Review specifications and pricing side-by-side to find the right serviced apartment.</p>
                </div>
                <button @click="closeComparison()" class="text-slate-400 hover:text-red-500 bg-white dark:bg-slate-800 p-1.5 rounded-full shadow focus:outline-none" aria-label="Close Comparison">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                </button>
            </div>

            <!-- Content Area: Scrollable comparison table -->
            <div class="p-6 overflow-x-auto flex-grow">
                <table class="w-full text-left border-collapse text-xs font-semibold min-w-[600px]">
                    <thead>
                        <tr class="border-b border-slate-200 dark:border-slate-800">
                            <th class="p-3 w-1/5 text-slate-400 uppercase tracking-widest text-[9px] bg-slate-50/50 dark:bg-slate-800/10">Feature</th>
                            <template x-for="id in comparedIds" :key="id">
                                <th class="p-3 w-1/5 border-l border-slate-100 dark:border-slate-800 relative group">
                                    <!-- Remove trigger -->
                                    <button @click="removeFromComparison(id)" class="absolute top-1 right-2 text-[10px] text-red-500 hover:underline font-bold" aria-label="Remove from comparison">
                                        Remove
                                    </button>
                                    <span class="block text-xs font-bold text-slate-900 dark:text-white" x-text="apartmentsData[id].name"></span>
                                </th>
                            </template>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60">
                        <template x-for="field in comparisonFields" :key="field.field_key">
                            <tr>
                                <td class="p-3 font-bold text-slate-500 dark:text-slate-400 bg-slate-50/50 dark:bg-slate-800/10" x-text="field.label"></td>
                                <template x-for="id in comparedIds" :key="id">
                                    <td class="p-3 border-l border-slate-100 dark:border-slate-800 text-slate-700 dark:text-slate-300">
                                        <!-- Boolean types -->
                                        <template x-if="field.type === 'boolean'">
                                            <div class="flex items-center space-x-1.5">
                                                <template x-if="apartmentsData[id].amenities.some(x => x.toLowerCase().includes(field.field_key.replace('_', ' ')) || x.toLowerCase().includes(field.label.toLowerCase()))">
                                                    <span class="text-emerald-600 dark:text-emerald-400 font-bold flex items-center">
                                                        <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                                                        Yes
                                                    </span>
                                                </template>
                                                <template x-if="!apartmentsData[id].amenities.some(x => x.toLowerCase().includes(field.field_key.replace('_', ' ')) || x.toLowerCase().includes(field.label.toLowerCase()))">
                                                    <span class="text-slate-400 font-medium">—</span>
                                                </template>
                                            </div>
                                        </template>

                                        <!-- Custom Text String types -->
                                        <template x-if="field.type === 'string'">
                                            <div>
                                                <!-- Custom mapped values -->
                                                <template x-if="field.field_key === 'price'">
                                                    <span class="text-amber-500 font-bold" x-text="'₦' + Number(apartmentsData[id].base_price_nightly).toLocaleString('en-US') + ' / Night'"></span>
                                                </template>
                                                <template x-if="field.field_key === 'bedrooms'">
                                                    <span x-text="apartmentsData[id].bedrooms_count + ' Bedroom en-suite'"></span>
                                                </template>
                                                <template x-if="field.field_key === 'best_for'">
                                                    <span x-text="apartmentsData[id].best_for"></span>
                                                </template>
                                            </div>
                                        </template>
                                    </td>
                                </template>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <!-- Footer Actions -->
            <div class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/60 flex justify-end space-x-4">
                <button @click="closeComparison()" class="btn-pill btn-outline-gold text-xs px-6 py-2">
                    Close Comparison
                </button>
                <a :href="'{{ url('/booking?compare=') }}' + comparedIds.join(',')" class="btn-pill btn-primary text-xs px-6 py-2">
                    Proceed to Reserve Selection
                </a>
            </div>

        </div>
    </div>

</section>

<!-- SEO/GEO Readable Content Block -->
<section class="section-white py-12 border-t border-[#DDE6F3] dark:border-slate-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-xs font-bold text-[#D6A84F] uppercase tracking-widest mb-4" style="font-size: 0.75rem;">Premium Serviced Accommodation in Ikeja</h2>
        <p class="leading-relaxed max-w-3xl mx-auto text-slate-500 dark:text-slate-400" style="font-size: 0.8125rem;">
            Kevron Suites and Apartments offers luxury 1, 2, 3 and 4 bedroom serviced apartments in Adeniyi Jones, Ikeja, Lagos. The apartments are suitable for solo travellers, couples, families, groups, corporate guests and long-stay visitors. Guests enjoy 24-hour power, Wi-Fi, modern kitchens, laundry facilities, balconies, smart security, PS5, snooker, airport pickup and car rental support on request. The property is approximately 8 minutes to MM1/MM2 and approximately 15 minutes to Murtala Muhammed International Airport, Lagos, subject to traffic.
        </p>
    </div>
</section>

<!-- Apartment Selection FAQ Section (Database backed) -->
<section class="section-soft-blue py-16 border-t border-[#DDE6F3] dark:border-slate-800">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-12">
            <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">FAQ</span>
            <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">Apartment Selection Help</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2">
                Need help deciding which room setup best matches your upcoming visit to Adeniyi Jones? Review our quick FAQ guide.
            </p>
        </div>

        <div class="space-y-4" x-data="{ activeFaq: null }">
            @foreach($faqs as $index => $faq)
                <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 overflow-hidden" 
                     style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                    <button @click="activeFaq = activeFaq === {{ $index }} ? null : {{ $index }}" 
                            class="w-full flex items-center justify-between p-4 text-left font-bold text-slate-800 dark:text-white hover:text-[#2B3192] dark:hover:text-cyan-400 transition-colors focus:outline-none"
                            style="font-size: 0.8125rem;">
                        <span>{{ $faq->question }}</span>
                        <svg class="w-4 h-4 transition-transform duration-200" :class="{'rotate-180': activeFaq === {{ $index }}}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </button>
                    <div x-show="activeFaq === {{ $index }}" 
                         x-transition:enter="transition ease-out duration-200"
                         class="p-4 bg-slate-50 dark:bg-slate-950 border-t border-[#DDE6F3] dark:border-slate-800">
                        <p class="text-slate-500 dark:text-slate-400 leading-relaxed" style="font-size: 0.8125rem;">
                            {{ $faq->answer }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</section>

<!-- Final CTA Section -->
<section class="section-navy py-16 relative overflow-hidden bg-[#080D2B]">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <h2 class="text-white mb-4" style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.8vw, 1.625rem); font-weight: 400;">
            Find the Right Apartment for Your Stay in Ikeja
        </h2>
        <p class="text-slate-300 max-w-2xl mx-auto mb-8 font-medium" style="font-size: clamp(0.8125rem, 1vw, 0.875rem);">
            Compare luxury serviced apartment options and choose the space that fits your visit, family, business trip or long-stay requirement.
        </p>

        <div class="flex flex-wrap items-center justify-center gap-4">
            <a href="#listing-section" class="btn-pill btn-primary text-xs uppercase tracking-wider font-bold min-h-[44px]">
                Check Availability
            </a>
            <button @click="document.getElementById('listing-section').scrollIntoView({ behavior: 'smooth' })"
                    class="btn-pill btn-outline-gold text-xs uppercase tracking-wider font-bold min-h-[44px] text-white hover:text-white">
                Compare Apartments
            </button>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hi%20Kevron%20Apartments%2C%20I%20want%20to%20chat%20about%20your%20available%20serviced%20suites." 
               target="_blank" 
               class="btn-pill btn-luxury text-xs uppercase tracking-wider font-bold min-h-[44px]">
                WhatsApp Us
            </a>
        </div>
    </div>
</section>

<!-- Schema tags dynamic injection -->
@if($schema)
<script type="application/ld+json">
{!! json_encode($schema->schema_json, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@endif

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const checkInEl = document.getElementById('filter_check_in');
        const checkOutEl = document.getElementById('filter_check_out');
        
        if (checkInEl && checkOutEl) {
            window.filterCheckInPicker = flatpickr(checkInEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    // Update Alpine model
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                    
                    if (window.filterCheckOutPicker) {
                        if (selectedDates.length > 0) {
                            const minOut = new Date(selectedDates[0]);
                            minOut.setDate(minOut.getDate() + 1);
                            window.filterCheckOutPicker.set('minDate', minOut);
                        } else {
                            window.filterCheckOutPicker.set('minDate', 'today');
                        }
                    }
                }
            });

            window.filterCheckOutPicker = flatpickr(checkOutEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                }
            });
        }
    });
</script>
@endpush