@extends('layouts.dashboard.inface', ['section' => 'developments'])

@section('extra-styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .material-symbols-outlined.fill {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
@endsection

@section('content')
    @php
        $salesImportReport = session('salesImportReport');
        $salesImportWarnings = collect($salesImportReport['warnings'] ?? []);
        $salesImportErrors = collect($salesImportReport['errors'] ?? []);
        $formatMoney = static fn ($value, string $currency = 'MXN') => $value !== null && $value !== ''
            ? '$'.number_format((float) $value, 2).' '.$currency
            : 'No definido';
        $formatBool = static fn ($value) => $value === null ? 'No definido' : ($value ? 'Si' : 'No');
        $priceModeLabels = [
            'per_sqm' => 'Por m²',
            'fixed' => 'Precio fijo',
            'range' => 'Rango',
        ];
        $dateText = static fn ($value) => filled($value) ? (string) $value : 'Sin definir';
        $isExternal = ($development['availability_source'] ?? 'internal') === 'external';
        $promotionId = data_get($development, 'promotion_contexts.0.promotion_id');
    @endphp
    <div class="flex-1 overflow-y-auto p-8 scroll-smooth">
        <div class="max-w-[1200px] mx-auto space-y-6">
            <!-- Page Header -->
            <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
                <div class="space-y-2">
                    <div class="flex items-center gap-3">
                        <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">
                            {{ $development['name'] }}</h1>
                        <span
                            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset {{ $isExternal ? 'bg-amber-100 text-amber-800 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400' : 'bg-emerald-100 text-emerald-800 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400' }}">
                            {{ $isExternal ? 'Promoción externa' : ($development['status']['name'] ?? 'Estatus sin definir') }}
                        </span>
                    </div>
                    <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
                        <span class="material-symbols-outlined text-[18px]">location_on</span>
                        <p>{{ $development['address'] }}</p>
                    </div>
                    @if ($development['isStage'] ?? false)
                        <a href="{{ route('realEstate.developmentStages.index', ['development' => $development['parentDevelopment']['id']]) }}"
                            class="inline-flex items-center gap-1 text-sm font-bold text-primary hover:underline">
                            <span class="material-symbols-outlined !text-[17px]">account_tree</span>
                            {{ $development['parentDevelopment']['name'] }} / {{ $development['stage']['name'] }}
                        </a>
                    @endif
                </div>
                <div class="flex flex-wrap items-center gap-3">
                    @unless ($development['isStage'] ?? false)
                        <a href="{{ route('realEstate.developmentStages.index', ['development' => $development['id']]) }}"
                            class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-slate-800 px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-200 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <span class="material-symbols-outlined text-[18px]">account_tree</span>
                            Etapas ({{ count($development['stages'] ?? []) }})
                        </a>
                    @endunless
                    @if ($isExternal && $promotionId && (($development['can_manage_catalog'] ?? false) || ($development['can_manage_promotion'] ?? false)))
                        <a href="{{ route('realEstate.developmentPromotions.edit', ['promotion' => $promotionId]) }}"
                            class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-slate-800 px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-200 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <span class="material-symbols-outlined text-[18px]">edit</span>
                            {{ $development['can_manage_catalog'] ?? false ? 'Administrar ficha' : 'Editar promoción' }}
                        </a>
                    @elseif (!$isExternal && ($development['can_manage_inventory'] ?? false))
                        <a href="{{ route('realEstate.development.edit', ['id' => $development['id']]) }}"
                            class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-slate-800 px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-200 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <span class="material-symbols-outlined text-[18px]">edit</span>
                            Editar
                        </a>
                        <button type="button" onclick="window.Livewire?.dispatch('open-lot-create-panel')"
                            class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors">
                            <span class="material-symbols-outlined text-[18px]">add</span>
                            Nuevo lote
                        </button>
                    @endif
                </div>
            </div>
            @if ($isExternal)
                <div class="rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4 text-amber-900 dark:border-amber-900/60 dark:bg-amber-900/20 dark:text-amber-200">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined mt-0.5">sync</span>
                        <div>
                            <p class="font-black">Inventario controlado externamente</p>
                            <p class="mt-1 text-sm leading-6">Los modelos y características son informativos. Confirma precios y disponibilidad con {{ $development['developer']['name'] ?? 'el desarrollador' }} antes de presentar una propuesta.</p>
                            @if (!empty($development['availability']['url']))
                                <a href="{{ $development['availability']['url'] }}" target="_blank" rel="noopener"
                                    class="mt-2 inline-flex items-center gap-1 text-sm font-bold underline">
                                    Consultar disponibilidad
                                    <span class="material-symbols-outlined !text-[16px]">open_in_new</span>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
            @if (!($development['isStage'] ?? false) && !empty($development['stages']))
                <section 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 justify-between gap-4">
                        <div>
                            <p class="text-xs font-black uppercase tracking-wide text-primary">Configuración independiente</p>
                            <h2 class="mt-1 text-lg font-black text-slate-900 dark:text-white">Etapas del proyecto</h2>
                        </div>
                        <a href="{{ route('realEstate.developmentStages.index', ['development' => $development['id']]) }}"
                            class="text-sm font-bold text-primary hover:underline">
                            {{ ($development['can_manage_inventory'] ?? false) || ($development['can_manage_catalog'] ?? false) ? 'Administrar etapas' : 'Ver etapas' }}
                        </a>
                    </div>
                    <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach (array_slice($development['stages'], 0, 6) as $stage)
                            @if ($stage['is_active'])
                                <a href="{{ route('realEstate.development.show', ['id' => $stage['stage_development_id']]) }}"
                                    class="rounded-xl border border-slate-200 p-4 transition hover:border-primary hover:bg-primary/5 dark:border-slate-700">
                            @else
                                <div class="rounded-xl border border-slate-200 bg-slate-50 p-4 opacity-70 dark:border-slate-700 dark:bg-slate-800/50">
                            @endif
                                <div class="flex items-center justify-between gap-2">
                                    <span class="text-xs font-black text-primary">{{ $stage['code'] }}</span>
                                    <span class="text-xs font-bold {{ $stage['is_active'] ? 'text-emerald-600' : 'text-slate-400' }}">{{ $stage['is_active'] ? 'Activa' : 'Inactiva' }}</span>
                                </div>
                                <p class="mt-2 font-black text-slate-900 dark:text-white">{{ $stage['name'] }}</p>
                                <p class="mt-1 text-xs text-slate-500">{{ $stage['models_count'] }} modelos · {{ $stage['availability_label'] }}</p>
                            @if ($stage['is_active'])
                                </a>
                            @else
                                </div>
                            @endif
                        @endforeach
                    </div>
                </section>
            @endif
            @if (session('success') || $salesImportReport || $errors->has('sales_file'))
                <div class="space-y-3">
                    @if (session('success'))
                        <div
                            class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm font-medium text-emerald-700 shadow-sm">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->has('sales_file'))
                        <div
                            class="rounded-2xl border border-rose-200 bg-rose-50 px-5 py-4 text-sm font-medium text-rose-700 shadow-sm">
                            {{ $errors->first('sales_file') }}
                        </div>
                    @endif

                    @if ($salesImportReport)
                        <section
                            class="rounded-2xl border border-slate-200 bg-white px-5 py-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                                <div class="space-y-1">
                                    <p class="text-xs font-bold uppercase tracking-[0.2em] text-primary">Importacion de
                                        ventas</p>
                                    <h2 class="text-lg font-black text-slate-900 dark:text-white">
                                        Hoja procesada: {{ $salesImportReport['sheet_name'] ?? 'Resumen' }}
                                    </h2>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">
                                        Se detectaron {{ $salesImportReport['rows_detected'] ?? 0 }} filas y se prepararon
                                        {{ $salesImportReport['rows_prepared'] ?? 0 }} registros para importar.
                                    </p>
                                </div>
                                <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                                    <div class="rounded-xl bg-slate-50 px-4 py-3 dark:bg-slate-800/70">
                                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Ventas</p>
                                        <p class="mt-1 text-2xl font-black text-slate-900 dark:text-white">
                                            {{ $salesImportReport['created_sales'] ?? 0 }}</p>
                                    </div>
                                    <div class="rounded-xl bg-slate-50 px-4 py-3 dark:bg-slate-800/70">
                                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Pagos
                                            Hist.</p>
                                        <p class="mt-1 text-2xl font-black text-slate-900 dark:text-white">
                                            {{ $salesImportReport['created_historical_payments'] ?? 0 }}</p>
                                    </div>
                                    <div class="rounded-xl bg-slate-50 px-4 py-3 dark:bg-slate-800/70">
                                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Omitidas</p>
                                        <p class="mt-1 text-2xl font-black text-slate-900 dark:text-white">
                                            {{ $salesImportReport['skipped_rows'] ?? 0 }}</p>
                                    </div>
                                    <div class="rounded-xl bg-slate-50 px-4 py-3 dark:bg-slate-800/70">
                                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Duplicadas
                                        </p>
                                        <p class="mt-1 text-2xl font-black text-slate-900 dark:text-white">
                                            {{ $salesImportReport['duplicate_rows_collapsed'] ?? 0 }}</p>
                                    </div>
                                </div>
                            </div>

                            @if ($salesImportWarnings->isNotEmpty())
                                <div class="mt-5 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-4">
                                    <p class="text-sm font-bold text-amber-800">Advertencias</p>
                                    <ul class="mt-2 space-y-2 text-sm text-amber-700">
                                        @foreach ($salesImportWarnings->take(6) as $warning)
                                            <li>{{ $warning }}</li>
                                        @endforeach
                                        @if ($salesImportWarnings->count() > 6)
                                            <li>Y {{ $salesImportWarnings->count() - 6 }} advertencias más.</li>
                                        @endif
                                    </ul>
                                </div>
                            @endif

                            @if ($salesImportErrors->isNotEmpty())
                                <div class="mt-5 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4">
                                    <p class="text-sm font-bold text-rose-800">Filas con error</p>
                                    <ul class="mt-2 space-y-2 text-sm text-rose-700">
                                        @foreach ($salesImportErrors->take(8) as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                        @if ($salesImportErrors->count() > 8)
                                            <li>Y {{ $salesImportErrors->count() - 8 }} errores más.</li>
                                        @endif
                                    </ul>
                                </div>
                            @endif
                        </section>
                    @endif
                </div>
            @endif
            <!-- Tabs -->
            <div class="border-b border-slate-200 dark:border-slate-800">
                <nav aria-label="Tabs" class="-mb-px flex space-x-8">
                    <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                        href="#overview">
                        General
                    </a>
                    @unless ($isExternal)
                        <a aria-current="page"
                            class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                            href="#inventory">
                            Inventario
                        </a>
                        <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                            href="#pricing">
                            Precios &amp; Reglas
                        </a>
                    @endunless
                    <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                        href="#amenities">
                        Amenidades
                    </a>
                    <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                        href="#map">
                        Mapa
                    </a>
                </nav>
            </div>
            <!-- Content Grid -->
            <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                <!-- LEFT COLUMN (Main Content) -->
                <div class="xl:col-span-2 space-y-6">
                    <!-- Overview / Gallery Section (Collapsed/Mini view for inventory page focus) -->
                    <section
                        class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden"
                        id="overview">
                        @if ($development['frontPage'])
                            <div class="relative h-48 sm:h-64 w-full">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-6">
                                </div>
                                <img alt="Luxury modern residential complex exterior at sunset"
                                    class="w-full h-full object-cover"
                                    data-alt="Modern residential building facade with sunset"
                                    src="{{ $development['frontPage']['image'] }}" />
                                <div class="absolute bottom-4 left-4 z-20 text-white">
                                    <h2 class="text-xl font-bold">{{ $development['frontPage']['title'] }}</h2>
                                    <p class="text-sm text-white/90">{{ $development['frontPage']['subtitle'] }}</p>
                                </div>
                            </div>
                        @endif

                        @if ($isExternal)
                            <div class="grid gap-3 border-t border-slate-100 p-6 dark:border-slate-800 sm:grid-cols-3">
                                <div>
                                    <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Disponibilidad</p>
                                    <p class="mt-1 font-black text-amber-700 dark:text-amber-400">Consultar</p>
                                </div>
                                <div>
                                    <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Modelos publicados</p>
                                    <p class="mt-1 font-black text-slate-900 dark:text-white">{{ count($development['unitModels'] ?? []) }}</p>
                                </div>
                                <div>
                                    <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Fuente</p>
                                    <p class="mt-1 font-black text-slate-900 dark:text-white">Desarrollador externo</p>
                                </div>
                            </div>
                        @else
                        <div
                            class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4 divide-x divide-slate-100 dark:divide-slate-700">
                            <button
                                class="rounded-xl px-2 py-2 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/60"
                                onclick="window.Livewire?.dispatch('development-lotes-status-filter', { statusFilter: 'all' }); document.getElementById('inventory')?.scrollIntoView({ behavior: 'smooth', block: 'start' });"
                                type="button">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Lotes Totales</p>
                                <p class="mt-1 text-2xl font-bold text-slate-900 dark:text-white">
                                    {{ $development['loteStatuses']['total'] }}</p>
                            </button>
                            <button
                                class="rounded-xl px-4 py-2 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/60"
                                onclick="window.Livewire?.dispatch('development-lotes-status-filter', { statusFilter: 'available' }); document.getElementById('inventory')?.scrollIntoView({ behavior: 'smooth', block: 'start' });"
                                type="button">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Disponibles</p>
                                <p class="mt-1 text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                                    {{ $development['loteStatuses']['availables'] }}
                                </p>
                            </button>
                            <button
                                class="rounded-xl px-4 py-2 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/60"
                                onclick="window.Livewire?.dispatch('development-lotes-status-filter', { statusFilter: 'hold' }); document.getElementById('inventory')?.scrollIntoView({ behavior: 'smooth', block: 'start' });"
                                type="button">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Apartados</p>
                                <p class="mt-1 text-2xl font-bold text-amber-500 dark:text-amber-400">
                                    {{ $development['loteStatuses']['hold'] }}</p>
                            </button>
                            <button
                                class="rounded-xl px-4 py-2 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/60"
                                onclick="window.Livewire?.dispatch('development-lotes-status-filter', { statusFilter: 'sold' }); document.getElementById('inventory')?.scrollIntoView({ behavior: 'smooth', block: 'start' });"
                                type="button">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Vendidos</p>
                                <p class="mt-1 text-2xl font-bold text-rose-500 dark:text-rose-400">
                                    {{ $development['loteStatuses']['sold'] }}</p>
                            </button>
                        </div>
                        @endif
                    </section>
                    <!-- Inventory Section -->
                    <section
                        class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-6">
                        <div class="flex items-center gap-2 text-slate-900 dark:text-white">
                            <span class="material-symbols-outlined text-primary">info</span>
                            <h3 class="text-lg font-bold">Información general</h3>
                        </div>
                        <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
                            <div class="rounded-xl bg-slate-50 p-4 dark:bg-slate-800/60">
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tipo</p>
                                <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                                    {{ $development['developmentType']['name'] ?? 'No definido' }}
                                </p>
                            </div>
                            <div class="rounded-xl bg-slate-50 p-4 dark:bg-slate-800/60">
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Sucursal</p>
                                <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                                    {{ $development['branch']['name'] ?? 'No definida' }}
                                </p>
                                <p class="mt-1 text-xs text-slate-500">{{ $development['branch']['agency'] ?? '' }}</p>
                            </div>
                            <div class="rounded-xl bg-slate-50 p-4 dark:bg-slate-800/60">
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Inicio</p>
                                <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                                    {{ $dateText($development['startDate'] ?? null) }}
                                </p>
                            </div>
                            <div class="rounded-xl bg-slate-50 p-4 dark:bg-slate-800/60">
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Fin</p>
                                <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                                    {{ $dateText($development['endDate'] ?? null) }}
                                </p>
                            </div>
                        </div>
                        @if (!empty($development['description']) || !empty($development['fullDescription']))
                            <div class="mt-5 space-y-4 text-sm leading-6 text-slate-600 dark:text-slate-300">
                                @if (!empty($development['description']))
                                    <p>{{ $development['description'] }}</p>
                                @endif
                                @if (!empty($development['fullDescription']))
                                    <p>{{ $development['fullDescription'] }}</p>
                                @endif
                            </div>
                        @endif
                    </section>

                    @if ($isExternal)
                        <section class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900" id="models">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary">holiday_village</span>
                                <h3 class="text-lg font-black text-slate-900 dark:text-white">Modelos disponibles</h3>
                            </div>
                            <div class="mt-5 grid gap-4 sm:grid-cols-2">
                                @forelse ($development['unitModels'] ?? [] as $model)
                                    <article class="rounded-xl border border-slate-200 p-4 dark:border-slate-700">
                                        <h4 class="font-black text-slate-900 dark:text-white">{{ $model['name'] }}</h4>
                                        @if ($model['description'])
                                            <p class="mt-1 text-sm leading-5 text-slate-500">{{ $model['description'] }}</p>
                                        @endif
                                        <div class="mt-3 flex flex-wrap gap-2 text-xs font-semibold text-slate-600 dark:text-slate-300">
                                            @if ($model['bedrooms'] !== null)<span class="rounded-full bg-slate-100 px-2.5 py-1 dark:bg-slate-800">{{ $model['bedrooms'] }} recámaras</span>@endif
                                            @if ($model['bathrooms'] !== null)<span class="rounded-full bg-slate-100 px-2.5 py-1 dark:bg-slate-800">{{ $model['bathrooms'] }} baños</span>@endif
                                            @if ($model['construction_sqm'] !== null)<span class="rounded-full bg-slate-100 px-2.5 py-1 dark:bg-slate-800">{{ number_format($model['construction_sqm'], 1) }} m²</span>@endif
                                        </div>
                                        <p class="mt-4 text-sm font-black text-slate-900 dark:text-white">
                                            {{ $model['price'] !== null ? $formatMoney($model['price'], $model['currency'] ?? 'MXN') : 'Precio por consultar' }}
                                        </p>
                                    </article>
                                @empty
                                    <p class="text-sm text-slate-500 sm:col-span-2">El desarrollador aún no ha publicado modelos.</p>
                                @endforelse
                            </div>
                        </section>
                    @else
                        <livewire:real-estate.developments.lotes.lotes-table :development="$development" />
                    @endif
                    <!-- Map Section -->
                    <section class="mt-8" id="map">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">{{ $isExternal ? 'Ubicación' : 'Master Plan' }}</h3>
                        <div
                            class="relative w-full aspect-video bg-slate-100 dark:bg-slate-800 rounded-xl overflow-hidden group">
                            <div id="mapa" class="absolute inset-0 bg-cover bg-center opacity-80 transition-transform"
                                data-alt="Blueprint or map of the residential development"
                                data-location="{{ $development['address'] }}">

                            </div>
                        </div>
                    </section>
                </div>
                <!-- RIGHT COLUMN (Sidebar Details) -->
                <div class="space-y-6">
                    <section
                        class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-6">
                        <div class="flex items-center gap-2 mb-4 text-slate-900 dark:text-white">
                            <span class="material-symbols-outlined text-primary">sell</span>
                            <h3 class="text-lg font-bold">Comercial</h3>
                        </div>
                        <div class="space-y-3 text-sm">
                            <div class="flex items-center justify-between gap-4">
                                <span class="text-slate-500">Moneda</span>
                                <span class="font-bold text-slate-900 dark:text-white">{{ $development['pricing']['currency'] ?? 'MXN' }}</span>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <span class="text-slate-500">Modo de precio</span>
                                <span class="font-bold text-slate-900 dark:text-white">
                                    {{ $priceModeLabels[$development['pricing']['priceMode'] ?? 'per_sqm'] ?? ($development['pricing']['priceMode'] ?? 'No definido') }}
                                </span>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <span class="text-slate-500">Precio mínimo</span>
                                <span class="font-bold text-slate-900 dark:text-white">
                                    {{ $formatMoney($development['pricing']['minPrice'] ?? null, $development['pricing']['currency'] ?? 'MXN') }}
                                </span>
                            </div>
                        </div>
                        @if (!empty($development['pricing']['pricingNote']))
                            <p class="mt-4 rounded-xl bg-slate-50 p-3 text-xs leading-5 text-slate-500 dark:bg-slate-800/60">
                                {{ $development['pricing']['pricingNote'] }}
                            </p>
                        @endif
                    </section>

                    <section
                        class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-6">
                        <div class="flex items-center gap-2 mb-4 text-slate-900 dark:text-white">
                            <span class="material-symbols-outlined text-primary">gavel</span>
                            <h3 class="text-lg font-bold">Legal</h3>
                        </div>
                        <div class="space-y-3 text-sm">
                            <div class="flex items-center justify-between gap-4">
                                <span class="text-slate-500">Régimen</span>
                                <span class="font-bold text-slate-900 dark:text-white">{{ $development['legal']['propertyRegime'] ?: 'No definido' }}</span>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <span class="text-slate-500">Escritura</span>
                                <span class="font-bold text-slate-900 dark:text-white">{{ $formatBool($development['legal']['deedAvailable'] ?? null) }}</span>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <span class="text-slate-500">Contrato</span>
                                <span class="font-bold text-slate-900 dark:text-white">{{ $development['legal']['contractType'] ?: 'No definido' }}</span>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <span class="text-slate-500">Notariado</span>
                                <span class="font-bold text-slate-900 dark:text-white">{{ $formatBool($development['legal']['notaryCertified'] ?? null) }}</span>
                            </div>
                        </div>
                        @if (!empty($development['legal']['notes']))
                            <p class="mt-4 rounded-xl bg-slate-50 p-3 text-xs leading-5 text-slate-500 dark:bg-slate-800/60">
                                {{ $development['legal']['notes'] }}
                            </p>
                        @endif
                    </section>

                    @if (!empty($development['locationReferences']))
                        <section
                            class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-6">
                            <div class="flex items-center gap-2 mb-3 text-slate-900 dark:text-white">
                                <span class="material-symbols-outlined text-primary">near_me</span>
                                <h3 class="text-lg font-bold">Referencias</h3>
                            </div>
                            <p class="text-sm leading-6 text-slate-600 dark:text-slate-300">
                                {{ $development['locationReferences'] }}
                            </p>
                        </section>
                    @endif

                    @unless ($isExternal)
                        @include('realEstates.fraccionamientos.details.components.financial_dashboard')
                    @endunless
                    <!-- Pricing Card -->
                    @if (!$isExternal && $development['loteTypes'])
                        @include('realEstates.fraccionamientos.details.components.price_rules', [
                            'loteTypes' => $development['loteTypes'],
                        ])
                    @endif

                    <!-- Amenities -->
                    @include('realEstates.fraccionamientos.details.components.amenities', [
                        'amenities' => $development['amenities'],
                    ])
                </div>
            </div>

        </div>
        <footer
            class="max-w-[1200px] mx-auto mt-12 py-6 border-t border-slate-200 dark:border-slate-800 text-center text-sm text-slate-400">
            © 2023 Real Estate CRM. All rights reserved.
        </footer>
    </div>

    @unless ($isExternal)
    <div class="fixed inset-0 z-[9999] hidden items-center justify-center p-4 isolate modal-overlay" id="importModal"
        role="dialog" aria-modal="true" aria-labelledby="salesImportModalTitle">
        <div class="absolute inset-0 bg-slate-950/40 backdrop-blur-sm" onclick="closeImportModal()"></div>
        <form method="POST" enctype="multipart/form-data"
            action="{{ route('realEstate.development.sales.import', ['id' => $development['id']]) }}"
            class="relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-surface-light shadow-2xl dark:border-slate-700 dark:bg-surface-dark">
            @csrf
            <div class="flex items-center justify-between border-b border-slate-100 p-6 dark:border-slate-800">
                <div class="flex items-center gap-3">
                    <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
                        <span class="material-symbols-outlined text-emerald-600">upload_file</span>
                    </div>
                    <div>
                        <h3 id="salesImportModalTitle" class="text-xl font-bold text-slate-900 dark:text-white">
                            Importar Ventas
                        </h3>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Se tomara la hoja resumen del Excel
                            para crear las ventas y ajustar su saldo actual.</p>
                    </div>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"
                    onclick="closeImportModal()">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="p-8">
                @if ($errors->has('sales_file'))
                    <div
                        class="mb-5 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700">
                        {{ $errors->first('sales_file') }}
                    </div>
                @endif

                <input id="salesImportFile" type="file" name="sales_file" class="hidden"
                    accept=".xlsx,.csv,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">

                <button id="salesImportDropzone" type="button"
                    class="group flex w-full flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50/50 p-10 text-center transition-all hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800/30 dark:hover:bg-slate-800/50">
                    <div
                        class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-sm transition-transform group-hover:scale-110 dark:bg-slate-700">
                        <span class="material-symbols-outlined text-3xl text-primary">description</span>
                    </div>
                    <h4 class="mb-2 text-lg font-bold text-slate-900 dark:text-white">Selecciona tu archivo de
                        ventas</h4>
                    <p class="mb-4 max-w-xs text-sm text-slate-500 dark:text-slate-400">
                        Se permiten archivos .xlsx o .csv de hasta 10MB. El importador usa la hoja resumen con
                        columnas como lote, propietario, mensualidad, precio total, enganche y restante.
                    </p>
                    <span
                        class="rounded-lg bg-primary px-6 py-2.5 font-bold text-white shadow-lg shadow-primary/20 transition-colors group-hover:bg-primary-dark">
                        Seleccionar archivo
                    </span>
                </button>

                <div
                    class="mt-4 rounded-xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-700 dark:bg-slate-800/60">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Archivo seleccionado</p>
                    <p id="salesImportFileName" class="mt-1 text-sm font-medium text-slate-900 dark:text-white">
                        Ningun archivo seleccionado.</p>
                </div>

                <div class="mt-8 rounded-xl border border-primary/10 bg-primary/5 p-4">
                    <div class="flex items-center justify-between gap-4">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-primary">download</span>
                            <div>
                                <p class="text-sm font-bold text-slate-900 dark:text-white">¿Necesitas una
                                    plantilla base?</p>
                                <p class="text-xs text-slate-500 dark:text-slate-400">Descarga un CSV con el
                                    formato mínimo soportado.</p>
                            </div>
                        </div>
                        <a class="flex items-center gap-1 text-sm font-bold text-primary hover:underline"
                            href="{{ route('realEstate.development.sales.template') }}">
                            Descargar
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-3 bg-slate-50 p-6 dark:bg-slate-800/50">
                <button type="button"
                    class="px-6 py-2.5 text-sm font-bold text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
                    onclick="closeImportModal()">
                    Cancelar
                </button>
                <button id="salesImportSubmit" type="submit"
                    class="cursor-not-allowed rounded-xl bg-slate-900 px-8 py-2.5 font-bold text-white opacity-50 shadow-lg transition-all dark:bg-slate-100 dark:text-slate-900"
                    disabled>
                    Subir y Procesar
                </button>
            </div>
        </form>
    </div>
    @endunless
@endsection



@section('extra-scripts')
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key', '') }}&callback=initMap&v=weekly&libraries=marker"
        defer></script>
    <script>
        let map;
        const GEOJSON_URL = @json($geojsonUrl);
        const DEVELOPMENT_LAT = @json($development['location']['lat'] ?? null);
        const DEVELOPMENT_LNG = @json($development['location']['lng'] ?? null);
        const importModal = document.getElementById('importModal');
        const salesImportFile = document.getElementById('salesImportFile');
        const salesImportDropzone = document.getElementById('salesImportDropzone');
        const salesImportFileName = document.getElementById('salesImportFileName');
        const salesImportSubmit = document.getElementById('salesImportSubmit');

        function openImportModal() {
            if (!importModal) {
                return;
            }

            importModal.classList.remove('hidden');
            importModal.classList.add('flex');
            document.body.classList.add('overflow-hidden');
        }

        function closeImportModal() {
            if (!importModal) {
                return;
            }

            importModal.classList.add('hidden');
            importModal.classList.remove('flex');
            document.body.classList.remove('overflow-hidden');
        }

        function refreshImportFileState() {
            if (!salesImportFile || !salesImportFileName || !salesImportSubmit) {
                return;
            }

            const fileName = salesImportFile.files && salesImportFile.files[0] ?
                salesImportFile.files[0].name :
                'Ningun archivo seleccionado.';
            const hasFile = !!(salesImportFile.files && salesImportFile.files[0]);

            salesImportFileName.textContent = fileName;
            salesImportSubmit.disabled = !hasFile;
            salesImportSubmit.classList.toggle('opacity-50', !hasFile);
            salesImportSubmit.classList.toggle('cursor-not-allowed', !hasFile);
        }

        if (salesImportDropzone && salesImportFile) {
            salesImportDropzone.addEventListener('click', () => salesImportFile.click());
            salesImportFile.addEventListener('change', refreshImportFileState);
        }

        window.openImportModal = openImportModal;
        window.closeImportModal = closeImportModal;

        function colorByStatus(status) {
            const s = (status || '').toString().toLowerCase().trim();
            if (s === 'vendido') return '#e74c3c';
            if (s === 'apartado' || s === 'reservado') return '#f1c40f';
            return '#2ecc71'; // disponible por defecto
        }

        window.initMap = async function initMap() {
            const hasLocation = Number.isFinite(DEVELOPMENT_LAT) && Number.isFinite(DEVELOPMENT_LNG);
            const center = hasLocation ? {
                lat: DEVELOPMENT_LAT,
                lng: DEVELOPMENT_LNG,
            } : {
                lat: 19.2433,
                lng: -103.7241,
            };

            map = new google.maps.Map(document.getElementById('mapa'), {
                center,
                zoom: hasLocation ? 18 : 10,
                mapId: 'Mapa_Fraccionamiento',
                mapTypeId: 'satellite'
            });

            if (hasLocation) {
                new google.maps.marker.AdvancedMarkerElement({
                    map,
                    position: center,
                });
            }

            if (!GEOJSON_URL) {
                return;
            }

            const res = await fetch(GEOJSON_URL, {
                headers: {
                    'Accept': 'application/geo+json'
                }
            });
            if (!res.ok) {
                console.error('No se pudo cargar GeoJSON', await res.text());
                return;
            }

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

            // Estilo por estatus
            map.data.setStyle((feature) => {
                const status = feature.getProperty('estatus') || feature.getProperty('status');
                const fillColor = colorByStatus(status);

                return {
                    fillColor,
                    fillOpacity: 0.35,
                    strokeColor: fillColor,
                    strokeOpacity: 0.9,
                    strokeWeight: 2,
                    clickable: true,
                };
            });

            // Ajustar vista al contenido
            const bounds = new google.maps.LatLngBounds();
            map.data.forEach((feature) => {
                feature.getGeometry().forEachLatLng((latLng) => bounds.extend(latLng));
            });
            if (!bounds.isEmpty()) map.fitBounds(bounds);

            // Click: mostrar info del lote
            const info = new google.maps.InfoWindow();
            map.data.addListener('click', (event) => {
                const f = event.feature;
                const manzana = f.getProperty('manzana') ?? '';
                const lote = f.getProperty('lote') ?? '';
                const m2 = f.getProperty('m2') ?? '';
                const estatus = f.getProperty('estatus') ?? f.getProperty('status') ?? 'disponible';
                const precio = f.getProperty('precio') ?? '';

                const html = `
                <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 ${lote} ${manzana ? `- Manzana ${manzana}` : ''}</div>
                    <div><b>Estatus:</b> ${estatus}</div>
                    ${m2 ? `<div><b>m²:</b> ${m2}</div>` : ''}
                    ${precio ? `<div><b>Precio:</b> $${precio}</div>` : ''}
                </div>
            `;

                info.setContent(html);
                info.setPosition(event.latLng);
                info.open(map);
            });
        };

        @if (session('salesImportModalOpen'))
            openImportModal();
        @endif
    </script>
@endsection