@extends('nyumba.layout')

@section('title', 'Utilisateurs & rôles')

@section('content')
<div x-data="usersPage" 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 branché sur <span class="font-mono text-xs">/api/users</span> avec rôle et agence (RBAC).</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">
            + Nouvel utilisateur
        </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">Email</th>
                        <th class="px-4 py-3">Téléphone</th>
                        <th class="px-4 py-3">Rôle</th>
                        <th class="px-4 py-3">Agence</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 utilisateur.</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 font-mono text-xs" x-text="row.email"></td>
                                <td class="px-4 py-3 text-slate-700" x-text="row.phone || '—'"></td>
                                <td class="px-4 py-3 text-slate-700" x-text="roleName(row)"></td>
                                <td class="px-4 py-3 text-slate-600 text-xs" x-text="agencyName(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>

    <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="my-8 max-h-[90vh] w-full max-w-lg 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 utilisateur' : 'Nouvel utilisateur'"></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" @submit.prevent="save()">
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Nom complet</label>
                    <input type="text" x-model="form.name" 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('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">Email</label>
                    <input type="email" x-model="form.email" 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('email') ? 'border-red-500' : 'border-slate-200'"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('email')" x-text="err('email')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Mot de passe</label>
                    <input type="password" x-model="form.password"
                           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('password') ? 'border-red-500' : 'border-slate-200'"
                           :required="editingId === null" autocomplete="new-password"/>
                    <p class="mt-1 text-[11px] text-slate-500" x-show="editingId !== null">Laisser vide pour conserver le mot de passe actuel.</p>
                    <p class="mt-1 text-xs text-red-600" x-show="err('password')" x-text="err('password')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Téléphone</label>
                    <input type="text" x-model="form.phone" maxlength="32"
                           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"/>
                    <p class="mt-1 text-xs text-red-600" x-show="err('phone')" x-text="err('phone')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Rôle</label>
                    <select x-model="form.role_id"
                            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="">— Non défini —</option>
                        <template x-for="r in roles" :key="r.id">
                            <option :value="r.id" x-text="r.name"></option>
                        </template>
                    </select>
                    <p class="mt-1 text-xs text-red-600" x-show="err('role_id')" x-text="err('role_id')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Agence</label>
                    <select x-model="form.agency_id"
                            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="">— Sans agence —</option>
                        <template x-for="a in agencies" :key="a.id">
                            <option :value="a.id" x-text="a.city ? `${a.name} (${a.city})` : a.name"></option>
                        </template>
                    </select>
                    <p class="mt-1 text-xs text-red-600" x-show="err('agency_id')" x-text="err('agency_id')"></p>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Devise préférée</label>
                    <select x-model="form.preferred_currency"
                            class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm uppercase focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200/50">
                        <option>CDF</option>
                        <option>USD</option>
                        <option>EUR</option>
                    </select>
                    <p class="mt-1 text-xs text-red-600" x-show="err('preferred_currency')" x-text="err('preferred_currency')"></p>
                </div>
                <div class="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