<?php
// demodashboard.php — Demo Dashboard Admin Sriwijaya Smart Edu
// Menyesuaikan tampilan ZYA CBT dengan tema website utama (navy + blue + accent)

$demo_tests = [
  ['id'=>1,  'nama'=>'UM SEJARAH INDONESIA KELAS XII IPA/IPS', 'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>2,  'nama'=>'UM BAHASA INGGRIS KELAS XII IPA/IPS',    'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>3,  'nama'=>'UM PENJASORKES KELAS XII IPA/IPS',       'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>4,  'nama'=>'UM BAHASA ARAB KELAS XII IPA/IPS',       'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>5,  'nama'=>'UM PPKN KELAS XII IPA/IPS',             'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>6,  'nama'=>'UM EKONOMI KELAS XII IPS',               'max'=>100, 'mulai'=>'2026-04-13 07:30:00', 'selesai'=>'2026-04-13 09:30:00'],
  ['id'=>7,  'nama'=>'UM FISIKA KELAS XII IPA',                'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>8,  'nama'=>'UM FIKIH KELAS XII IPA/IPS',             'max'=>100, 'mulai'=>'2026-04-10 09:40:00', 'selesai'=>'2026-04-10 11:50:00'],
  ['id'=>9,  'nama'=>'UM SOSIOLOGI KELAS XII IPS',             'max'=>100, 'mulai'=>'2026-04-10 07:30:00', 'selesai'=>'2026-04-10 09:30:00'],
  ['id'=>10, 'nama'=>'UM KIMIA KELAS XII IPA',                 'max'=>100, 'mulai'=>'2026-04-10 07:30:00', 'selesai'=>'2026-04-10 09:30:00'],
  ['id'=>11, 'nama'=>'UM SENI BUDAYA KELAS XII IPA/IPS',       'max'=>100, 'mulai'=>'2026-04-09 09:40:00', 'selesai'=>'2026-04-09 11:50:00'],
  ['id'=>12, 'nama'=>'UM GEOGRAFI KELAS XII IPS',              'max'=>100, 'mulai'=>'2026-04-09 07:30:00', 'selesai'=>'2026-04-09 09:30:00'],
  ['id'=>13, 'nama'=>'UM BIOLOGI KELAS XII IPA',               'max'=>100, 'mulai'=>'2026-04-09 07:30:00', 'selesai'=>'2026-04-09 09:30:00'],
  ['id'=>14, 'nama'=>'UM AKIDAH AKHLAK KELAS XII IPA/IPS',     'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>15, 'nama'=>'UM BAHASA INDONESIA KELAS XII IPA/IPS',  'max'=>100, 'mulai'=>'2026-04-16 07:30:00', 'selesai'=>'2026-04-16 11:50:00'],
  ['id'=>16, 'nama'=>'UM MATEMATIKA KELAS XII IPA',            'max'=>100, 'mulai'=>'2026-04-17 07:30:00', 'selesai'=>'2026-04-17 09:30:00'],
  ['id'=>17, 'nama'=>'UM MATEMATIKA KELAS XII IPS',            'max'=>100, 'mulai'=>'2026-04-17 07:30:00', 'selesai'=>'2026-04-17 09:30:00'],
  ['id'=>18, 'nama'=>'UM BAHASA INGGRIS KELAS XI IPA/IPS',     'max'=>100, 'mulai'=>'2026-04-18 07:30:00', 'selesai'=>'2026-04-18 09:30:00'],
  ['id'=>19, 'nama'=>'UM FISIKA KELAS XI IPA',                 'max'=>100, 'mulai'=>'2026-04-18 07:30:00', 'selesai'=>'2026-04-18 09:30:00'],
  ['id'=>20, 'nama'=>'UM KIMIA KELAS XI IPA',                  'max'=>100, 'mulai'=>'2026-04-18 07:30:00', 'selesai'=>'2026-04-18 09:30:00'],
];
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dashboard Admin — Demo Sriwijaya Smart Edu</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
<style>
:root {
  --navy:       #0f1f5c;
  --navy-deep:  #091444;
  --navy-mid:   #1a2f6e;
  --blue:       #1e40af;
  --blue-b:     #2563eb;
  --blue-l:     #3b82f6;
  --sky:        #60a5fa;
  --accent:     #f0a500;
  --green:      #22c55e;
  --green-d:    #16a34a;
  --white:      #ffffff;
  --g50:        #f8faff;
  --g100:       #eef2ff;
  --g200:       #e0e7ff;
  --txt:        #0f172a;
  --muted:      #475569;
  --light:      #94a3b8;

  --sidebar-w:  230px;
  --top-h:      56px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;background:var(--g50);color:var(--txt);}
a{text-decoration:none;color:inherit;}

/* ======= LAYOUT ======= */
.layout{display:flex;height:100vh;overflow:hidden;}

/* ======= SIDEBAR ======= */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--navy-deep);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  transition:width .25s;
  position:relative;z-index:20;
}
.sidebar::-webkit-scrollbar{width:4px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;}

/* Logo area */
.sb-logo{
  padding:0 18px;height:var(--top-h);
  display:flex;align-items:center;gap:10px;
  background:var(--navy);border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.sb-logo-mark{
  width:32px;height:32px;background:var(--blue-b);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:white;letter-spacing:-.5px;
  flex-shrink:0;
}
.sb-logo-text{font-size:14px;font-weight:800;color:white;line-height:1.2;}
.sb-logo-sub{font-size:9px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;}

/* User card */
.sb-user{
  padding:16px 18px;display:flex;align-items:center;gap:11px;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.sb-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--blue-b);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:white;flex-shrink:0;
  border:2px solid rgba(255,255,255,.15);
}
.sb-name{font-size:13px;font-weight:700;color:white;}
.sb-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--green);font-weight:600;}
.sb-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);}

/* Nav sections */
.sb-section{
  font-size:10px;font-weight:700;color:rgba(255,255,255,.3);
  letter-spacing:.9px;text-transform:uppercase;
  padding:18px 18px 8px;
}
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;cursor:pointer;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.55);
  transition:.2s;position:relative;
}
.sb-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);}
.sb-item.active{background:rgba(37,99,235,.3);color:white;border:1px solid rgba(37,99,235,.4);}
.sb-item svg{width:16px;height:16px;flex-shrink:0;}
.sb-item .chevron{margin-left:auto;width:14px;height:14px;transition:transform .2s;}
.sb-item.open .chevron{transform:rotate(90deg);}
.sb-sub{padding-left:26px;display:flex;flex-direction:column;gap:2px;margin-top:2px;}
.sb-sub-item{
  padding:7px 10px;border-radius:7px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.45);
  transition:.2s;display:flex;align-items:center;gap:7px;
}
.sb-sub-item::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;}
.sb-sub-item:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);}
.sb-sub-item.active{color:var(--sky);font-weight:700;}
.sb-sub-item.active::before{background:var(--sky);}

/* Demo banner in sidebar */
.sb-demo-banner{
  margin:12px 10px;padding:12px 14px;
  background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.25);
  border-radius:10px;
}
.sb-demo-banner p{font-size:11px;font-weight:600;color:var(--accent);line-height:1.5;}

/* ======= MAIN ======= */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* Topbar */
.topbar{
  height:var(--top-h);flex-shrink:0;
  background:white;border-bottom:1px solid var(--g200);
  padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 1px 8px rgba(15,31,92,.06);
  position:relative;z-index:10;
}
.topbar-left{display:flex;align-items:center;gap:14px;}
.hamburger-btn{
  background:none;border:none;cursor:pointer;padding:6px;
  color:var(--muted);border-radius:6px;transition:.2s;
  display:flex;align-items:center;
}
.hamburger-btn:hover{background:var(--g100);color:var(--navy);}
.hamburger-btn svg{width:20px;height:20px;}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);}
.breadcrumb .sep{color:var(--light);}
.breadcrumb .cur{font-weight:700;color:var(--navy);}

.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-demo-tag{
  background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.3);
  border-radius:100px;padding:5px 12px;
  font-size:11px;font-weight:700;color:var(--accent);
}
.topbar-user{
  display:flex;align-items:center;gap:9px;
  background:var(--g50);border:1px solid var(--g200);
  border-radius:10px;padding:7px 14px;cursor:pointer;
  transition:.2s;
}
.topbar-user:hover{background:var(--g100);}
.topbar-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:white;
}
.topbar-name{font-size:13px;font-weight:700;color:var(--navy);}

/* ======= CONTENT ======= */
.content{flex:1;overflow-y:auto;padding:24px 28px;}
.content::-webkit-scrollbar{width:6px;}
.content::-webkit-scrollbar-thumb{background:var(--g200);border-radius:6px;}

/* Page header */
.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.page-hdr-left{}
.page-hdr h1{font-size:20px;font-weight:800;color:var(--navy);}
.page-hdr p{font-size:13px;color:var(--muted);margin-top:2px;}
.page-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:5px;}
.page-breadcrumb a{color:var(--blue-b);font-weight:600;}
.page-breadcrumb .sep{color:var(--light);}

.btn-tambah{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--blue-b);color:white;
  font-size:13px;font-weight:700;padding:10px 18px;border-radius:9px;
  border:none;cursor:pointer;transition:.2s;
}
.btn-tambah:hover{background:var(--blue);transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,.3);}
.btn-tambah svg{width:16px;height:16px;}

/* Summary stats */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.stat-box{
  background:white;border:1.5px solid var(--g200);border-radius:13px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;
  transition:.25s;
}
.stat-box:hover{border-color:var(--blue-l);box-shadow:0 4px 18px rgba(15,31,92,.08);}
.stat-box-icon{
  width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.si-blue  {background:#dbeafe;}
.si-green {background:#dcfce7;}
.si-amber {background:#fef3c7;}
.si-purple{background:#f3e8ff;}
.stat-box-num{font-size:22px;font-weight:800;color:var(--navy);}
.stat-box-lbl{font-size:12px;color:var(--muted);font-weight:600;margin-top:1px;}
.stat-box-trend{font-size:11px;font-weight:700;color:var(--green);margin-top:2px;}

/* Table panel */
.table-panel{background:white;border:1.5px solid var(--g200);border-radius:14px;overflow:hidden;}
.table-toolbar{
  padding:16px 20px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--g200);flex-wrap:wrap;gap:12px;
}
.table-title{font-size:16px;font-weight:800;color:var(--navy);}
.table-toolbar-right{display:flex;align-items:center;gap:10px;}
.show-wrap{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);}
.show-wrap select{
  padding:6px 10px;border:1.5px solid var(--g200);border-radius:7px;
  font-size:13px;font-family:inherit;color:var(--txt);background:var(--g50);
  outline:none;cursor:pointer;
}
.show-wrap select:focus{border-color:var(--blue-b);}
.search-wrap{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);}
.search-wrap input{
  padding:7px 12px;border:1.5px solid var(--g200);border-radius:7px;
  font-size:13px;font-family:inherit;background:var(--g50);outline:none;width:200px;
  transition:.2s;
}
.search-wrap input:focus{border-color:var(--blue-b);background:white;box-shadow:0 0 0 3px rgba(37,99,235,.07);}
.search-wrap input::placeholder{color:var(--light);}

/* Table */
.tbl-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--g50);border-bottom:2px solid var(--g200);}
thead th{
  padding:11px 14px;text-align:left;
  font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.7px;white-space:nowrap;
}
thead th.center{text-align:center;}
tbody tr{border-bottom:1px solid var(--g100);transition:.18s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:#f0f4ff;}
tbody td{padding:11px 14px;font-size:13px;color:var(--txt);vertical-align:middle;}
tbody td.center{text-align:center;}

/* Row number with status dot */
.row-num{display:flex;align-items:center;gap:8px;}
.status-dot{
  width:22px;height:22px;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  color:white;font-size:11px;font-weight:800;flex-shrink:0;cursor:pointer;
  transition:.2s;box-shadow:0 2px 8px rgba(34,197,94,.3);
}
.status-dot:hover{transform:scale(1.15);}
.row-num-val{font-weight:700;color:var(--navy);}

.nama-tes{font-weight:600;color:var(--navy);}
.max-score-badge{
  display:inline-block;background:var(--g100);color:var(--blue);
  font-size:12px;font-weight:700;padding:3px 10px;border-radius:6px;
  border:1px solid var(--g200);
}
.waktu-cell{font-size:12.5px;color:var(--muted);font-weight:500;}

/* Action buttons */
.action-wrap{display:flex;align-items:center;gap:5px;}
.act-btn{
  width:30px;height:30px;border-radius:7px;border:1.5px solid var(--g200);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:white;transition:.2s;
}
.act-btn:hover{border-color:var(--blue-l);background:var(--g100);}
.act-btn.del:hover{border-color:#fca5a5;background:#fef2f2;}
.act-btn svg{width:14px;height:14px;color:var(--muted);}
.act-btn.del:hover svg{color:#dc2626;}
.act-btn.del svg{color:var(--muted);}
.chk-cell input[type=checkbox]{width:15px;height:15px;accent-color:var(--navy);cursor:pointer;}

/* Pagination */
.table-footer{
  padding:14px 20px;border-top:1px solid var(--g200);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.tbl-info{font-size:13px;color:var(--muted);}
.pagination{display:flex;gap:5px;}
.pg-btn{
  width:32px;height:32px;border-radius:7px;
  border:1.5px solid var(--g200);background:white;
  font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.pg-btn:hover{border-color:var(--blue-l);color:var(--navy);}
.pg-btn.active{background:var(--navy);border-color:var(--navy);color:white;}

/* Demo overlay notice */
.demo-notice{
  position:fixed;bottom:20px;right:20px;z-index:999;
  background:var(--navy);color:white;
  border-radius:14px;padding:14px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  max-width:280px;border:1px solid rgba(255,255,255,.1);
  animation:slideInNotice .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideInNotice{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.dn-title{font-size:13px;font-weight:800;margin-bottom:5px;display:flex;align-items:center;gap:7px;}
.dn-badge{background:var(--accent);color:#0f172a;font-size:10px;font-weight:800;padding:2px 8px;border-radius:100px;}
.dn-text{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:12px;}
.dn-btns{display:flex;gap:8px;}
.dn-btn-wa{
  flex:1;background:#25d366;color:white;font-size:12px;font-weight:700;
  padding:8px;border-radius:8px;text-align:center;cursor:pointer;transition:.2s;
  display:block;
}
.dn-btn-wa:hover{background:#22c55e;}
.dn-btn-close{
  background:rgba(255,255,255,.1);color:white;font-size:12px;font-weight:700;
  padding:8px 12px;border-radius:8px;cursor:pointer;border:none;transition:.2s;
}
.dn-btn-close:hover{background:rgba(255,255,255,.18);}

/* Toast */
.toast{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:9999;
  background:var(--navy);color:white;
  padding:10px 20px;border-radius:9px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:.3s;white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.toast.show{opacity:1;}

/* RESPONSIVE */
@media(max-width:900px){
  .stat-row{grid-template-columns:1fr 1fr;}
  .sidebar{position:fixed;left:-100%;top:0;bottom:0;z-index:100;transition:left .25s;}
  .sidebar.open{left:0;}
  .sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;display:none;}
  .sb-overlay.show{display:block;}
}
@media(max-width:580px){
  .stat-row{grid-template-columns:1fr;}
  .content{padding:16px;}
  .search-wrap input{width:140px;}
}
</style>
</head>
<body>

<div class="layout">

  <!-- ===== SIDEBAR ===== -->
  <aside class="sidebar" id="sidebar">

    <div class="sb-logo">
      <div class="sb-logo-mark">SE</div>
      <div>
        <div class="sb-logo-text">Sriwijaya Smart Edu</div>
        <div class="sb-logo-sub">Admin Panel</div>
      </div>
    </div>

    <div class="sb-user">
      <div class="sb-avatar">SA</div>
      <div>
        <div class="sb-name">SAMANPRA</div>
        <div class="sb-status">Online</div>
      </div>
    </div>

    <!-- Demo banner -->
    <div class="sb-demo-banner">
      <p>⚠️ Mode Demo — Data bersifat simulasi. Tidak ada perubahan yang disimpan.</p>
    </div>

    <div class="sb-section">Main Navigation</div>
    <div class="sb-nav">

      <div class="sb-item" onclick="toast('Dashboard — Coming in demo')">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
        Dashboard
      </div>

      <div class="sb-item" id="itemModul" onclick="toggleSub('subModul','itemModul')">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
        Data Modul
        <svg class="chevron" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
      </div>
      <div class="sb-sub" id="subModul" style="display:none;">
        <div class="sb-sub-item" onclick="toast('Modul Ujian')">Modul Ujian</div>
        <div class="sb-sub-item" onclick="toast('Modul Absensi')">Modul Absensi</div>
      </div>

      <div class="sb-item" id="itemPeserta" onclick="toggleSub('subPeserta','itemPeserta')">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        Data Peserta
        <svg class="chevron" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
      </div>
      <div class="sb-sub" id="subPeserta" style="display:none;">
        <div class="sb-sub-item" onclick="toast('Data Siswa')">Data Siswa</div>
        <div class="sb-sub-item" onclick="toast('Data Guru')">Data Guru</div>
        <div class="sb-sub-item" onclick="toast('Manajemen Kelas')">Manajemen Kelas</div>
      </div>

      <div class="sb-item open active" id="itemTes" onclick="toggleSub('subTes','itemTes')">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"/></svg>
        Data Tes
        <svg class="chevron" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
      </div>
      <div class="sb-sub" id="subTes">
        <div class="sb-sub-item" onclick="toast('Tambah Tes')">Tambah Tes</div>
        <div class="sb-sub-item active">Daftar Tes</div>
        <div class="sb-sub-item" onclick="toast('Evaluasi Tes')">Evaluasi Tes</div>
        <div class="sb-sub-item" onclick="toast('Hasil Tes')">Hasil Tes</div>
        <div class="sb-sub-item" onclick="toast('Token Ujian')">Token</div>
      </div>

      <div class="sb-item" id="itemLaporan" onclick="toggleSub('subLaporan','itemLaporan')">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="23,6 13.5,15.5 8.5,10.5 1,18"/><polyline points="17,6 23,6 23,12"/></svg>
        Laporan
        <svg class="chevron" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
      </div>
      <div class="sb-sub" id="subLaporan" style="display:none;">
        <div class="sb-sub-item" onclick="toast('Rekap Nilai')">Rekap Nilai</div>
        <div class="sb-sub-item" onclick="toast('Absensi')">Absensi Siswa</div>
      </div>

      <div class="sb-item" onclick="toast('Tool — Coming in demo')">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
        Tool
      </div>

      <div class="sb-item" id="itemPengaturan" onclick="toggleSub('subPengaturan','itemPengaturan')">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        Pengaturan
        <svg class="chevron" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
      </div>
      <div class="sb-sub" id="subPengaturan" style="display:none;">
        <div class="sb-sub-item" onclick="toast('Profil Sekolah')">Profil Sekolah</div>
        <div class="sb-sub-item" onclick="toast('Manajemen User')">Manajemen User</div>
      </div>

    </div>
  </aside>

  <!-- Overlay mobile -->
  <div class="sb-overlay" id="sbOverlay" onclick="closeSidebar()"></div>

  <!-- ===== MAIN ===== -->
  <div class="main">

    <!-- Topbar -->
    <div class="topbar">
      <div class="topbar-left">
        <button class="hamburger-btn" onclick="toggleSidebar()">
          <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
        </button>
        <div class="breadcrumb">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg>
          <span>Home</span>
          <span class="sep">›</span>
          <span class="cur">Daftar Tes</span>
        </div>
      </div>
      <div class="topbar-right">
        <div class="topbar-demo-tag">⭐ Mode Demo</div>
        <div class="topbar-user" onclick="toast('Profil pengguna')">
          <div class="topbar-avatar">SA</div>
          <div class="topbar-name">SAMANPRA</div>
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
        </div>
      </div>
    </div>

    <!-- Content -->
    <div class="content">

      <!-- Page header -->
      <div class="page-hdr">
        <div class="page-hdr-left">
          <div class="page-breadcrumb">
            <a href="demo.php">Home</a>
            <span class="sep">›</span>
            <span>Data Tes</span>
            <span class="sep">›</span>
            <span>Daftar Tes</span>
          </div>
          <h1>Daftar Tes</h1>
          <p>Melihat daftar tes, mengubah dan menghapus tes</p>
        </div>
        <button class="btn-tambah" onclick="toast('Tambah Tes — Fitur ini tersedia di versi lengkap')">
          <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          Tambah Tes
        </button>
      </div>

      <!-- Stat cards -->
      <div class="stat-row">
        <div class="stat-box">
          <div class="stat-box-icon si-blue">📝</div>
          <div>
            <div class="stat-box-num">20</div>
            <div class="stat-box-lbl">Total Tes</div>
            <div class="stat-box-trend">↑ 5 tes baru</div>
          </div>
        </div>
        <div class="stat-box">
          <div class="stat-box-icon si-green">✅</div>
          <div>
            <div class="stat-box-num">14</div>
            <div class="stat-box-lbl">Tes Aktif</div>
            <div class="stat-box-trend">Sedang berjalan</div>
          </div>
        </div>
        <div class="stat-box">
          <div class="stat-box-icon si-amber">👥</div>
          <div>
            <div class="stat-box-num">1.247</div>
            <div class="stat-box-lbl">Total Peserta</div>
            <div class="stat-box-trend">↑ 12% bulan ini</div>
          </div>
        </div>
        <div class="stat-box">
          <div class="stat-box-icon si-purple">📊</div>
          <div>
            <div class="stat-box-num">98%</div>
            <div class="stat-box-lbl">Kehadiran</div>
            <div class="stat-box-trend">↑ 3% dari sebelumnya</div>
          </div>
        </div>
      </div>

      <!-- Table panel -->
      <div class="table-panel">
        <div class="table-toolbar">
          <div class="table-title">Daftar Tes</div>
          <div class="table-toolbar-right">
            <div class="show-wrap">
              Show
              <select id="showSelect" onchange="renderTable()">
                <option value="10">10</option>
                <option value="20" selected>20</option>
                <option value="50">50</option>
              </select>
              entries
            </div>
            <div class="search-wrap">
              Search:
              <input type="text" id="searchInput" placeholder="Cari tes..." oninput="renderTable()"/>
            </div>
          </div>
        </div>

        <div class="tbl-wrap">
          <table>
            <thead>
              <tr>
                <th style="width:50px;">No.</th>
                <th>Nama Tes</th>
                <th>Max Score</th>
                <th>Waktu Mulai</th>
                <th>Waktu Selesai</th>
                <th class="center" style="width:100px;">Aksi</th>
              </tr>
            </thead>
            <tbody id="tableBody"></tbody>
          </table>
        </div>

        <div class="table-footer">
          <div class="tbl-info" id="tableInfo"></div>
          <div class="pagination" id="pagination"></div>
        </div>
      </div>

    </div><!-- /content -->
  </div><!-- /main -->
</div><!-- /layout -->

<!-- Demo notice -->
<div class="demo-notice" id="demoNotice">
  <div class="dn-title">🖥️ Demo Aktif <span class="dn-badge">DEMO</span></div>
  <div class="dn-text">Anda sedang menjelajahi dashboard admin. Tertarik menggunakan sistem ini untuk sekolah Anda?</div>
  <div class="dn-btns">
    <a href="https://wa.me/6281234567890?text=Halo%2C%20saya%20tertarik%20setelah%20melihat%20demo%20dashboard%20admin%20Sriwijaya%20Smart%20Edu." target="_blank" class="dn-btn-wa">💬 Konsultasi</a>
    <button class="dn-btn-close" onclick="document.getElementById('demoNotice').style.display='none'">✕</button>
  </div>
</div>

<!-- Toast -->
<div class="toast" id="toastEl"></div>

<?php
$json_tests = json_encode($demo_tests);
echo "<script>const ALL_TESTS = $json_tests;</script>";
?>

<script>
// ===== TABLE ENGINE =====
let currentPage = 1;

function renderTable() {
  const search  = document.getElementById('searchInput').value.toLowerCase();
  const perPage = parseInt(document.getElementById('showSelect').value);
  const filtered = ALL_TESTS.filter(t => t.nama.toLowerCase().includes(search));
  const total   = filtered.length;
  const totalPages = Math.max(1, Math.ceil(total / perPage));
  if (currentPage > totalPages) currentPage = totalPages;

  const start  = (currentPage - 1) * perPage;
  const sliced = filtered.slice(start, start + perPage);

  const tbody = document.getElementById('tableBody');
  if (sliced.length === 0) {
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center;padding:40px;color:var(--muted);">Tidak ada data ditemukan.</td></tr>`;
  } else {
    tbody.innerHTML = sliced.map((t, i) => `
      <tr>
        <td>
          <div class="row-num">
            <div class="status-dot" title="Tes Aktif" onclick="toast('Tes aktif: ${t.nama}')">+</div>
            <span class="row-num-val">${start + i + 1}</span>
          </div>
        </td>
        <td><span class="nama-tes">${t.nama}</span></td>
        <td><span class="max-score-badge">${t.max}.00</span></td>
        <td><span class="waktu-cell">${t.mulai}</span></td>
        <td><span class="waktu-cell">${t.selesai}</span></td>
        <td class="center">
          <div class="action-wrap" style="justify-content:center;">
            <div class="act-btn" title="Edit" onclick="toast('Edit tes: ${t.nama}')">
              <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
            </div>
            <div class="act-btn del" title="Hapus" onclick="toast('Hapus — Fitur terkunci di mode demo')">
              <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </div>
            <div class="chk-cell"><input type="checkbox"/></div>
          </div>
        </td>
      </tr>
    `).join('');
  }

  // Info
  const from = total === 0 ? 0 : start + 1;
  const to   = Math.min(start + perPage, total);
  document.getElementById('tableInfo').textContent =
    `Menampilkan ${from} sampai ${to} dari ${total} entri`;

  // Pagination
  const pg = document.getElementById('pagination');
  let pgHtml = '';
  // Prev
  pgHtml += `<button class="pg-btn" ${currentPage===1?'disabled':''} onclick="goPage(${currentPage-1})">‹</button>`;
  // Pages
  const range = pageRange(currentPage, totalPages);
  range.forEach(p => {
    if (p === '…') {
      pgHtml += `<button class="pg-btn" disabled>…</button>`;
    } else {
      pgHtml += `<button class="pg-btn ${p===currentPage?'active':''}" onclick="goPage(${p})">${p}</button>`;
    }
  });
  // Next
  pgHtml += `<button class="pg-btn" ${currentPage===totalPages?'disabled':''} onclick="goPage(${currentPage+1})">›</button>`;
  pg.innerHTML = pgHtml;
}

function pageRange(cur, total) {
  if (total <= 7) return Array.from({length:total},(_,i)=>i+1);
  if (cur <= 4) return [1,2,3,4,5,'…',total];
  if (cur >= total-3) return [1,'…',total-4,total-3,total-2,total-1,total];
  return [1,'…',cur-1,cur,cur+1,'…',total];
}

function goPage(p) {
  const perPage = parseInt(document.getElementById('showSelect').value);
  const search  = document.getElementById('searchInput').value.toLowerCase();
  const total   = ALL_TESTS.filter(t=>t.nama.toLowerCase().includes(search)).length;
  const tp      = Math.max(1, Math.ceil(total/perPage));
  currentPage   = Math.max(1, Math.min(p, tp));
  renderTable();
}

// ===== SIDEBAR =====
function toggleSub(id, itemId) {
  const el = document.getElementById(id);
  const item = document.getElementById(itemId);
  const visible = el.style.display !== 'none';
  el.style.display = visible ? 'none' : 'flex';
  el.style.flexDirection = 'column';
  if (item) item.classList.toggle('open', !visible);
}

function toggleSidebar() {
  const sb = document.getElementById('sidebar');
  const ov = document.getElementById('sbOverlay');
  sb.classList.toggle('open');
  ov.classList.toggle('show');
}
function closeSidebar() {
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('sbOverlay').classList.remove('show');
}

// ===== TOAST =====
function toast(msg) {
  const el = document.getElementById('toastEl');
  el.textContent = '💬 ' + msg;
  el.classList.add('show');
  clearTimeout(window._toastTimer);
  window._toastTimer = setTimeout(() => el.classList.remove('show'), 2500);
}

// Init
renderTable();
</script>
</body>
</html>