<?php
session_start();

// Cek apakah user sudah login
if(!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

include_once 'database.php';
include_once 'user.php';

$database = new Database();
$db = $database->getConnection();
$user = new User($db);

// Ambil data user dari session
$user_id = $_SESSION['user_id'];
$nama_lengkap = $_SESSION['nama_lengkap'];
$status_user = $_SESSION['status_user'];

// Tentukan kelas CSS untuk badge status
$status_class = $status_user == 'vip' ? 'vip' : 'reguler';
$status_text = $status_user == 'vip' ? 'VIP' : 'Reguler';

// Include database class
require_once 'database.php'; // Sesuaikan path dengan lokasi file Database.php Anda

// ==================== TIMEZONE CONFIGURATION ====================
class TimezoneConfig {
    const SERVER_TIMEZONE = 'UTC';
    const APP_TIMEZONE = 'Asia/Jakarta';
    const DB_TIME_OFFSET = '+07:00';
    
    public static function init($conn) {
        // Set timezone untuk PHP
        date_default_timezone_set(self::APP_TIMEZONE);
        
        // Set timezone untuk MySQL connection
        if ($conn) {
            $conn->query("SET time_zone = '" . self::DB_TIME_OFFSET . "';");
        }
    }
    
    public static function getAppTimezone() {
        return self::APP_TIMEZONE;
    }
}

// ==================== TIMEZONE HELPER FUNCTIONS ====================
class TimezoneHelper {
    
    // Konversi dari UTC ke waktu lokal
    public static function utcToLocal($utcDateTime, $format = 'Y-m-d H:i:s') {
        if (empty($utcDateTime)) return $utcDateTime;
        
        try {
            $utc = new DateTime($utcDateTime, new DateTimeZone('UTC'));
            $local = $utc->setTimezone(new DateTimeZone(TimezoneConfig::getAppTimezone()));
            return $local->format($format);
        } catch (Exception $e) {
            error_log("Timezone conversion error: " . $e->getMessage());
            return $utcDateTime;
        }
    }
    
    // Konversi dari lokal ke UTC untuk disimpan di database
    public static function localToUtc($localDateTime, $format = 'Y-m-d H:i:s') {
        if (empty($localDateTime)) return $localDateTime;
        
        try {
            $local = new DateTime($localDateTime, new DateTimeZone(TimezoneConfig::getAppTimezone()));
            $utc = $local->setTimezone(new DateTimeZone('UTC'));
            return $utc->format($format);
        } catch (Exception $e) {
            error_log("Timezone conversion error: " . $e->getMessage());
            return $localDateTime;
        }
    }
    
    // Get current time in UTC
    public static function nowUtc($format = 'Y-m-d H:i:s') {
        return gmdate($format);
    }
    
    // Get current time in local timezone
    public static function nowLocal($format = 'Y-m-d H:i:s') {
        return date($format);
    }
    
    // Format tanggal dengan bahasa Indonesia
    public static function indonesianDate($datetime, $includeTime = false) {
        if (empty($datetime)) return '-';
        
        $months = [
            'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
        ];
        
        // Convert to local time first if it's in UTC
        $localTime = self::utcToLocal($datetime);
        $timestamp = strtotime($localTime);
        
        if ($timestamp === false) return $datetime;
        
        $day = date('d', $timestamp);
        $month = $months[date('n', $timestamp) - 1];
        $year = date('Y', $timestamp);
        
        if ($includeTime) {
            $time = date('H:i', $timestamp);
            return "{$day} {$month} {$year} {$time}";
        }
        
        return "{$day} {$month} {$year}";
    }
    
    // Untuk form input - default value
    public static function formDefaultDate() {
        return self::nowLocal('Y-m-d');
    }
    
    public static function formDefaultDateTime() {
        return self::nowLocal('Y-m-d\TH:i');
    }
}

// Redirect ke login jika belum login
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

// Koneksi ke database menggunakan class Database Anda
$database = new Database();
$conn = $database->getConnection();

// Inisialisasi timezone SETELAH koneksi dibuat
TimezoneConfig::init($conn);

// Ambil data user dari database
$user_id = $_SESSION['user_id'];
$sql = "SELECT * FROM users WHERE id = :user_id";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();

if ($stmt->rowCount() === 1) {
    $user = $stmt->fetch(PDO::FETCH_ASSOC);
    $nama_lengkap = $user['nama_lengkap'];
    $email = $user['email'];
    $nama_bimbel = $user['nama_bimbel'];
    $fokus_seleksi = $user['fokus_seleksi'];
    $domisili = $user['domisili'];
    $no_telepon = $user['no_telepon'];
} else {
    // Jika user tidak ditemukan, logout
    session_destroy();
    header('Location: login.php');
    exit;
}

// Handle POST request untuk menyimpan hasil tes
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_result'])) {
    
    // Data yang diterima dari JavaScript
    $jenis_tes = $_POST['jenis_tes'];
    $total_terjawab = intval($_POST['total_terjawab']);
    $total_benar = intval($_POST['total_benar']);
    $total_salah = intval($_POST['total_salah']);
    
    // HITUNG HASIL AKHIR DENGAN RUMUS: (total_benar / 500 * 100)
    // Dan pastikan tidak melebihi 100
    $hasil_akhir = ($total_benar / 500) * 100;
    
    // Jika hasil lebih dari 100, set menjadi 100
    if ($hasil_akhir > 100) {
        $hasil_akhir = 100;
    }
    
    // Jika hasil kurang dari 0 (sebagai precaution), set menjadi 0
    if ($hasil_akhir < 0) {
        $hasil_akhir = 0;
    }
    
    // Format hasil_akhir menjadi 2 angka desimal
    $hasil_akhir = round($hasil_akhir, 2);
    
    // Data per kolom
    $kolom_data = [];
    for ($i = 1; $i <= 10; $i++) {
        $kolom_data[] = [
            'terjawab' => intval($_POST["kolom{$i}_terjawab"] ?? 0),
            'benar' => intval($_POST["kolom{$i}_benar"] ?? 0),
            'salah' => intval($_POST["kolom{$i}_salah"] ?? 0)
        ];
    }
    
    // ✅ GUNAKAN WAKTU JAKARTA UNTUK KEDUA KOLOM
    $waktu_jakarta = TimezoneHelper::nowLocal('Y-m-d H:i:s'); // Waktu Jakarta
    
    // Buat SQL query dengan prepared statement
    $sql = "INSERT INTO hasil_tes (
        user_id, nama_lengkap, fokus_seleksi, jenis_tes,
        kolom1_terjawab, kolom1_benar, kolom1_salah,
        kolom2_terjawab, kolom2_benar, kolom2_salah,
        kolom3_terjawab, kolom3_benar, kolom3_salah,
        kolom4_terjawab, kolom4_benar, kolom4_salah,
        kolom5_terjawab, kolom5_benar, kolom5_salah,
        kolom6_terjawab, kolom6_benar, kolom6_salah,
        kolom7_terjawab, kolom7_benar, kolom7_salah,
        kolom8_terjawab, kolom8_benar, kolom8_salah,
        kolom9_terjawab, kolom9_benar, kolom9_salah,
        kolom10_terjawab, kolom10_benar, kolom10_salah,
        total_terjawab, total_benar, total_salah, hasil_akhir,
        created_at, waktu_tes
    ) VALUES (
        :user_id, :nama_lengkap, :fokus_seleksi, :jenis_tes,
        :kolom1_terjawab, :kolom1_benar, :kolom1_salah,
        :kolom2_terjawab, :kolom2_benar, :kolom2_salah,
        :kolom3_terjawab, :kolom3_benar, :kolom3_salah,
        :kolom4_terjawab, :kolom4_benar, :kolom4_salah,
        :kolom5_terjawab, :kolom5_benar, :kolom5_salah,
        :kolom6_terjawab, :kolom6_benar, :kolom6_salah,
        :kolom7_terjawab, :kolom7_benar, :kolom7_salah,
        :kolom8_terjawab, :kolom8_benar, :kolom8_salah,
        :kolom9_terjawab, :kolom9_benar, :kolom9_salah,
        :kolom10_terjawab, :kolom10_benar, :kolom10_salah,
        :total_terjawab, :total_benar, :total_salah, :hasil_akhir,
        :created_at, :waktu_tes
    )";
    
    try {
        $stmt = $conn->prepare($sql);
        
        // Bind parameters
        $stmt->bindParam(':user_id', $user_id);
        $stmt->bindParam(':nama_lengkap', $nama_lengkap);
        $stmt->bindParam(':fokus_seleksi', $fokus_seleksi);
        $stmt->bindParam(':jenis_tes', $jenis_tes);
        
        // Bind kolom data
        for ($i = 0; $i < 10; $i++) {
            $stmt->bindParam(':kolom'.($i+1).'_terjawab', $kolom_data[$i]['terjawab']);
            $stmt->bindParam(':kolom'.($i+1).'_benar', $kolom_data[$i]['benar']);
            $stmt->bindParam(':kolom'.($i+1).'_salah', $kolom_data[$i]['salah']);
        }
        
        $stmt->bindParam(':total_terjawab', $total_terjawab);
        $stmt->bindParam(':total_benar', $total_benar);
        $stmt->bindParam(':total_salah', $total_salah);
        $stmt->bindParam(':hasil_akhir', $hasil_akhir);
        $stmt->bindParam(':created_at', $waktu_jakarta);
        $stmt->bindParam(':waktu_tes', $waktu_jakarta);
        
        if ($stmt->execute()) {
            // Format waktu untuk display dengan format Indonesia
            $local_display = TimezoneHelper::indonesianDate($waktu_jakarta, true);
            echo "SUCCESS: Data berhasil disimpan pada " . $local_display . " | Nilai Akhir: " . $hasil_akhir . "%";
        } else {
            echo "ERROR: Gagal menyimpan data";
        }
    } catch (PDOException $e) {
        echo "ERROR: " . $e->getMessage();
    }
    
    exit;
}

// Simpan jenis tes di session
$_SESSION['last_test_type'] = 'Kecermatan Simbol';
?>

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <link rel="icon" href="images/favicon.png">
  <title>Psikologi Kecermatan Simbol Hilang</title>
  
  <!-- Font Awesome -->
  <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
  />

  <!-- Google Fonts: Poppins -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
  />

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Poppins", sans-serif;
      background: #ffffff;
      color: #333;
      min-height: 100vh;
    }

    /* NAVBAR STYLE DARI DASHBOARD */
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 5%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);
      z-index: 1000;
      transition: background 0.3s;
    }

    .navbar.scrolled {
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(10px);
    }

    .navbar__brand {
      width: 80px;
    }

    .brand__logo {
      width: 100%;
    }

    .nav__items {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .nav__link {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
    }

    .nav__link:hover {
      color: #dc030f;
    }

    .user-menu {
      display: flex;
      align-items: center;
      gap: 1rem;
      position: relative;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: white;
      font-weight: 500;
    }

    .profile-btn {
      background-color: #dc030f;
      color: white;
      border: none;
      padding: 0.6rem 1.2rem;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      font-size: 14px;
      transition: all 0.3s;
    }

    .profile-btn:hover {
      background-color: #b2070d;
      transform: translateY(-2px);
    }

    .profile-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: rgba(30, 30, 30, 0.95);
      border: 1px solid #333;
      border-radius: 8px;
      padding: 0.5rem 0;
      min-width: 180px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      display: none;
      z-index: 1001;
    }

    .profile-dropdown.show {
      display: block;
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem 1rem;
      color: white;
      text-decoration: none;
      transition: background-color 0.3s;
      cursor: pointer;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-size: 14px;
    }

    .dropdown-item:hover {
      background-color: rgba(220, 3, 15, 0.2);
    }

    .dropdown-item i {
      width: 16px;
      text-align: center;
    }

    .dropdown-divider {
      height: 1px;
      background-color: #333;
      margin: 0.3rem 0;
    }

    /* MAIN CONTENT STYLE */
    .main-content {
      padding-top: 100px;
      min-height: 100vh;
      background: #ffffff;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    h2 {
      text-align: center;
      color: #333;
      margin-bottom: 10px;
      font-size: 2rem;
      font-weight: 600;
    }

    .info {
      text-align: center;
      color: #666;
      margin-bottom: 25px;
      font-size: 0.95em;
      line-height: 1.5;
    }

    /* --- 2 kolom × 5 baris --- */
    .setup-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 40px;
      max-width: 700px;
      margin: 0 auto;
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .session-box {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 15px;
      text-align: center;
      transition: all 0.3s;
    }

    .session-box:hover {
      transform: translateY(-2px);
      border-color: #dc030f;
      box-shadow: 0 5px 20px rgba(220, 3, 15, 0.15);
    }

    .session-box h3 {
      margin: 5px 0 10px 0;
      color: #dc030f;
      font-size: 1em;
      font-weight: 600;
    }

    input[type="text"] {
      width: 90%;
      padding: 8px 10px;
      border: 1px solid #ced4da;
      border-radius: 5px;
      font-size: 0.9em;
      text-align: center;
      background: #ffffff;
      color: #333;
      transition: border-color 0.3s;
    }

    input[type="text"]:focus {
      outline: none;
      border-color: #dc030f;
      box-shadow: 0 0 0 2px rgba(220, 3, 15, 0.2);
    }

    input[type="text"]::placeholder {
      color: #6c757d;
    }

    .buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

.generate-buttons {
  display: flex;
  justify-content: center;
  align-items: center; /* Tambahkan ini */
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
  width: 100%;
  text-align: center; /* Untuk extra insurance */
    }

    button {
      padding: 12px 25px;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 1em;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: 500;
    }

    /* Tombol biru untuk Kembali */
    .btn-primary {
      background-color: #0078d7;
    }

    .btn-primary:hover {
      background-color: #005fa3;
      transform: translateY(-2px);
    }

    /* Tombol hijau untuk Generate Simbol - MUDAH */
    .btn-secondary {
      background-color: #00a884;
    }

    .btn-secondary:hover {
      background-color: #008a6e;
      transform: translateY(-2px);
    }

    /* Tombol kuning untuk Generate Simbol - SEDANG */
    .btn-warning {
      background-color: #ff9800;
    }

    .btn-warning:hover {
      background-color: #e68900;
      transform: translateY(-2px);
    }

    /* Tombol merah untuk Generate Simbol - SULIT */
    .btn-danger {
      background-color: #dc030f;
    }

    .btn-danger:hover {
      background-color: #b2070d;
      transform: translateY(-2px);
    }

    /* Tombol ungu untuk Mulai Tes */
    .btn-success {
      background-color: #9c27b0;
    }

    .btn-success:hover {
      background-color: #7b1fa2;
      transform: translateY(-2px);
    }

    /* STYLE UNTUK TEST PAGE */
    .test-page {
      font-family: "Poppins", sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      text-align: center;
      position: relative;
      background: #ffffff;
      margin-top: 100px;
    }
    
    .test-page table {
      border-collapse: collapse;
      margin: 20px auto;
      width: 100%;
    }
    
    .test-page th, .test-page td {
      border: 2px solid #333;
      padding: 12px;
      text-align: center;
      color: #333;
    }
    
    .test-page th { 
      background-color: #f8f9fa; 
      color: #333;
    }
    
    .test-page #letterRow td { 
      font-size: 48pt; 
      font-weight: bold; 
      color: #333;
    }
    
    .test-page #fourLetters { 
      font-size: 36pt; 
      font-weight: bold; 
      display: block; 
      margin: 10px 0; 
      color: #333;
    }
    
    .test-page .answer-box { 
      cursor: pointer; 
      font-weight: bold; 
      background-color: #f8f9fa; 
      font-size: 18pt;
      color: #333;
      transition: background-color 0.3s;
    }
    
    .test-page .answer-box:hover { 
      background-color: #e9ecef; 
    }

    .test-page .score {
      display: none;
    }

    .test-page #timer { 
      font-size: 1.3em; 
      font-weight: bold; 
      margin: 10px 0; 
      color: #dc030f; 
    }
    
    .test-page .disabled { pointer-events: none; opacity: 0.5; }
    
    .test-page #resultSummary { 
      margin-top: 20px; 
      font-size: 1.2em; 
      font-weight: bold; 
      color: #333;
    }
    
    .test-page .soal-label, .test-page .pilihan-label { 
      font-size: 1.2em; 
      font-weight: bold; 
      margin-bottom: 5px; 
      color: #333;
    }

    /* Overlay untuk jeda antar sesi */
    #sessionBreak {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      flex-direction: column;
    }

    #countdown {
      font-size: 120px;
      font-weight: bold;
      color: #333;
    }

    #sessionInfo {
      font-size: 24px;
      margin-top: 20px;
      color: #666;
    }

    /* Animasi untuk pop up */
    @keyframes popIn {
        0% {
            opacity: 0;
            transform: scale(0.7) translateY(20px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Animasi untuk countdown */
    @keyframes countdownPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }

    .popup-countdown {
        display: inline-block;
        font-weight: bold;
        color: #dc030f;
        animation: countdownPulse 1s infinite;
    }
    
    /* RESPONSIVE DESIGN */
    @media (max-width: 768px) {
      .navbar {
        padding: 1rem;
      }

      .nav__items {
        gap: 1rem;
      }

      .setup-container {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .main-content {
        padding-top: 80px;
      }

      h2 {
        font-size: 1.5rem;
      }

      .buttons, .generate-buttons {
        flex-direction: column;
        gap: 10px;
      }

      button {
        width: 100%;
        max-width: 300px;
      }
      
      .test-page #letterRow td { 
        font-size: 36pt; 
      }
      
      .test-page #fourLetters { 
        font-size: 28pt; 
      }
    }

    @media (max-width: 480px) {
      .user-menu {
        gap: 0.5rem;
      }

      .profile-btn {
        padding: 0.4rem 0.8rem;
        font-size: 12px;
      }

      .session-box {
        padding: 12px;
      }

      input[type="text"] {
        width: 95%;
        padding: 6px 8px;
      }
    }

    /* Halaman tersembunyi */
    .hidden {
      display: none;
    }

    .level-info {
      text-align: center;
      margin: 10px 0;
      padding: 10px;
      background: #f8f9fa;
      border-radius: 8px;
      font-size: 0.9em;
      color: #666;
    }
    
            .user-menu {
      display: flex;
      align-items: center;
      gap: 1rem;
      position: relative;
    }

    .user-info {
      display: flex;
      align-items: center;
      background-color: rgba(37, 37, 37, 0.8);
      padding: 10px 20px;
      border-radius: 16px;
      border: 1px solid #333;
      transition: all 0.3s ease;
      position: relative;
      cursor: pointer;
      gap: 12px;
      text-decoration: none;
    }

    .user-info:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 25px rgba(220, 3, 15, 0.2);
      border-color: #dc030f;
    }

    .user-name {
      font-size: 14px;
      font-weight: 600;
      color: white;
      margin: 0;
      white-space: nowrap;
    }

    .user-status {
      display: inline-block;
      background: linear-gradient(135deg, rgba(239, 35, 60, 0.2), rgba(217, 4, 41, 0.2));
      color: #ef233c;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: bold;
      border: 1px solid rgba(239, 35, 60, 0.3);
      margin: 0;
      flex-shrink: 0;
    }

    .user-status.reguler {
      background: linear-gradient(135deg, rgba(100, 200, 255, 0.15), rgba(70, 170, 230, 0.15));
      color: #1E90FF;
      border: 1px solid rgba(30, 144, 255, 0.3);
    }

    .user-status.vip {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
      color: #FFD700;
      border: 1px solid rgba(255, 215, 0, 0.4);
    }

  </style>
</head>
<body>
  <!-- NAVBAR DARI DASHBOARD -->
  <nav class="navbar" id="navbar">
    <div class="navbar__brand">
      <img decoding="async" src="images/icon.png" alt="logo" class="brand__logo" />
    </div>
    <div class="nav__items">
      <div class="user-menu">
        <a href="profil_user.php" class="user-info" id="profileBtn">
          <div class="user-name"><?php echo htmlspecialchars($nama_lengkap); ?></div>
          <div class="user-status <?php echo $status_class; ?>"><?php echo $status_text; ?></div>
        </a>
      </div>
    </div>
  </nav>

  <!-- MAIN CONTENT -->
  <main class="main-content">
    <div class="container">
      <!-- HALAMAN SETUP SIMBOL -->
      <div id="setupPage">
        <h2>Setup Soal Manual Simbol Hilang</h2>
        <p class="info">
          Masukkan simbol untuk setiap sesi (pisahkan dengan koma).<br>
          Atau pilih salah satu level kesulitan untuk generate otomatis:
        </p>

        <!-- TOMBOL LEVEL KESULITAN -->
        <div class="generate-buttons">
          <button class="btn-secondary" onclick="generateRandomSymbols('mudah')">
            <i class="fas fa-star"></i> Pola 1
          </button>
          <button class="btn-warning" onclick="generateRandomSymbols('sedang')">
            <i class="fas fa-star-half-alt"></i> Pola 2
          </button>
          <button class="btn-danger" onclick="generateRandomSymbols('sulit')">
            <i class="fas fa-star"></i> Pola 3
          </button>
        </div>

        <div class="setup-container">
          <!-- Kolom kiri -->
          <div class="column">
            <div class="session-box"><h3>Sesi 1</h3><input type="text" id="session1"></div>
            <div class="session-box"><h3>Sesi 2</h3><input type="text" id="session2"></div>
            <div class="session-box"><h3>Sesi 3</h3><input type="text" id="session3"></div>
            <div class="session-box"><h3>Sesi 4</h3><input type="text" id="session4"></div>
            <div class="session-box"><h3>Sesi 5</h3><input type="text" id="session5"></div>
          </div>

          <!-- Kolom kanan -->
          <div class="column">
            <div class="session-box"><h3>Sesi 6</h3><input type="text" id="session6"></div>
            <div class="session-box"><h3>Sesi 7</h3><input type="text" id="session7"></div>
            <div class="session-box"><h3>Sesi 8</h3><input type="text" id="session8"></div>
            <div class="session-box"><h3>Sesi 9</h3><input type="text" id="session9"></div>
            <div class="session-box"><h3>Sesi 10</h3><input type="text" id="session10"></div>
          </div>
        </div>

        <div class="buttons">
          <button class="btn-primary" onclick="goBack()">Kembali ke Dashboard</button>
          <button class="btn-success" onclick="saveAndStart()">Mulai Tes</button>
        </div>
      </div>

      <!-- HALAMAN TES SIMBOL -->
      <div id="testPage" class="test-page hidden">
        <!-- Overlay jeda antar sesi -->
        <div id="sessionBreak">
          <div id="countdown">3</div>
          <div id="sessionInfo">Sesi berikutnya bersiap...</div>
        </div>

        <div id="timer">Time Left: 60s</div>

        <!-- ✅ Score tetap ada tapi disembunyikan -->
        <div class="score">Score: <span id="score">0</span></div>

        <table>
          <thead>
            <tr><th colspan="5">Kolom 1</th></tr>
          </thead>
          <tbody>
            <tr id="letterRow"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
            <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
          </tbody>
        </table>

        <div class="soal-label">Soal</div>
        <div id="fourLetters">A B C D</div>
        <div class="pilihan-label">Pilihan jawaban:</div>

        <table>
          <tr>
            <td class="answer-box" data-letter="A">A</td>
            <td class="answer-box" data-letter="B">B</td>
            <td class="answer-box" data-letter="C">C</td>
            <td class="answer-box" data-letter="D">D</td>
            <td class="answer-box" data-letter="E">E</td>
          </tr>
        </table>

        <div id="resultSummary"></div>
      </div>
    </div>
  </main>

  <script>
    // ===== NAVBAR FUNCTIONALITY =====
    // Navbar scroll effect
    window.addEventListener('scroll', function() {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
    });

    // Profile dropdown functionality
    const profileBtn = document.getElementById('profileBtn');
    const profileDropdown = document.getElementById('profileDropdown');

    if (profileBtn && profileDropdown) {
      profileBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        profileDropdown.classList.toggle('show');
      });

      // Close dropdown when clicking outside
      document.addEventListener('click', function() {
        profileDropdown.classList.remove('show');
      });

      // Prevent dropdown from closing when clicking inside
      profileDropdown.addEventListener('click', function(e) {
        e.stopPropagation();
      });
    }

    // Show profile info function
    function showProfileInfo() {
      const userInfo = `
Informasi Profil:

Nama Lengkap: <?php echo htmlspecialchars($nama_lengkap); ?>

Email: <?php echo htmlspecialchars($email); ?>

Nama Bimbel: <?php echo htmlspecialchars($nama_bimbel); ?>

Fokus Seleksi: <?php echo htmlspecialchars($fokus_seleksi); ?>

Domisili: <?php echo htmlspecialchars($domisili); ?>

No. Telepon: <?php echo htmlspecialchars($no_telepon); ?>
      `;
      alert(userInfo);
      profileDropdown.classList.remove('show');
    }

    // Change password function
    function changePassword() {
      alert('Fitur Rubah Password akan segera tersedia!');
      profileDropdown.classList.remove('show');
    }

    // Logout function
    function logout() {
      if (confirm('Apakah Anda yakin ingin logout?')) {
        window.location.href = 'logout.php';
      }
    }

    // === KONSTANTA SIMBOL BERDASARKAN LEVEL ===
    const symbolSets = {
      mudah: [
        // Simbol umum dan mudah dibedakan
        '@','#','$','%','&','*','?','!','=','/','\\','→','←','↑',
        '↓','↔','↕','+','−','×','÷','≠','≈','≤','≥','α','β','γ',
        'δ','ε','ζ','η','θ','ι','κ','λ','μ','ν','ξ','ο','π'   
      ],
      sedang: [
        // Campuran simbol umum dan khusus
        '♠','♣','♦','♥','●','■','□','▲','▼','◆','○','◎','◇','△','▽',
        '★','☆','☀','☁','☂','☃','☄','⚝','♫','♪','♩','♬','☎','✆','✈',
        '☑','✓','✔','✕','✖','✗','♔','♕','♖','♗','♘','♙','♚','♛','♜','♝','♞','♟',
        '✿','❀','☘','☢','☣','⚠','♨','✂','✏','✒','✉','♡',
        '∞','π','∑','∆','√','∫','∂','∇','≡','≈','≠','≤','≥',
        '☯','☮','✡','☪','♾','⚛',
      ],
      sulit: [
        // Simbol khusus dengan bentuk mirip
        '●','○','◎','◉','☉','⦿','◐','◑','◒','◓','◔','◕',
        '■','□','◼','◻','▪','▫','▢','▣','▤','▥','▦','▧','▨','▩',
        '▲','△','▴','▵','▶','▷','▸','▹','▼','▽','▾','▿','◀','◁','◂','◃',
        '◆','◇','◈','◊','♤','♧','♢','♡','♠','♣','♦','♥',
        '★','☆','⚝','✩','✪','✫','✬','✭','✮','✯','✰',
        '⚀','⚁','⚂','⚃','⚄','⚅','♾','⚛','☯','☮','☪',
        '∑','∆','√','∫','∂','∇','≡','≈','≠','≤','≥','±','×','÷',
        'α','β','γ','δ','ε','ζ','η','θ','ι','κ','λ','μ','ν','ξ','ο','π'
      ]
    };

    // === VARIABEL GLOBAL UNTUK TES ===
    let fiveSymbols = [];
    let correctAnswer = null;
    let correctLetter = null;
    let score = 0;
    let totalCorrect = 0;
    let totalWrong = 0;
    let timeLeft = 60;
    let timerInterval = null;
    let session = 1;
    const totalSessions = 10;
    let gameOver = false;
    let attemptedPerSession = Array(totalSessions).fill(0);
    let correctPerSession = Array(totalSessions).fill(0);
    let wrongPerSession = Array(totalSessions).fill(0);

    // === FUNGSI UTAMA ===
    function goBack() {
      window.location.href = 'dashboard.php';
    }

    function generateRandomSymbols(level = 'sedang') {
      const levelSymbols = symbolSets[level];
      
      // Buat array untuk menyimpan semua simbol yang akan digunakan
      let allSymbols = [];
      
      // Untuk setiap sesi, pilih 5 simbol unik
      for (let i = 0; i < 10; i++) {
        // Buat salinan array simbol level
        let availableSymbols = [...levelSymbols];
        let sessionSymbols = [];
        
        // Pilih 5 simbol unik untuk sesi ini
        for (let j = 0; j < 5; j++) {
          if (availableSymbols.length === 0) {
            // Jika simbol habis, reset availableSymbols
            availableSymbols = [...levelSymbols];
          }
          
          const randomIndex = Math.floor(Math.random() * availableSymbols.length);
          const selectedSymbol = availableSymbols[randomIndex];
          
          // Tambahkan simbol ke sesi
          sessionSymbols.push(selectedSymbol);
          
          // Hapus simbol yang sudah dipilih dari availableSymbols untuk sesi ini
          availableSymbols.splice(randomIndex, 1);
        }
        
        // Simpan simbol sesi ke input
        document.getElementById('session' + (i + 1)).value = sessionSymbols.join(',');
        
        // Tambahkan ke array allSymbols untuk tracking
        allSymbols = allSymbols.concat(sessionSymbols);
      }
      
      // Debug: Cek apakah ada duplikat dalam satu sesi
      console.log('Generated symbols for all sessions');
      for (let i = 0; i < 10; i++) {
        const sessionSymbols = document.getElementById('session' + (i + 1)).value.split(',');
        const uniqueSymbols = [...new Set(sessionSymbols)];
        if (sessionSymbols.length !== uniqueSymbols.length) {
          console.warn(`Peringatan: Sesi ${i + 1} memiliki simbol duplikat!`);
        } else {
          console.log(`Sesi ${i + 1}: Semua simbol unik`);
        }
      }
    }

    function saveAndStart() {
      const sessions = [];
      for (let i = 1; i <= 10; i++) {
        const val = document.getElementById('session' + i).value.trim();
        if (val) {
          const symbols = val.split(',').map(s => s.trim()).filter(s => s.length > 0);
          if (symbols.length === 5) {
            // Cek apakah ada duplikat dalam sesi ini
            const uniqueSymbols = [...new Set(symbols)];
            if (uniqueSymbols.length !== symbols.length) {
              alert(`Sesi ${i} memiliki simbol yang sama! Harap gunakan simbol yang berbeda dalam satu sesi.`);
              return;
            }
            sessions.push(symbols);
          } else {
            alert(`Sesi ${i} harus memiliki tepat 5 simbol!`);
            return;
          }
        } else {
          alert('Harap isi semua sesi terlebih dahulu!');
          return;
        }
      }

      localStorage.setItem('customQuestions', sessions.map(session => session.join(',')).join('\n'));
      
      // Switch ke halaman tes
      document.getElementById('setupPage').classList.add('hidden');
      document.getElementById('testPage').classList.remove('hidden');
      
      // Mulai tes
      startSessionBreak();
    }

    // === FUNGSI TES SIMBOL ===
    function generateFiveSymbols() {
      const customData = localStorage.getItem('customQuestions');
      let customSets = [];

      if (customData) {
        customSets = customData
          .split('\n')
          .map(row => row.split(',').map(symbol => symbol.trim()).filter(symbol => symbol.length > 0))
          .filter(arr => arr.length > 0);
      }

      if (customSets.length > 0 && customSets[session - 1]) {
        fiveSymbols = [...customSets[session - 1]];
        
        // Validasi: pastikan tidak ada duplikat dalam sesi ini
        const uniqueSymbols = [...new Set(fiveSymbols)];
        if (uniqueSymbols.length !== fiveSymbols.length) {
          console.error(`Error: Sesi ${session} memiliki simbol duplikat!`);
          // Fallback ke simbol default jika ada masalah
          const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
          let available = [...letters];
          fiveSymbols = [];
          
          for (let i = 0; i < 5; i++) {
            const randomIndex = Math.floor(Math.random() * available.length);
            fiveSymbols.push(available[randomIndex]);
            available.splice(randomIndex, 1);
          }
        }
      } else {
        // Fallback ke huruf jika tidak ada data custom
        const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
        let available = [...letters];
        fiveSymbols = [];
        
        for (let i = 0; i < 5; i++) {
          const randomIndex = Math.floor(Math.random() * available.length);
          fiveSymbols.push(available[randomIndex]);
          available.splice(randomIndex, 1);
        }
      }

      const symbolCells = document.querySelectorAll('#letterRow td');
      symbolCells.forEach((cell, idx) => cell.textContent = fiveSymbols[idx]);
      document.querySelector('thead th').textContent = `Kolom ${session}`;
    }

    function generateFourSymbols() {
      const shuffled = [...fiveSymbols].sort(() => 0.5 - Math.random());
      const four = shuffled.slice(0, 4);
      document.getElementById('fourLetters').textContent = four.join(' ');
      correctAnswer = fiveSymbols.find(symbol => !four.includes(symbol));
      correctLetter = ['A', 'B', 'C', 'D', 'E'][fiveSymbols.indexOf(correctAnswer)];
    }

    function startSessionBreak() {
      const breakOverlay = document.getElementById('sessionBreak');
      const countdownElement = document.getElementById('countdown');
      const sessionInfoElement = document.getElementById('sessionInfo');
      
      breakOverlay.style.display = 'flex';
      
      let countdown = 3;
      countdownElement.textContent = countdown;
      sessionInfoElement.textContent = `Sesi ${session} bersiap...`;
      
      const countdownInterval = setInterval(() => {
        countdown--;
        countdownElement.textContent = countdown;
        
        if (countdown <= 0) {
          clearInterval(countdownInterval);
          breakOverlay.style.display = 'none';
          startSession();
        }
      }, 1000);
    }

    function startSession() {
      if (session > totalSessions) {
        endGame();
        return;
      }

      timeLeft = 60;
      document.getElementById('timer').textContent = `Time Left: ${timeLeft}s`;
      generateFiveSymbols();
      generateFourSymbols();

      timerInterval = setInterval(() => {
        timeLeft--;
        document.getElementById('timer').textContent = `Time Left: ${timeLeft}s`;
        if (timeLeft <= 0) {
          clearInterval(timerInterval);
          attemptedPerSession[session - 1] = correctPerSession[session - 1] + wrongPerSession[session - 1];
          session++;
          if (session <= totalSessions) {
            startSessionBreak();
          } else {
            endGame();
          }
        }
      }, 1000);
    }

    function endGame() {
        gameOver = true;
        document.getElementById('timer').textContent = "Finished!";
        document.querySelectorAll('.answer-box').forEach(box => box.classList.add('disabled'));
        
        // Hitung nilai akhir sesuai rumus
        const nilaiAkhir = Math.min((totalCorrect / 500) * 100, 100).toFixed(2);
        
        // Tampilkan pesan "Menyimpan hasil..."
        const resultSummary = document.getElementById('resultSummary');
        resultSummary.innerHTML = `<div style="color: #666; font-size: 16px; margin: 20px 0;">
            <i class="fas fa-spinner fa-spin"></i> Menyimpan hasil tes...<br>
            <small>Nilai sementara: ${nilaiAkhir}%</small>
        </div>`;
        
        // Pastikan data untuk sesi terakhir tercatat
        attemptedPerSession[session - 1] = correctPerSession[session - 1] + wrongPerSession[session - 1];
        
        console.log('Data yang akan disimpan:', {
            totalCorrect,
            totalWrong,
            nilaiAkhir: nilaiAkhir + '%',
            attemptedPerSession,
            correctPerSession,
            wrongPerSession
        });
        
        // HAPUS DATA CUSTOM SETELAH TES SELESAI
        localStorage.removeItem('customQuestions');
        
        // Siapkan data untuk dikirim ke PHP
        const formData = new FormData();
        formData.append('save_result', 'true');
        formData.append('jenis_tes', 'Kecermatan Simbol');
        formData.append('total_terjawab', totalCorrect + totalWrong);
        formData.append('total_benar', totalCorrect);
        formData.append('total_salah', totalWrong);
        formData.append('hasil_akhir', totalCorrect); // PHP akan menghitung ulang
        
        // Tambahkan data per kolom
        for (let i = 0; i < totalSessions; i++) {
            formData.append(`kolom${i+1}_terjawab`, attemptedPerSession[i] || 0);
            formData.append(`kolom${i+1}_benar`, correctPerSession[i] || 0);
            formData.append(`kolom${i+1}_salah`, wrongPerSession[i] || 0);
        }
        
        console.log('Mengirim data ke server...');
        
        // Kirim data ke server menggunakan AJAX
        fetch(window.location.href, {
            method: 'POST',
            body: formData
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.text();
        })
        .then(data => {
            console.log('Response dari server:', data);
            
            if (data.includes('SUCCESS')) {
                // Ekstrak timestamp dan nilai akhir dari response
                const timestampMatch = data.match(/SUCCESS: Data berhasil disimpan pada (.+) \| Nilai Akhir: (.+)%$/);
                const timestamp = timestampMatch ? timestampMatch[1] : new Date().toLocaleTimeString();
                const serverNilaiAkhir = timestampMatch ? timestampMatch[2] : nilaiAkhir;
                
                // Tampilkan pop up sukses dengan nilai akhir
                showSavePopup('success', 'Hasil Tes Berhasil Disimpan!', 
                    `Data telah tersimpan pada ${timestamp}<br><strong>Nilai Akhir: ${serverNilaiAkhir}%</strong>`, 2000);
                
                console.log('Data berhasil disimpan ke database');
                
            } else {
                // Tampilkan pop up warning dengan nilai akhir
                showSavePopup('warning', 'Peringatan', 
                    `Data disimpan secara lokal<br><strong>Nilai Akhir: ${nilaiAkhir}%</strong>`, 2000);
                
                console.error('Gagal menyimpan data:', data);
            }
        })
        .catch(error => {
            console.error('Error menyimpan data:', error);
            
            // Tampilkan pop up error dengan nilai akhir
            showSavePopup('error', 'Koneksi Terputus', 
                `Data akan disimpan secara lokal<br><strong>Nilai Akhir: ${nilaiAkhir}%</strong>`, 2000);
        });
    }

    // Fungsi untuk menampilkan pop up penyimpanan
    function showSavePopup(type, title, message, redirectDelay = 2000) {
        // Buat overlay pop up
        const popupOverlay = document.createElement('div');
        popupOverlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
        `;
        
        // Tentukan warna dan ikon berdasarkan type
        let backgroundColor, icon, iconColor;
        switch(type) {
            case 'success':
                backgroundColor = '#d4edda';
                icon = 'fa-check-circle';
                iconColor = '#28a745';
                break;
            case 'warning':
                backgroundColor = '#fff3cd';
                icon = 'fa-exclamation-triangle';
                iconColor = '#ffc107';
                break;
            case 'error':
                backgroundColor = '#f8d7da';
                icon = 'fa-times-circle';
                iconColor = '#dc3545';
                break;
            default:
                backgroundColor = '#d1ecf1';
                icon = 'fa-info-circle';
                iconColor = '#17a2b8';
        }
        
        // Buat konten pop up
        popupOverlay.innerHTML = `
            <div style="
                background: white;
                padding: 30px;
                border-radius: 15px;
                text-align: center;
                box-shadow: 0 20px 40px rgba(0,0,0,0.3);
                max-width: 400px;
                width: 90%;
                animation: popIn 0.5s ease-out;
            ">
                <div style="font-size: 48px; color: ${iconColor}; margin-bottom: 15px;">
                    <i class="fas ${icon}"></i>
                </div>
                <h2 style="color: #333; margin-bottom: 10px; font-size: 24px;">${title}</h2>
                <p style="color: #666; margin-bottom: 20px; font-size: 16px; line-height: 1.5;">${message}</p>
                <div style="
                    background: ${backgroundColor};
                    padding: 15px;
                    border-radius: 8px;
                    margin: 20px 0;
                    border-left: 4px solid ${iconColor};
                ">
                    <div style="font-size: 14px; color: #333;">
                        <i class="fas fa-clock"></i> 
                        Mengarahkan ke halaman hasil dalam <span class="popup-countdown">${redirectDelay/1000}</span> detik...
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <div class="spinner" style="
                        width: 30px;
                        height: 30px;
                        border: 3px solid #f3f3f3;
                        border-top: 3px solid ${iconColor};
                        border-radius: 50%;
                        animation: spin 1s linear infinite;
                        margin: 0 auto;
                    "></div>
                </div>
            </div>
        `;
        
        // Tambahkan ke body
        document.body.appendChild(popupOverlay);
        
        // Countdown timer
        let countdown = redirectDelay / 1000;
        const countdownElement = popupOverlay.querySelector('.popup-countdown');
        const countdownInterval = setInterval(() => {
            countdown--;
            countdownElement.textContent = countdown;
            
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                redirectToResults();
            }
        }, 1000);
        
        // Auto redirect setelah delay
        setTimeout(() => {
            redirectToResults();
        }, redirectDelay);
    }

    // Fungsi untuk redirect ke halaman hasil
    function redirectToResults() {
        const redirectUrl = `result.php?test_type=${encodeURIComponent('Kecermatan Simbol')}&correct=${totalCorrect}&wrong=${totalWrong}&attempted=${attemptedPerSession.join(',')}&correctPerSession=${correctPerSession.join(',')}&wrongPerSession=${wrongPerSession.join(',')}&user=<?php echo urlencode($nama_lengkap); ?>`;
        window.location.href = redirectUrl;
    }

    // Event listeners untuk kotak jawaban
    document.querySelectorAll('.answer-box').forEach(box => {
      box.addEventListener('click', function () {
        if (gameOver) return;
        const selectedLetter = this.getAttribute('data-letter');
        attemptedPerSession[session - 1]++;
        if (selectedLetter === correctLetter) {
          score++;
          totalCorrect++;
          correctPerSession[session - 1]++;
        } else {
          totalWrong++;
          wrongPerSession[session - 1]++;
        }
        document.getElementById('score').textContent = score;
        generateFourSymbols();
      });
    });

    // Auto-focus pada input pertama ketika halaman dimuat
    document.addEventListener('DOMContentLoaded', function() {
      const firstInput = document.getElementById('session1');
      if (firstInput) {
        firstInput.focus();
      }
    });

    // Enter key navigation antara input
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') {
        const activeElement = document.activeElement;
        if (activeElement.type === 'text' && activeElement.id.startsWith('session')) {
          event.preventDefault();
          const currentSession = parseInt(activeElement.id.replace('session', ''));
          if (currentSession < 10) {
            const nextInput = document.getElementById('session' + (currentSession + 1));
            if (nextInput) {
              nextInput.focus();
            }
          }
        }
      }
    });

    // Emergency exit dengan Escape key
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Escape') {
        const testPage = document.getElementById('testPage');
        if (!testPage.classList.contains('hidden')) {
          if (confirm('Keluar dari tes? Progress yang belum disimpan akan hilang.')) {
            window.location.href = 'dashboard.php';
          }
        }
      }
    });

    // Debug info
    console.log('Setup simbol page loaded successfully');
  </script>
</body>
</html>