@extends('layouts.landingPage.template')

@php
    $gallery = $property['gallery'] ?? [];
    $heroImage = $gallery[0]['url'] ?? null;
    $secondaryGallery = collect($gallery)->slice(1, 2)->values()->all();
    $map = $property['map'] ?? [];
    $mapMarker = $map['marker_position'] ?? null;
    $mapMarkerLat = is_numeric($mapMarker['lat'] ?? null) ? (float) $mapMarker['lat'] : null;
    $mapMarkerLng = is_numeric($mapMarker['lng'] ?? null) ? (float) $mapMarker['lng'] : null;
    $googleMapsUrl = $mapMarkerLat !== null && $mapMarkerLng !== null
        ? 'https://www.google.com/maps/dir/?api=1&destination='.$mapMarkerLat.','.$mapMarkerLng.'&travelmode=driving'
        : null;
    $calculator = $property['financing_calculator'] ?? ['enabled' => false, 'plans' => []];
    $defaultCalculatorPlan =
        collect($calculator['plans'] ?? [])->firstWhere('id', $calculator['default_plan_id'] ?? null) ??
        collect($calculator['plans'] ?? [])->first();
@endphp

@section('title',
    ($property['title'] ?? 'Propiedad') .
    ' | ' .
    ($landing['brand']['full'] ??
    'Fraccionamientos
    Colima'))

@section('extra-styles')
    <style>
        .property-map-shell {
            background:
                radial-gradient(circle at top left, rgba(19, 127, 236, 0.18), transparent 36%),
                linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
        }

        .property-map-status {
            transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
        }

        .property-map-status [data-map-status-dot] {
            transition: background-color 180ms ease, box-shadow 180ms ease;
        }

        .property-map-status[data-tone='loading'] {
            background-color: rgba(255, 251, 235, 0.94);
            border-color: rgba(245, 158, 11, 0.28);
            color: #b45309;
        }

        .dark .property-map-status[data-tone='loading'] {
            background-color: rgba(120, 53, 15, 0.45);
            border-color: rgba(245, 158, 11, 0.24);
            color: #fde68a;
        }

        .property-map-status[data-tone='loading'] [data-map-status-dot] {
            background-color: #f59e0b;
        }

        .property-map-status[data-tone='ready'] {
            background-color: rgba(255, 255, 255, 0.94);
            border-color: rgba(148, 163, 184, 0.28);
            color: #334155;
        }

        .dark .property-map-status[data-tone='ready'] {
            background-color: rgba(15, 23, 42, 0.88);
            border-color: rgba(148, 163, 184, 0.18);
            color: #e2e8f0;
        }

        .property-map-status[data-tone='ready'] [data-map-status-dot] {
            background-color: #137fec;
        }

        .property-map-status[data-tone='live'] {
            background-color: rgba(236, 253, 245, 0.96);
            border-color: rgba(16, 185, 129, 0.28);
            color: #047857;
        }

        .dark .property-map-status[data-tone='live'] {
            background-color: rgba(6, 95, 70, 0.45);
            border-color: rgba(52, 211, 153, 0.24);
            color: #a7f3d0;
        }

        .property-map-status[data-tone='live'] [data-map-status-dot] {
            background-color: #10b981;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
            animation: property-map-pulse 1.8s infinite;
        }

        .property-map-status[data-tone='error'] {
            background-color: rgba(255, 241, 242, 0.96);
            border-color: rgba(244, 63, 94, 0.24);
            color: #be123c;
        }

        .dark .property-map-status[data-tone='error'] {
            background-color: rgba(136, 19, 55, 0.4);
            border-color: rgba(251, 113, 133, 0.24);
            color: #fecdd3;
        }

        .property-map-status[data-tone='error'] [data-map-status-dot] {
            background-color: #f43f5e;
        }

        @keyframes property-map-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.42);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }
    </style>
@endsection

@section('main-content')
    <section class="border-b border-slate-200 bg-white/80 py-6 dark:border-slate-800 dark:bg-slate-950/50">
        <div class="mx-auto flex max-w-7xl flex-col gap-4 px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
                @foreach ($property['breadcrumbs'] as $breadcrumb)
                    @if (!$loop->last)
                        <a class="transition-colors hover:text-primary"
                            href="{{ $breadcrumb['url'] }}">{{ $breadcrumb['label'] }}</a>
                        <span>/</span>
                    @else
                        <span class="font-semibold text-slate-700 dark:text-slate-200">{{ $breadcrumb['label'] }}</span>
                    @endif
                @endforeach
            </div>
            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div>
                    <a class="inline-flex items-center gap-2 text-sm font-semibold text-primary transition-colors hover:text-primary-dark"
                        href="{{ route('propertyList') }}">
                        <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                        Volver al inventario
                    </a>
                    <h1 class="mt-3 text-4xl font-black tracking-tight text-slate-900 dark:text-white">
                        {{ $property['headline'] }}
                    </h1>
                    <p class="mt-3 max-w-3xl text-base text-slate-500 dark:text-slate-400">
                        {{ $property['description'] }}
                    </p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <span
                        class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.25em] text-primary">
                        {{ $property['primary_badge'] }}
                    </span>
                    @if ($property['secondary_badge'])
                        <span
                            class="inline-flex items-center rounded-full px-4 py-2 text-xs font-bold uppercase tracking-[0.25em] {{ $property['secondary_badge_class'] }}">
                            {{ $property['secondary_badge'] }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <section class="py-10">
        <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
            <div class="lg:col-span-7">
                <div
                    class="overflow-hidden rounded-[1.75rem] border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <div class="grid gap-3 p-3 md:grid-cols-[minmax(0,2fr)_minmax(220px,1fr)]">
                        <div
                            class="relative min-h-[420px] overflow-hidden rounded-[1.35rem] bg-slate-100 dark:bg-slate-800">
                            <img alt="{{ $property['title'] }}" class="h-full w-full object-cover"
                                src="{{ $heroImage }}" />
                            <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950/75 to-transparent p-6">
                                <p class="text-xs font-bold uppercase tracking-[0.3em] text-white/70">
                                    {{ $property['development']['name'] }}
                                </p>
                                <p class="mt-2 text-3xl font-black text-white">{{ $property['price_formatted'] }}</p>
                                <p class="mt-2 text-sm text-white/80">{{ $property['location_label'] }}</p>
                            </div>
                        </div>
                        <div class="grid gap-3">
                            @foreach ($secondaryGallery as $image)
                                <div
                                    class="relative min-h-[204px] overflow-hidden rounded-[1.25rem] bg-slate-100 dark:bg-slate-800">
                                    <img alt="{{ $image['alt'] }}" class="h-full w-full object-cover"
                                        src="{{ $image['url'] }}" />
                                    <div
                                        class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950/75 to-transparent px-4 py-3 text-xs font-semibold text-white/85">
                                        {{ $image['caption'] }}
                                    </div>
                                </div>
                            @endforeach

                            @if ($secondaryGallery === [])
                                <div
                                    class="flex min-h-[204px] items-center justify-center rounded-[1.25rem] border border-dashed border-slate-300 bg-slate-50 px-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-800/70 dark:text-slate-400">
                                    Galería en construcción. La ficha ya usa el inventario y la ubicación real del lote.
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                    @foreach ($property['metrics'] as $metric)
                        <div
                            class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                            <div class="flex items-center gap-3">
                                <span
                                    class="material-symbols-outlined rounded-2xl bg-primary/10 p-3 text-primary">{{ $metric['icon'] }}</span>
                                <div>
                                    <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Dato</p>
                                    <p class="mt-1 text-lg font-bold text-slate-900 dark:text-white">{{ $metric['value'] }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div
                    class="mt-8 rounded-[1.75rem] border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                        <div>
                            <span class="text-sm font-bold uppercase tracking-[0.25em] text-primary">Ficha del lote</span>
                            <h2 class="mt-3 text-2xl font-black text-slate-900 dark:text-white">Ubicación, medidas y
                                contexto comercial</h2>
                            <p class="mt-3 max-w-2xl text-sm leading-7 text-slate-500 dark:text-slate-400">
                                {{ $property['development_description'] }}
                            </p>
                        </div>
                        <span
                            class="inline-flex w-fit items-center rounded-full px-4 py-2 text-xs font-bold uppercase tracking-[0.22em] {{ $property['development']['status_badge_class'] }}">
                            {{ $property['development']['status_label'] }}
                        </span>
                    </div>

                    <div class="mt-6 grid gap-4 md:grid-cols-2">
                        <div class="rounded-2xl bg-slate-50 p-5 dark:bg-slate-800/80">
                            <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Lote</p>
                            <p class="mt-2 text-xl font-bold text-slate-900 dark:text-white">{{ $property['lot_label'] }}
                            </p>
                            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $property['block_label'] }}</p>
                        </div>
                        <div class="rounded-2xl bg-slate-50 p-5 dark:bg-slate-800/80">
                            <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Disponibilidad</p>
                            <p class="mt-2 text-xl font-bold text-slate-900 dark:text-white">
                                {{ number_format($property['inventory']['available_lots']) }} lotes disponibles
                            </p>
                            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                                de {{ number_format($property['inventory']['total_lots']) }} publicados en
                                {{ $property['development']['name'] }}
                            </p>
                        </div>
                    </div>

                    @if ($calculator['enabled'] ?? false)
                        <div class="mt-6 rounded-[1.5rem] border border-primary/10 bg-primary/5 p-5 dark:border-primary/20 dark:bg-primary/10"
                            id="property-finance-calculator">
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                                <div>
                                    <p class="text-xs font-bold uppercase tracking-[0.24em] text-primary">
                                        Simulador financiero
                                    </p>
                                    <h3 class="mt-2 text-xl font-black text-slate-900 dark:text-white">
                                        Calcula tu mensualidad
                                    </h3>
                                    <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500 dark:text-slate-400">
                                        Ajusta el enganche para estimar la mensualidad del lote con el plan seleccionado.
                                    </p>
                                </div>
                                <span
                                    class="inline-flex w-fit items-center rounded-full bg-white px-3 py-1 text-[11px] font-bold uppercase tracking-[0.22em] text-primary shadow-sm dark:bg-slate-900 dark:text-primary">
                                    Estimado
                                </span>
                            </div>

                            <div class="mt-5 grid gap-4 md:grid-cols-2">
                                <div>
                                    <label class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400"
                                        for="property-finance-plan">
                                        Plan de pago
                                    </label>
                                    @if (count($calculator['plans'] ?? []) > 1)
                                        <select id="property-finance-plan"
                                            class="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-colors focus:border-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                                            @foreach ($calculator['plans'] as $plan)
                                                <option value="{{ $plan['id'] }}" @selected((int) $plan['id'] === (int) ($calculator['default_plan_id'] ?? 0))>
                                                    {{ $plan['name'] }} · {{ $plan['financing_months'] }} meses
                                                </option>
                                            @endforeach
                                        </select>
                                    @else
                                        <div
                                            class="mt-2 flex h-12 items-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                                            <span id="property-finance-plan-name">
                                                {{ $defaultCalculatorPlan['name'] ?? 'Financiamiento disponible' }}
                                                ·
                                                {{ $defaultCalculatorPlan['financing_months'] ?? 0 }} meses
                                            </span>
                                        </div>
                                    @endif
                                </div>
                                <div>
                                    <label class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400"
                                        for="property-finance-down-payment">
                                        Enganche
                                    </label>
                                    <input id="property-finance-down-payment" type="number" min="0" step="100"
                                        value="{{ $defaultCalculatorPlan['default_down_payment_value'] ?? 0 }}"
                                        class="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-colors focus:border-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" />
                                    <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">
                                        Mínimo requerido:
                                        <span class="font-semibold text-slate-700 dark:text-slate-200"
                                            id="property-finance-minimum">
                                            {{ $defaultCalculatorPlan['minimum_down_payment_formatted'] ?? 'MX$0.00' }}
                                        </span>
                                    </p>
                                </div>
                            </div>

                            <div class="mt-5 grid gap-3 sm:grid-cols-3">
                                <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
                                    <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Precio total</p>
                                    <p class="mt-2 text-lg font-black text-slate-900 dark:text-white"
                                        id="property-finance-total">
                                        {{ $defaultCalculatorPlan['total_price_formatted'] ?? $property['price_formatted'] }}
                                    </p>
                                </div>
                                <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
                                    <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Plazo</p>
                                    <p class="mt-2 text-lg font-black text-slate-900 dark:text-white"
                                        id="property-finance-months">
                                        {{ $defaultCalculatorPlan['financing_months'] ?? 0 }} meses
                                    </p>
                                </div>
                                <div class="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
                                    <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">
                                        Mensualidad estimada
                                    </p>
                                    <p class="mt-2 text-lg font-black text-primary" id="property-finance-monthly">
                                        {{ $defaultCalculatorPlan['default_monthly_payment_formatted'] ?? 'MX$0.00' }}
                                    </p>
                                </div>
                            </div>

                            <p class="mt-4 text-xs leading-6 text-slate-500 dark:text-slate-400">
                                La simulación toma el enganche mínimo del plan por default y recalcula una mensualidad
                                estimada sobre el saldo restante.
                            </p>
                        </div>
                    @endif

                    @if ($property['amenities'] !== [])
                        <div class="mt-6">
                            <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Amenidades del
                                desarrollo</p>
                            <div class="mt-4 flex flex-wrap gap-3">
                                @foreach ($property['amenities'] as $amenity)
                                    <div
                                        class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
                                        <span
                                            class="material-symbols-outlined text-[18px] text-primary">{{ $amenity['icon'] }}</span>
                                        {{ $amenity['name'] }}
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <aside class="lg:col-span-5">
                <div class="lg:sticky lg:top-24">
                    <div
                        class="rounded-[1.75rem] border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <p class="text-sm font-bold uppercase tracking-[0.25em] text-primary">Resumen comercial</p>
                        <div class="mt-5 flex items-start justify-between gap-4">
                            <div>
                                <p class="text-4xl font-black tracking-tight text-slate-900 dark:text-white">
                                    {{ $property['price_formatted'] }}</p>
                                <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
                                    {{ $property['price_per_sqm_formatted'] ?: 'Precio por m2 disponible con asesor.' }}
                                </p>
                            </div>
                            <span
                                class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.22em] text-emerald-600 dark:text-emerald-400">
                                {{ $property['status_label'] }}
                            </span>
                        </div>

                        <div class="mt-6 space-y-4">
                            <div class="rounded-2xl bg-slate-50 p-4 dark:bg-slate-800/80">
                                <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Ubicacion</p>
                                <p class="mt-2 text-sm font-semibold text-slate-900 dark:text-white">
                                    {{ $property['location_label'] }}</p>
                            </div>
                            <div class="rounded-2xl bg-slate-50 p-4 dark:bg-slate-800/80">
                                <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Superficie</p>
                                <p class="mt-2 text-sm font-semibold text-slate-900 dark:text-white">
                                    {{ $property['area_label'] }}</p>
                            </div>
                            <div class="rounded-2xl bg-slate-50 p-4 dark:bg-slate-800/80">
                                <p class="text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Galeria</p>
                                <p class="mt-2 text-sm font-semibold text-slate-900 dark:text-white">
                                    {{ number_format($property['gallery_count']) }} vistas cargadas</p>
                            </div>
                        </div>

                        <div class="mt-7 flex flex-col gap-3">
                            <a class="inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-primary text-sm font-bold text-white shadow-lg shadow-primary/20 transition-colors hover:bg-primary-dark"
                                href="{{ $property['contact_url'] }}" rel="noreferrer" target="_blank">
                                <span class="material-symbols-outlined text-[18px]">chat</span>
                                Solicitar asesoria por WhatsApp
                            </a>
                            <a class="inline-flex h-12 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-700 transition-colors hover:border-primary hover:text-primary dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200"
                                href="{{ $property['call_url'] }}">
                                <span class="material-symbols-outlined text-[18px]">call</span>
                                Llamar a la oficina
                            </a>
                        </div>
                    </div>

                    <div
                        class="property-map-shell mt-6 overflow-hidden rounded-[1.75rem] p-1.5 shadow-xl shadow-slate-950/10">
                        <div class="rounded-[1.45rem] bg-white/95 p-6 backdrop-blur dark:bg-slate-950/95">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="text-sm font-bold uppercase tracking-[0.25em] text-primary">Mapa del lote</p>
                                    <h2 class="mt-2 text-2xl font-black text-slate-900 dark:text-white">ubicación
                                        exacta</h2>
                                </div>
                                <span
                                    class="inline-flex items-center rounded-full bg-slate-900 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.22em] text-white dark:bg-slate-100 dark:text-slate-900">
                                    {{ $property['development']['name'] }}
                                </span>
                            </div>

                            <div
                                class="mt-5 overflow-hidden rounded-[1.4rem] border border-slate-200 bg-slate-100 dark:border-slate-800 dark:bg-slate-900">
                                <div class="relative" id="property-map-frame">
                                    <div class="h-[460px] w-full" id="property-map"></div>

                                    <div class="absolute left-4 top-4">
                                        <div id="property-map-status"
                                            class="property-map-status inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold shadow-sm backdrop-blur"
                                            data-tone="loading">
                                            <span data-map-status-dot class="h-2.5 w-2.5 rounded-full"></span>
                                            <span data-map-status-label>Cargando mapa del lote...</span>
                                        </div>
                                    </div>

                                    <div class="absolute right-4 top-4 flex flex-col items-end gap-2">
                                        <button id="property-map-fullscreen" type="button"
                                            class="inline-flex items-center gap-2 rounded-full bg-white/90 px-4 py-2 text-xs font-semibold text-slate-700 shadow-sm transition-colors hover:bg-white dark:bg-slate-900/90 dark:text-slate-200 dark:hover:bg-slate-900">
                                            <span data-fullscreen-icon
                                                class="material-symbols-outlined text-[16px] text-primary">open_in_full</span>
                                            <span data-fullscreen-label>Expandir mapa</span>
                                        </button>
                                        <button id="property-map-user-location" type="button" hidden
                                            class="inline-flex items-center gap-2 rounded-full bg-white/90 px-4 py-2 text-xs font-semibold text-slate-700 shadow-sm transition-colors hover:bg-white dark:bg-slate-900/90 dark:text-slate-200 dark:hover:bg-slate-900">
                                            <span
                                                class="material-symbols-outlined text-[16px] text-primary">my_location</span>
                                            <span data-user-location-label>Activar tiempo real</span>
                                        </button>
                                    </div>

                                    <div
                                        class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-slate-950/45 to-transparent">
                                    </div>
                                </div>
                            </div>

                            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                                <div class="rounded-2xl bg-slate-50 p-4 dark:bg-slate-800/80">
                                    <div class="flex items-center gap-3">
                                        <span
                                            class="material-symbols-outlined rounded-full bg-primary/10 p-2 text-primary">place</span>
                                        <div>
                                            <p class="text-sm font-bold text-slate-900 dark:text-white">Pin exacto</p>
                                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                                Usa la coordenada del lote o el centro del polígono cuando falte
                                                lat/lng.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="rounded-2xl bg-slate-50 p-4 dark:bg-slate-800/80">
                                    <div class="flex items-center gap-3">
                                        <span
                                            class="material-symbols-outlined rounded-full bg-emerald-500/10 p-2 text-emerald-600 dark:text-emerald-400">near_me</span>
                                        <div>
                                            <p class="text-sm font-bold text-slate-900 dark:text-white">Tiempo real</p>
                                            <p class="text-xs text-slate-500 dark:text-slate-400"
                                                id="property-map-live-copy">
                                                Activa tu ubicación para ver tu posición en vivo y trazar la ruta hasta
                                                el lote.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 flex flex-wrap items-center gap-3">
                                @if ($googleMapsUrl)
                                    <a id="property-map-google-maps"
                                        class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-semibold text-slate-700 transition-colors hover:border-primary hover:text-primary dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200"
                                        href="{{ $googleMapsUrl }}" rel="noreferrer" target="_blank">
                                        <span class="material-symbols-outlined text-[16px] text-primary">route</span>
                                        Abrir ruta en Google Maps
                                    </a>
                                @endif

                                <p class="text-xs leading-6 text-slate-500 dark:text-slate-400">
                                    El mapa usa las coordenadas reales del lote y, si autorizas tu geolocalización,
                                    sigue tu posición mientras mantienes abierta la ficha.
                                </p>
                            </div>
                        </div>
                    </div>
            </aside>
        </div>
    </section>
@endsection

@section('extra-scripts')
    <script>
        (() => {
            const calculatorConfig = @json($calculator);
            const root = document.getElementById('property-finance-calculator');

            if (!root || !calculatorConfig?.enabled) {
                return;
            }

            const plans = Array.isArray(calculatorConfig.plans) ? calculatorConfig.plans : [];
            const planSelect = document.getElementById('property-finance-plan');
            const downPaymentInput = document.getElementById('property-finance-down-payment');
            const minimumLabel = document.getElementById('property-finance-minimum');
            const totalLabel = document.getElementById('property-finance-total');
            const monthsLabel = document.getElementById('property-finance-months');
            const monthlyLabel = document.getElementById('property-finance-monthly');
            const singlePlanLabel = document.getElementById('property-finance-plan-name');
            const moneyFormatter = new Intl.NumberFormat('es-MX', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
            });

            const formatMoney = (amount) => `MX$${moneyFormatter.format(Number(amount || 0))}`;
            const resolvePlan = (planId) => plans.find((plan) => Number(plan.id) === Number(planId)) || plans[0] ||
                null;
            const sanitizedAmount = (value, plan) => {
                const numericValue = Number.parseFloat(`${value ?? ''}`.replaceAll(',', ''));

                if (!Number.isFinite(numericValue) || !plan) {
                    return Number(plan?.minimum_down_payment_value || 0);
                }

                return Math.min(
                    Number(plan.total_price_value || 0),
                    Math.max(Number(plan.minimum_down_payment_value || 0), numericValue),
                );
            };

            const renderPlan = (syncInput = false) => {
                const plan = resolvePlan(planSelect?.value ?? calculatorConfig.default_plan_id);

                if (!plan) {
                    return;
                }

                const downPayment = sanitizedAmount(downPaymentInput?.value, plan);
                const months = Math.max(Number(plan.financing_months || 0), 1);
                const remainingBalance = Math.max(Number(plan.total_price_value || 0) - downPayment, 0);
                const monthlyPayment = remainingBalance / months;

                if (singlePlanLabel) {
                    singlePlanLabel.textContent = `${plan.name} · ${plan.financing_months} meses`;
                }

                if (downPaymentInput) {
                    downPaymentInput.min = `${plan.minimum_down_payment_value || 0}`;
                    downPaymentInput.max = `${plan.total_price_value || 0}`;

                    if (syncInput) {
                        downPaymentInput.value = `${downPayment.toFixed(2)}`;
                    }
                }

                if (minimumLabel) {
                    minimumLabel.textContent = plan.minimum_down_payment_formatted || formatMoney(plan
                        .minimum_down_payment_value);
                }

                if (totalLabel) {
                    totalLabel.textContent = plan.total_price_formatted || formatMoney(plan.total_price_value);
                }

                if (monthsLabel) {
                    monthsLabel.textContent = `${plan.financing_months} meses`;
                }

                if (monthlyLabel) {
                    monthlyLabel.textContent = formatMoney(monthlyPayment);
                }
            };

            planSelect?.addEventListener('change', () => renderPlan(true));
            downPaymentInput?.addEventListener('input', () => renderPlan(false));
            downPaymentInput?.addEventListener('change', () => renderPlan(true));

            renderPlan(true);
        })();

        function colorByStatus(status) {
            const normalizedStatus = String(status || '').trim().toLowerCase();

            if (normalizedStatus === 'vendido') {
                return '#e74c3c';
            }

            if (normalizedStatus === 'apartado' || normalizedStatus === 'reservado') {
                return '#f1c40f';
            }

            return '#2ecc71';
        }

        function normalizeLookupValue(value) {
            return String(value || '')
                .replace(/\s+/g, '')
                .toLowerCase();
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');
        }

        window.initMap = async function() {
            const container = document.getElementById('property-map');
            const mapFrame = document.getElementById('property-map-frame');
            const status = document.getElementById('property-map-status');
            const statusLabel = status?.querySelector('[data-map-status-label]');
            const userLocationButton = document.getElementById('property-map-user-location');
            const userLocationLabel = userLocationButton?.querySelector('[data-user-location-label]');
            const liveCopy = document.getElementById('property-map-live-copy');
            const googleMapsLink = document.getElementById('property-map-google-maps');
            const fullscreenButton = document.getElementById('property-map-fullscreen');
            const mapConfig = @json($map);
            const mapLots = Array.isArray(mapConfig.lot_snapshots) ? mapConfig.lot_snapshots : [];
            const propertyConfig =
                {{ \Illuminate\Support\Js::from([
                    'id' => $property['id'],
                    'title' => $property['title'],
                    'lot_label' => $property['lot_label'],
                    'block_label' => $property['block_label'],
                    'development_name' => $property['development']['name'],
                    'status_label' => $property['status_label'],
                    'price_formatted' => $property['price_formatted'],
                    'area_label' => $property['area_label'],
                    'detail_url' => route('propertyDetails', ['id' => $property['id']]),
                ]) }};

            const setStatus = (label, tone = 'ready') => {
                if (status) {
                    status.dataset.tone = tone;
                }

                if (statusLabel) {
                    statusLabel.textContent = label;
                }
            };

            const setLiveCopy = (label) => {
                if (liveCopy) {
                    liveCopy.textContent = label;
                }
            };

            const setUserLocationButtonState = ({
                hidden = false,
                disabled = false,
                label = 'Activar tiempo real',
            } = {}) => {
                if (!userLocationButton) {
                    return;
                }

                userLocationButton.hidden = hidden;
                userLocationButton.disabled = disabled;
                userLocationButton.classList.toggle('opacity-60', disabled);
                userLocationButton.classList.toggle('cursor-not-allowed', disabled);

                if (userLocationLabel) {
                    userLocationLabel.textContent = label;
                }
            };

            if (!container || typeof google === 'undefined' || typeof google.maps === 'undefined') {
                setStatus('Mapa no disponible en este momento.', 'error');
                setLiveCopy('No se pudo iniciar Google Maps para esta propiedad.');

                return;
            }

            const geolocationSupported = typeof navigator !== 'undefined' && 'geolocation' in navigator;

            if (geolocationSupported) {
                setUserLocationButtonState({
                    hidden: false,
                    disabled: false,
                    label: 'Activar tiempo real',
                });
            } else {
                setUserLocationButtonState({
                    hidden: true,
                });
                setLiveCopy('Tu navegador no soporta geolocalización en tiempo real.');
            }

            const toLatLng = (point) => {
                if (!point || point.lat === undefined || point.lng === undefined) {
                    return null;
                }

                const lat = Number(point.lat);
                const lng = Number(point.lng);

                if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
                    return null;
                }

                return {
                    lat,
                    lng,
                };
            };

            const featureDisplayValue = (feature, keys) => {
                for (const key of keys) {
                    const value = feature.getProperty(key);

                    if (value !== null && value !== undefined && String(value).trim() !== '') {
                        return String(value).trim();
                    }
                }

                return '';
            };

            const featureBounds = (feature) => {
                const bounds = new google.maps.LatLngBounds();
                feature.getGeometry()?.forEachLatLng((latLng) => bounds.extend(latLng));

                return bounds;
            };

            const selectedFeatureId = normalizeLookupValue(mapConfig.highlight_feature_id);
            const selectedFeatureIndex = Number.isInteger(mapConfig.highlight_feature_index) ? mapConfig
                .highlight_feature_index : null;
            const lotNumber = normalizeLookupValue(mapConfig.lot_number);
            const blockNumber = normalizeLookupValue(mapConfig.block_number);
            const featureIndexMap = new Map();
            const developmentCenter = toLatLng(mapConfig.development_center) ?? toLatLng(mapConfig
                .marker_position) ?? {
                lat: 19.2433,
                lng: -103.7241,
            };
            const markerPosition = toLatLng(mapConfig.marker_position) ?? developmentCenter;
            const priceFormatter = new Intl.NumberFormat('es-MX', {
                style: 'currency',
                currency: 'MXN',
                maximumFractionDigits: 2,
            });

            const map = new google.maps.Map(container, {
                center: developmentCenter,
                zoom: 18,
                mapId: 'Mapa_Fraccionamiento',
                mapTypeId: 'satellite',
                streetViewControl: false,
                fullscreenControl: false,
                mapTypeControl: false,
            });

            const infoWindow = new google.maps.InfoWindow();
            const fullBounds = new google.maps.LatLngBounds();
            let selectedFeature = null;
            let selectedBounds = null;
            let activeFeature = null;
            let userMarker = null;
            let userAccuracyCircle = null;
            let userLocationWatchId = null;
            let latestUserPosition = null;
            let hasCenteredOnUser = false;

            const buildGoogleMapsUrl = (origin = null) => {
                if (!markerPosition) {
                    return null;
                }

                const params = new URLSearchParams({
                    api: '1',
                    destination: `${markerPosition.lat},${markerPosition.lng}`,
                    travelmode: 'driving',
                });

                if (origin) {
                    params.set('origin', `${origin.lat},${origin.lng}`);
                }

                return `https://www.google.com/maps/dir/?${params.toString()}`;
            };

            const syncGoogleMapsLink = () => {
                if (!googleMapsLink) {
                    return;
                }

                const routeUrl = buildGoogleMapsUrl(latestUserPosition);

                if (!routeUrl) {
                    googleMapsLink.hidden = true;

                    return;
                }

                googleMapsLink.hidden = false;
                googleMapsLink.href = routeUrl;
            };

            const formatPriceLabel = (value, fallback = 'Precio a consultar') => {
                if (value === null || value === undefined || value === '') {
                    return fallback;
                }

                const numericValue = Number.parseFloat(String(value).replace(/[^0-9.-]/g, ''));

                if (!Number.isFinite(numericValue)) {
                    return String(value);
                }

                return priceFormatter.format(numericValue);
            };

            const featureMatchesSelection = (feature, index) => {
                if (selectedFeatureId !== '') {
                    const candidateValues = [
                        feature.getId(),
                        feature.getProperty('id'),
                        feature.getProperty('feature_id'),
                        feature.getProperty('geojson_feature_id'),
                    ].map((value) => normalizeLookupValue(value));

                    if (candidateValues.includes(selectedFeatureId)) {
                        return true;
                    }
                }

                if (selectedFeatureIndex !== null && index === selectedFeatureIndex) {
                    return true;
                }

                const featureLot = normalizeLookupValue(featureDisplayValue(feature, ['lote', 'lot',
                    'numero_lote'
                ]));
                const featureBlock = normalizeLookupValue(featureDisplayValue(feature, ['manzana', 'block',
                    'numero_manzana'
                ]));

                return lotNumber !== '' && featureLot === lotNumber && (blockNumber === '' || featureBlock ===
                    blockNumber);
            };

            const findLotSnapshot = (feature) => {
                const featureIndex = featureIndexMap.get(feature);
                const featureLot = normalizeLookupValue(featureDisplayValue(feature, ['lote', 'lot',
                    'numero_lote'
                ]));
                const featureBlock = normalizeLookupValue(featureDisplayValue(feature, ['manzana', 'block',
                    'numero_manzana'
                ]));
                const featureIdCandidates = [
                    feature.getId(),
                    feature.getProperty('id'),
                    feature.getProperty('feature_id'),
                    feature.getProperty('geojson_feature_id'),
                ].map((value) => normalizeLookupValue(value)).filter((value) => value !== '');

                return mapLots.find((candidateLot) => {
                    const candidateFeatureId = normalizeLookupValue(candidateLot.geojson_feature_id);

                    if (candidateFeatureId !== '' && featureIdCandidates.includes(candidateFeatureId)) {
                        return true;
                    }

                    if (Number.isInteger(candidateLot.geojson_index) && Number.isInteger(
                            featureIndex) && candidateLot
                        .geojson_index === featureIndex) {
                        return true;
                    }

                    const candidateLotNumber = normalizeLookupValue(candidateLot.lot_number);
                    const candidateBlockNumber = normalizeLookupValue(candidateLot.block_number);

                    if (candidateLotNumber === '' || candidateLotNumber !== featureLot) {
                        return false;
                    }

                    if (candidateBlockNumber === '' || featureBlock === '') {
                        return true;
                    }

                    return candidateBlockNumber === featureBlock;
                }) ?? null;
            };

            const buildInfoHtml = (feature, matchedLot = null) => {
                const lote = matchedLot?.lot_number || featureDisplayValue(feature, ['lote', 'lot',
                        'numero_lote'
                    ]) ||
                    propertyConfig.lot_label;
                const manzana = matchedLot?.block_number || featureDisplayValue(feature, ['manzana', 'block',
                    'numero_manzana'
                ]);
                const superficie = matchedLot?.area_label || featureDisplayValue(feature, ['m2', 'area',
                    'superficie'
                ]) || propertyConfig.area_label;
                const estatus = matchedLot?.status_label || featureDisplayValue(feature, ['estatus', 'status',
                    'estado'
                ]) || propertyConfig.status_label || 'Disponible';
                const precio = matchedLot?.price_formatted || formatPriceLabel(featureDisplayValue(feature, [
                    'precio',
                    'price',
                ]), propertyConfig.price_formatted);
                const detailUrl = matchedLot?.detail_url || propertyConfig.detail_url;
                const actionHtml = detailUrl ?
                    `<a href="${escapeHtml(detailUrl)}" style="margin-top:10px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#137fec;padding:8px 12px;font-size:12px;font-weight:700;color:#ffffff;text-decoration:none">Ver detalle</a>` :
                    '';

                return `
                    <div style="font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-width:220px">
                        <div style="font-weight:700;margin-bottom:6px">Lote ${escapeHtml(lote)} ${manzana ? `- Manzana ${escapeHtml(manzana)}` : ''}</div>
                        <div><b>Estatus:</b> ${escapeHtml(estatus)}</div>
                        ${superficie ? `<div><b>m²:</b> ${escapeHtml(superficie)}</div>` : ''}
                        ${precio ? `<div><b>Precio:</b> ${escapeHtml(precio)}</div>` : ''}
                        ${actionHtml}
                    </div>
                `;
            };

            const applyFeatureStyles = () => {
                map.data.setStyle((feature) => {
                    const matchedLot = findLotSnapshot(feature);
                    const featureStatus = featureDisplayValue(feature, ['estatus', 'status',
                            'estado'
                        ]) || matchedLot
                        ?.status_label;
                    const fillColor = colorByStatus(featureStatus);
                    const isSelected = selectedFeature === feature;
                    const isActive = activeFeature === feature;

                    return {
                        fillColor,
                        fillOpacity: isSelected ? 0.5 : isActive ? 0.42 : 0.35,
                        strokeColor: isSelected ? '#0f172a' : fillColor,
                        strokeOpacity: 0.95,
                        strokeWeight: isSelected ? 3.5 : isActive ? 2.5 : 2,
                        clickable: true,
                    };
                });
            };

            const focusPrimaryContext = () => {
                if (selectedBounds && !selectedBounds.isEmpty()) {
                    map.fitBounds(selectedBounds, 64);

                    return;
                }

                if (!fullBounds.isEmpty()) {
                    map.fitBounds(fullBounds, 64);

                    return;
                }

                if (markerPosition) {
                    map.setCenter(markerPosition);
                    map.setZoom(18);
                }
            };

            const focusLiveContext = (padding = 96) => {
                if (!latestUserPosition) {
                    focusPrimaryContext();

                    return;
                }

                const bounds = new google.maps.LatLngBounds();
                bounds.extend(latestUserPosition);

                if (selectedBounds && !selectedBounds.isEmpty()) {
                    bounds.union(selectedBounds);
                } else if (markerPosition) {
                    bounds.extend(markerPosition);
                }

                if (userAccuracyCircle?.getBounds && userAccuracyCircle.getBounds()) {
                    bounds.union(userAccuracyCircle.getBounds());
                }

                if (bounds.isEmpty()) {
                    map.setCenter(latestUserPosition);
                    map.setZoom(17);

                    return;
                }

                map.fitBounds(bounds, padding);
                google.maps.event.addListenerOnce(map, 'idle', () => {
                    const zoom = map.getZoom();

                    if (typeof zoom === 'number' && zoom > 18) {
                        map.setZoom(18);
                    }
                });
            };

            const setMarker = (position, title) => {
                if (!position) {
                    return null;
                }

                if (google.maps.marker?.AdvancedMarkerElement) {
                    return new google.maps.marker.AdvancedMarkerElement({
                        map,
                        position,
                        title,
                    });
                }

                return new google.maps.Marker({
                    map,
                    position,
                    title,
                });
            };

            const buildUserMarkerContent = () => {
                const marker = document.createElement('div');
                marker.style.width = '18px';
                marker.style.height = '18px';
                marker.style.borderRadius = '999px';
                marker.style.background = '#137fec';
                marker.style.border = '3px solid #ffffff';
                marker.style.boxShadow = '0 8px 18px rgba(19, 127, 236, 0.35)';

                return marker;
            };

            const updateUserMarker = (position) => {
                if (google.maps.marker?.AdvancedMarkerElement) {
                    if (!userMarker) {
                        userMarker = new google.maps.marker.AdvancedMarkerElement({
                            map,
                            position,
                            title: 'Tu ubicacion en tiempo real',
                            content: buildUserMarkerContent(),
                        });
                    } else {
                        userMarker.position = position;
                        userMarker.map = map;
                    }

                    return;
                }

                if (!userMarker) {
                    userMarker = new google.maps.Marker({
                        map,
                        position,
                        title: 'Tu ubicacion en tiempo real',
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            scale: 8,
                            fillColor: '#137fec',
                            fillOpacity: 1,
                            strokeColor: '#ffffff',
                            strokeWeight: 3,
                        },
                    });
                } else {
                    userMarker.setPosition(position);
                    userMarker.setMap(map);
                }
            };

            const updateAccuracyCircle = (position, accuracy) => {
                if (!Number.isFinite(accuracy) || accuracy <= 0) {
                    return;
                }

                if (!userAccuracyCircle) {
                    userAccuracyCircle = new google.maps.Circle({
                        map,
                        strokeColor: '#137fec',
                        strokeOpacity: 0.28,
                        strokeWeight: 1,
                        fillColor: '#137fec',
                        fillOpacity: 0.12,
                    });
                }

                userAccuracyCircle.setCenter(position);
                userAccuracyCircle.setRadius(accuracy);
            };

            const syncFullscreenButton = () => {
                if (!fullscreenButton) {
                    return;
                }

                const isFullscreen = document.fullscreenElement === mapFrame;
                const icon = fullscreenButton.querySelector('[data-fullscreen-icon]');
                const label = fullscreenButton.querySelector('[data-fullscreen-label]');

                fullscreenButton.setAttribute('aria-pressed', isFullscreen ? 'true' : 'false');

                if (icon) {
                    icon.textContent = isFullscreen ? 'close_fullscreen' : 'open_in_full';
                }

                if (label) {
                    label.textContent = isFullscreen ? 'Cerrar mapa' : 'Expandir mapa';
                }
            };

            const toggleFullscreen = async () => {
                if (!mapFrame) {
                    return;
                }

                try {
                    if (document.fullscreenElement === mapFrame) {
                        await document.exitFullscreen();
                    } else {
                        await mapFrame.requestFullscreen();
                    }
                } catch (error) {
                    console.error('No se pudo cambiar a pantalla completa.', error);
                }
            };

            const geolocationErrorMessage = (error) => {
                switch (error?.code) {
                    case 1:
                        return 'No se autorizo el acceso a tu ubicacion.';
                    case 2:
                        return 'No fue posible obtener tu ubicacion actual.';
                    case 3:
                        return 'La ubicacion tardo demasiado en responder.';
                    default:
                        return 'No se pudo activar tu ubicacion en tiempo real.';
                }
            };

            const resetMapReadyMessage = (message = null) => {
                if (latestUserPosition) {
                    return;
                }

                setStatus(message ?? (geolocationSupported ?
                    'Mapa listo. Puedes activar tu ubicacion en tiempo real.' :
                    'Mapa listo para explorar el lote.'), 'ready');

                if (geolocationSupported) {
                    setLiveCopy('Activa tu ubicacion para ver tu posicion en vivo y abrir la ruta hasta el lote.');
                }
            };

            const startUserLocationTracking = () => {
                if (!geolocationSupported) {
                    setStatus('Tu navegador no soporta geolocalizacion.', 'error');

                    return;
                }

                if (!window.isSecureContext && !['localhost', '127.0.0.1'].includes(window.location.hostname)) {
                    setStatus('La ubicacion en tiempo real requiere HTTPS.', 'error');
                    setLiveCopy('Abre la landing en un contexto seguro para usar tu geolocalizacion.');

                    return;
                }

                if (userLocationWatchId !== null) {
                    focusLiveContext();
                    setStatus('Ubicacion en tiempo real activa.', 'live');

                    return;
                }

                setStatus('Solicitando permiso para tu ubicacion...', 'loading');
                setLiveCopy('Acepta el permiso del navegador para mostrar tu posicion en vivo respecto al lote.');
                setUserLocationButtonState({
                    hidden: false,
                    disabled: true,
                    label: 'Activando...',
                });

                userLocationWatchId = navigator.geolocation.watchPosition(
                    (position) => {
                        latestUserPosition = {
                            lat: Number(position.coords.latitude),
                            lng: Number(position.coords.longitude),
                        };

                        updateUserMarker(latestUserPosition);
                        updateAccuracyCircle(latestUserPosition, Number(position.coords.accuracy || 0));
                        setUserLocationButtonState({
                            hidden: false,
                            disabled: false,
                            label: 'Centrar mi ubicacion',
                        });
                        setStatus('Ubicacion en tiempo real activa.', 'live');
                        setLiveCopy('Tu posicion se actualiza en vivo mientras mantengas abierta esta pagina.');
                        syncGoogleMapsLink();

                        if (!hasCenteredOnUser) {
                            focusLiveContext();
                            hasCenteredOnUser = true;
                        }
                    },
                    (error) => {
                        if (userLocationWatchId !== null) {
                            navigator.geolocation.clearWatch(userLocationWatchId);
                            userLocationWatchId = null;
                        }

                        setUserLocationButtonState({
                            hidden: false,
                            disabled: false,
                            label: 'Reintentar ubicacion',
                        });

                        const message = geolocationErrorMessage(error);
                        setStatus(message, 'error');
                        setLiveCopy(message);
                        syncGoogleMapsLink();
                    },
                    {
                        enableHighAccuracy: true,
                        maximumAge: 10000,
                        timeout: 15000,
                    },
                );
            };

            syncGoogleMapsLink();
            setStatus('Cargando mapa del lote...', 'loading');

            try {
                setMarker(markerPosition, mapConfig.marker_label);

                if (mapConfig.geojson_url) {
                    const response = await fetch(mapConfig.geojson_url, {
                        headers: {
                            Accept: 'application/geo+json',
                        },
                    });

                    if (!response.ok) {
                        throw new Error('GeoJSON no disponible');
                    }

                    const geojson = await response.json();
                    const features = map.data.addGeoJson(geojson);

                    features.forEach((feature, index) => {
                        featureIndexMap.set(feature, index);
                        const bounds = featureBounds(feature);

                        if (!bounds.isEmpty()) {
                            fullBounds.union(bounds);
                        }

                        if (featureMatchesSelection(feature, index)) {
                            selectedFeature = feature;
                            selectedBounds = bounds;
                        }
                    });

                    applyFeatureStyles();
                    focusPrimaryContext();

                    if (selectedFeature && selectedBounds && !selectedBounds.isEmpty()) {
                        infoWindow.setContent(buildInfoHtml(selectedFeature, findLotSnapshot(selectedFeature)));
                        infoWindow.setPosition(selectedBounds.getCenter());
                        infoWindow.open(map);
                    }

                    map.data.addListener('click', (event) => {
                        activeFeature = event.feature;
                        applyFeatureStyles();
                        infoWindow.setContent(buildInfoHtml(event.feature, findLotSnapshot(event.feature)));
                        infoWindow.setPosition(event.latLng);
                        infoWindow.open(map);
                    });

                    resetMapReadyMessage();
                } else if (markerPosition) {
                    map.setCenter(markerPosition);
                    map.setZoom(18);
                    resetMapReadyMessage('Mapa listo. Mostrando la coordenada exacta del lote.');
                } else {
                    resetMapReadyMessage('Mapa listo. No hay coordenadas exactas del lote.');
                }
            } catch (error) {
                console.error('No se pudo cargar GeoJSON', error);

                if (markerPosition) {
                    map.setCenter(markerPosition);
                    map.setZoom(18);
                    resetMapReadyMessage('Mostrando la coordenada del lote mientras se carga el plano.');
                } else {
                    setStatus('No se pudo cargar la huella del desarrollo.', 'error');
                    setLiveCopy('El plano del fraccionamiento no estuvo disponible en este momento.');
                }
            }

            if (userLocationButton) {
                userLocationButton.addEventListener('click', startUserLocationTracking);
            }

            if (fullscreenButton) {
                fullscreenButton.addEventListener('click', toggleFullscreen);
                syncFullscreenButton();
            }

            document.addEventListener('fullscreenchange', () => {
                syncFullscreenButton();

                window.setTimeout(() => {
                    google.maps.event.trigger(map, 'resize');

                    if (latestUserPosition) {
                        focusLiveContext();
                    } else {
                        focusPrimaryContext();
                    }
                }, 180);
            });

            window.addEventListener('beforeunload', () => {
                if (userLocationWatchId !== null) {
                    navigator.geolocation.clearWatch(userLocationWatchId);
                }
            });

            infoWindow.addListener('closeclick', () => {
                activeFeature = null;
                applyFeatureStyles();
            });
        };
    </script>
    <script async
        src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key', '') }}&callback=initMap&v=weekly&libraries=marker"
        defer></script>
@endsection