Tul xxx Tul

Viewing: index.php

<?php
    $roleLabels = [
        'super_admin' => 'Super Admin',
        'admin' => 'Admin',
        'editor' => 'Editor',
    ];
?>

<section class="space-y-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <p class="text-sm font-semibold text-slate-500">Dashboard / Administradores</p>
            <h1 class="mt-2 text-3xl font-black text-slate-950">Usuarios administradores</h1>
            <p class="mt-2 text-sm text-slate-500">Control de accesos, roles, estados y seguridad del panel.</p>
        </div>

        <?php if ($canWrite): ?>
            <a href="<?= url('users/create') ?>" class="inline-flex items-center justify-center rounded-lg bg-slate-950 px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-gold hover:text-black">
                Nuevo usuario
            </a>
        <?php endif; ?>
    </div>

    <div class="rounded-[2.5rem] border border-slate-200 bg-white p-6 shadow-xl shadow-slate-200/50 overflow-hidden">
        <div class="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div class="relative max-w-md flex-1 group">
                <input id="userSearch" type="search" placeholder="Buscar administrador..."
                    class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-5 py-3.5 text-sm outline-none transition focus:border-gold focus:bg-white focus:ring-4 focus:ring-gold/10">
                <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-gold transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                </div>
            </div>
            <div class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">
                <span id="userCount" class="text-slate-950"><?= count($users) ?></span> Administradores
            </div>
        </div>

        <div class="overflow-x-auto rounded-3xl border border-slate-100">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50/50 text-left text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">
                    <tr>
                        <th class="px-6 py-5">Perfil</th>
                        <th class="px-6 py-5">Información de Contacto</th>
                        <th class="px-6 py-5">Estado</th>
                        <th class="px-6 py-5 text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody id="usersTable" class="divide-y divide-slate-50 bg-white">
                    <?php foreach ($users as $record): ?>
                        <tr class="user-row transition hover:bg-slate-50/50" data-search="<?= clean(strtolower($record['name'] . ' ' . $record['username'] . ' ' . $record['email'])) ?>">
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-4">
                                    <?php if (!empty($record['avatar'])): ?>
                                        <img src="<?= url($record['avatar']) ?>" alt="<?= clean($record['name']) ?>" class="h-12 w-12 rounded-2xl object-cover border-2 border-white shadow-sm">
                                    <?php else: ?>
                                        <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-950 text-base font-black text-gold shadow-sm">
                                            <?= clean(strtoupper(substr($record['name'], 0, 1))) ?>
                                        </div>
                                    <?php endif; ?>
                                    <div class="flex flex-col">
                                        <span class="font-black text-slate-950 text-sm leading-tight"><?= clean($record['name']) ?></span>
                                        <span class="text-[10px] text-slate-400 mt-0.5 font-bold uppercase tracking-widest">@<?= clean($record['username']) ?></span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-2 text-slate-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-300"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                    <span class="text-xs font-medium"><?= clean($record['email']) ?></span>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <span class="inline-flex items-center rounded-full px-4 py-1.5 text-[9px] font-black uppercase tracking-widest transition-all <?= $record['status'] === 'activo' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-rose-50 text-rose-600 border border-rose-100' ?>">
                                    <span class="w-1.5 h-1.5 rounded-full mr-2 bg-current animate-pulse"></span>
                                    <?= clean($record['status']) ?>
                                </span>
                            </td>
                            <td class="px-6 py-5 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <?php if ($canWrite): ?>
                                        <a href="<?= url('users/edit/' . $record['id']) ?>" class="w-10 h-10 flex items-center justify-center rounded-xl border border-slate-200 text-slate-400 transition hover:border-gold hover:text-slate-950 hover:bg-gold/5" title="Editar">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

                                        <?php if ((int) $record['id'] !== Auth::id()): ?>
                                            <button type="button" data-delete-url="<?= url('users/delete/' . $record['id']) ?>" data-delete-name="<?= clean($record['name']) ?>" class="delete-user w-10 h-10 flex items-center justify-center rounded-xl bg-rose-50 text-rose-400 transition hover:bg-rose-600 hover:text-white" title="Eliminar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                            </button>
                                        <?php else: ?>
                                            <div class="w-10 h-10 flex items-center justify-center rounded-xl bg-slate-50 text-slate-300" title="Tu perfil">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <div class="mt-6 flex items-center justify-between">
            <button id="prevPage" class="rounded-xl border border-slate-200 px-4 py-2 text-[10px] font-black uppercase tracking-widest text-slate-600 disabled:opacity-40 transition hover:bg-slate-50">Anterior</button>
            <span id="pageInfo" class="text-[10px] font-black uppercase tracking-widest text-slate-400"></span>
            <button id="nextPage" class="rounded-xl border border-slate-200 px-4 py-2 text-[10px] font-black uppercase tracking-widest text-slate-600 disabled:opacity-40 transition hover:bg-slate-50">Siguiente</button>
        </div>
    </div>
</section>

<div id="deleteModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 px-4 backdrop-blur-sm">
    <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-soft">
        <h2 class="text-xl font-black text-slate-950">Eliminar usuario</h2>
        <p class="mt-3 text-sm text-slate-500 font-medium">Esta acción eliminará **permanentemente** al usuario del sistema. Esta operación no se puede deshacer.</p>
        <p id="deleteName" class="mt-4 rounded-lg bg-slate-50 p-3 text-sm font-bold text-slate-700"></p>

        <form id="deleteForm" method="POST" class="mt-6 flex justify-end gap-2">
            <?= csrf_field() ?>
            <input type="hidden" name="action" value="delete">
            <button type="button" id="cancelDelete" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-bold text-slate-700">Cancelar</button>
            <button type="submit" class="rounded-lg bg-red-600 px-4 py-2 text-sm font-bold text-white">Eliminar</button>
        </form>
    </div>
</div>

<script>
    const rows = [...document.querySelectorAll('.user-row')];
    const search = document.getElementById('userSearch');
    const count = document.getElementById('userCount');
    const prev = document.getElementById('prevPage');
    const next = document.getElementById('nextPage');
    const pageInfo = document.getElementById('pageInfo');
    let page = 1;
    const perPage = 8;

    function filteredRows() {
        const term = search.value.trim().toLowerCase();
        return rows.filter(row => row.dataset.search.includes(term));
    }

    function renderRows() {
        const filtered = filteredRows();
        const totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
        page = Math.min(page, totalPages);

        rows.forEach(row => row.classList.add('hidden'));
        filtered.slice((page - 1) * perPage, page * perPage).forEach(row => row.classList.remove('hidden'));

        count.textContent = filtered.length;
        pageInfo.textContent = `Pagina ${page} de ${totalPages}`;
        prev.disabled = page === 1;
        next.disabled = page === totalPages;
    }

    search.addEventListener('input', () => { page = 1; renderRows(); });
    prev.addEventListener('click', () => { page--; renderRows(); });
    next.addEventListener('click', () => { page++; renderRows(); });
    renderRows();

    const modal = document.getElementById('deleteModal');
    const form = document.getElementById('deleteForm');
    const nameBox = document.getElementById('deleteName');

    document.querySelectorAll('.delete-user').forEach(button => {
        button.addEventListener('click', () => {
            form.action = button.dataset.deleteUrl;
            nameBox.textContent = button.dataset.deleteName;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        });
    });

    document.getElementById('cancelDelete').addEventListener('click', () => {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    });
</script>
User / IP	: 216.73.216.159
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64