@php
    $isEditingLot = $editingLotId !== null;
    $agencyTotalPrice = max((float) ($lotForm->area ?? 0), 0) * max((float) ($lotForm->price_per_sqm ?? 0), 0);
    $agencyDownPayment = max((float) ($lotForm->agency_down_payment ?? 0), 0);
    $agencyRemainingBalance = max($agencyTotalPrice - $agencyDownPayment, 0);
@endphp

<div class="fixed inset-0 z-50 flex justify-end overflow-hidden">
    <button aria-label="{{ $isEditingLot ? 'Cerrar panel de edición de lote' : 'Cerrar panel de nuevo lote' }}"
        class="absolute inset-0 bg-slate-950/35 transition-opacity"
        type="button" wire:click="closeCreateLotPanel"></button>

    <form
        class="relative flex h-full w-screen max-w-md flex-col border-l border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-surface-dark"
        wire:submit="saveLot">
        <div class="shrink-0 border-b border-slate-100 px-6 py-6 dark:border-slate-800">
            <div class="mb-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="rounded-full bg-primary/10 p-2">
                        <span class="material-symbols-outlined text-primary">{{ $isEditingLot ? 'edit' : 'add_circle' }}</span>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-slate-900 dark:text-white">
                            {{ $isEditingLot ? 'Editar lote' : 'Agregar lote' }}
                        </h2>
                        <p class="text-sm text-slate-500 dark:text-slate-400">
                            {{ $isEditingLot ? 'Actualiza los datos del lote seleccionado.' : 'Captura rápida con el estilo del paso 3 del wizard.' }}
                        </p>
                    </div>
                </div>
                <button class="text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
                    type="button" wire:click="closeCreateLotPanel">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
        </div>

        <div class="flex-1 space-y-6 overflow-y-auto p-6">
            @error('lotForm')
                <div
                    class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-300">
                    {{ $message }}
                </div>
            @enderror

            <div class="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-800/40">
                <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">
                    Fraccionamiento
                </p>
                <p class="mt-1 text-lg font-bold text-slate-900 dark:text-white">
                    {{ $development['name'] ?? 'Sin nombre' }}
                </p>
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                    {{ $isEditingLot ? 'Los cambios se aplicarán a este lote del inventario.' : 'El lote se agregará directamente al inventario de este desarrollo.' }}
                </p>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">Manzana</label>
                    <input
                        class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800"
                        placeholder="Ej. MZ-04" type="text" wire:model.live="lotForm.block" />
                    @error('lotForm.block')
                        <p class="text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">Lote
                        #</label>
                    <input
                        class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800"
                        placeholder="Ej. 112" type="text" wire:model.live="lotForm.lot" />
                    @error('lotForm.lot')
                        <p class="text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="space-y-1.5">
                <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">Superficie
                    (m²)</label>
                <input
                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800"
                    placeholder="160.00" type="number" min="0" step="0.01" wire:model.live="lotForm.area" />
                @error('lotForm.area')
                    <p class="text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">Precio
                        m²</label>
                    <input
                        class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800"
                        placeholder="4500" type="number" min="0" step="0.01"
                        wire:model.live="lotForm.price_per_sqm" />
                    @error('lotForm.price_per_sqm')
                        <p class="text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">Tipo
                        lote</label>
                    <select
                        class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800"
                        wire:model.live="lotForm.type">
                        @foreach ($this->availableLotTypes() as $type)
                            <option value="{{ $type }}">{{ $type }}</option>
                        @endforeach
                    </select>
                    @error('lotForm.type')
                        <p class="text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="space-y-1.5">
                <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">Estatus</label>
                <select
                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800"
                    wire:model.live="lotForm.status">
                    @foreach ($this->lotFormStatusOptions() as $status)
                        <option value="{{ $status['value'] }}">{{ $status['label'] }}</option>
                    @endforeach
                </select>
                @error('lotForm.status')
                    <p class="text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <label
                class="flex cursor-pointer items-start gap-3 rounded-xl border border-indigo-200 bg-indigo-50/70 p-4 transition-colors hover:bg-indigo-50 dark:border-indigo-900/50 dark:bg-indigo-950/20 dark:hover:bg-indigo-950/30">
                <input class="mt-0.5 h-4 w-4 rounded border-indigo-300 text-indigo-600 focus:ring-indigo-500"
                    type="checkbox" wire:model.live="lotForm.is_agency_owned" />
                <span class="min-w-0">
                    <span class="flex flex-wrap items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
                        Propiedad de la inmobiliaria
                        <span
                            class="rounded-full bg-indigo-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300">
                            Reventa
                        </span>
                    </span>
                    <span class="mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400">
                        Actívalo cuando la inmobiliaria compró este lote y aplicará condiciones propias de precio,
                        enganche y financiamiento al revenderlo.
                    </span>
                </span>
            </label>
            @error('lotForm.is_agency_owned')
                <p class="-mt-4 text-xs text-red-500">{{ $message }}</p>
            @enderror

            @if ($lotForm->is_agency_owned)
                <div
                    class="space-y-5 rounded-xl border border-indigo-200 bg-white p-4 shadow-sm dark:border-indigo-900/50 dark:bg-slate-900/40">
                    <div>
                        <p class="text-sm font-bold text-slate-900 dark:text-white">Condiciones exclusivas de reventa</p>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            Estas condiciones sustituirán las reglas generales del fraccionamiento para este lote.
                        </p>
                    </div>

                    <div class="space-y-1.5">
                        <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">
                            Nombre del financiamiento
                        </label>
                        <input
                            class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-800"
                            maxlength="120" placeholder="Ej. Financiamiento propio 36 meses" type="text"
                            wire:model.live="lotForm.agency_financing_label" />
                        @error('lotForm.agency_financing_label')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="space-y-1.5">
                            <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">
                                Enganche (MXN)
                            </label>
                            <input
                                class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-800"
                                min="0" placeholder="0.00" required step="0.01" type="number"
                                wire:model.live="lotForm.agency_down_payment" />
                            @error('lotForm.agency_down_payment')
                                <p class="text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-1.5">
                            <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">
                                Plazo (meses)
                            </label>
                            <input
                                class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-800"
                                min="1" placeholder="Ej. 36" step="1" type="number"
                                @required($agencyRemainingBalance > 0.009)
                                wire:model.live="lotForm.agency_financing_months" />
                            <p class="text-[11px] text-slate-500 dark:text-slate-400">
                                {{ $agencyRemainingBalance > 0.009 ? 'Obligatorio porque queda saldo por financiar.' : 'Opcional cuando el enganche cubre el precio total.' }}
                            </p>
                            @error('lotForm.agency_financing_months')
                                <p class="text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="space-y-1.5">
                        <label class="text-xs font-semibold uppercase text-slate-500 dark:text-slate-400">
                            Mensualidad fija (MXN) <span class="normal-case text-slate-400">· opcional</span>
                        </label>
                        <input
                            class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-800"
                            min="0.01" placeholder="Se calculará automáticamente si queda vacío" step="0.01"
                            type="number" wire:model.live="lotForm.agency_monthly_payment" />
                        @error('lotForm.agency_monthly_payment')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-3 rounded-lg bg-indigo-50 p-3 dark:bg-indigo-950/30">
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-wider text-indigo-500">Precio estimado</p>
                            <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                                {{ $this->formattedMoney($agencyTotalPrice) }}
                            </p>
                        </div>
                        <div class="text-right">
                            <p class="text-[10px] font-bold uppercase tracking-wider text-indigo-500">Saldo a financiar</p>
                            <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white">
                                {{ $this->formattedMoney($agencyRemainingBalance) }}
                            </p>
                        </div>
                    </div>
                </div>
            @endif

            <div class="rounded-xl border border-primary/10 bg-primary/5 p-4">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-slate-600 dark:text-slate-300">Precio total
                        lote</span>
                    <span class="text-xl font-bold text-slate-900 dark:text-white">
                        {{ $this->formattedMoney((float) ($lotForm->area ?? 0) * (float) ($lotForm->price_per_sqm ?? 0)) }}
                    </span>
                </div>
                @if (($lotForm->price_is_manual ?? false) === false && ($lotForm->price_per_sqm ?? null) !== null)
                    <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">
                        Precio sugerido desde la configuración del tipo de lote.
                    </p>
                @endif
            </div>
        </div>

        <div class="flex gap-3 border-t border-slate-100 bg-white p-6 dark:border-slate-800 dark:bg-surface-dark">
            <button
                class="flex-1 rounded-xl border border-slate-300 px-4 py-3 text-sm font-bold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
                type="button" wire:click="closeCreateLotPanel">
                Cancelar
            </button>
            <button
                class="flex-[2] rounded-xl bg-primary px-4 py-3 text-sm font-bold text-white shadow-lg shadow-primary/20 transition-all hover:bg-primary-dark"
                type="submit" wire:loading.attr="disabled" wire:target="saveLot">
                <span wire:loading.remove wire:target="saveLot">{{ $isEditingLot ? 'Guardar cambios' : 'Agregar al inventario' }}</span>
                <span wire:loading wire:target="saveLot">Guardando...</span>
            </button>
        </div>
    </form>
</div>