                <!-- Page Title -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="mb-0" style="color: var(--sidebar-bg);">
                        <i class="bi bi-key me-2"></i>Manajemen Token
                    </h3>
                    <a href="<?php echo site_url('admin/generate_token'); ?>" class="btn btn-success">
                        <i class="bi bi-plus-circle me-2"></i>Generate Token Baru
                    </a>
                </div>

                <!-- Data Table -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Daftar Token</h5>
                        <div>
                            <span class="badge bg-success">Aktif: <?php echo count(array_filter($tokens, function ($t) {
                                                                        return $t->EXPIRED == '0';
                                                                    })); ?></span>
                            <span class="badge bg-danger ms-2">Expired: <?php echo count(array_filter($tokens, function ($t) {
                                                                            return $t->EXPIRED == '1';
                                                                        })); ?></span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover datatable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Token</th>
                                        <th>Generate Time</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $no = 1; ?>
                                    <?php foreach ($tokens as $token): ?>
                                        <tr>
                                            <td><?php echo $no++; ?></td>
                                            <td>
                                                <code class="fs-5"><?php echo $token->TOKEN; ?></code>
                                            </td>
                                            <td>
                                                <?php echo date('d/m/Y H:i', strtotime($token->GENERATE_TIME)); ?>
                                            </td>
                                            <td>
                                                <?php if ($token->EXPIRED == '0'): ?>
                                                    <span class="badge bg-success">Aktif</span>
                                                <?php else: ?>
                                                    <span class="badge bg-danger">Expired</span>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <?php if ($token->EXPIRED == '0'): ?>
                                                    <a href="<?php echo site_url('admin/expire_token/' . $token->ID_TOKEN); ?>"
                                                        class="btn btn-sm btn-warning confirm-expire">
                                                        <i class="bi bi-hourglass-split"></i> Expire
                                                    </a>
                                                <?php endif; ?>
                                                <a href="<?php echo site_url('admin/delete_token/' . $token->ID_TOKEN); ?>"
                                                    class="btn btn-sm btn-danger confirm-delete">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Information Card -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Informasi Token</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Cara Kerja Token:</h6>
                                <ul>
                                    <li>Token berisi 5 karakter random (huruf dan angka)</li>
                                    <li>Token aktif dapat digunakan untuk cek hasil TKA</li>
                                    <li>Setiap token dapat digunakan berkali-kali selama masih aktif</li>
                                    <li>Token yang expired tidak dapat digunakan lagi</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6>Best Practices:</h6>
                                <ul>
                                    <li>Generate token baru setiap periode ujian</li>
                                    <li>Expire token lama yang sudah tidak digunakan</li>
                                    <li>Berikan token hanya kepada peserta yang berhak</li>
                                    <li>Simpan daftar token untuk backup</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>