<?php
$judul = "Data User";
$menu  = "users";
include 'layout/header.php';
if($_SESSION['role'] != 'direktur') die("Akses ditolak");
$data = mysqli_query($conn,"SELECT * FROM users ORDER BY id_user DESC");
?>

<?php include 'layout/sidebar.php'; ?>

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    --text-dark:    #111827;
    --text-mid:     #374151;
    --text-soft:    #4b7a5c;
    --text-muted:   #9ca3af;

    --shadow-sm:    0 2px 8px rgba(0,0,0,0.05);
    --shadow-green: 0 4px 16px rgba(22,163,74,0.15);
}

/* ── Page card ── */
.page-card {
    background: #ffffff;
    border: 1.5px solid var(--green-100);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-family: 'DM Sans', sans-serif;
}

/* ── Card header ── */
.page-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f0fdf4, #e8faf1);
    border-bottom: 1.5px solid var(--green-100);
}

.page-card-header h5 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.01em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-card-header h5 span {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green-500);
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
}

/* ── Btn tambah ── */
.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--green-700), var(--green-500));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 9px;
    text-decoration: none;
    transition: opacity 0.18s, transform 0.18s;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 10px rgba(22,163,74,0.25);
}

.btn-add:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff;
}

/* ── Card body ── */
.page-card-body { padding: 0; }

/* ── Table ── */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead tr {
    background: linear-gradient(135deg, #f0fdf4, #e8faf1);
    border-bottom: 2px solid var(--green-100);
}

.data-table thead th {
    padding: 12px 16px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green-700);
    white-space: nowrap;
    text-align: left;
}

.data-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

.data-table tbody tr:last-child { border-bottom: none; }

.data-table tbody tr:hover { background: var(--green-50); }

.data-table td {
    padding: 13px 16px;
    font-size: 0.83rem;
    color: var(--text-mid);
    vertical-align: middle;
}

.data-table td:first-child {
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
}

/* ── Badges ── */
.badge-role {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #dcfce7;
    border: 1px solid var(--green-200);
    color: var(--green-700);
}

.badge-status-on {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #dcfce7;
    border: 1px solid var(--green-200);
    color: var(--green-700);
}

.badge-status-on::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--green-500);
    box-shadow: 0 0 4px rgba(34,197,94,0.5);
}

.badge-status-off {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.badge-status-off::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #f87171;
}

/* ── Action buttons ── */
.btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 0.73rem;
    font-weight: 600;
    text-decoration: none;
    background: #fefce8;
    border: 1.5px solid #fde68a;
    color: #ca8a04;
    transition: all 0.15s;
}

.btn-edit:hover {
    background: #fef08a;
    border-color: #facc15;
    color: #92400e;
    transform: translateY(-1px);
}

.btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 0.73rem;
    font-weight: 600;
    text-decoration: none;
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    transition: all 0.15s;
}

.btn-delete:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #991b1b;
    transform: translateY(-1px);
}

/* ── Empty row ── */
.empty-row td {
    text-align: center;
    padding: 48px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
</style>

<div class="page-card">

    <div class="page-card-header">
        <h5><span></span> Data User</h5>
        <a href="tambah_user.php" class="btn-add">+ Tambah User</a>
    </div>

    <div class="page-card-body">
        <div style="overflow-x:auto;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th width="56">No</th>
                        <th>Nama</th>
                        <th>Username</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th width="160">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                $no = 1;
                $count = mysqli_num_rows($data);
                if($count == 0):
                ?>
                    <tr class="empty-row">
                        <td colspan="6">
                            <div style="font-size:32px;opacity:.3;margin-bottom:8px;">👤</div>
                            Belum ada data user.
                        </td>
                    </tr>
                <?php else: while($row = mysqli_fetch_assoc($data)): ?>
                    <tr>
                        <td><?= $no++ ?></td>
                        <td style="font-weight:600;color:#111827;"><?= htmlspecialchars($row['nama']) ?></td>
                        <td style="font-family:'Space Mono',monospace;font-size:.75rem;color:#6b7280;">
                            <?= htmlspecialchars($row['username']) ?>
                        </td>
                        <td>
                            <span class="badge-role"><?= ucfirst($row['role']) ?></span>
                        </td>
                        <td>
                            <?php if($row['status'] == 'aktif'): ?>
                                <span class="badge-status-on">Aktif</span>
                            <?php else: ?>
                                <span class="badge-status-off">Nonaktif</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <div style="display:flex;gap:6px;flex-wrap:wrap;">
                                <a href="edit_user.php?id=<?= $row['id_user'] ?>" class="btn-edit">
                                    ✏ Edit
                                </a>
                                <a href="hapus_user.php?id=<?= $row['id_user'] ?>" class="btn-delete"
                                   onclick="return confirm('Yakin ingin menghapus user ini?')">
                                    ✕ Hapus
                                </a>
                            </div>
                        </td>
                    </tr>
                <?php endwhile; endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>

<?php include 'layout/footer.php'; ?>