@extends('nyumba.layout')

@section('title', 'Biens immobiliers')

@section('content')
<div x-data="propertiesPage" x-init="init()" class="mx-auto max-w-7xl space-y-6">
    <template x-if="!hasApiKey()">
        <div class="rounded-2xl border border-amber-300 bg-amber-50 px-5 py-4 text-sm text-amber-950">
            Définissez <code class="rounded bg-white px-1">NYUMBA_FRONTEND_API_KEY</code> dans <code class="rounded bg-white px-1">.env</code> puis <code class="rounded bg-white px-1">php artisan config:clear</code>.
        </div>
    </template>

    <div x-show="flash" x-transition
         class="rounded-xl px-4 py-3 text-sm font-medium text-white shadow"
         :class="{
            'bg-red-600': flashKind === 'error',
            'bg-emerald-600': flashKind === 'success',
            'bg-slate-700': flashKind === 'info',
         }"
         x-text="flash"></div>

    <div class="flex flex-wrap items-center justify-between gap-3">
        <p class="text-sm text-slate-600">CRUD connecté à <span class="font-mono text-xs">GET/POST/PATCH/DELETE /api/properties</span></p>
        <button type="button"
                class="rounded-xl bg-emerald-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-600 disabled:opacity-50"
                @click="openCreate()" :disabled="!hasApiKey() || loading">
            + Nouveau bien
        </button>
    </div>

    <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200/70">
        <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 px-4 py-3">
            <p class="text-sm font-medium text-slate-700" x-text="displayPageIndicator()"></p>
            <div class="flex gap-2">
                <button type="button" class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm hover:bg-slate-50 disabled:opacity-40"
                        @click="gotoPage(-1)" :disabled="loading || (meta?.current_page ?? 1) <= 1">Précédent</button>
                <button type="button" class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm hover:bg-slate-50 disabled:opacity-40"
                        @click="gotoPage(1)" :disabled="loading || (meta?.current_page ?? 1) >= (meta?.last_page ?? 1)">Suivant</button>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-left text-sm">
                <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
                    <tr>
                        <th class="px-4 py-3">Nom</th>
                        <th class="px-4 py-3">Type</th>
                        <th class="px-4 py-3">Ville</th>
                        <th class="px-4 py-3">Province</th>
                        <th class="px-4 py-3">Propriétaire</th>
                        <th class="px-4 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <tr x-show="loading"><td colspan="6" class="px-4 py-8 text-center text-slate-500">Chargement…</td></tr>
                    <template x-if="!loading && items.length === 0">
                        <tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">Aucun bien. Créez-en un ou vérifiez la clé API.</td></tr>
                    </template>
                    <template x-if="!loading">
                        <template x-for="row in items" :key="row.id">
                            <tr class="hover:bg-slate-50/80">
                                <td class="px-4 py-3 font-medium text-slate-900" x-text="row.name"></td>
                                <td class="px-4 py-3 text-slate-700" x-text="row.type"></td>
                                <td class="px-4 py-3 text-slate-700" x-text="row.city"></td>
                                <td class="px-4 py-3 text-slate-700" x-text="row.province"></td>
                                <td class="px-4 py-3 text-slate-600" x-text="ownerLabel(row)"></td>
                                <td class="px-4 py-3 text-right space-x-2 whitespace-nowrap">
                                    <button type="button" class="text-emerald-700 font-medium hover:underline" @click="openEdit(row)">Modifier</button>
                                    <button type="button" class="text-red-600 font-medium hover:underline disabled:opacity-40"
                                            :disabled="deletingId === row.id" @click="remove(row)">Supprimer</button>
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

    <x-nyumba.module-prose headline="Capacités couvertes" :routes="['/api/properties','/api/units','/uploads/properties/{id}/photos']">
        <li>Unités (appartements, maisons, immeubles, parcelles) via ressource <span class="font-mono">/api/units</span> liée au bien.</li>
        <li>Photos : <span class="font-mono">POST /api/uploads/properties/{property}/photos</span> après création du bien.</li>
    </x-nyumba.module-prose>

    <div x-show="modalOpen" @click.self="closeModal()" class="fixed inset-0 z-50 flex items-end justify-center bg-slate-900/50 p-4 sm:items-center overflow-y-auto" style="display: none;">
        <div class="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-2xl bg-white p-6 shadow-xl" @click.outside="closeModal()">
            <div class="mb-4 flex items-center justify-between gap-2">
                <h2 class="text-lg font-semibold text-slate-900" x-text="editingId ? 'Modifier le bien' : 'Nouveau bien'"></h2>
                <button type="button" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100" @click="closeModal()" aria-label="Fermer">✕</button>
            </div>
            <form class="grid gap-4 sm:grid-cols-2" @submit.prevent="save()">
                <div class="sm:col-span-2">
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Nom</label>
                    <input type="text" x-model="form.name" required maxlength="255"
                           class="w-full rounded-xl border px-3 py-2 text-sm ring-emerald-500 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50"
                           :class="err('name') ? 'border-red-500' : 'border-slate-200'"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('name')" x-text="err('name')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Type</label>
                    <select x-model="form.type"
                            class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50">
                        <option value="appartement">Appartement</option>
                        <option value="maison">Maison</option>
                        <option value="immeuble">Immeuble</option>
                        <option value="parcelle">Parcelle</option>
                        <option value="studio">Studio</option>
                    </select>
                    <p class="mt-1 text-xs text-red-600" x-show="err('type')" x-text="err('type')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Province (ex. KIN)</label>
                    <input type="text" x-model="form.province" required maxlength="32"
                           class="w-full rounded-xl border px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50"
                           :class="err('province') ? 'border-red-500' : 'border-slate-200'"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('province')" x-text="err('province')"></p>
                </div>
                <div class="sm:col-span-2">
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Adresse</label>
                    <input type="text" x-model="form.address" required maxlength="255"
                           class="w-full rounded-xl border px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50"
                           :class="err('address') ? 'border-red-500' : 'border-slate-200'"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('address')" x-text="err('address')"></p>
                </div>
                <div class="sm:col-span-2">
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Ville</label>
                    <input type="text" x-model="form.city" required maxlength="255"
                           class="w-full rounded-xl border px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50"
                           :class="err('city') ? 'border-red-500' : 'border-slate-200'"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('city')" x-text="err('city')"></p>
                </div>
                <div class="sm:col-span-2">
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Propriétaire (utilisateur)</label>
                    <select x-model="form.owner_id" required
                            class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50">
                        <option value="" disabled>Choisir…</option>
                        <template x-for="u in owners" :key="u.id">
                            <option :value="u.id" x-text="`${u.name} (${u.email})`"></option>
                        </template>
                    </select>
                    <p class="mt-1 text-xs text-red-600" x-show="err('owner_id')" x-text="err('owner_id')"></p>
                    <p class="mt-1 text-[11px] text-slate-500">Liste jusqu’à 100 utilisateurs. Créez d’abord un propriétaire dans Utilisateurs.</p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Latitude (optionnel)</label>
                    <input type="number" step="any" x-model="form.latitude"
                           class="w-full rounded-xl border px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50"
                           :class="err('latitude') ? 'border-red-500' : 'border-slate-200'"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('latitude')" x-text="err('latitude')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Longitude (optionnel)</label>
                    <input type="number" step="any" x-model="form.longitude"
                           class="w-full rounded-xl border px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50"
                           :class="err('longitude') ? 'border-red-500' : 'border-slate-200'"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('longitude')" x-text="err('longitude')"></p>
                </div>
                <div class="sm:col-span-2">
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Description</label>
                    <textarea x-model="form.description" rows="3"
                              class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50"></textarea>
                    <p class="mt-1 text-xs text-red-600" x-show="err('description')" x-text="err('description')"></p>
                </div>
                <div class="sm:col-span-2 flex justify-end gap-2 pt-2">
                    <button type="button" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold hover:bg-slate-50" @click="closeModal()" :disabled="saving">Annuler</button>
                    <button type="submit"
                            class="rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-emerald-600 disabled:opacity-60"
                            :disabled="saving" x-text="saving ? 'Enregistrement…' : 'Enregistrer'"></button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection