
<?php

// =========================
// 1. KONFIGURASI DATABASE
// =========================

$host = 'localhost';
$db   = 'db_rpl2526';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";

$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];


// =========================
// 2. KONEKSI DATABASE
// =========================

try {

    $pdo = new PDO($dsn, $user, $pass, $options);

} catch (PDOException $e) {

    die("Koneksi gagal: " . $e->getMessage());

}


// =========================
// 3. AMBIL DATA USER
// =========================

try {

    $stmt = $pdo->query("
        SELECT
            id_user,
            name,
            email,
            role,
            created_at
        FROM tbl_users
        ORDER BY id_user ASC
    ");

    $users = $stmt->fetchAll();

} catch (PDOException $e) {

    die("Gagal mengambil data: " . $e->getMessage());

}

?>


<!DOCTYPE html>
<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Tabel Data User</title>


    <!-- Bootstrap Icons -->
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    >


    <style>

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }


        body {
            background-color: #f4f6f9;
            padding: 20px;
        }


        /* =========================
           CARD
        ========================= */

        .card-container {

            background: #ffffff;

            border-radius: 4px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);

            padding: 20px;

        }


        /* =========================
           TOP BAR
        ========================= */

        .top-bar {

            display: flex;

            gap: 6px;

            margin-bottom: 15px;

        }


        .btn-top {

            padding: 7px 14px;

            font-size: 13px;

            border: none;

            border-radius: 3px;

            color: white;

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            gap: 5px;

            text-decoration: none;

        }


        .btn-green {

            background-color: #28a745;

        }


        .btn-green:hover {

            background-color: #218838;

        }


        .btn-gray {

            background-color: #6c757d;

        }


        .btn-gray:hover {

            background-color: #5a6268;

        }


        /* =========================
           TABLE
        ========================= */

        .table-responsive {

            overflow-x: auto;

        }


        table {

            width: 100%;

            border-collapse: collapse;

            font-size: 13px;

        }


        th,
        td {

            padding: 10px 12px;

            text-align: left;

            vertical-align: middle;

            border-bottom: 1px solid #dee2e6;

        }


        th {

            font-weight: bold;

            color: #333;

            border-top: 1px solid #dee2e6;

            background-color: #fff;

        }


        th.sortable {

            cursor: pointer;

            position: relative;

        }


        th.sortable::after {

            content: '⇅';

            font-size: 10px;

            color: #aaa;

            margin-left: 6px;

        }


        tbody tr:hover {

            background-color: #f8f9fa;

        }


        /* =========================
           FOTO
        ========================= */

        .user-avatar {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            object-fit: cover;

            display: block;

        }


        /* =========================
           ACTION BUTTON
        ========================= */

        .action-group {

            display: flex;

            gap: 4px;

            flex-wrap: wrap;

        }


        .btn-action {

            padding: 5px 9px;

            font-size: 11px;

            border: none;

            border-radius: 3px;

            color: white;

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            gap: 3px;

            text-decoration: none;

        }


        .btn-blue {

            background-color: #007bff;

        }


        .btn-blue:hover {

            background-color: #0069d9;

        }


        .btn-red {

            background-color: #dc3545;

        }


        .btn-red:hover {

            background-color: #c82333;

        }


        /* =========================
           ROLE BADGE
        ========================= */

        .role-badge {

            padding: 3px 8px;

            border-radius: 12px;

            font-size: 11px;

            font-weight: bold;

            background-color: #e9ecef;

            color: #495057;

        }


        /* =========================
           EMPTY DATA
        ========================= */

        .empty-data {

            text-align: center;

            padding: 20px;

            color: #6c757d;

        }


        /* =========================
           RESPONSIVE
        ========================= */

        @media (max-width: 768px) {

            .card-container {

                padding: 10px;

            }


            .top-bar {

                flex-wrap: wrap;

            }


            .action-group {

                flex-direction: column;

                align-items: flex-start;

            }

        }

    </style>

</head>


<body>


    <div class="card-container">


        <!-- =========================
             TOMBOL ATAS
        ========================= -->

        <div class="top-bar">


            <!-- TAMBAH USER -->

            <a
                href="?pages=tambah"
                class="btn-top btn-green"
            >
                <i class="bi bi-person-plus"></i>
                Tambah User
            </a>


            <!-- TAMBAH MODAL -->

            <button
                type="button"
                class="btn-top btn-green"
            >
                <i class="bi bi-plus-lg"></i>
                Tambah Modal
            </button>


            <!-- LAPORAN -->

            <button
                type="button"
                class="btn-top btn-gray"
            >
                Laporan
            </button>


        </div>


        <!-- =========================
             TABLE
        ========================= -->

        <div class="table-responsive">


            <table>


                <thead>

                    <tr>

                        <th class="sortable">
                            No
                        </th>

                        <th class="sortable">
                            Photo
                        </th>

                        <th class="sortable">
                            Nama
                        </th>

                        <th class="sortable">
                            Email
                        </th>

                        <th class="sortable">
                            Role
                        </th>

                        <th class="sortable">
                            Tanggal Dibuat
                        </th>

                        <th class="sortable">
                            Aksi
                        </th>

                    </tr>

                </thead>


                <tbody>


                    <?php if (count($users) > 0): ?>


                        <?php

                        $no = 1;

                        foreach ($users as $row):

                        ?>


                            <tr>


                                <!-- NO -->

                                <td>
                                    <?= $no++; ?>
                                </td>


                                <!-- PHOTO -->

                                <td>

                                    <img
                                        src="https://api.dicebear.com/7.x/avataaars/svg?seed=<?= urlencode($row['name']); ?>"
                                        alt="Photo"
                                        class="user-avatar"
                                    >

                                </td>


                                <!-- NAMA -->

                                <td>

                                    <?= htmlspecialchars($row['name']); ?>

                                </td>


                                <!-- EMAIL -->

                                <td>

                                    <?= htmlspecialchars($row['email']); ?>

                                </td>


                                <!-- ROLE -->

                                <td>

                                    <span class="role-badge">

                                        <?= htmlspecialchars($row['role']); ?>

                                    </span>

                                </td>


                                <!-- TANGGAL -->

                                <td>

                                    <?= htmlspecialchars($row['created_at']); ?>

                                </td>


                                <!-- AKSI -->

                                <td>

                                    <div class="action-group">


                                        <!-- VIEW -->

                                        <a
                                            href="?pages=view&id=<?= urlencode($row['id_user']); ?>"
                                            class="btn-action btn-blue"
                                        >
                                            <i class="bi bi-eye"></i>
                                            View
                                        </a>


                                        <!-- EDIT -->

                                        <a
                                            href="?pages=edit&id=<?= urlencode($row['id_user']); ?>"
                                            class="btn-action btn-blue"
                                        >
                                            <i class="bi bi-pencil-square"></i>
                                            Edit
                                        </a>


                                        <!-- DELETE -->

                                        <a
                                            href="?pages=delete&id=<?= urlencode($row['id_user']); ?>"
                                            class="btn-action btn-red"
                                            onclick="return confirm('Yakin ingin menghapus data ini?');"
                                        >
                                            <i class="bi bi-trash"></i>
                                            Delete
                                        </a>


                                    </div>

                                </td>


                            </tr>


                        <?php endforeach; ?>


                    <?php else: ?>


                        <tr>

                            <td
                                colspan="7"
                                class="empty-data"
                            >
                                Tidak ada data ditemukan
                            </td>

                        </tr>


                    <?php endif; ?>


                </tbody>


            </table>


        </div>


    </div>


</body>

</html>
```
