@forelse($apartments as $apartment)
    @php
        // Get the primary image from mediaAssets or fallback
        $primaryMedia = $apartment->mediaAssets->firstWhere('is_primary', true);
        $imgPath = $primaryMedia ? $primaryMedia->file_path : 'pictures/master-bedroom.jpg';
        $altText = $primaryMedia ? $primaryMedia->alt_text : $apartment->name;
    @endphp
    
    <!-- Apartment Card -->
    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800/80 overflow-hidden shadow-sm flex flex-col group hover:bg-slate-50 dark:hover:bg-slate-800/20 transition-all duration-300"
         style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;"
         data-id="{{ $apartment->id }}">
        
        <!-- Media Block -->
        <div class="relative aspect-[16/10] overflow-hidden bg-slate-900">
            <img src="{{ asset($imgPath) }}" 
                 alt="{{ $altText }}" 
                 loading="lazy"
                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[8s]">
                 
            <!-- Top badge indicators -->
            <div class="absolute top-3 left-3 flex flex-col gap-1.5 z-10">
                <span class="bg-[#080D2B]/95 text-white text-[9px] uppercase tracking-widest font-bold px-2.5 py-1" style="font-size: 0.6875rem;">
                    ₦{{ number_format($apartment->base_price_nightly) }} / Night
                </span>
                
                @if($apartment->bedrooms_count >= 3)
                    <span class="bg-[#D6A84F] text-[#080D2B] text-[9px] uppercase tracking-widest font-bold px-2.5 py-0.5" style="font-size: 0.625rem;">
                        PS5 & Snooker
                    </span>
                @endif
            </div>

            <!-- Availability status badge -->
            <div class="absolute top-3 right-3 z-10">
                @if(isset($apartment->is_available) && !$apartment->is_available)
                    <span class="bg-red-600 text-white text-[9px] uppercase tracking-widest font-bold px-2.5 py-1" style="font-size: 0.6875rem;">
                        Unavailable
                    </span>
                @else
                    <span class="bg-[#16A34A] text-white text-[9px] uppercase tracking-widest font-bold px-2.5 py-1" style="font-size: 0.6875rem;">
                        Available
                    </span>
                @endif
            </div>

            <!-- Compare checkbox overlay -->
            <div class="absolute bottom-3 right-3 z-10 bg-black/60 backdrop-blur px-2.5 py-1 text-white flex items-center space-x-1.5" style="border-radius: 0.1rem;">
                <input type="checkbox" 
                       id="compare-{{ $apartment->id }}" 
                       :value="{{ $apartment->id }}" 
                       x-model="comparedIds" 
                       class="rounded border-slate-700 text-amber-500 focus:ring-amber-500 h-3.5 w-3.5 cursor-pointer">
                <label for="compare-{{ $apartment->id }}" class="text-[9px] font-bold uppercase tracking-wider select-none cursor-pointer" style="font-size: 0.625rem;">Compare</label>
            </div>
            
            @if($apartment->bedrooms_count >= 3)
                <!-- 3D Virtual Tour Badge Overlay -->
                <div class="absolute bottom-3 left-3 z-10 bg-blue-900/90 text-white px-2 py-0.5 flex items-center space-x-1 text-[9px] font-bold uppercase tracking-wider" style="font-size: 0.625rem;">
                    <span>3D Available</span>
                </div>
            @endif
        </div>

        <!-- Details / Copy Block -->
        <div class="p-5 flex flex-col justify-between flex-grow">
            <div>
                <!-- Subhead category + target best for label -->
                <div class="flex items-center justify-between mb-1.5">
                    <span class="text-[9px] text-[#D6A84F] uppercase tracking-widest font-bold" style="font-size: 0.6875rem;">
                        {{ $apartment->bedrooms_count }} Bedroom Suite
                    </span>
                    @if($apartment->best_for)
                        <span class="text-[9px] text-slate-400 dark:text-slate-500 uppercase tracking-wider font-semibold" style="font-size: 0.625rem;">
                            Best for: {{ $apartment->best_for }}
                        </span>
                    @endif
                </div>

                <h3 class="mb-2 text-slate-900 dark:text-white group-hover:text-blue-900 dark:group-hover:text-cyan-400 transition-colors" 
                    style="font-family: var(--font-heading); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 400; line-height: 1.3;">
                    {{ $apartment->name }}
                </h3>

                <p class="text-slate-500 dark:text-slate-400 mb-4 line-clamp-3 leading-relaxed" style="font-size: 0.8125rem;">
                    {{ $apartment->description }}
                </p>
            </div>

            <div>
                <!-- Attributes Specs Strip -->
                <div class="grid grid-cols-2 gap-1 text-center text-[10px] font-bold text-slate-400 border-t border-b border-slate-100 dark:border-slate-800/60 py-2 mb-4">
                    <div>
                        <span class="text-slate-600 dark:text-slate-300 block">{{ $apartment->bedrooms_count }} Bed</span>
                    </div>
                    <div class="border-l border-slate-100 dark:border-slate-800/60">
                        <span class="text-slate-600 dark:text-slate-300 block">Up to {{ $apartment->capacity_adults + $apartment->capacity_children }} guests</span>
                    </div>
                </div>

                <!-- CTA Actions Grid -->
                <div class="flex flex-col gap-2">
                    <div class="flex items-center gap-2">
                        @if(isset($apartment->is_available) && !$apartment->is_available)
                            <!-- Unavailable: Enquire via WhatsApp instead of Booking -->
                            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hi%20Kevron%20Apartments%2C%20I%20am%20enquiring%20about%20availability%20for%20{{ urlencode($apartment->name) }}"
                               target="_blank"
                               class="btn-pill btn-primary text-[10px] py-2.5 w-1/2 text-center font-bold uppercase tracking-wider min-h-[38px] bg-amber-500 text-white">
                                Enquire Now
                            </a>
                        @else
                            <!-- Available: Standard Book CTA -->
                            <a href="{{ url('/booking?type=' . $apartment->slug . '&check_in=' . request('check_in') . '&check_out=' . request('check_out') . '&guests=' . request('guests')) }}" 
                               class="btn-pill btn-primary text-[10px] py-2.5 w-1/2 text-center font-bold uppercase tracking-wider min-h-[38px]">
                                Book Now
                            </a>
                        @endif
                        
                        <button @click="openQuickView({{ $apartment->id }})" 
                                class="btn-pill btn-outline-gold text-[10px] py-2.5 w-1/2 text-center font-bold uppercase tracking-wider min-h-[38px]">
                            Quick View
                        </button>
                    </div>
                    
                    <div class="flex gap-2">
                        <a href="{{ route('apartments.show', ['slug' => $apartment->slug]) }}" 
                           class="text-[10px] font-bold uppercase tracking-widest text-[#2B3192] dark:text-cyan-400 hover:underline text-center w-1/2 py-1" style="font-size: 0.6875rem;">
                            View Details
                        </a>
                        <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hi%20Kevron%20Apartments%2C%20I%20want%20to%20enquire%20about%20{{ urlencode($apartment->name) }}"
                           target="_blank"
                           class="text-[10px] font-bold uppercase tracking-widest text-emerald-600 dark:text-emerald-400 hover:underline text-center w-1/2 py-1 flex items-center justify-center space-x-1"
                           style="font-size: 0.6875rem;">
                            <span>WhatsApp Chat</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
@empty
    <!-- Empty State -->
    <div class="col-span-full text-center py-16 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8" style="border-radius: 0.1rem;">
        <svg class="w-12 h-12 text-slate-300 dark:text-slate-600 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
        </svg>
        <h4 class="font-bold text-slate-800 dark:text-white" style="font-size: 0.875rem;">No suites match your criteria</h4>
        <p class="text-xs text-slate-400 mt-2 max-w-sm mx-auto">Try resetting the filters or adjusting check-in dates and guest counts to explore other premium serviced residences.</p>
    </div>
@endforelse