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

@php
    $isEditing = $promotion !== null;
    $field = static fn (string $key, mixed $default = null) => old($key, data_get($form, $key, $default));
    $modelRows = array_values(old('models', $form['models'] ?? []));
    $selectedAmenities = collect(old('amenity_ids', $form['amenity_ids'] ?? []))->map(fn ($id) => (int) $id);
    $stageContext = $stageContext ?? null;
    $pageTitle = $stageContext
        ? 'Configurar etapa externa'
        : ($isEditing ? 'Editar fraccionamiento externo' : 'Registrar fraccionamiento externo');
@endphp

@section('navbar-buttons')
    <a href="{{ $stageContext ? route('realEstate.developmentStages.index', ['development' => $stageContext['parent_id']]) : route('realEstate.developmentPromotions.index', ['real_estate_agency_id' => $selectedAgencyId]) }}"
        class="flex h-10 items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
        <span class="material-symbols-outlined !text-[20px]">arrow_back</span>
        {{ $stageContext ? 'Volver a las etapas' : 'Volver al catálogo' }}
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light p-4 dark:bg-background-dark md:p-6">
        <div class="mx-auto max-w-6xl space-y-6">
            <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                <div>
                    <p class="text-sm font-bold text-amber-700 dark:text-amber-400">Inventario controlado por un tercero</p>
                    <h1 class="mt-1 text-3xl font-black tracking-tight text-slate-900 dark:text-white">{{ $pageTitle }}</h1>
                    <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-500 dark:text-slate-400">
                        La ficha publica modelos, características y precios informativos. No crea lotes ni habilita
                        cotizaciones, apartados o planes de financiamiento internos.
                    </p>
                </div>
                @if ($isEditing && $promotion->is_active)
                    <a href="{{ route('realEstate.development.show', ['id' => $promotion->development_id]) }}"
                        class="inline-flex items-center gap-2 text-sm font-bold text-primary hover:underline">
                        Ver ficha publicada
                        <span class="material-symbols-outlined !text-[18px]">open_in_new</span>
                    </a>
                @endif
                @if ($isEditing && $canEditCatalog && !$stageContext && $promotion->development)
                    <a href="{{ route('realEstate.developmentStages.index', ['development' => $promotion->development_id]) }}"
                        class="inline-flex items-center gap-2 text-sm font-bold text-primary hover:underline">
                        <span class="material-symbols-outlined !text-[18px]">account_tree</span>
                        Administrar etapas
                    </a>
                @endif
            </header>

            @if ($stageContext)
                <div class="rounded-2xl border border-primary/30 bg-primary/5 px-5 py-4 text-sm text-slate-700 dark:text-slate-200">
                    <p class="font-black text-primary">Configuración independiente · {{ $stageContext['code'] }}</p>
                    <p class="mt-1">
                        {{ $stageContext['parent_name'] }} / {{ $stageContext['name'] }}. Los modelos, precios y disponibilidad
                        capturados aquí pertenecen únicamente a esta etapa.
                    </p>
                </div>
            @endif

            @if ($errors->any())
                <div class="rounded-2xl border border-rose-200 bg-rose-50 px-5 py-4 text-sm text-rose-700">
                    <p class="font-black">Revisa la información capturada:</p>
                    <ul class="mt-2 list-disc space-y-1 pl-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @unless ($canEditCatalog)
                <div class="rounded-2xl border border-blue-200 bg-blue-50 p-5 text-blue-900 dark:border-blue-900/60 dark:bg-blue-900/20 dark:text-blue-200">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined mt-0.5">lock</span>
                        <div>
                            <p class="font-black">Ficha administrada por otra inmobiliaria</p>
                            <p class="mt-1 text-sm leading-6">
                                Puedes modificar tu referencia, enlace, notas y estado de publicación. Los datos generales,
                                modelos y amenidades deben actualizarse desde la inmobiliaria responsable.
                            </p>
                            <p class="mt-2 text-sm font-semibold">
                                {{ $promotion->development?->name }} ·
                                {{ $promotion->development?->external_developer_name ?: $promotion->development?->realEstatesBranch?->realEstate?->name }}
                            </p>
                        </div>
                    </div>
                </div>
            @endunless

            <form method="POST"
                action="{{ $isEditing ? route('realEstate.developmentPromotions.update', $promotion) : route('realEstate.developmentPromotions.external.store') }}"
                class="space-y-6"
                x-data="{
                    models: @js($modelRows),
                    addModel() {
                        this.models.push({
                            name: '', description: '', base_price: null, currency: @js($field('currency', 'MXN')),
                            bedrooms: null, bathrooms: null, construction_sqm: null,
                            effective_from: @js(now()->toDateString()), effective_to: null,
                        });
                    },
                    removeModel(index) { this.models.splice(index, 1); },
                }">
                @csrf
                @if ($isEditing)
                    @method('PUT')
                @endif

                @if ($canEditCatalog)
                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 md:p-6">
                        <div class="mb-5 flex items-center gap-3">
                            <span class="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                <span class="material-symbols-outlined">apartment</span>
                            </span>
                            <div>
                                <h2 class="text-lg font-black text-slate-900 dark:text-white">Datos generales</h2>
                                <p class="text-sm text-slate-500">Identifica al desarrollador y al responsable interno de la ficha.</p>
                            </div>
                        </div>

                        @unless ($isEditing)
                            @if (count($agencies) > 1)
                                <div class="mb-5 rounded-xl border border-amber-200 bg-amber-50 p-4">
                                    <label for="externalAgency" class="text-xs font-black uppercase tracking-wide text-amber-800">Inmobiliaria promotora</label>
                                    <select id="externalAgency" name="real_estate_agency_id" required
                                        onchange="if (this.value) window.location.href = @js(route('realEstate.developmentPromotions.create')) + '?real_estate_agency_id=' + encodeURIComponent(this.value)"
                                        class="mt-2 w-full rounded-lg border-amber-300 bg-white text-sm">
                                        <option value="">Selecciona una inmobiliaria</option>
                                        @foreach ($agencies as $agency)
                                            <option value="{{ $agency['id'] }}" @selected((int) old('real_estate_agency_id', $selectedAgencyId) === (int) $agency['id'])>
                                                {{ $agency['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <p class="mt-2 text-xs text-amber-700">Al cambiar la inmobiliaria se cargarán sus sucursales.</p>
                                </div>
                            @elseif (count($agencies) === 1)
                                <input type="hidden" name="real_estate_agency_id" value="{{ $agencies[0]['id'] }}">
                            @endif
                        @endunless

                        <div class="grid gap-5 md:grid-cols-2">
                            <div>
                                <label for="externalBranch" class="text-xs font-black uppercase tracking-wide text-slate-500">Sucursal responsable *</label>
                                <select id="externalBranch" name="real_estate_branch_id" required
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="">Selecciona una sucursal</option>
                                    @foreach ($branches as $branch)
                                        <option value="{{ $branch['id'] }}" @selected((int) $field('real_estate_branch_id') === (int) $branch['id'])>{{ $branch['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="externalDeveloperName" class="text-xs font-black uppercase tracking-wide text-slate-500">Desarrollador externo *</label>
                                <input id="externalDeveloperName" name="external_developer_name" value="{{ $field('external_developer_name') }}" required maxlength="255"
                                    placeholder="Ej. Desarrolladora del Pacífico"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div class="md:col-span-2">
                                <label for="externalName" class="text-xs font-black uppercase tracking-wide text-slate-500">Nombre del fraccionamiento *</label>
                                <input id="externalName" name="name" value="{{ $field('name') }}" required maxlength="255"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label for="externalType" class="text-xs font-black uppercase tracking-wide text-slate-500">Tipo *</label>
                                <select id="externalType" name="development_type_id" required
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="">Selecciona un tipo</option>
                                    @foreach ($developmentTypes as $type)
                                        <option value="{{ $type->id }}" @selected((int) $field('development_type_id') === (int) $type->id)>{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="externalStatus" class="text-xs font-black uppercase tracking-wide text-slate-500">Estatus comercial *</label>
                                <select id="externalStatus" name="development_status_id" required
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="">Selecciona un estatus</option>
                                    @foreach ($developmentStatuses as $status)
                                        <option value="{{ $status->id }}" @selected((int) $field('development_status_id') === (int) $status->id)>{{ $status->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="externalOperation" class="text-xs font-black uppercase tracking-wide text-slate-500">Operación *</label>
                                <select id="externalOperation" name="operation" required
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="sale" @selected($field('operation', 'sale') === 'sale')>Venta</option>
                                    <option value="rent" @selected($field('operation') === 'rent')>Renta</option>
                                </select>
                            </div>
                            <div>
                                <label for="externalStage" class="text-xs font-black uppercase tracking-wide text-slate-500">Fase comercial general</label>
                                <input id="externalStage" name="commercial_stage" value="{{ $field('commercial_stage') }}" maxlength="50"
                                    placeholder="Ej. Preventa"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label for="externalStart" class="text-xs font-black uppercase tracking-wide text-slate-500">Inicio de comercialización</label>
                                <input id="externalStart" type="date" name="start_date" value="{{ $field('start_date') }}"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label for="externalEnd" class="text-xs font-black uppercase tracking-wide text-slate-500">Fin estimado</label>
                                <input id="externalEnd" type="date" name="end_date" value="{{ $field('end_date') }}"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <label class="flex items-center gap-3 rounded-xl border border-slate-200 px-4 py-3 text-sm font-bold text-slate-700 dark:border-slate-700 dark:text-slate-200 md:col-span-2">
                                <input type="hidden" name="is_featured" value="0">
                                <input type="checkbox" name="is_featured" value="1" @checked((bool) $field('is_featured', false))
                                    class="size-5 rounded border-slate-300 text-primary focus:ring-primary">
                                Mostrar como fraccionamiento destacado
                            </label>
                        </div>
                    </section>

                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 md:p-6">
                        <h2 class="text-lg font-black text-slate-900 dark:text-white">Ubicación y publicación</h2>
                        <div class="mt-5 grid gap-5 md:grid-cols-2">
                            <div class="md:col-span-2">
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Calle o referencia principal *</label>
                                <input name="address[street]" value="{{ $field('address.street') }}" required maxlength="255"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Colonia</label>
                                <input name="address[neighborhood]" value="{{ $field('address.neighborhood') }}" maxlength="255"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Código postal</label>
                                <input name="address[zip_code]" value="{{ $field('address.zip_code') }}" maxlength="20"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">País</label>
                                <select name="address[country_id]" class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="">Sin especificar</option>
                                    @foreach ($countries as $country)
                                        <option value="{{ $country->id }}" @selected((int) $field('address.country_id') === (int) $country->id)>{{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Estado</label>
                                <select name="address[state_id]" class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="">Sin especificar</option>
                                    @foreach ($states as $state)
                                        <option value="{{ $state->id }}" @selected((int) $field('address.state_id') === (int) $state->id)>{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Ciudad</label>
                                <select name="address[city_id]" class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="">Sin especificar</option>
                                    @foreach ($cities as $city)
                                        <option value="{{ $city->id }}" @selected((int) $field('address.city_id') === (int) $city->id)>{{ $city->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Latitud</label>
                                <input type="number" step="0.000001" name="address[lat]" value="{{ $field('address.lat') }}"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Longitud</label>
                                <input type="number" step="0.000001" name="address[lng]" value="{{ $field('address.lng') }}"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">URL de portada</label>
                                <input type="url" name="image" value="{{ $field('image') }}" placeholder="https://..."
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">URL del logotipo</label>
                                <input type="url" name="logo" value="{{ $field('logo') }}" placeholder="https://..."
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                            </div>
                            <div class="md:col-span-2">
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Descripción breve</label>
                                <textarea name="sort_description" rows="2" maxlength="2000"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">{{ $field('sort_description') }}</textarea>
                            </div>
                            <div class="md:col-span-2">
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Descripción completa</label>
                                <textarea name="full_description" rows="4" maxlength="10000"
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">{{ $field('full_description') }}</textarea>
                            </div>
                        </div>
                    </section>

                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 md:p-6">
                        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <h2 class="text-lg font-black text-slate-900 dark:text-white">Modelos disponibles</h2>
                                <p class="mt-1 text-sm text-slate-500">Registra precios informativos y características por modelo.</p>
                            </div>
                            <button type="button" x-on:click="addModel()"
                                class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-bold text-white">
                                <span class="material-symbols-outlined !text-[18px]">add</span>
                                Agregar modelo
                            </button>
                        </div>

                        <div class="mt-5 space-y-4">
                            <template x-for="(model, index) in models" :key="index">
                                <article class="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-800/60">
                                    <div class="flex items-center justify-between gap-3">
                                        <h3 class="font-black text-slate-900 dark:text-white" x-text="model.name || `Modelo ${index + 1}`"></h3>
                                        <button type="button" x-on:click="removeModel(index)" class="rounded-lg p-2 text-rose-600 hover:bg-rose-50" title="Quitar modelo">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </div>
                                    <div class="mt-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                                        <div class="md:col-span-2">
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Nombre *</label>
                                            <input x-model="model.name" :name="`models[${index}][name]`" required maxlength="255"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                        </div>
                                        <div>
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Precio desde</label>
                                            <input x-model="model.base_price" :name="`models[${index}][base_price]`" type="number" min="0" step="0.01"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                        </div>
                                        <div>
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Moneda *</label>
                                            <select x-model="model.currency" :name="`models[${index}][currency]`" required
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                                <option value="MXN">MXN</option>
                                                <option value="USD">USD</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Recámaras</label>
                                            <input x-model="model.bedrooms" :name="`models[${index}][bedrooms]`" type="number" min="0" max="100"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                        </div>
                                        <div>
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Baños</label>
                                            <input x-model="model.bathrooms" :name="`models[${index}][bathrooms]`" type="number" min="0" max="100"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                        </div>
                                        <div>
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Construcción m²</label>
                                            <input x-model="model.construction_sqm" :name="`models[${index}][construction_sqm]`" type="number" min="0" step="0.01"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                        </div>
                                        <div>
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Precio vigente desde</label>
                                            <input x-model="model.effective_from" :name="`models[${index}][effective_from]`" type="date"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                        </div>
                                        <div>
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Precio vigente hasta</label>
                                            <input x-model="model.effective_to" :name="`models[${index}][effective_to]`" type="date"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900">
                                        </div>
                                        <div class="md:col-span-2 lg:col-span-3">
                                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Descripción del modelo</label>
                                            <textarea x-model="model.description" :name="`models[${index}][description]`" rows="2" maxlength="2000"
                                                class="mt-2 w-full rounded-lg border-slate-300 bg-white text-sm dark:border-slate-700 dark:bg-slate-900"></textarea>
                                        </div>
                                    </div>
                                </article>
                            </template>
                            <div x-show="models.length === 0" class="rounded-xl border border-dashed border-slate-300 p-7 text-center text-sm text-slate-500 dark:border-slate-700">
                                No hay modelos capturados. Puedes guardar la ficha y agregarlos después.
                            </div>
                        </div>
                    </section>

                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 md:p-6">
                        <h2 class="text-lg font-black text-slate-900 dark:text-white">Características y amenidades</h2>
                        <p class="mt-1 text-sm text-slate-500">Selecciona las características que aparecerán en el catálogo.</p>
                        <div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                            @forelse ($amenities as $amenity)
                                <label class="flex items-center gap-3 rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:text-slate-200">
                                    <input type="checkbox" name="amenity_ids[]" value="{{ $amenity->id }}" @checked($selectedAmenities->contains((int) $amenity->id))
                                        class="size-5 rounded border-slate-300 text-primary focus:ring-primary">
                                    @if ($amenity->icon_key)
                                        <span class="material-symbols-outlined !text-[19px] text-primary">{{ $amenity->icon_key }}</span>
                                    @endif
                                    {{ $amenity->name }}
                                </label>
                            @empty
                                <p class="text-sm text-slate-500 sm:col-span-2 lg:col-span-3">No hay amenidades activas en el catálogo.</p>
                            @endforelse
                        </div>
                    </section>

                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 md:p-6">
                        <h2 class="text-lg font-black text-slate-900 dark:text-white">Precio general</h2>
                        <div class="mt-5 grid gap-5 md:grid-cols-2">
                            <div>
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Moneda predeterminada *</label>
                                <select name="currency" required class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <option value="MXN" @selected($field('currency', 'MXN') === 'MXN')>MXN</option>
                                    <option value="USD" @selected($field('currency') === 'USD')>USD</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <label class="text-xs font-black uppercase tracking-wide text-slate-500">Nota de precios</label>
                                <textarea name="pricing_note" rows="2" maxlength="2000" placeholder="Precios sujetos a cambio sin previo aviso."
                                    class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">{{ $field('pricing_note') }}</textarea>
                            </div>
                        </div>
                    </section>
                @endif

                <section class="rounded-2xl border border-amber-200 bg-amber-50 p-5 shadow-sm dark:border-amber-900/60 dark:bg-amber-900/20 md:p-6">
                    <h2 class="text-lg font-black text-amber-950 dark:text-amber-100">Control de disponibilidad externa</h2>
                    <p class="mt-1 text-sm text-amber-800 dark:text-amber-300">Esta información es privada para el equipo, excepto el enlace de consulta.</p>
                    <div class="mt-5 grid gap-5 md:grid-cols-2">
                        <div>
                            <label class="text-xs font-black uppercase tracking-wide text-amber-800 dark:text-amber-300">Referencia externa</label>
                            <input name="external_reference" value="{{ $field('external_reference') }}" maxlength="255"
                                class="mt-2 w-full rounded-lg border-amber-300 bg-white text-sm dark:border-amber-800 dark:bg-slate-900">
                        </div>
                        <div>
                            <label class="text-xs font-black uppercase tracking-wide text-amber-800 dark:text-amber-300">Última verificación</label>
                            <input type="datetime-local" name="availability_checked_at" value="{{ $field('availability_checked_at') }}"
                                class="mt-2 w-full rounded-lg border-amber-300 bg-white text-sm dark:border-amber-800 dark:bg-slate-900">
                        </div>
                        <div class="md:col-span-2">
                            <label class="text-xs font-black uppercase tracking-wide text-amber-800 dark:text-amber-300">URL para consultar disponibilidad</label>
                            <input type="url" name="availability_url" value="{{ $field('availability_url') }}" placeholder="https://inventario.desarrollador.com/..."
                                class="mt-2 w-full rounded-lg border-amber-300 bg-white text-sm dark:border-amber-800 dark:bg-slate-900">
                        </div>
                        <div class="md:col-span-2">
                            <label class="text-xs font-black uppercase tracking-wide text-amber-800 dark:text-amber-300">Notas para el equipo comercial</label>
                            <textarea name="notes" rows="3" maxlength="5000"
                                class="mt-2 w-full rounded-lg border-amber-300 bg-white text-sm dark:border-amber-800 dark:bg-slate-900">{{ $field('notes') }}</textarea>
                        </div>
                        <label class="flex items-center gap-3 rounded-xl border border-amber-300 bg-white/70 px-4 py-3 text-sm font-black text-amber-900 dark:border-amber-800 dark:bg-slate-900/60 dark:text-amber-200 md:col-span-2">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1" @checked((bool) $field('is_active', true))
                                class="size-5 rounded border-amber-400 text-primary focus:ring-primary">
                            Publicar esta promoción para los agentes
                        </label>
                    </div>
                </section>

                <div class="sticky bottom-0 z-20 flex flex-col-reverse gap-3 rounded-2xl border border-slate-200 bg-white/95 p-4 shadow-xl backdrop-blur dark:border-slate-700 dark:bg-slate-900/95 sm:flex-row sm:justify-end">
                    <a href="{{ $stageContext ? route('realEstate.developmentStages.index', ['development' => $stageContext['parent_id']]) : route('realEstate.developmentPromotions.index', ['real_estate_agency_id' => $selectedAgencyId]) }}"
                        class="rounded-xl border border-slate-300 px-5 py-3 text-center text-sm font-bold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200">
                        Cancelar
                    </a>
                    <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-black text-white shadow-lg shadow-primary/20 hover:bg-primary-dark">
                        <span class="material-symbols-outlined !text-[19px]">save</span>
                        {{ $isEditing ? 'Guardar cambios' : 'Registrar fraccionamiento externo' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection