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

@section('content')
    @php
        $editing = $property !== null;
        $development = $property?->development ?? $property?->developmentUnitModel?->development;
        $model = $property?->developmentUnitModel?->unitModel ?? $property?->unitModel;
        $selectedAmenities = collect(old('amenity_ids', $property?->amenities?->pluck('id')->all() ?? []))->map(fn ($id) => (int) $id);
        $inputClass = 'mt-1 h-11 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white';
        $labelClass = 'text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400';
    @endphp

    <div class="flex-1 overflow-y-auto bg-background-light p-4 dark:bg-background-dark md:p-8">
        <div class="mx-auto max-w-5xl">
            <div class="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
                <div>
                    <nav class="mb-1 flex items-center gap-2 text-sm text-slate-500">
                        <a href="{{ route('realEstate.properties') }}" class="hover:text-primary">Propiedades</a>
                        <span class="material-symbols-outlined text-base">chevron_right</span>
                        <span class="font-medium text-slate-900 dark:text-white">{{ $editing ? 'Editar' : 'Nueva' }}</span>
                    </nav>
                    <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">
                        {{ $editing ? 'Editar propiedad' : 'Registrar propiedad' }}
                    </h1>
                    <p class="mt-1 text-sm text-slate-500">El fraccionamiento y el modelo son opcionales; puedes registrar propiedades independientes.</p>
                </div>
                @if ($editing)
                    <a href="{{ route('realEstate.property.show', $property->id) }}" class="text-sm font-semibold text-primary hover:underline">Ver detalle</a>
                @endif
            </div>

            @if ($errors->any())
                <div class="mb-6 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-300">
                    <p class="font-bold">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

            <form method="POST" enctype="multipart/form-data"
                action="{{ $editing ? route('realEstate.property.update', $property->id) : route('realEstate.property.store') }}"
                class="space-y-6">
                @csrf
                @if ($editing)
                    @method('PUT')
                @endif

                <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="material-symbols-outlined rounded-lg bg-blue-50 p-2 text-primary dark:bg-blue-900/20">home_work</span>
                        <div>
                            <h2 class="font-bold text-slate-900 dark:text-white">Información general</h2>
                            <p class="text-xs text-slate-400">Identificación, propiedad y ubicación comercial.</p>
                        </div>
                    </div>
                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <label for="name" class="{{ $labelClass }}">Nombre *</label>
                            <input id="name" name="name" value="{{ old('name', $property?->name) }}" required class="{{ $inputClass }}" placeholder="Casa Bosques 12" />
                        </div>
                        <div>
                            <label for="slug" class="{{ $labelClass }}">Referencia</label>
                            <input id="slug" name="slug" value="{{ old('slug', $property?->slug) }}" class="{{ $inputClass }}" placeholder="Se genera automáticamente" />
                        </div>
                        <div>
                            <label for="real_estate_agency_id" class="{{ $labelClass }}">Inmobiliaria</label>
                            <select id="real_estate_agency_id" name="real_estate_agency_id" class="{{ $inputClass }}">
                                @if ((int) auth()->user()->role_id === \App\Classes\RoleType::REAL_ESTATE_AGENT)
                                    <option value="">Sin inmobiliaria — inventario propio</option>
                                @endif
                                @foreach ($agencies as $agency)
                                    <option value="{{ $agency->id }}" @selected((string) old('real_estate_agency_id', $property?->real_estate_agency_id ?? ((int) auth()->user()->role_id === 3 ? null : $agencies->first()?->id)) === (string) $agency->id)>{{ $agency->name }}</option>
                                @endforeach
                            </select>
                            @if ((int) auth()->user()->role_id === 3)
                                <p class="mt-1 text-xs text-slate-500">Seleccionar una inmobiliaria envía una solicitud. El inmueble pasa a su inventario únicamente cuando la acepte. Si no está registrada, podrás invitarla desde los detalles.</p>
                            @endif
                        </div>
                        <div>
                            <label for="development_id" class="{{ $labelClass }}">Fraccionamiento</label>
                            <select id="development_id" name="development_id" class="{{ $inputClass }}">
                                <option value="">Sin fraccionamiento — propiedad independiente</option>
                                @foreach ($developments as $developmentOption)
                                    <option value="{{ $developmentOption->id }}" @selected((string) old('development_id', $development?->id) === (string) $developmentOption->id)>{{ $developmentOption->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="unit_model_id" class="{{ $labelClass }}">Modelo</label>
                            <select id="unit_model_id" name="unit_model_id" class="{{ $inputClass }}">
                                <option value="">Sin modelo</option>
                                @foreach ($unitModels as $unitModel)
                                    <option value="{{ $unitModel->id }}" @selected((string) old('unit_model_id', $model?->id) === (string) $unitModel->id)>{{ $unitModel->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="unit_type_id" class="{{ $labelClass }}">Tipo de propiedad</label>
                            <select id="unit_type_id" name="unit_type_id" class="{{ $inputClass }}">
                                <option value="">Sin tipo</option>
                                @foreach ($unitTypes as $type)
                                    <option value="{{ $type->id }}" @selected((string) old('unit_type_id', $property?->unit_type_id) === (string) $type->id)>{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="operation" class="{{ $labelClass }}">Operación *</label>
                            <select id="operation" name="operation" required class="{{ $inputClass }}">
                                <option value="sale" @selected(old('operation', $property?->operation ?? 'sale') === 'sale')>Venta</option>
                                <option value="rent" @selected(old('operation', $property?->operation) === 'rent')>Renta</option>
                            </select>
                        </div>
                        <div>
                            <label for="status" class="{{ $labelClass }}">Estado *</label>
                            <select id="status" name="status" required class="{{ $inputClass }}">
                                @foreach (['available' => 'Disponible', 'reserved' => 'Apartada', 'sold' => 'Vendida', 'rented' => 'Rentada', 'unavailable' => 'No disponible'] as $value => $label)
                                    <option value="{{ $value }}" @selected(old('status', $property?->status ?? 'available') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <label for="description" class="{{ $labelClass }}">Descripción</label>
                            <textarea id="description" name="description" rows="4" class="{{ $inputClass }} h-auto py-3" placeholder="Describe las ventajas y características principales...">{{ old('description', $property?->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="mb-5 flex items-center gap-3">
                        <span class="material-symbols-outlined rounded-lg bg-emerald-50 p-2 text-emerald-600 dark:bg-emerald-900/20">payments</span>
                        <h2 class="font-bold text-slate-900 dark:text-white">Precio y características</h2>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <div class="sm:col-span-2">
                            <label for="price" class="{{ $labelClass }}">Precio *</label>
                            <input id="price" name="price" type="number" min="0" step="0.01" value="{{ old('price', $property?->price) }}" required class="{{ $inputClass }}" />
                        </div>
                        <div>
                            <label for="currency" class="{{ $labelClass }}">Moneda *</label>
                            <select id="currency" name="currency" class="{{ $inputClass }}">
                                <option value="MXN" @selected(old('currency', $property?->currency ?? 'MXN') === 'MXN')>MXN</option>
                                <option value="USD" @selected(old('currency', $property?->currency) === 'USD')>USD</option>
                            </select>
                        </div>
                        <div>
                            <label for="price_mode" class="{{ $labelClass }}">Modalidad *</label>
                            <select id="price_mode" name="price_mode" class="{{ $inputClass }}">
                                <option value="fixed" @selected(old('price_mode', $property?->price_mode ?? 'fixed') === 'fixed')>Precio total</option>
                                <option value="per_sqm" @selected(old('price_mode', $property?->price_mode) === 'per_sqm')>Por m²</option>
                            </select>
                        </div>
                        @foreach ([
                            'levels' => 'Niveles',
                            'bedrooms' => 'Recámaras',
                            'full_bathrooms' => 'Baños completos',
                            'half_bathrooms' => 'Medios baños',
                            'parking_spaces' => 'Estacionamientos',
                            'built_area_sqm' => 'Construcción m²',
                            'lot_area_sqm' => 'Terreno m²',
                            'front_meters' => 'Frente m',
                            'depth_meters' => 'Fondo m',
                        ] as $field => $label)
                            <div>
                                <label for="{{ $field }}" class="{{ $labelClass }}">{{ $label }}</label>
                                <input id="{{ $field }}" name="{{ $field }}" type="number" min="0" step="{{ str_contains($field, 'sqm') || str_contains($field, 'meters') ? '0.01' : '1' }}"
                                    value="{{ old($field, $property?->{$field}) }}" class="{{ $inputClass }}" />
                            </div>
                        @endforeach
                    </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="mb-5 flex items-center gap-3">
                        <span class="material-symbols-outlined rounded-lg bg-violet-50 p-2 text-violet-600 dark:bg-violet-900/20">location_on</span>
                        <div>
                            <h2 class="font-bold text-slate-900 dark:text-white">Dirección</h2>
                            <p class="text-xs text-slate-400">Opcional; si se omite se mostrará la ubicación del fraccionamiento cuando exista.</p>
                        </div>
                    </div>
                    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                        <div class="lg:col-span-2">
                            <label for="street" class="{{ $labelClass }}">Calle y número</label>
                            <input id="street" name="street" value="{{ old('street', $property?->address?->street) }}" class="{{ $inputClass }}" />
                        </div>
                        <div>
                            <label for="neighborhood" class="{{ $labelClass }}">Colonia</label>
                            <input id="neighborhood" name="neighborhood" value="{{ old('neighborhood', $property?->address?->neighborhood) }}" class="{{ $inputClass }}" />
                        </div>
                        <div>
                            <label for="country_id" class="{{ $labelClass }}">País</label>
                            <select id="country_id" name="country_id" class="{{ $inputClass }}">
                                <option value="">Seleccionar</option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" @selected((string) old('country_id', $property?->address?->country_id) === (string) $country->id)>{{ $country->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="state_id" class="{{ $labelClass }}">Estado</label>
                            <select id="state_id" name="state_id" class="{{ $inputClass }}">
                                <option value="">Seleccionar</option>
                                @foreach ($states as $state)
                                    <option value="{{ $state->id }}" @selected((string) old('state_id', $property?->address?->state_id) === (string) $state->id)>{{ $state->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="city_id" class="{{ $labelClass }}">Ciudad</label>
                            <select id="city_id" name="city_id" class="{{ $inputClass }}">
                                <option value="">Seleccionar</option>
                                @foreach ($cities as $city)
                                    <option value="{{ $city->id }}" @selected((string) old('city_id', $property?->address?->city_id) === (string) $city->id)>{{ $city->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="zip_code" class="{{ $labelClass }}">Código postal</label>
                            <input id="zip_code" name="zip_code" value="{{ old('zip_code', $property?->address?->zip_code) }}" class="{{ $inputClass }}" />
                        </div>
                        <div>
                            <label for="lat" class="{{ $labelClass }}">Latitud</label>
                            <input id="lat" name="lat" type="number" step="0.000001" value="{{ old('lat', $property?->address?->lat) }}" class="{{ $inputClass }}" />
                        </div>
                        <div>
                            <label for="lng" class="{{ $labelClass }}">Longitud</label>
                            <input id="lng" name="lng" type="number" step="0.000001" value="{{ old('lng', $property?->address?->lng) }}" class="{{ $inputClass }}" />
                        </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="grid gap-6 lg:grid-cols-2">
                        <div>
                            <h2 class="font-bold text-slate-900 dark:text-white">Amenidades</h2>
                            <div class="mt-4 grid grid-cols-2 gap-2">
                                @forelse ($amenities as $amenity)
                                    <label class="flex cursor-pointer items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-600 hover:border-primary dark:border-slate-700 dark:text-slate-300">
                                        <input type="checkbox" name="amenity_ids[]" value="{{ $amenity->id }}" @checked($selectedAmenities->contains((int) $amenity->id)) class="rounded border-slate-300 text-primary focus:ring-primary" />
                                        {{ $amenity->name }}
                                    </label>
                                @empty
                                    <p class="col-span-2 text-sm text-slate-400">No hay amenidades activas en el catálogo.</p>
                                @endforelse
                            </div>
                        </div>
                        <div>
                            <h2 class="font-bold text-slate-900 dark:text-white">Imágenes</h2>
                            @if ($editing && $property->images->isNotEmpty())
                                <div class="mt-4 grid grid-cols-3 gap-3">
                                    @foreach ($property->images as $image)
                                        <label class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700">
                                            <img src="{{ $image->image_url }}" alt="{{ $image->title }}" class="size-full object-cover" />
                                            <span class="absolute inset-x-0 bottom-0 bg-black/60 px-2 py-1 text-center text-[10px] font-semibold text-white">
                                                <input type="checkbox" name="remove_image_ids[]" value="{{ $image->id }}" class="mr-1 rounded" /> Quitar
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            <label class="mt-4 flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-slate-300 p-6 text-center transition hover:border-primary hover:bg-blue-50/40 dark:border-slate-700 dark:hover:bg-blue-900/10">
                                <span class="material-symbols-outlined text-3xl text-primary">add_photo_alternate</span>
                                <span class="mt-2 text-sm font-semibold text-slate-700 dark:text-slate-200">Agregar imágenes</span>
                                <span class="text-xs text-slate-400">JPG, PNG o WebP; máximo 5 MB por archivo.</span>
                                <input type="file" name="images[]" multiple accept="image/jpeg,image/png,image/webp" class="hidden" />
                            </label>
                        </div>
                    </div>
                </section>

                <div class="flex flex-col-reverse justify-end gap-3 sm:flex-row">
                    <a href="{{ $editing ? route('realEstate.property.show', $property->id) : route('realEstate.properties') }}"
                        class="flex h-11 items-center justify-center rounded-lg border border-slate-300 bg-white px-6 text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">Cancelar</a>
                    <button type="submit" class="flex h-11 items-center justify-center gap-2 rounded-lg bg-primary px-8 text-sm font-bold text-white shadow-lg shadow-primary/20 hover:bg-blue-700">
                        <span class="material-symbols-outlined text-lg">save</span>
                        {{ $editing ? 'Guardar cambios' : 'Crear propiedad' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection