<?php

// Include manual
$root_path = dirname(__DIR__);
require_once $root_path . '/includes/auth.php';

// Koneksi database manual
try {
    $pdo = new PDO("mysql:host=localhost;dbname=ujian_system;charset=utf8", "root", "");
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Koneksi database gagal: " . $e->getMessage());
}

if (!isPenguji()) {
    redirect('../login.php');
}

// CARI PENGGUJI_ID - Multiple Methods
$penguji_id = null;
$penguji_name = "Penguji";

// Method 1: Dari session penguji_id
if (!empty($_SESSION['penguji_id'])) {
    $penguji_id = $_SESSION['penguji_id'];
}

// Method 2: Cari berdasarkan username (NIP) dari session
if (empty($penguji_id) && !empty($_SESSION['user_name'])) {
    $stmt = $pdo->prepare("SELECT id, nama FROM penguji WHERE nip = ?");
    $stmt->execute([$_SESSION['user_name']]);
    $penguji_data = $stmt->fetch();
    
    if ($penguji_data) {
        $penguji_id = $penguji_data['id'];
        $penguji_name = $penguji_data['nama'];
        $_SESSION['penguji_id'] = $penguji_id;
        $_SESSION['penguji_nama'] = $penguji_name;
    }
}

// Method 3: Fallback - cari semua kemungkinan
if (empty($penguji_id) && !empty($_SESSION['user_id'])) {
    $stmt = $pdo->prepare("
        SELECT p.id, p.nama 
        FROM penguji p 
        WHERE p.nip IN (SELECT username FROM users WHERE id = ?)
           OR p.id = ?
    ");
    $stmt->execute([$_SESSION['user_id'], $_SESSION['user_id']]);
    $penguji_data = $stmt->fetch();
    
    if ($penguji_data) {
        $penguji_id = $penguji_data['id'];
        $penguji_name = $penguji_data['nama'];
        $_SESSION['penguji_id'] = $penguji_id;
        $_SESSION['penguji_nama'] = $penguji_name;
    }
}

// ERROR jika masih tidak ditemukan
if (empty($penguji_id)) {
    echo "<h2>Error: Data Penguji Tidak Ditemukan</h2>";
    echo "<div style='background: #f8d7da; padding: 15px; border-radius: 5px;'>";
    echo "<h3>Debug Information:</h3>";
    echo "Session user_id: " . ($_SESSION['user_id'] ?? 'NULL') . "<br>";
    echo "Session user_name: " . ($_SESSION['user_name'] ?? 'NULL') . "<br>";
    echo "Session role: " . ($_SESSION['role'] ?? 'NULL') . "<br>";
    echo "Session penguji_id: " . ($_SESSION['penguji_id'] ?? 'NULL') . "<br>";
    echo "</div>";
    exit;
}

// Ambil data penguji lengkap
$stmt = $pdo->prepare("SELECT * FROM penguji WHERE id = ?");
$stmt->execute([$penguji_id]);
$penguji = $stmt->fetch();

if (!$penguji) {
    echo "<h2>Error: Data Penguji Tidak Valid</h2>";
    echo "<p>Penguji ID: {$penguji_id} tidak ditemukan di database.</p>";
    exit;
}

// Simpan ke session
$_SESSION['penguji_id'] = $penguji['id'];
$_SESSION['penguji_nama'] = $penguji['nama'];

// Ambil ujian aktif yang diassign ke penguji ini
$stmt = $pdo->prepare("
    SELECT DISTINCT 
        u.id as ujian_id,
        u.nama_ujian,
        u.tanggal_ujian,
        u.status,
        ps.peran
    FROM ujian u 
    INNER JOIN ujian_stations us ON u.id = us.ujian_id 
    INNER JOIN penguji_station ps ON us.station_id = ps.station_id 
    WHERE u.status = 'aktif' 
    AND ps.penguji_id = ?
    AND ps.ujian_id = u.id
    ORDER BY u.tanggal_ujian DESC
");
$stmt->execute([$penguji_id]);
$ujian_aktif = $stmt->fetchAll();

// Ambil stations untuk penguji ini
$stations = [];
if (!empty($ujian_aktif)) {
    $stmt = $pdo->prepare("
        SELECT 
            s.id as station_id,
            s.nama_station,
            s.deskripsi,
            us.urutan,
            u.nama_ujian,
            u.id as ujian_id,
            ps.peran
        FROM stations s
        INNER JOIN ujian_stations us ON s.id = us.station_id
        INNER JOIN penguji_station ps ON s.id = ps.station_id
        INNER JOIN ujian u ON us.ujian_id = u.id
        WHERE ps.penguji_id = ?
        AND u.status = 'aktif'
        ORDER BY us.urutan
    ");
    $stmt->execute([$penguji_id]);
    $stations = $stmt->fetchAll();
}

// Hitung total peserta per station
foreach ($stations as &$station) {
    $stmt = $pdo->prepare("
        SELECT COUNT(*) as total 
        FROM peserta_station 
        WHERE station_id = ? AND ujian_id = ?
    ");
    $stmt->execute([$station['station_id'], $station['ujian_id']]);
    $station['total_peserta'] = $stmt->fetch()['total'] ?? 0;
    
    // Hitung yang sudah dinilai
    $stmt = $pdo->prepare("
        SELECT COUNT(DISTINCT peserta_id) as total 
        FROM penilaian 
        WHERE station_id = ? AND ujian_id = ? AND penguji_id = ?
    ");
    $stmt->execute([$station['station_id'], $station['ujian_id'], $penguji_id]);
    $station['sudah_dinilai'] = $stmt->fetch()['total'] ?? 0;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Penguji | SOCA OSCE System</title>
    <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;14..32,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #eef2f6 100%);
            min-height: 100vh;
        }

        .dashboard-wrapper {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #1a1f2e 0%, #0f1119 100%);
            color: white;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
        }

        .sidebar-header {
            padding: 1.8rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-align: center;
        }

        .logo-area {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 0.5rem;
        }

        .logo-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #667eea, #1958e1);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .logo-text h3 {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -0.3px;
            background: linear-gradient(135deg, #fff, #1958e1);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .logo-text p {
            font-size: 0.7rem;
            opacity: 0.7;
            margin-top: 2px;
        }

        .user-info-sidebar {
            padding: 1.2rem;
            background: rgba(255, 255, 255, 0.05);
            margin: 1rem;
            border-radius: 16px;
            text-align: center;
        }

        .user-avatar {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #667eea, #1958e1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-size: 1.5rem;
        }

        .nav-menu {
            padding: 1rem 0;
        }

        .nav-item {
            padding: 0.75rem 1.5rem;
            margin: 0.25rem 0.75rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.2s;
            text-decoration: none;
        }

        .nav-item:hover, .nav-item.active {
            background: rgba(102, 126, 234, 0.2);
            color: white;
        }

        .nav-item i {
            width: 24px;
            font-size: 1.1rem;
        }

        .nav-item.logout {
            margin-top: 2rem;
            color: rgba(239, 68, 68, 0.7);
        }

        .nav-item.logout:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        .main-content {
            flex: 1;
            margin-left: 280px;
            padding: 1.5rem 2rem 2rem;
        }

        .top-navbar {
            background: white;
            border-radius: 20px;
            padding: 1rem 1.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .page-title h2 {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e293b, #334155);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .user-dropdown {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-name {
            font-weight: 600;
            color: #1e293b;
        }

        .user-badge {
            background: linear-gradient(135deg, #667eea, #1958e1);
            color: white;
            padding: 0.4rem 1.2rem;
            border-radius: 30px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .card {
            background: white;
            border-radius: 24px;
            padding: 1.8rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0 1.2rem 0;
            border-bottom: 2px solid #f1f5f9;
            margin-bottom: 1.5rem;
        }

        .card-header h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-header h3 i {
            color: #1958e1;
        }

        .card-header .badge {
            padding: 0.3rem 1rem;
            border-radius: 30px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            border-radius: 20px;
            padding: 1.2rem;
            border: 1px solid rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px -10px rgba(0, 0, 0, 0.1);
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: #1958e1;
            flex-shrink: 0;
        }

        .stat-info h4 {
            font-size: 1.6rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
        }

        .stat-info p {
            font-size: 0.8rem;
            color: #64748b;
            font-weight: 500;
            margin: 0;
        }

        .station-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1.5rem;
        }

        .station-card {
            background: #f8fafc;
            border: 2px solid #eef2ff;
            border-radius: 20px;
            padding: 1.5rem;
            transition: all 0.3s;
            text-decoration: none;
            color: inherit;
            display: block;
            position: relative;
            overflow: hidden;
        }

        .station-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #667eea, #1958e1);
            border-radius: 4px 0 0 4px;
        }

        .station-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 35px -12px rgba(102, 126, 234, 0.2);
            border-color: #c7d2fe;
            background: white;
        }

        .station-card .station-name {
            font-size: 1.2rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 0.2rem;
        }

        .station-card .station-ujian {
            font-size: 0.9rem;
            color: #64748b;
            margin-bottom: 1rem;
        }

        .station-progress {
            margin: 1rem 0;
        }

        .progress-bar {
            height: 8px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 0.5rem;
        }

        .progress-bar .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #667eea, #1958e1);
            border-radius: 10px;
            transition: width 0.6s ease;
        }

        .station-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #e2e8f0;
            font-size: 0.85rem;
            color: #475569;
        }

        .station-info-row .info-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .station-info-row .info-item i {
            color: #667eea;
        }

        .btn-action {
            display: block;
            width: 100%;
            margin-top: 1rem;
            padding: 0.7rem;
            background: linear-gradient(135deg, #667eea, #1958e1);
            color: white;
            text-align: center;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }

        .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

        .btn-edit-profile {
            background: #f1f5f9;
            color: #475569;
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .btn-edit-profile:hover {
            background: #e2e8f0;
        }

        .btn-logout {
            background: #fee2e2;
            color: #991b1b;
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-logout:hover {
            background: #fecaca;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
        }

        .empty-state i {
            font-size: 4rem;
            color: #cbd5e1;
            margin-bottom: 1rem;
        }

        .empty-state h3 {
            font-size: 1.3rem;
            color: #0f172a;
            margin-bottom: 0.5rem;
        }

        .empty-state p {
            color: #64748b;
        }

        .alert-box {
            padding: 1.2rem 1.5rem;
            border-radius: 16px;
            border-left: 4px solid;
            margin-top: 1rem;
        }

        .alert-box.info {
            background: #eff6ff;
            border-color: #3b82f6;
        }

        .alert-box.warning {
            background: #fffbeb;
            border-color: #f59e0b;
        }

        .alert-box strong {
            display: block;
            font-size: 1rem;
            color: #0f172a;
            margin-bottom: 0.5rem;
        }

        .alert-box ul {
            margin: 0.5rem 0 0 1.2rem;
            padding: 0;
            color: #475569;
        }

        .alert-box ul li {
            margin-bottom: 0.3rem;
        }

        @media (max-width: 1024px) {
            .sidebar { width: 250px; }
            .main-content { margin-left: 250px; }
        }

        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); position: fixed; }
            .main-content { margin-left: 0; padding: 1rem; }
            .top-navbar { flex-direction: column; gap: 0.5rem; text-align: center; }
            .station-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .card-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    </style>
</head>
<body>
<div class="dashboard-wrapper">
    <!-- Sidebar -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="logo-area">
                <div class="logo-icon"><i class="fas fa-tooth"></i></div>
                <div class="logo-text"><h3>OSCE</h3><p>Penguji Panel</p></div>
            </div>
        </div>
        <div class="user-info-sidebar">
            <div class="user-avatar"><i class="fas fa-user-tie"></i></div>
            <div style="font-weight: 600;"><?php echo htmlspecialchars($penguji['nama']); ?></div>
            <div style="font-size: 0.7rem; opacity: 0.7;"><?php echo htmlspecialchars($penguji['nip'] ?? ''); ?></div>
        </div>
        <div class="nav-menu">
            <a href="dashboard_penguji.php" class="nav-item active"><i class="fas fa-tachometer-alt"></i> <span>Dashboard</span></a>
            <a href="edit_profil_penguji.php" class="nav-item"><i class="fas fa-user-edit"></i> <span>Edit Profil</span></a>
            <a href="../logout.php" class="nav-item logout"><i class="fas fa-sign-out-alt"></i> <span>Logout</span></a>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
        <div class="top-navbar">
            <div class="page-title">
                <h2><i class="fas fa-tachometer-alt" style="margin-right: 10px; color: #667eea;"></i>Dashboard Penguji</h2>
            </div>
            <div class="user-dropdown">
                <span class="user-badge"><i class="fas fa-user-tie"></i> Penguji</span>
                <span class="user-name"><?php echo htmlspecialchars($penguji['nama']); ?></span>
            </div>
        </div>

        <!-- Statistics -->
        <?php if (!empty($stations)): ?>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-layer-group"></i></div>
                <div class="stat-info">
                    <h4><?php echo count($stations); ?></h4>
                    <p>Total Station</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-users"></i></div>
                <div class="stat-info">
                    <h4><?php 
                        $total_peserta = 0;
                        foreach ($stations as $s) { $total_peserta += $s['total_peserta'] ?? 0; }
                        echo $total_peserta;
                    ?></h4>
                    <p>Total Peserta</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="stat-info">
                    <h4><?php 
                        $total_dinilai = 0;
                        foreach ($stations as $s) { $total_dinilai += $s['sudah_dinilai'] ?? 0; }
                        echo $total_dinilai;
                    ?></h4>
                    <p>Sudah Dinilai</p>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <?php if (empty($stations)): ?>
            <!-- Empty State -->
            <div class="card">
                <div class="empty-state">
                    <i class="fas fa-clipboard-list"></i>
                    <h3>Belum Ada Assignment</h3>
                    <p>Anda belum diassign ke station manapun. Silakan hubungi administrator.</p>
                </div>
            </div>
        <?php else: ?>
            <!-- Station List -->
            <div class="card">
                <div class="card-header">
                    <h3><i class="fas fa-layer-group"></i> Station yang Diassign</h3>
                    <span class="badge" style="background: #10b981; color: white;">
                        <i class="fas fa-check-circle"></i> <?php echo count($stations); ?> Station
                    </span>
                </div>
                <div class="station-grid">
                    <?php foreach ($stations as $station): 
                        $total = $station['total_peserta'] ?? 0;
                        $done = $station['sudah_dinilai'] ?? 0;
                        $progress = $total > 0 ? round(($done / $total) * 100) : 0;
                    ?>
                        <a href="daftar_peserta.php?ujian_id=<?php echo $station['ujian_id']; ?>&station_id=<?php echo $station['station_id']; ?>" class="station-card">
                            <div class="station-name"><?php echo htmlspecialchars($station['nama_station']); ?></div>
                            <div class="station-ujian">
                                <i class="fas fa-calendar-alt" style="color: #64748b;"></i>
                                <?php echo htmlspecialchars($station['nama_ujian']); ?>
                            </div>

                            <div class="station-progress">
                                <div style="display: flex; justify-content: space-between; font-size: 0.8rem; color: #475569;">
                                    <span>Progress Penilaian</span>
                                    <span><?php echo $progress; ?>%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: <?php echo $progress; ?>%;"></div>
                                </div>
                            </div>

                            <div class="station-info-row">
                                <span class="info-item">
                                    <i class="fas fa-users"></i> <?php echo $total; ?> Peserta
                                </span>
                                <span class="info-item">
                                    <i class="fas fa-check-circle" style="color: #10b981;"></i> <?php echo $done; ?> Selesai
                                </span>
                                <span class="info-item">
                                    <i class="fas fa-hashtag"></i> Station <?php echo $station['urutan']; ?>
                                </span>
                            </div>

                            <div class="btn-action">
                                <i class="fas fa-arrow-right"></i> Mulai Penilaian
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Ujian Aktif -->
            <div class="card">
                <div class="card-header">
                    <h3><i class="fas fa-calendar-check"></i> Ujian Aktif</h3>
                    <span class="badge" style="background: #3b82f6; color: white;">
                        <i class="fas fa-clock"></i> <?php echo count($ujian_aktif); ?> Ujian
                    </span>
                </div>
                <div class="alert-box info">
                    <strong><i class="fas fa-info-circle"></i> Anda terdaftar sebagai penguji pada ujian berikut:</strong>
                    <ul>
                        <?php foreach ($ujian_aktif as $ujian): ?>
                            <li>
                                <strong><?php echo htmlspecialchars($ujian['nama_ujian']); ?></strong> 
                                (<?php echo date('d/m/Y', strtotime($ujian['tanggal_ujian'])); ?>)
                                – Sebagai <strong><?php echo ucfirst($ujian['peran'] ?? 'Penguji'); ?></strong>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        <?php endif; ?>

        <!-- Panduan -->
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-book"></i> Panduan Penguji</h3>
            </div>
            <div class="alert-box warning">
                <strong><i class="fas fa-lightbulb"></i> Petunjuk Penilaian:</strong>
                <ul>
                    <li>Klik pada station untuk melihat daftar peserta yang akan dinilai</li>
                    <li>Pastikan penilaian dilakukan sesuai rubrik yang telah ditentukan</li>
                    <li>Simpan penilaian setelah selesai menilai setiap peserta</li>
                    <li>Hubungi administrator jika menemui kendala teknis</li>
                </ul>
            </div>
        </div>
    </main>
</div>

<script>
    // Konfirmasi sebelum masuk ke daftar peserta
    document.addEventListener('DOMContentLoaded', function() {
        const stationCards = document.querySelectorAll('.station-card');
        
        stationCards.forEach(card => {
            card.addEventListener('click', function(e) {
                const stationName = this.querySelector('.station-name').textContent;
                const ujianName = this.querySelector('.station-ujian').textContent.trim();
                
                if (!confirm(`Mulai penilaian untuk:\n📋 ${stationName}\n📅 ${ujianName}\n\nLanjutkan?`)) {
                    e.preventDefault();
                }
            });
        });
    });
</script>
</body>
</html>