@extends('layouts.modern')

@section('title', $listing->property_title . ' - PropertyFinda')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>
        .property-gallery-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: repeat(2, 350px);
            gap: 15px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

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

        .gallery-item:hover img {
            transform: scale(1.08);
        }

        .gallery-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(19, 27, 49, 0.6) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 1;
        }

        .gallery-item:hover::before {
            opacity: 1;
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(128, 70, 241, 0.85) 0%, rgba(19, 27, 49, 0.85) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        .gallery-overlay-text {
            text-align: center;
            color: white;
        }

        .gallery-overlay i {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
            display: block;
        }

        .gallery-overlay p {
            font-size: 1.125rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        @media (max-width: 1024px) {
            .property-gallery-grid {
                display: none;
            }

            .mobile-gallery-slider {
                display: block !important;
            }
        }

        .mobile-gallery-slider {
            display: none;
            height: 450px;
        }

        .sidebar-sticky {
            position: sticky;
            top: 120px;
        }

        #lightbox-viewer {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
        }

        .lightbox-swiper .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Force full viewport height for swiper slide */
            width: 100vw;
        }

        @media (max-width: 640px) {
            .bg-gray-50.pt-32 {
                padding-top: 5rem;
            }
            .p-8 {
                padding: 1.25rem !important;
            }
            .text-3xl {
                font-size: 1.75rem !important;
                line-height: 2.25rem !important;
            }
            .text-5xl {
                font-size: 2rem !important;
                line-height: 2.5rem !important;
            }
            .text-4xl {
                font-size: 1.5rem !important;
            }
            .mb-12 {
                margin-bottom: 2rem !important;
            }
            .mobile-gallery-slider {
                height: 300px;
            }
            /* Header responsiveness */
            .header-flex-wrapper {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            .header-actions {
                width: 100% !important;
                justify-content: flex-start !important;
                margin-top: 1.5rem;
            }
            .price-display {
                text-align: left !important;
            }
        }
    </style>
@endpush

@section('content')
    <div class="bg-gray-50 pt-2 pb-24 mt-2">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            <!-- Header -->
            <div class="mb-8 bg-white p-8 rounded-3xl border border-gray-100 shadow-sm">
                <div class="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-8 header-flex-wrapper">
                    <div class="flex-1">
                        <nav class="flex mb-4 text-xs font-bold text-gray-400 gap-2">
                            <a href="{{ route('home') }}" class="hover:text-secondary">Home</a>
                            <span>/</span>
                            <a href="{{ route('listings.index') }}" class="hover:text-secondary">Properties</a>
                            <span>/</span>
                            <span class="text-gray-900">{{ $listing->property_reference_number }}</span>
                        </nav>

                        <div class="flex items-center gap-3 mb-4">
                            <span class="bg-secondary text-white px-4 py-1 rounded-full text-xs font-bold">
                                {{ $listing->purpose }}</span>
                            <span
                                class="bg-gray-100 text-gray-600 px-4 py-1 rounded-full text-xs font-bold">{{ $listing->propertyType->title ?? 'Property' }}</span>
                        </div>

                        <h1 class="text-3xl md:text-5xl font-black text-primary mb-4">
                            {{ $listing->property_title }}
                        </h1>

                        <div class="flex items-center gap-2 text-gray-500 font-medium">
                            <i class="fa-solid fa-location-dot text-secondary"></i>
                            <span>{{ $listing->address }}</span>
                        </div>

                        @php 
                            $tags = $listing->details->tags ?? $listing->tags ?? [];
                            if(!is_array($tags)) $tags = json_decode($tags, true) ?? [];
                        @endphp
                        @if(count($tags) > 0)
                            <div class="flex flex-wrap gap-2 mt-6">
                                @foreach($tags as $tag)
                                    <span class="px-3 py-1.5 bg-secondary/5 text-secondary rounded-xl text-[10px] font-black uppercase tracking-wider border border-secondary/10">#{{ $tag }}</span>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <div class="flex items-center gap-4 header-actions">
                        <div class="text-right price-display">
                            @if($listing->old_price && $listing->old_price > $listing->price)
                                <div class="flex items-center justify-end gap-2 mb-1">
                                    <span class="text-sm text-gray-400" style="text-decoration: line-through;">£{{ number_format($listing->old_price) }}</span>
                                    @php
                                        $percentage = round((($listing->old_price - $listing->price) / $listing->old_price) * 100);
                                    @endphp
                                    <span class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-md font-black">-{{ $percentage }}% OFF</span>
                                </div>
                            @endif
                            <span class="text-4xl font-black text-primary">£{{ number_format($listing->price) }}</span>
                        </div>

                        @if(auth()->check())
                            <a href="{{ route('listing.brochure', $listing->slug ?? $listing->id) }}"
                                class="w-14 h-14 rounded-2xl border-2 border-secondary bg-secondary/10 flex items-center justify-center hover:bg-secondary hover:text-white text-secondary transition-all group"
                                title="Download Brochure">
                                <i class="fa-solid fa-download text-xl group-hover:scale-110 transition-transform"></i>
                            </a>
                        @else
                            <a href="{{ route('login') }}"
                                class="bg-secondary text-white px-4 py-3 rounded-xl text-sm font-bold hover:bg-secondary-dark transition-all shadow-lg shadow-secondary/20">
                                Login for Brochure
                            </a>
                        @endif

                        <button onclick="toggleFavorite({{ $listing->id }}, this)"
                            class="w-14 h-14 rounded-2xl border-2 border-gray-200 flex items-center justify-center hover:border-secondary transition-all {{ in_array($listing->id, $user_favorite_ids ?? []) ? 'text-rose-500' : 'text-gray-300' }}">
                            <i
                                class="{{ in_array($listing->id, $user_favorite_ids ?? []) ? 'fa-solid' : 'fa-regular' }} fa-heart text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Gallery -->
            <div class="mb-12">
                @php 
                    $gallery = is_array($listing->gallery) ? $listing->gallery : json_decode($listing->gallery, true) ?? [];
                    $floorPlansColumn = is_array($listing->floor_plans) ? $listing->floor_plans : json_decode($listing->floor_plans, true) ?? [];
                    
                    $allMedia = [];
                    // 1. Video
                    if($listing->video) $allMedia[] = ['type' => 'video', 'src' => asset('storage/' . $listing->video), 'label' => 'Video Tour'];
                    
                    // 2. Thumbnail
                    if($listing->thumbnail) $allMedia[] = ['type' => 'image', 'src' => asset('storage/' . $listing->thumbnail), 'label' => 'Main Photo'];
                    
                    // 3. Gallery Column
                    foreach($gallery as $img) $allMedia[] = ['type' => 'image', 'src' => asset('storage/' . $img), 'label' => 'Photo'];
                    
                    // 4. ListingMedia Relation
                    if($listing->media) {
                        foreach($listing->media as $m) {
                            if($m->type === 'photo') {
                                $allMedia[] = ['type' => 'image', 'src' => asset('storage/' . $m->file_path), 'label' => 'Photo'];
                            } elseif($m->type === 'video') {
                                $allMedia[] = ['type' => 'video', 'src' => asset('storage/' . $m->file_path), 'label' => 'Video'];
                            }
                        }
                    }

                    // Collect Documents separately
                    $documents = [];
                    if($listing->epc_upload) $documents[] = ['type' => 'EPC', 'path' => asset('storage/' . $listing->epc_upload), 'name' => 'Energy Performance Certificate'];
                    if($listing->brochure_pdf) $documents[] = ['type' => 'Brochure', 'path' => asset('storage/' . $listing->brochure_pdf), 'name' => 'Property Brochure'];
                    
                    // Add floor plans from column
                    foreach($floorPlansColumn as $fp) {
                        $documents[] = ['type' => 'Floor Plan', 'path' => asset('storage/' . $fp), 'name' => 'Floor Plan'];
                    }
                    
                    // Add documents from Media relation
                    if($listing->media) {
                        foreach($listing->media as $m) {
                            if($m->type === 'floorplan') {
                                $documents[] = ['type' => 'Floor Plan', 'path' => asset('storage/' . $m->file_path), 'name' => 'Floor Plan'];
                            } elseif($m->type === 'epc') {
                                $documents[] = ['type' => 'EPC', 'path' => asset('storage/' . $m->file_path), 'name' => 'EPC Certificate'];
                            } elseif($m->type === 'brochure') {
                                $documents[] = ['type' => 'Brochure', 'path' => asset('storage/' . $m->file_path), 'name' => 'Brochure'];
                            }
                        }
                    }

                    // Remote unique media entries by src to avoid duplicates
                    $allMedia = collect($allMedia)->unique('src')->values()->all();
                @endphp

                <div class="property-gallery-grid">
                    @if(isset($allMedia[0]))
                        <div class="gallery-item row-span-2" style="grid-row: span 2;" onclick="openLightbox(0)">
                            @if($allMedia[0]['type'] === 'video')
                                <div class="w-full h-full bg-black relative">
                                    <video class="w-full h-full object-cover">
                                        <source src="{{ $allMedia[0]['src'] }}" type="video/mp4">
                                    </video>
                                    <div class="absolute inset-0 flex flex-col items-center justify-center bg-black/30">
                                        <i class="fa-solid fa-circle-play text-5xl text-white opacity-90"></i>
                                        <span class="text-white font-bold mt-2 text-sm">{{ $allMedia[0]['label'] }}</span>
                                    </div>
                                </div>
                            @else
                                <img src="{{ $allMedia[0]['src'] }}" alt="Property Media">
                            @endif
                        </div>
                    @endif

                    @if(isset($allMedia[1]))
                        <div class="gallery-item" onclick="openLightbox(1)">
                            @if($allMedia[1]['type'] === 'video')
                                <div class="w-full h-full bg-black relative">
                                    <i class="fa-solid fa-circle-play text-3xl text-white opacity-90 absolute inset-0 m-auto"></i>
                                </div>
                            @else
                                <img src="{{ $allMedia[1]['src'] }}" alt="Property Media">
                            @endif
                        </div>
                    @endif

                    @if(isset($allMedia[2]))
                        <div class="gallery-item" onclick="openLightbox(2)">
                            @if($allMedia[2]['type'] === 'video')
                                <div class="w-full h-full bg-black relative">
                                    <i class="fa-solid fa-circle-play text-3xl text-white opacity-90 absolute inset-0 m-auto"></i>
                                </div>
                            @else
                                <img src="{{ $allMedia[2]['src'] }}" alt="Property Media">
                            @endif
                            @if(count($allMedia) > 3)
                                <div class="gallery-overlay">
                                    <div class="gallery-overlay-text">
                                        <i class="fa-solid fa-images"></i>
                                        <p>+{{ count($allMedia) - 3 }} More</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif

                    @if(count($allMedia) === 0)
                         <div class="col-span-2 h-[500px] bg-gray-100 rounded-3xl flex flex-col items-center justify-center text-gray-400 gap-4">
                            <i class="fa-solid fa-image text-7xl"></i>
                            <p class="font-bold">No images available for this property</p>
                         </div>
                    @endif
                </div>

                <div class="mobile-gallery-slider rounded-3xl overflow-hidden shadow-lg">
                    <div class="swiper mobile-swiper h-full">
                        <div class="swiper-wrapper">
                            @foreach($allMedia as $media)
                                <div class="swiper-slide">
                                    @if($media['type'] === 'video')
                                        <div class="w-full h-full bg-black flex items-center justify-center">
                                            <video controls class="w-full h-full">
                                                <source src="{{ $media['src'] }}" type="video/mp4">
                                            </video>
                                        </div>
                                    @else
                                        <img src="{{ $media['src'] }}" class="w-full h-full object-cover">
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Main Content -->
                <div class="w-full lg:w-2/3 space-y-8">

                    <div style="display: flex; gap: 8px; width: 100%; margin-bottom: 24px;">
                        <div style="flex: 1; background: white; padding: 12px 8px; border-radius: 16px; border: 1px solid #f3f4f6; text-align: center; min-width: 0;">
                            <i class="fa-solid fa-bed text-secondary" style="font-size: 18px; margin-bottom: 4px; display: block;"></i>
                            <p class="text-primary" style="font-size: 14px; font-weight: 900; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                @if(strtolower($listing->bedrooms) === 'studio')
                                    Studio
                                @elseif($listing->bedrooms && $listing->bedrooms > 0)
                                    {{ $listing->bedrooms }}
                                @else
                                    N/A
                                @endif
                            </p>
                            <p style="font-size: 10px; color: #9ca3af; font-weight: 500; margin: 0;">Beds</p>
                        </div>
                        <div style="flex: 1; background: white; padding: 12px 8px; border-radius: 16px; border: 1px solid #f3f4f6; text-align: center; min-width: 0;">
                            <i class="fa-solid fa-bath text-secondary" style="font-size: 18px; margin-bottom: 4px; display: block;"></i>
                            <p class="text-primary" style="font-size: 14px; font-weight: 900; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                {{ $listing->bathrooms && $listing->bathrooms > 0 ? $listing->bathrooms : 'N/A' }}
                            </p>
                            <p style="font-size: 10px; color: #9ca3af; font-weight: 500; margin: 0;">Baths</p>
                        </div>
                        <div style="flex: 1; background: white; padding: 12px 8px; border-radius: 16px; border: 1px solid #f3f4f6; text-align: center; min-width: 0;">
                            <i class="fa-solid fa-couch text-secondary" style="font-size: 18px; margin-bottom: 4px; display: block;"></i>
                            <p class="text-primary" style="font-size: 14px; font-weight: 900; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                {{ $listing->reception_rooms && $listing->reception_rooms > 0 ? $listing->reception_rooms : 'N/A' }}
                            </p>
                            <p style="font-size: 10px; color: #9ca3af; font-weight: 500; margin: 0;">Recp</p>
                        </div>
                        <div style="flex: 1; background: white; padding: 12px 8px; border-radius: 16px; border: 1px solid #f3f4f6; text-align: center; min-width: 0;">
                            <i class="fa-solid fa-stairs text-secondary" style="font-size: 18px; margin-bottom: 4px; display: block;"></i>
                            <p class="text-primary" style="font-size: 14px; font-weight: 900; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                {{ $listing->floor_level && $listing->floor_level !== '' ? $listing->floor_level : 'N/A' }}
                            </p>
                            <p style="font-size: 10px; color: #9ca3af; font-weight: 500; margin: 0;">Floor</p>
                        </div>
                        <div style="flex: 1; background: white; padding: 12px 8px; border-radius: 16px; border: 1px solid #f3f4f6; text-align: center; min-width: 0;">
                            <i class="fa-solid fa-vector-square text-secondary" style="font-size: 18px; margin-bottom: 4px; display: block;"></i>
                            <p class="text-primary" style="font-size: 14px; font-weight: 900; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                {{ $listing->area_size ? (is_numeric($listing->area_size) ? number_format((float)$listing->area_size) : $listing->area_size) : 'N/A' }}
                            </p>
                            <p style="font-size: 10px; color: #9ca3af; font-weight: 500; margin: 0;">Sqft</p>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="bg-white p-6 md:p-8 rounded-3xl border border-gray-100" x-data="{ expanded: false }">
                        <h2 class="text-2xl font-black text-primary mb-6">About this property</h2>
                        <div class="prose prose-slate max-w-none text-gray-600">
                            <div x-show="!expanded">
                                {!! \Illuminate\Support\Str::limit(strip_tags($listing->description), 400) !!}
                            </div>
                            <div x-show="expanded" x-cloak>
                                {!! $listing->description !!}
                            </div>
                            
                            @if(strlen(strip_tags($listing->description)) > 400)
                                <button @click="expanded = !expanded" class="text-secondary font-bold hover:underline mt-4">
                                    <span x-text="expanded ? 'Read Less' : 'Read Full Description'"></span>
                                </button>
                            @endif
                        </div>
                    </div>

                    <!-- Material Information -->
                    @php
                        $mi = $listing->materialInfo;
                        // Map legacy or direct listing columns if relation is empty
                        $tenure = $mi->tenure ?? $listing->tenure ?? 'N/A';
                        $councilTax = $mi->council_tax_band ?? $listing->council_tax_band ?? 'N/A';
                        $parking = $mi->parking_type ?? $listing->parking_type ?? 'N/A';
                        $construction = $mi->construction_type ?? $listing->construction_type ?? 'N/A';
                        $serviceCharge = $mi->service_charge ?? $listing->service_charge ?? null;
                        $groundRent = $mi->ground_rent ?? $listing->ground_rent ?? null;
                        $deposit = $listing->details->deposit ?? $listing->deposit ?? null;
                    @endphp
                    <div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm">
                        <h2 class="text-2xl font-black text-primary mb-6">Financial & Tenure</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-2">
                             <div class="flex justify-between py-3 border-b border-gray-100">
                                <span class="text-gray-600 font-medium">Tenure Type</span>
                                <span class="font-bold text-primary">{{ $tenure }}</span>
                            </div>
                            @if($mi->unexpired_years ?? $listing->unexpired_years)
                                <div class="flex justify-between py-3 border-b border-gray-100">
                                    <span class="text-gray-600 font-medium">Lease Remaining</span>
                                    <span class="font-bold text-primary">{{ $mi->unexpired_years ?? $listing->unexpired_years }} Years</span>
                                </div>
                            @endif
                            @if($councilTax && $councilTax !== 'N/A')
                                <div class="flex justify-between py-3 border-b border-gray-100">
                                    <span class="text-gray-600 font-medium">Council Tax</span>
                                    <span class="font-bold text-primary">Band {{ $councilTax }}</span>
                                </div>
                            @endif
                            @if($deposit)
                                <div class="flex justify-between py-3 border-b border-gray-100">
                                    <span class="text-gray-600 font-medium">Deposit</span>
                                    <span class="font-bold text-emerald-600">@if(is_numeric($deposit))£{{ number_format($deposit, 2) }}@else{{ $deposit }}@endif</span>
                                </div>
                            @endif
                            @if($serviceCharge)
                                <div class="flex justify-between py-3 border-b border-gray-100">
                                    <span class="text-gray-600 font-medium">Service Charge</span>
                                    <span class="font-bold text-emerald-600">@if(is_numeric($serviceCharge))£{{ number_format($serviceCharge, 2) }}@else{{ $serviceCharge }}@endif</span>
                                </div>
                            @endif
                            @if($groundRent)
                                <div class="flex justify-between py-3 border-b border-gray-100">
                                    <span class="text-gray-600 font-medium">Ground Rent</span>
                                    <span class="font-bold text-emerald-600">@if(is_numeric($groundRent))£{{ number_format($groundRent, 2) }}@else{{ $groundRent }}@endif</span>
                                </div>
                            @endif
                            <div class="flex justify-between py-3 border-b border-gray-100">
                                <span class="text-gray-600 font-medium">Parking</span>
                                <span class="font-bold text-primary">{{ $parking }}</span>
                            </div>
                            @if($construction && $construction !== 'N/A')
                                <div class="flex justify-between py-3 border-b border-gray-100">
                                    <span class="text-gray-600 font-medium">Construction</span>
                                    <span class="font-bold text-primary">{{ $construction }}</span>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Additional Information -->
                    @php 
                        $scheme = $listing->details->government_scheme ?? $listing->government_scheme; 
                        $avail = $listing->availability_date;
                    @endphp
                    @if($avail || $scheme)
                    <div class="bg-white p-8 rounded-3xl border border-gray-100">
                        <h2 class="text-2xl font-black text-primary mb-6">Status & Schemes</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @if($avail)
                            <div class="flex flex-col p-4 bg-gray-50 rounded-2xl">
                                <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Available From</span>
                                <span class="text-lg font-black text-primary">{{ \Carbon\Carbon::parse($avail)->format('d M Y') }}</span>
                            </div>
                            @endif
                            @if($scheme)
                            <div class="flex flex-col p-4 bg-gray-50 rounded-2xl">
                                <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Government Scheme</span>
                                <span class="text-lg font-black text-primary">{{ $scheme }}</span>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endif

                    <!-- Utilities -->
                    @php
                        $util = $listing->utilities;
                        // Use values from relation or from listing table direct (for backward compatibility / user's dump)
                        $water = $util->water ?? $listing->utilities_water ?? 'N/A';
                        $electric = $util->electricity ?? $listing->utilities_electricity ?? 'N/A';
                        $sewer = $util->sewerage ?? $listing->utilities_sewerage ?? 'N/A';
                        $heating = $util->heating_type ?? $listing->heating_type ?? 'N/A';
                        $broadband = $util->broadband ?? $listing->broadband ?? 'N/A';
                    @endphp
                    <div class="bg-white p-8 rounded-3xl border border-gray-100">
                        <h2 class="text-2xl font-black text-primary mb-6">Utilities & Connectivity</h2>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="flex items-center gap-4 bg-gray-50 p-4 rounded-2xl">
                                <div class="w-10 h-10 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center">
                                    <i class="fa-solid fa-droplet"></i>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Water</p>
                                    <p class="text-sm font-bold text-primary">{{ $water }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 bg-gray-50 p-4 rounded-2xl">
                                <div class="w-10 h-10 bg-yellow-100 text-yellow-600 rounded-xl flex items-center justify-center">
                                    <i class="fa-solid fa-bolt"></i>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Electricity</p>
                                    <p class="text-sm font-bold text-primary">{{ $electric }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 bg-gray-50 p-4 rounded-2xl">
                                <div class="w-10 h-10 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center">
                                    <i class="fa-solid fa-fire"></i>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Heating</p>
                                    <p class="text-sm font-bold text-primary">{{ $heating }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 bg-gray-50 p-4 rounded-2xl">
                                <div class="w-10 h-10 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center">
                                    <i class="fa-solid fa-wifi"></i>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Broadband</p>
                                    <p class="text-sm font-bold text-primary">{{ $broadband }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 bg-gray-50 p-4 rounded-2xl">
                                <div class="w-10 h-10 bg-indigo-100 text-indigo-600 rounded-xl flex items-center justify-center">
                                    <i class="fa-solid fa-signal"></i>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Mobile</p>
                                    <p class="text-sm font-bold text-primary">{{ $util->mobile_coverage ?? $listing->mobile_coverage ?? 'Check Area' }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 bg-gray-50 p-4 rounded-2xl">
                                <div class="w-10 h-10 bg-teal-100 text-teal-600 rounded-xl flex items-center justify-center">
                                    <i class="fa-solid fa-toilet"></i>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Sewerage</p>
                                    <p class="text-sm font-bold text-primary">{{ $sewer }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Property Documents -->
                    @if(count($documents) > 0)
                        <div class="bg-white p-8 rounded-3xl border border-gray-100">
                            <h2 class="text-2xl font-black text-primary mb-6">Documents & Floor Plans</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach($documents as $doc)
                                    <a href="{{ $doc['path'] }}" target="_blank" class="flex items-center justify-between p-4 bg-gray-50 hover:bg-white border border-gray-100 hover:border-secondary rounded-2xl transition-all group">
                                        <div class="flex items-center gap-4">
                                            <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-secondary shadow-sm">
                                                @if($doc['type'] === 'Floor Plan')
                                                    <i class="fa-solid fa-map"></i>
                                                @elseif($doc['type'] === 'EPC')
                                                    <i class="fa-solid fa-leaf"></i>
                                                @else
                                                    <i class="fa-solid fa-file-pdf"></i>
                                                @endif
                                            </div>
                                            <div>
                                                <p class="text-sm font-black text-primary">{{ $doc['name'] }}</p>
                                                <p class="text-[10px] text-gray-400 uppercase font-bold">{{ $doc['type'] }}</p>
                                            </div>
                                        </div>
                                        <i class="fa-solid fa-chevron-right text-gray-300 group-hover:text-secondary group-hover:translate-x-1 transition-all"></i>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Safety & Risks -->
                    <div class="bg-white p-8 rounded-3xl border border-gray-100">
                        <h2 class="text-2xl font-black text-primary mb-6">Safety & Risks</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-2">
                             <div class="flex justify-between py-3 border-b border-gray-100">
                                <span class="text-gray-600 font-medium">Flood Risk</span>
                                <span class="font-bold text-primary">{{ $mi->flood_risk ?? $listing->flood_risk ?? 'Very Low' }}</span>
                            </div>
                            <div class="flex justify-between py-3 border-b border-gray-100">
                                <span class="text-gray-600 font-medium">Cladding Risk</span>
                                <span class="font-bold text-primary">{{ $mi->cladding_risk ?? $listing->cladding_risk ?? 'None Reported' }}</span>
                            </div>
                            <div class="flex justify-between py-3 border-b border-gray-100">
                                <span class="text-gray-600 font-medium">Coastal Erosion</span>
                                <span class="font-bold text-primary">No Risk</span>
                            </div>
                            <div class="flex justify-between py-3 border-b border-gray-100">
                                <span class="text-gray-600 font-medium">Mining History</span>
                                <span class="font-bold text-primary">None</span>
                            </div>
                        </div>
                    </div>

                    <!-- Room Details -->
                    @if($listing->rooms->count() > 0)
                        <div class="bg-white p-8 rounded-3xl border border-gray-100">
                            <h2 class="text-2xl font-black text-primary mb-6">Room Breakdown</h2>
                            <div class="space-y-4">
                                @foreach($listing->rooms as $room)
                                    <div class="p-5 bg-gray-50 rounded-2xl flex flex-col md:flex-row md:items-center justify-between gap-4">
                                        <div>
                                            <h4 class="font-black text-primary">{{ $room->room_name }}</h4>
                                            @if($room->room_description)
                                                <p class="text-sm text-gray-500 mt-1">{{ $room->room_description }}</p>
                                            @endif
                                        </div>
                                        @if($room->room_size)
                                            <div class="bg-white px-4 py-2 rounded-xl text-xs font-bold text-secondary border border-gray-100 shadow-sm whitespace-nowrap">
                                                {{ $room->room_size }}
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Sold Price History Dropdown -->
                    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden" x-data="{ isOpen: false, loaded: false }">
                        <button @click="isOpen = !isOpen; if(isOpen && !loaded) { fetchSoldPrices(); loaded = true; }" 
                                class="w-full flex items-center justify-between p-6 md:p-8 text-left focus:outline-none group hover:bg-gray-50/50 transition-colors">
                            <h2 class="text-2xl font-black text-primary">Sold Price History</h2>
                            <i class="fa-solid fa-chevron-down transition-transform duration-300 text-secondary text-xl" :class="{ 'rotate-180': isOpen }"></i>
                        </button>
                        
                        <div x-show="isOpen" 
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0 max-h-0"
                             x-transition:enter-end="opacity-100 max-h-[1000px]"
                             x-transition:leave="transition ease-in duration-200"
                             x-transition:leave-start="opacity-100 max-h-[1000px]"
                             x-transition:leave-end="opacity-0 max-h-0"
                             class="px-6 md:px-8 pb-8" x-cloak>
                            <div id="sold-price-history">
                                <div class="flex items-center justify-center py-8">
                                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary"></div>
                                    <span class="ml-3 text-gray-500 font-medium">Fetching historical data...</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Features -->
                    @php
                        $relFeatures = $listing->features->pluck('title')->toArray();
                        $jsonFeatures = $listing->details->key_features ?? [];
                        if(!is_array($jsonFeatures)) $jsonFeatures = json_decode($jsonFeatures, true) ?? [];
                        $allFeatures = array_unique(array_merge($relFeatures, $jsonFeatures));
                    @endphp
                    @if(count($allFeatures) > 0)
                        <div class="bg-white p-8 rounded-3xl border border-gray-100">
                            <h2 class="text-2xl font-black text-primary mb-6">Key Features</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                @foreach($allFeatures as $feature)
                                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                                        <i class="fa-solid fa-check-circle text-secondary"></i>
                                        <span class="text-sm font-medium text-gray-700">{{ $feature }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Map -->
                    @if($listing->latitude && $listing->longitude)
                        <div class="bg-white p-8 rounded-3xl border border-gray-100">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-xl font-black text-primary">Location</h3>
                                <a href="https://www.google.com/maps/dir/?api=1&destination={{ $listing->latitude }},{{ $listing->longitude }}" 
                                   target="_blank" 
                                   class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-xl text-sm font-bold hover:bg-secondary hover:text-white transition-all">
                                    <i class="fa-solid fa-diamond-turn-right"></i>
                                    Get Directions
                                </a>
                            </div>
                            <div id="property-map" class="aspect-video rounded-2xl overflow-hidden bg-gray-100 shadow-inner"></div>
                        </div>
                    @endif
                </div>

                <!-- Sidebar -->
                <div class="w-full lg:w-1/3">
                    <div class="sidebar-sticky space-y-6">

                        <!-- Contact Agent -->
                        <div class="bg-primary p-8 rounded-3xl text-white">
                            <div class="flex items-center gap-4 mb-6">
                                <div class="w-16 h-16 rounded-2xl bg-secondary flex items-center justify-center text-2xl font-black">
                                    {{ substr($listing->user->name ?? 'A', 0, 1) }}
                                </div>
                                <div>
                                    <h3 class="text-xl font-black">{{ $listing->user->name ?? 'Agent' }}</h3>
                                    <p class="text-sm text-gray-300">Property Consultant</p>
                                </div>
                            </div>

                            <form action="{{ route('listing.inquiry', $listing->slug ?? $listing->id) }}" method="POST" class="space-y-4">
                                @csrf
                                <input type="text" name="name" placeholder="Your Name" required 
                                    value="{{ auth()->check() ? auth()->user()->name : '' }}"
                                    class="w-full bg-white/10 border border-white/20 rounded-xl p-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none">
                                <input type="text" name="phone" placeholder="Phone Number" required 
                                    value="{{ auth()->check() ? auth()->user()->phone : '' }}"
                                    class="w-full bg-white/10 border border-white/20 rounded-xl p-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none">
                                <input type="email" name="email" placeholder="Email Address" required 
                                    value="{{ auth()->check() ? auth()->user()->email : '' }}"
                                    class="w-full bg-white/10 border border-white/20 rounded-xl p-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none">
                                <textarea name="message" rows="3" class="w-full bg-white/10 border border-white/20 rounded-xl p-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none resize-none">I'm interested in Ref: {{ $listing->property_reference_number }} - {{ $listing->property_title }}</textarea>

                                <button type="submit" class="w-full py-4 bg-secondary hover:bg-secondary/90 text-white font-bold rounded-xl transition-all shadow-xl shadow-secondary/20">
                                    Book a Viewing
                                </button>
                            </form>

                            <div class="mt-6 grid grid-cols-2 gap-3">
                                @php
                                    $agentPhoneRaw = $listing->user->phone_number ?? $listing->user->phone ?? '';
                                    $agentPhoneWa = preg_replace('/[^0-9]/', '', $agentPhoneRaw);
                                @endphp
                                <a href="https://wa.me/{{ $agentPhoneWa }}?text=Interested in Ref: {{ $listing->property_reference_number }} - {{ $listing->property_title }}" target="_blank" class="py-3 bg-emerald-500 rounded-xl flex items-center justify-center gap-2 text-sm font-bold hover:bg-emerald-600 transition-all">
                                    <i class="fab fa-whatsapp"></i> WhatsApp
                                </a>
                                <a href="tel:{{ $agentPhoneRaw }}" class="py-3 bg-white/10 rounded-xl flex items-center justify-center gap-2 text-sm font-bold border border-white/20 hover:bg-white/20 transition-all">
                                    <i class="fa-solid fa-phone"></i> Call
                                </a>
                            </div>
                        </div>

                        <!-- Tour Request Card -->
                        <div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm" x-data="{ tourModalOpen: false }">
                            <h3 class="text-xl font-black text-primary mb-2">Request Virtual Tour</h3>
                            <p class="text-sm text-gray-500 mb-6">See this property from the comfort of your home. Request a live video walk-through.</p>
                            <button @click="tourModalOpen = true" class="w-full py-4 border-2 border-secondary text-secondary font-bold rounded-xl hover:bg-secondary hover:text-white transition-all">
                                Request Tour
                            </button>

                            <!-- Tour Modal -->
                            <div x-show="tourModalOpen" 
                                 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"
                                 class="fixed inset-0 z-[100000] flex items-center justify-center p-4 bg-primary/60 backdrop-blur-sm"
                                 style="display: none;"
                                 x-cloak>
                                <div @click.away="tourModalOpen = false" class="bg-white w-full max-w-lg rounded-3xl shadow-2xl overflow-hidden relative">
                                    <button @click="tourModalOpen = false" class="absolute top-4 right-4 text-gray-400 hover:text-primary transition-colors">
                                        <i class="fa-solid fa-xmark text-xl"></i>
                                    </button>
                                    
                                    <div class="p-8">
                                        <div class="w-16 h-16 bg-secondary/10 rounded-2xl flex items-center justify-center text-secondary text-3xl mb-6 mx-auto">
                                            <i class="fa-solid fa-video"></i>
                                        </div>
                                        <h3 class="text-2xl font-black text-primary text-center mb-2">Virtual Tour Request</h3>
                                        <p class="text-sm text-gray-500 text-center mb-8">Fill in your details and the agent will contact you to schedule a live video viewing.</p>

                                        <form action="{{ route('listing.walkthrough', $listing->id) }}" method="POST" class="space-y-4">
                                            @csrf
                                            <input type="hidden" name="listing_type" value="public">
                                            <div class="space-y-1">
                                                <label class="text-xs font-black text-gray-400 uppercase tracking-widest pl-1">Full Name</label>
                                                <input type="text" name="name" required placeholder="John Doe"
                                                    value="{{ auth()->check() ? auth()->user()->name : '' }}"
                                                    class="w-full bg-gray-50 border border-gray-100 rounded-xl p-3.5 text-primary placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none transition-all">
                                            </div>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                <div class="space-y-1">
                                                    <label class="text-xs font-black text-gray-400 uppercase tracking-widest pl-1">Email</label>
                                                    <input type="email" name="email" required placeholder="john@example.com"
                                                        value="{{ auth()->check() ? auth()->user()->email : '' }}"
                                                        class="w-full bg-gray-50 border border-gray-100 rounded-xl p-3.5 text-primary placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none transition-all">
                                                </div>
                                                <div class="space-y-1">
                                                    <label class="text-xs font-black text-gray-400 uppercase tracking-widest pl-1">Phone</label>
                                                    <input type="text" name="phone" required placeholder="07123 456789"
                                                        value="{{ auth()->check() ? auth()->user()->phone : '' }}"
                                                        class="w-full bg-gray-50 border border-gray-100 rounded-xl p-3.5 text-primary placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none transition-all">
                                                </div>
                                            </div>
                                            <div class="space-y-1">
                                                <label class="text-xs font-black text-gray-400 uppercase tracking-widest pl-1">Preferred Time</label>
                                                <select name="preferred_time" class="w-full bg-gray-50 border border-gray-100 rounded-xl p-3.5 text-primary focus:ring-2 focus:ring-secondary outline-none transition-all">
                                                    <option value="Morning (9am - 12pm)">Morning (9am - 12pm)</option>
                                                    <option value="Afternoon (12pm - 4pm)">Afternoon (12pm - 4pm)</option>
                                                    <option value="Evening (4pm - 7pm)">Evening (4pm - 7pm)</option>
                                                    <option value="Weekend">Weekend</option>
                                                    <option value="As soon as possible">As soon as possible</option>
                                                </select>
                                            </div>
                                            <div class="space-y-1">
                                                <label class="text-xs font-black text-gray-400 uppercase tracking-widest pl-1">Message / Notes (Optional)</label>
                                                <textarea name="message" rows="3" placeholder="Any specific areas you want to see?"
                                                    class="w-full bg-gray-50 border border-gray-100 rounded-xl p-3.5 text-primary placeholder-gray-400 focus:ring-2 focus:ring-secondary outline-none transition-all resize-none"></textarea>
                                            </div>

                                            <button type="submit" class="w-full py-4 bg-primary text-white font-bold rounded-xl hover:bg-primary-dark transition-all shadow-xl shadow-primary/20 flex items-center justify-center gap-2 mt-4">
                                                <span>Confirm My Request</span>
                                                <i class="fa-solid fa-paper-plane text-xs"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Similar Properties -->
                        @if($similar_listings->count() > 0)
                            <div class="bg-white p-6 rounded-3xl border border-gray-100">
                                <h3 class="text-lg font-black text-primary mb-4">Similar Properties</h3>
                                <div class="space-y-4">
                                    @foreach($similar_listings as $s)
                                        <a href="{{ url('/property/' . ($s->slug ?? $s->id)) }}" class="flex gap-4 group">
                                            <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                                                <img src="{{ $s->thumbnail ? asset('storage/' . $s->thumbnail) : asset('assets/img/all-images/hero/1.jpg') }}" 
                                                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm font-bold text-primary line-clamp-2 group-hover:text-secondary transition-colors">{{ $s->property_title }}</p>
                                                <p class="text-lg font-black text-secondary mt-1">£{{ number_format($s->price) }}</p>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Mortgage Calculator -->
                        @if($listing->purpose === 'Buy')
                            <div class="bg-white p-6 rounded-3xl border border-gray-100">
                                <h3 class="text-lg font-black text-primary mb-4">Mortgage Calculator</h3>
                                <div class="bg-gray-50 p-4 rounded-2xl">
                                    <x-mortgage-calculator>{{ $listing->price }}</x-mortgage-calculator>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Lightbox -->
        <div id="lightbox-viewer">
            <button class="absolute top-6 right-6 w-12 h-12 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center text-white z-50 transition-colors" onclick="closeLightbox()">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
            <div class="swiper lightbox-swiper h-full">
                <div class="swiper-wrapper">
                    @foreach($allMedia as $media)
                        <div class="swiper-slide h-full flex items-center justify-center p-4">
                            @if($media['type'] === 'video')
                                <div class="w-full max-w-4xl aspect-video bg-black rounded-2xl overflow-hidden shadow-2xl mx-auto">
                                    <video controls class="w-full h-full">
                                        <source src="{{ $media['src'] }}" type="video/mp4">
                                    </video>
                                </div>
                            @else
                                <img src="{{ $media['src'] }}" class="max-h-full max-w-full object-contain rounded-2xl mx-auto block shadow-2xl">
                            @endif
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next !text-white"></div>
                <div class="swiper-button-prev !text-white"></div>
                <div class="swiper-pagination !text-white"></div>
            </div>
        </div>

@push('modals')
    <!-- External Property Detail Modal -->
    <div x-data="{ open: false, property: {} }" 
         @open-external-detail.window="open = true; property = $event.detail"
         x-show="open" 
         class="fixed inset-0 z-[100000] flex items-center justify-center p-4" 
         style="display: none; z-index: 100000 !important;"
         x-cloak>
        <!-- Overlay -->
        <div class="absolute inset-0 bg-primary/80 backdrop-blur-[2px]" @click="open = false"></div>
        
        <!-- Modal Content -->
        <div class="bg-white w-full max-w-5xl rounded-[2rem] shadow-2xl overflow-hidden relative z-10 flex flex-col md:flex-row max-h-[90vh]">
            <button @click="open = false" class="absolute top-4 right-4 w-10 h-10 bg-white shadow-lg rounded-full flex items-center justify-center text-primary z-50 hover:bg-gray-50 transition-colors">
                <i class="fa-solid fa-xmark"></i>
            </button>
            
            <!-- Left: Image Section -->
            <div class="md:w-1/2 bg-gray-100 relative min-h-[300px]">
                <template x-if="property.images && property.images.length > 0">
                    <img :src="property.images[0].url" class="absolute inset-0 w-full h-full object-cover">
                </template>
                <template x-if="!property.images || property.images.length === 0">
                    <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 gap-4">
                        <i class="fa-solid fa-image text-6xl"></i>
                        <span class="text-xs font-bold uppercase tracking-widest">No Images Available</span>
                    </div>
                </template>
            </div>
            
            <!-- Right: Content -->
            <div class="md:w-1/2 p-8 md:p-12 overflow-y-auto">
                <div class="flex items-center gap-2 mb-6">
                    <span class="bg-secondary text-white px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider" x-text="property.type"></span>
                    <span class="bg-gray-100 text-gray-600 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider" x-text="property.date"></span>
                </div>
                
                <h2 class="text-3xl font-black text-primary mb-2" x-text="property.name"></h2>
                <p class="text-gray-500 font-bold mb-8 flex items-center gap-2">
                    <i class="fa-solid fa-location-dot text-secondary"></i> <span x-text="property.location"></span>
                </p>
                
                <!-- Property Grid Stats -->
                <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
                    <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                        <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Price Paid</p>
                        <p class="text-xl font-black text-secondary">£<span x-text="new Intl.NumberFormat('en-GB').format(property.price)"></span></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                        <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Tenure</p>
                        <p class="text-xl font-black text-primary" x-text="property.tenure"></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                        <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Bedrooms</p>
                        <p class="text-xl font-black text-primary" x-text="property.bedrooms"></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                        <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Bathrooms</p>
                        <p class="text-xl font-black text-primary" x-text="property.bathrooms"></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                        <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Floor Area</p>
                        <p class="text-xl font-black text-primary" x-text="property.floor_area"></p>
                    </div>
                    <template x-if="property.council_tax && property.council_tax !== 'N/A'">
                        <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                            <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Council Tax</p>
                            <p class="text-xl font-black text-primary" x-text="property.council_tax"></p>
                        </div>
                    </template>
                    <template x-if="property.epc && property.epc !== 'N/A'">
                        <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                            <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">EPC Rating</p>
                            <p class="text-xl font-black text-primary" x-text="property.epc"></p>
                        </div>
                    </template>
                    <template x-if="property.flood_risk && property.flood_risk !== 'N/A'">
                        <div class="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                            <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Flood Risk</p>
                            <p class="text-xl font-black text-primary" x-text="property.flood_risk"></p>
                        </div>
                    </template>
                </div>
                
                <div class="mb-8">
                    <h3 class="text-sm font-black text-primary uppercase tracking-widest mb-4 border-b border-gray-100 pb-2">Description</h3>
                    <div class="text-gray-600 leading-relaxed text-sm whitespace-pre-line" x-text="property.description"></div>
                </div>
                
                <div class="flex flex-col gap-3">
                    <a :href="`{{ route('property.external-details') }}?postcode=${encodeURIComponent(property.location)}&address=${encodeURIComponent(property.name)}&search_postcode=${encodeURIComponent(property.search_postcode)}`" class="w-full py-4 bg-primary text-white font-bold rounded-2xl flex items-center justify-center gap-3 hover:bg-primary/90 transition-all shadow-xl shadow-primary/20">
                        <span>View Full Property Details</span>
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                    <p class="text-[10px] text-gray-400 text-center font-medium italic">Data fetched in real-time from PaTMa Property Prospector</p>
                </div>
            </div>
        </div>
    </div>
@endpush
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_api_key') }}&callback=initMap" async defer></script>
    <script>
        let lightboxSwiper;

        function initMap() {
            const mapEl = document.getElementById("property-map");
            if (!mapEl) return;

            const lat = parseFloat("{{ $listing->latitude }}");
            const lng = parseFloat("{{ $listing->longitude }}");

            if (!lat || !lng || isNaN(lat) || isNaN(lng)) {
                mapEl.innerHTML = '<div class="h-full flex items-center justify-center text-gray-400"><i class="fa-solid fa-map-marked-alt text-4xl"></i></div>';
                return;
            }

            const position = { lat, lng };
            const map = new google.maps.Map(mapEl, {
                zoom: 15,
                center: position,
                disableDefaultUI: true,
                zoomControl: true
            });

            new google.maps.Marker({
                position: position,
                map: map,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 10,
                    fillColor: "#8046F1",
                    fillOpacity: 1,
                    strokeWeight: 4,
                    strokeColor: "white"
                }
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            new Swiper(".mobile-swiper", {
                loop: true,
                pagination: { el: ".swiper-pagination", clickable: true }
            });

            lightboxSwiper = new Swiper(".lightbox-swiper", {
                loop: true,
                observer: true,
                observeParents: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                },
                pagination: { el: ".swiper-pagination", type: "fraction" }
            });
        });

        function openLightbox(index) {
            document.getElementById('lightbox-viewer').style.display = 'block';
            document.body.style.overflow = 'hidden';
            if (lightboxSwiper) {
                lightboxSwiper.update();
                lightboxSwiper.slideToLoop(index, 0);
            }
        }

        function closeLightbox() {
            document.getElementById('lightbox-viewer').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        async function toggleFavorite(listingId, btn) {
            @if(!auth()->check())
                window.location.href = "{{ route('login') }}";
                return;
            @endif

            try {
                const response = await fetch('{{ route('favorites.toggle') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        listing_id: listingId
                    })
                });

                const data = await response.json();
                const icon = btn.querySelector('i');

                if (data.status === 'added') {
                    btn.classList.add('text-rose-500');
                    btn.classList.remove('text-gray-300');
                    icon.classList.remove('fa-regular');
                    icon.classList.add('fa-solid');
                } else {
                    btn.classList.remove('text-rose-500');
                    btn.classList.add('text-gray-300');
                    icon.classList.remove('fa-solid');
                    icon.classList.add('fa-regular');
                }
            } catch (error) {
                console.error('Error:', error);
            }
        }

        async function fetchSoldPrices() {
            const container = document.getElementById('sold-price-history');
            if (!container) return;

            try {
                const response = await fetch('{{ route('listing.sold-prices', $listing->slug ?? $listing->id) }}');
                const data = await response.json();

                if (data.error) {
                    container.innerHTML = `<div class="p-4 bg-red-50 text-red-600 rounded-xl text-sm font-medium"><i class="fas fa-exclamation-circle mr-2"></i> ${data.error}</div>`;
                    return;
                }

                const prices = data.prices || data.data || (Array.isArray(data) ? data : null);

                if (!prices || prices.length === 0) {
                    container.innerHTML = '<div class="p-4 bg-gray-50 text-gray-500 rounded-xl text-sm font-medium text-center">No sold price history found for this postcode.</div>';
                    return;
                }

                window.soldPriceData = prices;
                
                // Enhance page with external data if internal data is missing/sparse
                const bestResult = prices[0];
                if (bestResult) {
                    // Update description if external is much longer
                    const externalDesc = bestResult.description;
                    const internalDesc = @json(strip_tags($listing->description));
                    
                    if (externalDesc && externalDesc.length > internalDesc.length + 50) {
                        const descContainer = document.querySelector('[x-data="{ expanded: false }"] .prose');
                        if (descContainer) {
                            const enhancedHtml = `
                                <div class="mb-4 bg-secondary/5 border border-secondary/20 p-4 rounded-xl flex items-center gap-3">
                                    <i class="fa-solid fa-wand-magic-sparkles text-secondary"></i>
                                    <span class="text-xs font-bold text-secondary uppercase tracking-wider text-wrap">Enhanced description found via PaTMa API</span>
                                </div>
                                <div class="whitespace-pre-line">${externalDesc}</div>
                            `;
                            // Replace the internal description logic with the enhanced one
                            descContainer.innerHTML = enhancedHtml;
                            // Hide the "See More" button since we showed the full enhanced desc
                            const seeMoreBtn = descContainer.closest('div').querySelector('button');
                            if(seeMoreBtn) seeMoreBtn.style.display = 'none';
                        }
                    }

                    // If internal gallery is empty but external has images
                    const internalGalleryCount = {{ count($allMedia) }};
                    if (internalGalleryCount <= 1 && bestResult.images && bestResult.images.length > 0) {
                         const galleryNotification = document.createElement('div');
                         galleryNotification.className = "mt-4 bg-secondary/5 border border-secondary/20 p-4 rounded-xl flex items-center gap-3";
                         galleryNotification.innerHTML = `
                            <i class="fa-solid fa-images text-secondary"></i>
                            <span class="text-xs font-bold text-secondary uppercase tracking-wider">Additional images available in the history gallery below</span>
                         `;
                         document.querySelector('.property-gallery-grid')?.after(galleryNotification);
                    }
                }

                // Responsive Layout: Table for Desktop, Cards for Mobile
                let tableHtml = `
                    <div class="hidden md:block overflow-x-auto">
                        <table class="w-full text-left">
                            <thead>
                                <tr class="border-b border-gray-100">
                                    <th class="py-3 text-xs font-black text-gray-400 uppercase tracking-wider">Property</th>
                                    <th class="py-3 text-xs font-black text-gray-400 uppercase tracking-wider text-center">Status</th>
                                    <th class="py-3 text-xs font-black text-gray-400 uppercase tracking-wider">Date</th>
                                    <th class="py-3 text-xs font-black text-gray-400 uppercase tracking-wider">Price</th>
                                    <th class="py-3 text-xs font-black text-gray-400 uppercase tracking-wider">Type</th>
                                    <th class="py-3 text-xs font-black text-gray-400 uppercase tracking-wider whitespace-nowrap text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-50">
                `;

                let cardsHtml = `<div class="md:hidden space-y-4">`;

                prices.forEach((item, index) => {
                    const date = item.date || 'N/A';
                    const price = item.price || 0;
                    const type = item.type || 'Residential';
                    const name = item.name || 'N/A';
                    const status = item.record_label || (item.is_sold ? 'SOLD' : 'Listing');
                    const statusClass = item.is_sold ? 'bg-emerald-100 text-emerald-700' : 'bg-blue-100 text-blue-700';
                    const formattedPrice = `£${new Intl.NumberFormat('en-GB').format(price)}`;

                    // Desktop Row
                    tableHtml += `
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="py-4 text-sm font-bold text-primary">
                                <div class="truncate max-w-[200px]" title="${name}">${name}</div>
                            </td>
                            <td class="py-4 text-sm text-center">
                                <span class="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${statusClass}">${status}</span>
                            </td>
                            <td class="py-4 text-sm font-bold text-gray-500">${date}</td>
                            <td class="py-4 text-sm font-black text-secondary">${formattedPrice}</td>
                            <td class="py-4 text-sm font-medium text-gray-400">${type}</td>
                            <td class="py-4 text-sm text-right">
                                <a href="{{ route('property.external-details') }}?postcode=${encodeURIComponent(item.location || '')}&address=${encodeURIComponent(item.name || '')}&search_postcode=${encodeURIComponent(item.search_postcode || '')}&lat=${item.latitude || ''}&lng=${item.longitude || ''}&record_label=${encodeURIComponent(status)}" class="inline-flex items-center gap-1 text-secondary font-bold hover:underline whitespace-nowrap bg-secondary/10 px-3 py-1.5 rounded-lg text-xs">
                                    Details <i class="fa-solid fa-arrow-right text-[10px]"></i>
                                </a>
                            </td>
                        </tr>
                    `;

                    // Mobile Card
                    cardsHtml += `
                        <div class="bg-gray-50/50 p-4 rounded-2xl border border-gray-100 space-y-3">
                            <div class="flex justify-between items-start">
                                <span class="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${statusClass}">${status}</span>
                                <span class="text-sm font-black text-secondary">${formattedPrice}</span>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-primary line-clamp-2">${name}</h4>
                                <div class="flex gap-4 mt-2">
                                    <div class="text-[10px] text-gray-400 font-bold uppercase tracking-widest leading-none border-r border-gray-200 pr-4">
                                        <p class="mb-1">Date</p>
                                        <p class="text-gray-600 text-[11px]">${date}</p>
                                    </div>
                                    <div class="text-[10px] text-gray-400 font-bold uppercase tracking-widest leading-none">
                                        <p class="mb-1">Type</p>
                                        <p class="text-gray-600 text-[11px]">${type}</p>
                                    </div>
                                </div>
                            </div>
                            <a href="{{ route('property.external-details') }}?postcode=${encodeURIComponent(item.location || '')}&address=${encodeURIComponent(item.name || '')}&search_postcode=${encodeURIComponent(item.search_postcode || '')}&lat=${item.latitude || ''}&lng=${item.longitude || ''}&record_label=${encodeURIComponent(status)}" 
                                class="w-full py-2.5 bg-white border border-gray-200 text-secondary font-bold rounded-xl text-xs flex items-center justify-center gap-2 hover:bg-gray-50 transition-colors">
                                View Full Records <i class="fa-solid fa-arrow-right text-[10px]"></i>
                            </a>
                        </div>
                    `;
                });

                tableHtml += '</tbody></table></div>';
                cardsHtml += '</div>';
                
                container.innerHTML = cardsHtml + tableHtml;

            } catch (error) {
                console.error('Error fetching sold prices:', error);
                container.innerHTML = '<div class="p-4 bg-red-50 text-red-600 rounded-xl text-sm font-medium"><i class="fas fa-exclamation-circle mr-2"></i> Failed to connect to property data service.</div>';
            }
        }

        // Removed automatic DOMContentLoaded fetch to trigger on dropdown click
    </script>
@endpush