<?php  
    include('loginsession.php');  
    error_reporting(E_ALL);  
    $filename = basename(__FILE__);  
    $save = mysqli_query($conn, "INSERT INTO novia_abc_user_logs (userid,filename) VALUES ('$userini_id','$filename')");  
    
    // ambil halaman dari URL, default = 1  
    $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;  
    $limit = 100;  
    $offset = ($page - 1) * $limit;  
    
    $cari = '';  
    if(isset($_GET['cari'])){  
        $cari = $_GET['cari'];  
    }  
    
    $pointacc = 0;  
    $point = "SELECT * FROM novia_abc_user_logs WHERE userid = '$userini_id' ORDER BY tanggal DESC";  
    $result = $conn->query($point);  
    if ($result->num_rows > 0) {  
        while($row = $result->fetch_assoc()) {  
            $pointacc++;  
        }  
    }  
?>  

<!DOCTYPE html>  
<html lang="id">  
<head>  
    <title>LACAK PASIEN — Sistem Informasi</title>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    
    <!-- Bootstrap 5 CSS -->  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">  
    <!-- Bootstrap Icons -->  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">  
    <!-- Google Font: Inter (modern & clean) -->  
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">  
    
    <link href="images/balance.ico" rel="icon" type="image/icon" />  
    
    <style>  
        /* =========================================================  
           MOSSGREEN PALETTE - Elegant Modern Moss Green  
        ========================================================= */  
        :root {  
            --mossgreen-50:  #f5f7f2;  
            --mossgreen-100: #e4eadc;  
            --mossgreen-200: #ccd7be;  
            --mossgreen-300: #aebe97;  
            --mossgreen-400: #8ea36f;  
            --mossgreen-500: #728652;  
            --mossgreen-600: #5d6e42;  
            --mossgreen-700: #4b5936;  
            --mossgreen-800: #3d482d;  
            --mossgreen-900: #323b25;  
            --mossgreen-950: #1e2417;  
            
            --bs-primary: var(--mossgreen-600);  
            --bs-secondary: var(--mossgreen-400);  
            --bs-success: var(--mossgreen-500);  
        }  

        * {  
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  
        }  

        body {  
            background: var(--mossgreen-50);  
            min-height: 100vh;  
            padding-bottom: 2rem;  
        }  

        /* ── Top Header / Brand ── */  
        .brand-header {  
            background: linear-gradient(135deg, var(--mossgreen-700) 0%, var(--mossgreen-800) 50%, var(--mossgreen-950) 100%);  
            padding: 1.25rem 0 0.75rem;  
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);  
            position: sticky;  
            top: 0;  
            z-index: 1030;  
        }  
        .brand-header .logo {  
            max-width: 200px;  
            height: auto;  
            filter: brightness(0) invert(1);  
            opacity: 0.9;  
        }  
        .brand-header .user-info {  
            color: rgba(255,255,255,0.85);  
            font-size: 0.9rem;  
            font-weight: 400;  
            letter-spacing: 0.3px;  
        }  
        .brand-header .user-info strong {  
            color: #fff;  
            font-weight: 600;  
        }  
        .brand-header .point-badge {  
            background: var(--mossgreen-500);  
            color: #fff;  
            border-radius: 50px;  
            padding: 0.2rem 0.8rem;  
            font-size: 0.8rem;  
            font-weight: 600;  
            display: inline-block;  
        }  

        /* ── Action Cards ── */  
        .action-card {  
            background: var(--mossgreen-200);
            border: none;  
            border-radius: 16px;  
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);  
            transition: all 0.3s ease;  
            padding: 0.75rem;  
            text-align: center;  
            height: 100%;  
        }  
        .action-card:hover {  
            transform: translateY(-4px);  
            box-shadow: 0 8px 25px rgba(77, 89, 54, 0.20);  
        }  
        .action-card .icon-circle {  
            width: 48px;  
            height: 48px;  
            border-radius: 50%;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            margin: 0 auto 0.5rem;  
            font-size: 1.4rem;  
            color: #fff;  
        }  
        .action-card .btn-action {  
            width: 100%;  
            border: none;  
            border-radius: 10px;  
            padding: 0.6rem 1rem;  
            font-weight: 600;  
            font-size: 0.85rem;  
            transition: all 0.2s;  
            color: #fff;  
        }  
        .action-card .btn-action:hover {  
            filter: brightness(1.1);  
        }  

        /* ── Search Box ── */  
        .search-wrapper {  
            background: var(--mossgreen-200);
            border-radius: 16px;  
            padding: 1.25rem 1.5rem;  
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);  
            margin-top: 0.5rem;  
        }  
        .search-wrapper .form-control {  
            border: 2px solid var(--mossgreen-200);  
            border-radius: 12px;  
            padding: 0.7rem 1.2rem;  
            font-size: 0.95rem;  
            transition: all 0.3s;  
            background: var(--mossgreen-50);  
        }  
        .search-wrapper .form-control:focus {  
            border-color: var(--mossgreen-500);  
            box-shadow: 0 0 0 4px rgba(114, 134, 82, 0.15);  
            background: #fff;  
        }  
        .search-wrapper .btn-search {  
            background: var(--mossgreen-600);  
            color: #fff;  
            border: none;  
            border-radius: 12px;  
            padding: 0.7rem 2rem;  
            font-weight: 600;  
            transition: all 0.3s;  
        }  
        .search-wrapper .btn-search:hover {  
            background: var(--mossgreen-700);  
            transform: scale(1.02);  
        }  

        /* ── Table Card ── */  
        .table-card {  
            background: #fff;  
            border-radius: 16px;  
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);  
            overflow: hidden;  
            margin-top: 1rem;  
        }  
        .table-card .table-header {  
            background: var(--mossgreen-100);  
            padding: 0.75rem 1.25rem;  
            border-bottom: 2px solid var(--mossgreen-300);  
        }  
        .table-card .table-header h6 {  
            color: var(--mossgreen-800);  
            font-weight: 700;  
            margin: 0;  
            text-transform: uppercase;  
            letter-spacing: 0.5px;  
            font-size: 0.8rem;  
        }  
        .table-card .table {  
            margin: 0;  
        }  
        .table-card .table thead th {  
            background: var(--mossgreen-700);  
            color: #fff;  
            font-weight: 600;  
            font-size: 0.75rem;  
            text-transform: uppercase;  
            letter-spacing: 0.5px;  
            padding: 0.75rem 0.6rem;  
            border: none;  
            white-space: nowrap;  
            position: sticky;  
            top: 0;  
        }  
        .table-card .table tbody td {  
            padding: 0.7rem 0.6rem;  
            font-size: 0.85rem;  
            vertical-align: middle;  
            border-bottom: 1px solid var(--mossgreen-100);  
        }  
        .table-card .table tbody tr {  
            transition: background 0.2s;  
        }  
        .table-card .table tbody tr:hover {  
            background: var(--mossgreen-50);  
        }  
        .table-card .table tbody tr:nth-child(even) {  
            background: #fafbf8;  
        }  
        .table-card .table tbody tr:nth-child(even):hover {  
            background: var(--mossgreen-100);  
        }  
        .table-card .table a {  
            color: var(--mossgreen-700);  
            text-decoration: none;  
            font-weight: 500;  
            transition: color 0.2s;  
        }  
        .table-card .table a:hover {  
            color: var(--mossgreen-500);  
            text-decoration: underline;  
        }  
        .table-card .table .wa-link {  
            color: #25D366;  
            font-weight: 600;  
        }  
        .table-card .table .wa-link:hover {  
            color: #128C7E;  
        }  
        .badge-age {  
            background: var(--mossgreen-200);  
            color: var(--mossgreen-800);  
            border-radius: 50px;  
            padding: 0.1rem 0.5rem;  
            font-size: 0.7rem;  
            font-weight: 600;  
        }  

        /* ── Pagination ── */  
        .pagination-wrapper {  
            background: #fff;  
            border-radius: 16px;  
            padding: 1rem 1.5rem;  
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);  
            margin-top: 1rem;  
        }  
        .pagination-wrapper .page-link {  
            border: none;  
            color: var(--mossgreen-700);  
            font-weight: 500;  
            padding: 0.5rem 0.9rem;  
            border-radius: 8px !important;  
            margin: 0 2px;  
            transition: all 0.2s;  
            background: transparent;  
        }  
        .pagination-wrapper .page-link:hover {  
            background: var(--mossgreen-100);  
            color: var(--mossgreen-800);  
        }  
        .pagination-wrapper .page-item.active .page-link {  
            background: var(--mossgreen-600);  
            color: #fff;  
            box-shadow: 0 2px 8px rgba(93, 110, 66, 0.3);  
        }  
        .pagination-wrapper .page-item.disabled .page-link {  
            color: var(--mossgreen-300);  
            background: transparent;  
        }  

        /* ── Scrollable Table on Mobile ── */  
        .table-responsive-custom {  
            overflow-x: auto;  
            -webkit-overflow-scrolling: touch;  
        }  
        .table-responsive-custom::-webkit-scrollbar {  
            height: 6px;  
        }  
        .table-responsive-custom::-webkit-scrollbar-thumb {  
            background: var(--mossgreen-300);  
            border-radius: 10px;  
        }  
        .table-responsive-custom::-webkit-scrollbar-track {  
            background: var(--mossgreen-100);  
        }  

        /* ── No Results ── */  
        .no-results {  
            padding: 3rem 1rem;  
            text-align: center;  
            color: var(--mossgreen-400);  
        }  
        .no-results i {  
            font-size: 3rem;  
            opacity: 0.5;  
        }  

        /* ── Responsive tweaks ── */  
        @media (max-width: 576px) {  
            .brand-header {  
                padding: 0.75rem 0 0.5rem;  
            }  
            .brand-header .logo {  
                max-width: 140px;  
            }  
            .brand-header .user-info {  
                font-size: 0.75rem;  
            }  
            .action-card {  
                padding: 0.5rem;  
            }  
            .action-card .icon-circle {  
                width: 36px;  
                height: 36px;  
                font-size: 1rem;  
            }  
            .action-card .btn-action {  
                font-size: 0.75rem;  
                padding: 0.4rem 0.6rem;  
            }  
            .search-wrapper {  
                padding: 1rem;  
            }  
            .search-wrapper .btn-search {  
                padding: 0.6rem 1.2rem;  
                font-size: 0.85rem;  
            }  
            .table-card .table thead th,  
            .table-card .table tbody td {  
                font-size: 0.72rem;  
                padding: 0.5rem 0.4rem;  
                white-space: nowrap;  
            }  
            .pagination-wrapper {  
                padding: 0.75rem;  
            }  
            .pagination-wrapper .page-link {  
                font-size: 0.8rem;  
                padding: 0.3rem 0.6rem;  
            }  
        }  
    </style>  
</head>  

<body>  

    <!-- ════════════════════════════════════════════════ -->  
    <!--  BRAND HEADER                                   -->  
    <!-- ════════════════════════════════════════════════ -->  
    <div class="brand-header">  
        <div class="container">  
            <div class="row align-items-center">  
                <div class="col-6 col-md-4">  
                    <img src="images/logo_blue.png" alt="Logo" class="logo">  
                </div>  
                <div class="col-6 col-md-8 text-end">  
                    <div class="user-info">  
                        <i class="bi bi-person-circle me-1"></i>  
                        <strong><?php echo $userini_name; ?></strong>  
                        <span class="point-badge ms-2">  
                            <i class="bi bi-star-fill me-1"></i><?php echo $pointacc; ?>  
                        </span>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  

    <div class="container py-3 py-md-4">  

        <!-- ════════════════════════════════════════════════ -->
        <!--  ACTION BUTTONS                                 -->
        <!-- ════════════════════════════════════════════════ -->
        <div class="row g-2 g-md-3 mb-3">
            <div class="col-4">
                <div class="action-card" onclick="window.location.href='biodata-new.php'" style="cursor:pointer;">
                    <div class="icon-circle" style="background: var(--mossgreen-500);">
                        <i class="bi bi-person-plus-fill"></i>
                    </div>
                    <a href="biodata-new.php" class="btn-action text-decoration-none" style="background: var(--mossgreen-500);">
                        <i class="bi bi-plus-circle"></i>
                        <span>Daftarkan</span>
                    </a>
                </div>
            </div>
            <div class="col-4">
                <div class="action-card" onclick="window.location.href='cash/cash-view-daily.php?tanggal=<?php echo date("Y-m-d");?>'" style="cursor:pointer;">
                    <div class="icon-circle" style="background: var(--mossgreen-500);">
                        <i class="bi bi-coin"></i>
                    </div>
                    <a href="cash/cash-view-daily.php?tanggal=<?php echo date("Y-m-d");?>" class="btn-action text-decoration-none" style="background: var(--mossgreen-500);">
                        <i class="bi bi-cash"></i>
                        <span>Keuangan</span>
                    </a>
                </div>
            </div>
            <div class="col-4">
                <!-- <div class="action-card"> -->
                <div class="action-card" onclick="window.location.href='administrasi.php'" style="cursor:pointer;">
                    <div class="icon-circle" style="background: var(--mossgreen-500);">
                        <i class="bi bi-grid-3x3-gap-fill"></i>
                    </div>
                    <a href="administrasi.php" class="btn-action text-decoration-none" style="background: var(--mossgreen-500);">
                        <i class="bi bi-compass"></i>
                        <span>Navigasi</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Secondary actions -->  
        <div class="row g-2 g-md-3 mb-3">  
            <div class="col-6">  
                <div class="action-card d-flex align-items-center gap-2" style="padding: 0.6rem 1rem; text-align: left;" onclick="window.location.href='visit-last.php'" style="cursor:pointer;">>  
                    <div class="icon-circle" style="width: 36px; height: 36px; font-size: 1rem; background: var(--mossgreen-500); margin: 0;">  
                        <i class="bi bi-clock-history"></i>  
                    </div>  
                    <a href="visit-last.php" class="text-decoration-none flex-grow-1" style="color: var(--mossgreen-500); font-weight: 600; font-size: 0.85rem;">  
                        Kunjungan Terbaru  
                    </a>  
                </div>  
            </div>  
            <div class="col-6">  
                <div class="action-card d-flex align-items-center gap-2" style="padding: 0.6rem 1rem; text-align: left;" onclick="window.location.href='visit-daily.php?tanggal=<?php echo date("Y-m-d");?>'" style="cursor:pointer;">>  
                    <div class="icon-circle" style="width: 36px; height: 36px; font-size: 1rem; background: var(--mossgreen-500); margin: 0;">  
                        <i class="bi bi-people-fill"></i>  
                    </div>  
                    <a href="visit-daily.php?tanggal=<?php echo date("Y-m-d");?>" class="text-decoration-none flex-grow-1" style="color: var(--mossgreen-500); font-weight: 600; font-size: 0.85rem;">  
                        Pasien Hari Ini  
                    </a>  
                </div>  
            </div>  
        </div>  

        <!-- ════════════════════════════════════════════════ -->  
        <!--  SEARCH                                        -->  
        <!-- ════════════════════════════════════════════════ -->  
        <div class="search-wrapper">  
            <form action="index.php" method="get" class="row g-2 align-items-center">  
                <div class="col-12 col-md-9">  
                    <div class="input-group">  
                        <span class="input-group-text bg-transparent border-0 text-muted ps-0">  
                            <i class="bi bi-search"></i>  
                        </span>  
                        <input type="text" name="cari" class="form-control"   
                               placeholder="Nama, MR, Telepon atau Alamat..."  
                               value="<?php echo htmlspecialchars($cari); ?>">  
                    </div>  
                </div>  
                <div class="col-12 col-md-3">  
                    <button type="submit" class="btn btn-search w-100">  
                        <i class="bi bi-search me-1"></i> Lacak  
                    </button>  
                </div>  
            </form>  
        </div>  

        <!-- ════════════════════════════════════════════════ -->  
        <!--  DATA TABLE                                    -->  
        <!-- ════════════════════════════════════════════════ -->  
        <?php  
        $sql = "SELECT * FROM novia_abc_biodata   
                WHERE name LIKE '%$cari%'   
                   OR mr LIKE '%$cari%'   
                   OR phone_wa LIKE '%$cari%'   
                   OR phone_home LIKE '%$cari%'   
                   OR street_address LIKE '%$cari%'   
                ORDER BY mr DESC   
                LIMIT $offset, $limit";  
        $result = $conn->query($sql);  

        // hitung total data  
        $sql_count = "SELECT COUNT(*) as total FROM novia_abc_biodata   
                      WHERE name LIKE '%$cari%'   
                         OR mr LIKE '%$cari%'   
                         OR phone_wa LIKE '%$cari%'   
                         OR phone_home LIKE '%$cari%'   
                         OR street_address LIKE '%$cari%'";  
        $count_result = $conn->query($sql_count);  
        $total_rows = $count_result->fetch_assoc()['total'];  
        $total_pages = ceil($total_rows / $limit);  
        ?>  

        <div class="table-card">  
            <div class="table-header">  
                <div class="d-flex justify-content-between align-items-center">  
                    <h6><i class="bi bi-table me-1"></i> Data Pasien</h6>  
                    <span class="badge" style="background: var(--mossgreen-600); color: #fff; font-size: 0.7rem;">  
                        <?php echo $total_rows; ?> ditemukan  
                   </span>  
                </div>  
            </div>  

            <?php if ($result->num_rows > 0) : ?>  
            <div class="table-responsive-custom">  
                <table class="table table-borderless mb-0">  
                    <thead>  
                        <tr>  
                            <th>MR</th>  
                            <th>Nama</th>  
                            <th>F</th>  
                            <th>Telepon</th>  
                            <th>Alamat</th>  
                            <th>Kelurahan</th>  
                            <th>Kecamatan</th>  
                            <th>Kota</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <?php   
                        $no = 0;  
                        while($row = $result->fetch_assoc()) :  
                            $no++;  
                            // Script Umur  
                            $yer = new DateTime();  
                            $yar = $row["birthday"];  
                            $yur = new DateTime($yar);  
                            $yor = $yer->diff($yur);  
                            $mer = $yor->y;  
                            $mur = " ($mer)";  
                            if ($mer > 150) $mur = "";  
                        ?>  
                        <tr>  
                            <td>  
                                <a href="biodata.php?id=<?php echo $row["id"];?>" title="Lihat detail pasien">  
                                    <strong><?php echo $row["mr"]; ?></strong>  
                                </a>  
                            </td>  
                            <td>  
                                <a href="biodata.php?id=<?php echo $row["id"];?>" title="Lihat detail pasien">  
                                    <?php echo $row["name"]; ?>  
                                </a>  
                                <?php if ($mur) : ?>  
                                    <span class="badge-age"><?php echo $mur; ?></span>  
                                <?php endif; ?>  
                            </td>  
                            <td class="text-center">  
                                <a href="biodata.php?id=<?php echo $row["id"];?>" title="Lihat detail pasien">  
                                    <?php echo $row["freq"]; ?>  
                                </a>  
                            </td>  
                            <td>  
                                <a href="https://wa.me/<?php echo $row["phone_wa"]; ?>"   
                                   class="wa-link"   
                                   target="_blank"  
                                   title="Hubungi via WhatsApp">  
                                    <i class="bi bi-whatsapp me-1"></i><?php echo $row["phone_wa"]; ?>  
                                </a>  
                            </td>  
                            <td>  
                                <a href="biodata.php?id=<?php echo $row["id"];?>" title="Lihat detail pasien">  
                                    <?php echo $row["street_address"]; ?>  
                                </a>  
                            </td>  
                            <td>  
                                <a href="biodata.php?id=<?php echo $row["id"];?>" title="Lihat detail pasien">  
                                    <?php echo $row["kelurahan"]; ?>  
                                </a>  
                            </td>  
                            <td>  
                                <a href="biodata.php?id=<?php echo $row["id"];?>" title="Lihat detail pasien">  
                                    <?php echo $row["kecamatan"]; ?>  
                                </a>  
                            </td>  
                            <td>  
                                <a href="biodata.php?id=<?php echo $row["id"];?>" title="Lihat detail pasien">  
                                    <?php echo $row["city"]; ?>  
                                </a>  
                            </td>  
                        </tr>  
                        <?php endwhile; ?>  
                    </tbody>  
                </table>  
            </div>  
            <?php else : ?>  
            <div class="no-results">  
                <i class="bi bi-inbox"></i>  
                <p class="mt-2 mb-0 text-muted">Tidak ada data pasien ditemukan</p>  
                <?php if ($cari) : ?>  
                    <small class="text-muted">Coba gunakan kata kunci lain</small>  
                <?php endif; ?>  
            </div>  
            <?php endif; ?>  
        </div>  

        <!-- ════════════════════════════════════════════════ -->  
        <!--  PAGINATION                                    -->  
        <!-- ════════════════════════════════════════════════ -->  
        <?php if ($total_pages > 1) : ?>  
        <div class="pagination-wrapper">  
            <nav aria-label="Navigasi halaman">  
                <ul class="pagination justify-content-center mb-0 flex-wrap">  
                    <!-- Previous -->  
                    <li class="page-item <?php echo ($page <= 1) ? 'disabled' : ''; ?>">
                        <a class="page-link" href="?page=<?php echo ($page - 1); ?>&cari=<?php echo urlencode($cari); ?>" 
                           aria-label="Previous" <?php echo ($page <= 1) ? 'tabindex="-1" aria-disabled="true"' : ''; ?>>
                            <i class="bi bi-chevron-left"></i>
                            <span class="d-none d-md-inline ms-1">Previous</span>
                        </a>
                    </li>

                    <!-- Nomor Halaman -->
                    <?php 
                    // Tentukan range halaman yang ditampilkan
                    $start_page = max(1, $page - 2);
                    $end_page = min($total_pages, $page + 2);
                    
                    // Tampilkan halaman pertama jika tidak dalam range
                    if ($start_page > 1) : ?>
                        <li class="page-item">
                            <a class="page-link" href="?page=1&cari=<?php echo urlencode($cari); ?>">1</a>
                        </li>
                        <?php if ($start_page > 2) : ?>
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        <?php endif; ?>
                    <?php endif; ?>

                    <!-- Loop halaman dalam range -->
                    <?php for ($i = $start_page; $i <= $end_page; $i++) : ?>
                        <li class="page-item <?php echo ($i == $page) ? 'active' : ''; ?>">
                            <a class="page-link" href="?page=<?php echo $i; ?>&cari=<?php echo urlencode($cari); ?>">
                                <?php echo $i; ?>
                            </a>
                        </li>
                    <?php endfor; ?>

                    <!-- Tampilkan halaman terakhir jika tidak dalam range -->
                    <?php if ($end_page < $total_pages) : ?>
                        <?php if ($end_page < $total_pages - 1) : ?>
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        <?php endif; ?>
                        <li class="page-item">
                            <a class="page-link" href="?page=<?php echo $total_pages; ?>&cari=<?php echo urlencode($cari); ?>">
                                <?php echo $total_pages; ?>
                            </a>
                        </li>
                    <?php endif; ?>

                    <!-- Next -->
                    <li class="page-item <?php echo ($page >= $total_pages) ? 'disabled' : ''; ?>">
                        <a class="page-link" href="?page=<?php echo ($page + 1); ?>&cari=<?php echo urlencode($cari); ?>" 
                           aria-label="Next" <?php echo ($page >= $total_pages) ? 'tabindex="-1" aria-disabled="true"' : ''; ?>>
                            <span class="d-none d-md-inline me-1">Next</span>
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- Info halaman -->
            <div class="text-center mt-2">
                <small class="text-muted">
                    Halaman <?php echo $page; ?> dari <?php echo $total_pages; ?> 
                    (<?php echo $total_rows; ?> data)
                </small>
            </div>
        </div>
        <?php endif; ?>

    </div>
    <!-- /.container -->

    <!-- Bootstrap 5 JS Bundle (untuk komponen interaktif jika diperlukan) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>