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

@section('navbar-buttons')
    <a href="{{ route('realEstate.property.create') }}"
        class="flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-bold text-white shadow-lg shadow-primary/20 transition-colors hover:bg-blue-700">
        <span class="material-symbols-outlined text-[20px]">add</span>
        Nueva propiedad
    </a>
@endsection

@section('content')
    @php
        $statusLabels = [
            'available' => 'Disponible',
            'reserved' => 'Apartada',
            'sold' => 'Vendida',
            'rented' => 'Rentada',
            'unavailable' => 'No disponible',
        ];
        $statusClasses = [
            'available' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
            'reserved' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
            'sold' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
            'rented' => 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
            'unavailable' => 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300',
        ];
    @endphp

    <div class="flex-1 overflow-y-auto bg-background-light p-4 dark:bg-background-dark md:p-8">
        <div class="mx-auto flex max-w-7xl flex-col gap-6">
            <div class="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                <div>
                    <nav class="mb-1 flex items-center gap-2 text-sm text-slate-500">
                        <a href="{{ route('realEstate.dashboard') }}" class="transition-colors hover:text-primary">Dashboard</a>
                        <span class="material-symbols-outlined text-base">chevron_right</span>
                        <span class="font-medium text-slate-900 dark:text-white">Propiedades</span>
                    </nav>
                    <h1 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Inventario de propiedades</h1>
                    <p class="mt-1 text-sm text-slate-500">Administra casas, departamentos, locales y propiedades independientes.</p>
                </div>
            </div>

            @if (session('success'))
                <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-300">
                    {{ session('success') }}
                </div>
            @endif

            <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
                @foreach ([
                    ['label' => 'Total', 'value' => $stats['total'], 'icon' => 'domain', 'tone' => 'text-primary bg-blue-50 dark:bg-blue-900/20'],
                    ['label' => 'Disponibles', 'value' => $stats['available'], 'icon' => 'check_circle', 'tone' => 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20'],
                    ['label' => 'Apartadas', 'value' => $stats['reserved'], 'icon' => 'schedule', 'tone' => 'text-amber-600 bg-amber-50 dark:bg-amber-900/20'],
                    ['label' => 'Vendidas / rentadas', 'value' => $stats['closed'], 'icon' => 'verified', 'tone' => 'text-indigo-600 bg-indigo-50 dark:bg-indigo-900/20'],
                ] as $stat)
                    <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <div class="flex items-center justify-between gap-3">
                            <div>
                                <p class="text-xs font-bold uppercase tracking-wider text-slate-400">{{ $stat['label'] }}</p>
                                <p class="mt-1 text-2xl font-black text-slate-900 dark:text-white">{{ $stat['value'] }}</p>
                            </div>
                            <span class="material-symbols-outlined rounded-lg p-2 {{ $stat['tone'] }}">{{ $stat['icon'] }}</span>
                        </div>
                    </div>
                @endforeach
            </div>

            <form method="GET" action="{{ route('realEstate.properties') }}"
                class="grid gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 md:grid-cols-2 xl:grid-cols-6">
                <div class="relative md:col-span-2">
                    <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
                    <input name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Nombre, referencia o fraccionamiento"
                        class="h-10 w-full rounded-lg border border-slate-200 bg-slate-50 pl-10 pr-3 text-sm dark:border-slate-700 dark:bg-slate-800 dark:text-white" />
                </div>
                <select name="development_id" class="h-10 rounded-lg border border-slate-200 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-800 dark:text-white">
                    <option value="">Todos los fraccionamientos</option>
                    @foreach ($developments as $development)
                        <option value="{{ $development->id }}" @selected((string) ($filters['development_id'] ?? '') === (string) $development->id)>{{ $development->name }}</option>
                    @endforeach
                </select>
                <select name="unit_type_id" class="h-10 rounded-lg border border-slate-200 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-800 dark:text-white">
                    <option value="">Todos los tipos</option>
                    @foreach ($unitTypes as $type)
                        <option value="{{ $type->id }}" @selected((string) ($filters['unit_type_id'] ?? '') === (string) $type->id)>{{ $type->name }}</option>
                    @endforeach
                </select>
                <select name="status" class="h-10 rounded-lg border border-slate-200 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-800 dark:text-white">
                    <option value="">Todos los estados</option>
                    @foreach ($statusLabels as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['status'] ?? '') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <div class="flex gap-2">
                    <button class="flex h-10 flex-1 items-center justify-center rounded-lg bg-slate-900 px-4 text-sm font-semibold text-white hover:bg-slate-700 dark:bg-primary" type="submit">Filtrar</button>
                    <a href="{{ route('realEstate.properties') }}" class="flex h-10 items-center justify-center rounded-lg border border-slate-200 px-3 text-slate-500 hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800" title="Limpiar filtros">
                        <span class="material-symbols-outlined text-lg">filter_alt_off</span>
                    </a>
                </div>
            </form>

            <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[900px] text-left">
                        <thead class="border-b border-slate-200 bg-slate-50 text-[11px] uppercase tracking-wider text-slate-500 dark:border-slate-800 dark:bg-slate-800/60">
                            <tr>
                                <th class="px-5 py-3 font-semibold">Propiedad</th>
                                <th class="px-5 py-3 font-semibold">Ubicación comercial</th>
                                <th class="px-5 py-3 font-semibold">Tipo</th>
                                <th class="px-5 py-3 text-right font-semibold">Superficie</th>
                                <th class="px-5 py-3 text-right font-semibold">Precio</th>
                                <th class="px-5 py-3 text-center font-semibold">Estado</th>
                                <th class="px-5 py-3 text-right font-semibold">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @forelse ($properties as $property)
                                @php
                                    $development = $property->development ?? $property->developmentUnitModel?->development;
                                    $model = $property->developmentUnitModel?->unitModel ?? $property->unitModel;
                                    $image = $property->images->first()?->image_url;
                                    $area = $property->built_area_sqm ?: $property->lot_area_sqm;
                                @endphp
                                <tr class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
                                    <td class="px-5 py-4">
                                        <a href="{{ route('realEstate.property.show', $property->id) }}" class="flex items-center gap-3">
                                            <div class="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-slate-100 dark:bg-slate-800">
                                                @if ($image)
                                                    <img src="{{ $image }}" alt="{{ $property->name }}" class="size-full object-cover" />
                                                @else
                                                    <span class="material-symbols-outlined text-slate-400">home_work</span>
                                                @endif
                                            </div>
                                            <div class="min-w-0">
                                                <p class="truncate text-sm font-bold text-slate-900 hover:text-primary dark:text-white">{{ $property->name }}</p>
                                                <p class="truncate text-xs text-slate-400">{{ $property->slug }}</p>
                                            </div>
                                        </a>
                                    </td>
                                    <td class="px-5 py-4">
                                        <p class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ $development?->name ?? 'Propiedad independiente' }}</p>
                                        <p class="text-xs text-slate-400">{{ $property->realEstateAgency?->name }}</p>
                                    </td>
                                    <td class="px-5 py-4 text-sm text-slate-600 dark:text-slate-300">
                                        {{ $property->unitType?->name ?? 'Sin tipo' }}
                                        @if ($model)
                                            <span class="block text-xs text-slate-400">{{ $model->name }}</span>
                                        @endif
                                    </td>
                                    <td class="px-5 py-4 text-right text-sm text-slate-700 dark:text-slate-200">{{ $area ? number_format((float) $area, 2) . ' m²' : '—' }}</td>
                                    <td class="px-5 py-4 text-right text-sm font-bold text-slate-900 dark:text-white">
                                        {{ $property->price !== null ? '$' . number_format((float) $property->price, 2) : 'Por definir' }}
                                        <span class="block text-[10px] font-medium text-slate-400">{{ $property->currency }}</span>
                                    </td>
                                    <td class="px-5 py-4 text-center">
                                        <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold {{ $statusClasses[$property->status] ?? $statusClasses['unavailable'] }}">
                                            {{ $statusLabels[$property->status] ?? ucfirst($property->status) }}
                                        </span>
                                    </td>
                                    <td class="px-5 py-4">
                                        <div class="flex justify-end gap-1">
                                            <a href="{{ route('realEstate.property.show', $property->id) }}" class="rounded-lg p-2 text-slate-400 hover:bg-blue-50 hover:text-primary dark:hover:bg-blue-900/20" title="Ver">
                                                <span class="material-symbols-outlined text-lg">visibility</span>
                                            </a>
                                            @if ((int) auth()->user()->role_id !== 3 || (int) $property->owner_user_id === (int) auth()->id())
                                            <a href="{{ route('realEstate.property.edit', $property->id) }}" class="rounded-lg p-2 text-slate-400 hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-900/20" title="Editar">
                                                <span class="material-symbols-outlined text-lg">edit</span>
                                            </a>
                                            <form method="POST" action="{{ route('realEstate.property.destroy', $property->id) }}" onsubmit="return confirm('¿Archivar esta propiedad?');">
                                                @csrf
                                                @method('DELETE')
                                                <button class="rounded-lg p-2 text-slate-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20" title="Archivar">
                                                    <span class="material-symbols-outlined text-lg">archive</span>
                                                </button>
                                            </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-6 py-16 text-center">
                                        <span class="material-symbols-outlined text-5xl text-slate-300">holiday_village</span>
                                        <p class="mt-3 font-semibold text-slate-700 dark:text-slate-200">No se encontraron propiedades</p>
                                        <p class="mt-1 text-sm text-slate-400">Crea una propiedad o ajusta los filtros de búsqueda.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($properties->hasPages())
                    <div class="border-t border-slate-200 px-5 py-4 dark:border-slate-800">
                        {{ $properties->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection