@extends('plantilla.app')
@section('titulo', 'USUARIOS - Gestión de usuarios')
@section('contenido')

{{-- ALERTA --}}
@if (session('success'))
    <div class="mb-6 flex animate-fade-in-down items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-50/80 p-4 text-sm text-emerald-800 shadow-sm backdrop-blur-sm">
        <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-200/50">
            <i class="fa-solid fa-check text-emerald-600"></i>
        </div>
        <p class="font-medium">{{ session('success') }}</p>
    </div>
@endif

{{-- ENCABEZADO --}}
<div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    <div>
        <div class="flex items-center gap-2">
            <span class="flex h-6 w-6 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
                <i class="fa-solid fa-users text-xs"></i>
            </span>
            <p class="text-xs font-bold uppercase tracking-wider text-indigo-600">Gestión</p>
        </div>
        <h1 class="mt-1 text-3xl font-extrabold tracking-tight text-slate-900">Usuarios</h1>
        <p class="mt-2 text-sm text-slate-500">Administra los accesos, roles y detalles de los usuarios del sistema.</p>
    </div>

    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
        {{-- Botón abre modal Agregar --}}
        <button type="button" id="btnOpenCreate"
           class="group inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-600/30 transition-all hover:bg-indigo-700 hover:shadow-indigo-600/40 active:scale-[0.98]">
            <i class="fa-solid fa-plus transition-transform group-hover:rotate-90"></i>
            <span>Agregar Usuario</span>
        </button>
    </div>
</div>

{{-- TABLA DE USUARIOS --}}
<div class="mt-8 rounded-2xl border border-slate-200/60 bg-white shadow-xl shadow-slate-200/40">
    <div class="overflow-x-auto rounded-2xl">
        <table class="min-w-full text-left text-sm whitespace-nowrap">
            <thead class="border-b border-slate-200 bg-slate-50/50 text-slate-500">
                <tr>
                    <th scope="col" class="px-6 py-4 font-semibold">Usuario</th>
                    <th scope="col" class="px-6 py-4 font-semibold text-center">DNI</th>
                    <th scope="col" class="px-6 py-4 font-semibold text-center">Tipo</th>
                    <th scope="col" class="px-6 py-4 font-semibold text-center">Estado</th>
                    <th scope="col" class="px-6 py-4 font-semibold text-right">Acciones</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-slate-100">
                @forelse ($usuarios as $usuario)
                    <tr class="transition-colors hover:bg-slate-50/80">
                        {{-- Nombres, Avatar y Email --}}
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-4">
                                <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-100 to-purple-100 font-bold text-indigo-700">
                                    {{ strtoupper(substr($usuario->nombres, 0, 1)) }}
                                </div>
                                <div>
                                    <p class="font-semibold text-slate-900">{{ $usuario->nombres }}</p>
                                    <p class="text-xs text-slate-500">{{ $usuario->email }}</p>
                                </div>
                            </div>
                        </td>

                        {{-- DNI --}}
                        <td class="px-6 py-4 text-center font-medium text-slate-600">
                            {{ $usuario->dni }}
                        </td>

                        {{-- Tipo / Rol --}}
                        <td class="px-6 py-4 text-center">
                            @if(strtoupper($usuario->tipo) === 'ADMIN')
                                <span class="inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10">
                                    <i class="fa-solid fa-shield-halved mr-1.5 text-[10px]"></i> Admin
                                </span>
                            @elseif(strtoupper($usuario->tipo) === 'DESPACHADOR')
                                <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-700/10">
                                    <i class="fa-solid fa-truck mr-1.5 text-[10px]"></i> Despachador
                                </span>
                            @else
                                <span class="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/10">
                                    <i class="fa-regular fa-user mr-1.5 text-[10px]"></i> Usuario
                                </span>
                            @endif
                        </td>

                        {{-- Estado --}}
                        <td class="px-6 py-4 text-center">
                            @if(strtolower($usuario->estado) === 'activo')
                                <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20">
                                    <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Activo
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700 ring-1 ring-inset ring-rose-600/20">
                                    <span class="h-1.5 w-1.5 rounded-full bg-rose-500"></span> Bloqueado
                                </span>
                            @endif
                        </td>

                        {{-- Acciones --}}
                        <td class="px-6 py-4">
                            <div class="flex justify-end gap-2">
                                {{-- Botón Editar --}}
                                <button type="button" class="btnOpenEdit group flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 text-slate-500 transition-all hover:bg-indigo-50 hover:text-indigo-600 border border-slate-200 hover:border-indigo-200" title="Editar"
                                    data-id="{{ $usuario->id }}"
                                    data-nombres="{{ $usuario->nombres }}"
                                    data-email="{{ $usuario->email }}"
                                    data-dni="{{ $usuario->dni }}"
                                    data-tipo="{{ $usuario->tipo }}"
                                    data-estado="{{ $usuario->estado }}">
                                    <i class="fa-regular fa-pen-to-square transition-transform group-hover:scale-110"></i>
                                </button>

                                {{-- Botón Eliminar --}}
                                <button type="button" class="btnOpenDelete group flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 text-slate-500 transition-all hover:bg-rose-50 hover:text-rose-600 border border-slate-200 hover:border-rose-200" title="Eliminar"
                                    data-id="{{ $usuario->id }}"
                                    data-nombres="{{ $usuario->nombres }}">
                                    <i class="fa-regular fa-trash-can transition-transform group-hover:scale-110"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-16 text-center">
                            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
                                <i class="fa-solid fa-users-slash text-2xl"></i>
                            </div>
                            <h3 class="mt-4 text-sm font-semibold text-slate-900">No hay usuarios registrados</h3>
                            <p class="mt-1 text-sm text-slate-500">Comienza agregando un nuevo usuario al sistema.</p>
                        </td>
                    </tr>
                @endempty
            </tbody>
        </table>
    </div>
</div>

{{-- MODAL CREAR --}}
<div id="modalCreate" class="fixed inset-0 z-[60] hidden transition-opacity">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity"></div>

    <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
        <div class="relative w-full max-w-lg transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-2xl transition-all">

            <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-50 text-indigo-600">
                        <i class="fa-solid fa-user-plus"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-900">Nuevo Usuario</h3>
                </div>
                <button type="button" class="btnCloseCreate flex h-8 w-8 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <form method="POST" action="{{ route('configuracion.store') }}" class="px-6 py-5">
                @csrf
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label class="mb-1 block text-sm font-medium text-slate-700">Nombres completos</label>
                        <input name="nombres" required placeholder="Ej. Juan Pérez"
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 transition-all">
                    </div>

                    <div class="sm:col-span-2">
                        <label class="mb-1 block text-sm font-medium text-slate-700">Correo Electrónico</label>
                        <input name="email" type="email" required placeholder="ejemplo@correo.com"
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 transition-all">
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">DNI</label>
                        <input name="dni" type="number" required placeholder="12345678"
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 transition-all">
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">Tipo de Usuario</label>
                        <select name="tipo" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 transition-all">
                            <option value="USERS">Usuario</option>
                            <option value="ADMIN">Administrador</option>
                            <option value="DESPACHADOR">Despachador</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">Estado</label>
                        <select name="estado" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 transition-all">
                            <option value="activo">Activo</option>
                            <option value="bloqueado">Bloqueado</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">Almacén Asignado</label>
                        <select name="almacen_id" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 transition-all">
                            @foreach ($almacen as $a)
                                <option value="{{ $a->id }}">{{ $a->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="mt-8 flex items-center justify-end gap-3 border-t border-slate-100 pt-5">
                    <button type="button" class="btnCloseCreate rounded-xl px-4 py-2 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-100">
                        Cancelar
                    </button>
                    <button type="submit" class="rounded-xl bg-indigo-600 px-5 py-2 text-sm font-semibold text-white shadow-sm transition-all hover:bg-indigo-700">
                        Guardar Usuario
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL EDITAR --}}
<div id="modalEdit" class="fixed inset-0 z-[60] hidden transition-opacity">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity"></div>

    <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
        <div class="relative w-full max-w-lg transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-2xl transition-all">

            <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-50 text-indigo-600">
                        <i class="fa-solid fa-pen"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-900">Editar Usuario</h3>
                </div>
                <button type="button" class="btnCloseEdit flex h-8 w-8 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <form id="formEdit" method="POST" action="" class="px-6 py-5">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label class="mb-1 block text-sm font-medium text-slate-700">Nombres completos</label>
                        <input id="edit_name" name="nombres" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm transition-all">
                    </div>

                    <div class="sm:col-span-2">
                        <label class="mb-1 block text-sm font-medium text-slate-700">Correo Electrónico</label>
                        <input id="edit_email" name="email" type="email" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm transition-all">
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">DNI</label>
                        <input id="edit_dni" name="dni" type="number" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm transition-all">
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">Tipo de Usuario</label>
                        <select id="edit_tipo" name="tipo" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm transition-all">
                            <option value="USERS">Usuario</option>
                            <option value="ADMIN">Administrador</option>
                            <option value="DESPACHADOR">Despachador</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">Estado</label>
                        <select id="edit_estado" name="estado" required
                            class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm transition-all">
                            <option value="activo">Activo</option>
                            <option value="bloqueado">Bloqueado</option>
                        </select>
                    </div>
                </div>

                <div class="mt-8 flex items-center justify-end gap-3 border-t border-slate-100 pt-5">
                    <button type="button" class="btnCloseEdit rounded-xl px-4 py-2 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-100">
                        Cancelar
                    </button>
                    <button type="submit" class="rounded-xl bg-indigo-600 px-5 py-2 text-sm font-semibold text-white shadow-sm transition-all hover:bg-indigo-700">
                        Actualizar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL ELIMINAR --}}
<div id="modalDelete" class="fixed inset-0 z-[60] hidden transition-opacity">
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"></div>

    <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
        <div class="relative w-full max-w-md transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-2xl transition-all">

            <div class="px-6 py-6 text-center">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-rose-100">
                    <i class="fa-solid fa-triangle-exclamation text-2xl text-rose-600"></i>
                </div>
                <h3 class="mt-4 text-lg font-bold text-slate-900">¿Eliminar Usuario?</h3>
                <p class="mt-2 text-sm text-slate-500">
                    Estás a punto de eliminar a <span id="delete_name" class="font-bold text-slate-700"></span>. Esta acción no se puede deshacer.
                </p>
            </div>

            <form id="formDelete" method="POST" action="">
                @csrf
                @method('DELETE')
                <div class="flex items-center justify-center gap-3 bg-slate-50 px-6 py-4">
                    <button type="button" class="btnCloseDelete rounded-xl px-4 py-2.5 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-200">
                        Cancelar
                    </button>
                    <button type="submit" class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-rose-700">
                        Sí, eliminar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const modalCreate = document.getElementById('modalCreate');
    const modalEdit = document.getElementById('modalEdit');
    const modalDelete = document.getElementById('modalDelete');

    const open = (m) => m.classList.remove('hidden');
    const close = (m) => m.classList.add('hidden');

    // Funciones Crear
    document.getElementById('btnOpenCreate')?.addEventListener('click', () => open(modalCreate));
    document.querySelectorAll('.btnCloseCreate').forEach(btn => btn.addEventListener('click', () => close(modalCreate)));

    // Funciones Editar
    const formEdit = document.getElementById('formEdit');
    document.querySelectorAll('.btnCloseEdit').forEach(btn => btn.addEventListener('click', () => close(modalEdit)));

    document.querySelectorAll('.btnOpenEdit').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;

            // Asegúrate de que tu ruta en web.php coincida con esto, ej: Route::put('/configuracion/{id}')
            if(formEdit) formEdit.action = `{{ url('/configuracion') }}/${id}`;

            if(document.getElementById('edit_name')) document.getElementById('edit_name').value = btn.dataset.nombres || '';
            if(document.getElementById('edit_email')) document.getElementById('edit_email').value = btn.dataset.email || '';
            if(document.getElementById('edit_dni')) document.getElementById('edit_dni').value = btn.dataset.dni || '';
            if(document.getElementById('edit_tipo')) document.getElementById('edit_tipo').value = btn.dataset.tipo || '';
            if(document.getElementById('edit_estado')) document.getElementById('edit_estado').value = btn.dataset.estado || '';

            if(modalEdit) open(modalEdit);
        });
    });

    // Funciones Eliminar
    const formDelete = document.getElementById('formDelete');
    document.querySelectorAll('.btnCloseDelete').forEach(btn => btn.addEventListener('click', () => close(modalDelete)));

    document.querySelectorAll('.btnOpenDelete').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;
            const name = btn.dataset.nombres || '';

            if(formDelete) formDelete.action = `{{ url('/configuracion') }}/${id}`;
            if(document.getElementById('delete_name')) document.getElementById('delete_name').textContent = name;

            if(modalDelete) open(modalDelete);
        });
    });

    // Bloquear ESC para que no cierre accidentalmente (opcional)
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') e.preventDefault();
    });
</script>

@endsection