<?= $this->extend('layouts/main_layout') ?>
<?= $this->section('content') ?>

<div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-gray-900"><i class="bi bi-people"></i> Usuarios</h2>
    <a href="<?= site_url('users/create') ?>" class="bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 rounded-lg no-underline inline-flex items-center gap-2 shadow-sm transition">
        <i class="bi bi-person-plus"></i> Nuevo Usuario
    </a>
</div>

<div class="bg-violet-300 rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="text-gray-500 text-xs uppercase tracking-wider font-semibold">
                <tr>
                    <th class="text-left px-4 py-3">ID</th>
                    <th class="text-left px-4 py-3">Usuario</th>
                    <th class="text-left px-4 py-3">Email</th>
                    <th class="text-left px-4 py-3">Rol</th>
                    <th class="text-left px-4 py-3">Fecha Creacion</th>
                    <th class="text-center px-4 py-3">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php if (empty($users)): ?>
                <tr>
                    <td colspan="6" class="text-center text-gray-400 py-8">
                        <i class="bi bi-inbox text-3xl block mx-auto mb-2"></i>
                        No hay usuarios registrados
                    </td>
                </tr>
                <?php else: ?>
                <?php foreach ($users as $user): ?>
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-gray-600"><?= $user['id_usuario'] ?></td>
                    <td class="px-4 py-3"><span class="font-medium text-gray-900"><?= esc($user['username']) ?></span></td>
                    <td class="px-4 py-3 text-gray-600"><?= esc($user['email']) ?></td>
                    <td class="px-4 py-3">
                        <span class="inline-block text-xs font-semibold px-2 py-1 rounded-lg <?= $user['nombre_rol'] == 'admin' ? 'bg-violet-400 text-white' : 'bg-violet-300 text-white' ?>">
                            <?= ucfirst($user['nombre_rol']) ?>
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-600"><?= date('d/m/Y', strtotime($user['fecha_creacion'])) ?></td>
                    <td class="px-4 py-3">
                        <div class="flex items-center justify-center gap-2">
                            <a href="<?= site_url('users/' . $user['id_usuario'] . '/edit') ?>" class="bg-violet-300 border border-gray-200 rounded-lg px-2 py-1 text-xs transition hover:bg-gray-50 no-underline inline-flex items-center justify-center" title="Editar">
                                <i class="bi bi-pencil text-gray-600"></i>
                            </a>
                            <?php if ($user['id_usuario'] != session()->get('user_id')): ?>
                            <a href="#" onclick="confirmDelete(<?= $user['id_usuario'] ?>)" class="bg-violet-300 border border-gray-200 rounded-lg px-2 py-1 text-xs transition hover:bg-gray-50 no-underline inline-flex items-center justify-center" title="Eliminar">
                                <i class="bi bi-trash3 text-rose-600"></i>
                            </a>
                            <?php endif; ?>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
async function confirmDelete(id) {
    const result = await Swal.fire({ icon: 'question', title: 'Esta seguro?', text: 'Esta seguro de eliminar este usuario?', showCancelButton: true, confirmButtonText: 'Si, eliminar', cancelButtonText: 'Cancelar' });
    if (result.isConfirmed) {
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = '<?= site_url('users') ?>/' + id;
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = '_method';
        input.value = 'DELETE';
        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }
}
</script>

<?= $this->endSection() ?>