<?php
/**
 * SisPen Snesaka - Portal Siswa (Mobile-First Android Design)
 */
require_once 'includes/functions.php';
requireLogin();

if ($_SESSION['role'] !== 'siswa') {
    header('Location: ' . BASE_URL . '/index.php');
    exit;
}

$pengaturan = getPengaturan();
$ta  = $pengaturan['tahun_ajaran_aktif'];
$sem = $pengaturan['semester_aktif'];

$nis   = $_SESSION['username'];
$siswa = db_fetch(
    "SELECT s.*, k.nama_kelas, k.tingkat
     FROM siswa s LEFT JOIN kelas k ON k.id = s.kelas_id
     WHERE s.nis = ?",
    array($nis)
);

if (!$siswa) {
    header('Location: ' . BASE_URL . '/logout.php');
    exit;
}

$siswaId  = $siswa['id'];
$kelasId  = $siswa['kelas_id'];
$isKelas9 = ($siswa['tingkat'] === '9');

$nilaiList = array();
if ($kelasId) {
    $nilaiList = db_fetchAll(
        "SELECT m.id as mapel_id, m.nama_mapel, m.kode_mapel, m.kelompok,
                n.sumatif_1, n.sumatif_2, n.sumatif_3, n.sumatif_4, n.sumatif_5,
                n.sts, n.sas, n.nilai_akhir
         FROM mata_pelajaran m
         LEFT JOIN nilai n ON n.mapel_id = m.id
                          AND n.siswa_id = ?
                          AND n.kelas_id = ?
                          AND n.tahun_ajaran = ?
                          AND n.semester = ?
         WHERE m.status = 'aktif'
         ORDER BY m.kelompok, m.urutan, m.nama_mapel",
        array($siswaId, $kelasId, $ta, $sem)
    );
}

// ── Nilai PSAJ — hanya untuk kelas 9 ─────────────────────
$psajMap = array();
if ($isKelas9 && $kelasId) {
    $psajRows = db_fetchAll(
        "SELECT np.mapel_id,
                np.tertulis, np.praktik, np.proyek,
                np.portofolio, np.presentasi,
                np.nilai_akhir as psaj_nilai_akhir
         FROM nilai_psaj np
         WHERE np.siswa_id = ? AND np.kelas_id = ? AND np.tahun_ajaran = ?",
        array($siswaId, $kelasId, $ta)
    );
    foreach ($psajRows as $p) {
        $psajMap[$p['mapel_id']] = $p;
    }
}

$absensi = array('tot_s'=>0,'tot_i'=>0,'tot_a'=>0);
if ($kelasId) {
    $absRow = db_fetch(
        "SELECT COALESCE(SUM(sakit),0) as tot_s, COALESCE(SUM(izin),0) as tot_i,
                COALESCE(SUM(tanpa_keterangan),0) as tot_a
         FROM absensi WHERE kelas_id=? AND tahun_ajaran=? AND semester=?",
        array($kelasId, $ta, $sem)
    );
    if ($absRow) $absensi = $absRow;
}

$ekstraList = db_fetchAll(
    "SELECT e.nama, ne.predikat, ne.keterangan
     FROM nilai_ekstra ne JOIN ekstrakurikuler e ON e.id=ne.ekstra_id
     WHERE ne.siswa_id=? AND ne.tahun_ajaran=? AND ne.semester=?
     ORDER BY e.nama",
    array($siswaId, $ta, $sem)
);

function fmtNilai($val) {
    if ($val === null) return null;
    return (string) round(floatval($val));
}

$jmlAda = 0; $totNilai = 0;
foreach ($nilaiList as $n) {
    if ($n['nilai_akhir'] !== null) { $jmlAda++; $totNilai += floatval($n['nilai_akhir']); }
}
$rataRata = $jmlAda > 0 ? round($totNilai / $jmlAda) : null;

$kelompokLabel = array('A'=>'Kelompok A — Wajib Nasional','B'=>'Kelompok B — Wajib Daerah','C'=>'Kelompok C — Muatan Lokal');
$kelompokMap   = array();
foreach ($nilaiList as $n) {
    $kel = $n['kelompok'] ? $n['kelompok'] : 'A';
    $kelompokMap[$kel][] = $n;
}
ksort($kelompokMap);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#1a237e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Portal Siswa — SisPen Snesaka</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --blue:#1565C0;--blue-dark:#0D47A1;--blue-light:#42A5F5;
  --green:#2E7D32;--green-light:#4CAF50;
  --amber:#E65100;--amber-light:#FF9800;
  --red:#C62828;--red-light:#EF5350;
  --purple:#6A1B9A;--purple-light:#AB47BC;
  --teal:#00695C;--teal-light:#26A69A;
  --surface:#FFFFFF;--surface2:#F5F7FA;--surface3:#EEF2F8;
  --border:#E0E7EF;--text:#1A2340;--muted:#6B7A99;
  --radius:16px;--radius-sm:10px;
}
html,body{background:#F0F4FA;font-family:'Nunito',sans-serif;color:var(--text);min-height:100vh;overflow-x:hidden;}
.status-bar{height:env(safe-area-inset-top,0px);background:var(--blue-dark);}
.app-bar{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 60%,#1976D2 100%);padding:16px 20px 20px;position:relative;overflow:hidden;}
.app-bar::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;}
.app-bar::after{content:'';position:absolute;bottom:-60px;left:20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none;}
.app-bar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;position:relative;z-index:1;}
.app-bar-brand{display:flex;align-items:center;gap:10px;}
.brand-dot{width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;color:#fff;border:1px solid rgba(255,255,255,.25);}
.brand-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.3px;}
.logout-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:20px;color:rgba(255,255,255,.9);text-decoration:none;font-size:12px;font-weight:700;}
.logout-btn:active{background:rgba(255,255,255,.25);}
.profile-section{display:flex;align-items:center;gap:14px;position:relative;z-index:1;}
.avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#FFD54F,#FFCA28);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:var(--blue-dark);border:2.5px solid rgba(255,255,255,.4);box-shadow:0 4px 12px rgba(0,0,0,.2);}
.profile-info{flex:1;}
.profile-name{font-size:17px;font-weight:900;color:#fff;line-height:1.2;margin-bottom:4px;}
.profile-meta{display:flex;gap:8px;flex-wrap:wrap;}
.meta-chip{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:3px 10px;font-size:11px;font-weight:700;color:rgba(255,255,255,.9);}
.rata-chip{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:4px 12px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.rata-chip .rata-val{font-size:22px;font-weight:900;font-family:'Space Mono',monospace;}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;z-index:200;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 20px rgba(0,0,0,.08);}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 4px 8px;gap:3px;cursor:pointer;border:none;background:none;color:var(--muted);font-family:'Nunito',sans-serif;font-size:10px;font-weight:700;transition:all .2s;text-transform:uppercase;letter-spacing:.3px;}
.nav-item i{font-size:20px;transition:all .2s;}
.nav-item.active{color:var(--blue);}
.nav-item.active i{transform:translateY(-1px);}
.main{padding:16px 16px 90px;max-width:600px;margin:0 auto;}
.panel{display:none;} .panel.active{display:block;}
.abs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.abs-card{border-radius:var(--radius);padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.abs-card .abs-icon{font-size:20px;margin-bottom:2px;}
.abs-card .abs-num{font-size:30px;font-weight:900;font-family:'Space Mono',monospace;line-height:1;}
.abs-card .abs-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.85;}
.kelompok-header{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);padding:6px 4px 8px;margin-top:12px;}
.nilai-card{background:#fff;border-radius:var(--radius);margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden;border:1px solid var(--border);border-left-width:4px;}
.mc-0{border-left-color:#1565C0;} .mc-0 .nilai-card-header{background:linear-gradient(135deg,#e3f2fd,#fff);}
.mc-1{border-left-color:#2E7D32;} .mc-1 .nilai-card-header{background:linear-gradient(135deg,#e8f5e9,#fff);}
.mc-2{border-left-color:#E65100;} .mc-2 .nilai-card-header{background:linear-gradient(135deg,#fff3e0,#fff);}
.mc-3{border-left-color:#6A1B9A;} .mc-3 .nilai-card-header{background:linear-gradient(135deg,#f3e5f5,#fff);}
.mc-4{border-left-color:#00695C;} .mc-4 .nilai-card-header{background:linear-gradient(135deg,#e0f2f1,#fff);}
.mc-5{border-left-color:#C62828;} .mc-5 .nilai-card-header{background:linear-gradient(135deg,#ffebee,#fff);}
.mc-6{border-left-color:#F57F17;} .mc-6 .nilai-card-header{background:linear-gradient(135deg,#fff8e1,#fff);}
.mc-7{border-left-color:#0277BD;} .mc-7 .nilai-card-header{background:linear-gradient(135deg,#e1f5fe,#fff);}
.mc-8{border-left-color:#558B2F;} .mc-8 .nilai-card-header{background:linear-gradient(135deg,#f1f8e9,#fff);}
.mc-9{border-left-color:#AD1457;} .mc-9 .nilai-card-header{background:linear-gradient(135deg,#fce4ec,#fff);}
.mc-0 .mapel-name{color:#1565C0;} .mc-1 .mapel-name{color:#2E7D32;}
.mc-2 .mapel-name{color:#E65100;} .mc-3 .mapel-name{color:#6A1B9A;}
.mc-4 .mapel-name{color:#00695C;} .mc-5 .mapel-name{color:#C62828;}
.mc-6 .mapel-name{color:#F57F17;} .mc-7 .mapel-name{color:#0277BD;}
.mc-8 .mapel-name{color:#558B2F;} .mc-9 .mapel-name{color:#AD1457;}
.nilai-card-header{padding:12px 16px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.mapel-name{font-size:14px;font-weight:800;}
.mapel-kode{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}
.nilai-akhir-pill{padding:5px 14px;border-radius:20px;font-size:18px;font-weight:900;font-family:'Space Mono',monospace;flex-shrink:0;margin-left:10px;}
.naHijau{color:#2E7D32;background:#E8F5E9;} .naAmber{color:#E65100;background:#FFF3E0;}
.naMerah{color:#C62828;background:#FFEBEE;} .naGray{color:var(--muted);background:var(--surface2);}
.nilai-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:10px 16px 14px;gap:6px;}
.nilai-item{display:flex;flex-direction:column;align-items:center;gap:3px;}
.nilai-item .n-label{font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;}
.nilai-item .n-val{font-size:14px;font-weight:800;font-family:'Space Mono',monospace;color:var(--text);}
.nilai-item .n-val.kosong{color:var(--border);}

/* ── PSAJ Section ── */
.psaj-section{
  padding:10px 16px 14px;
  border-top:2px dashed rgba(124,58,237,.2);
  background:linear-gradient(135deg,#faf5ff 0%,#fff 60%);
}
.psaj-header{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.psaj-badge-label{
  background:linear-gradient(135deg,#4c1d95,#7c3aed);
  color:#fff;font-size:9px;font-weight:800;
  padding:3px 9px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;gap:4px;
}
.psaj-mapel-sub{
  font-size:10px;color:#7c3aed;font-weight:700;flex:1;
}
.psaj-nilai-akhir{
  background:linear-gradient(135deg,#4c1d95,#7c3aed);
  color:#fff;font-size:16px;font-weight:900;
  font-family:'Space Mono',monospace;
  padding:4px 14px;border-radius:16px;
}
.psaj-belum{
  font-size:11px;color:#a78bfa;font-weight:600;
}
.psaj-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
}
.psaj-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(124,58,237,.06);border-radius:8px;padding:6px 4px;
}
.psaj-item .p-label{
  font-size:8px;font-weight:800;color:#7c3aed;
  text-align:center;line-height:1.2;text-transform:uppercase;
}
.psaj-item .p-val{
  font-size:14px;font-weight:900;font-family:'Space Mono',monospace;
  color:#4c1d95;
}
.psaj-item .p-val.kosong{color:var(--border);}

.ekstra-card{background:#fff;border-radius:var(--radius);margin-bottom:10px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:16px 18px;display:flex;align-items:center;gap:14px;border:1px solid var(--border);}
.ekstra-badge{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;font-family:'Space Mono',monospace;flex-shrink:0;}
.ekstra-info{flex:1;}
.ekstra-name{font-size:14px;font-weight:800;margin-bottom:2px;}
.ekstra-label{font-size:12px;font-weight:600;}
.ekstra-ket{font-size:11px;color:var(--muted);margin-top:3px;}
.empty-state{text-align:center;padding:48px 24px;color:var(--muted);}
.empty-state i{font-size:48px;opacity:.2;display:block;margin-bottom:14px;}
.empty-state p{font-size:14px;font-weight:600;}
.section-title{font-size:16px;font-weight:900;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.section-title .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;}
.ta-badge{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:700;box-shadow:0 1px 6px rgba(0,0,0,.04);}
.ta-badge span{color:var(--blue);}
.prog-row{margin-bottom:10px;}
.prog-bar-wrap{height:8px;background:var(--border);border-radius:99px;overflow:hidden;}
.prog-bar{height:100%;border-radius:99px;transition:width .6s;}
</style>
</head>
<body>
<div class="status-bar"></div>

<!-- TOP APP BAR -->
<div class="app-bar">
  <div class="app-bar-top">
    <div class="app-bar-brand">
      <div class="brand-dot">S</div>
      <div class="brand-name">SisPen Snesaka</div>
    </div>
    <a href="<?= BASE_URL ?>/logout.php" class="logout-btn" onclick="return confirm('Keluar dari Portal Siswa?')">
      <i class="fas fa-sign-out-alt"></i> Keluar
    </a>
  </div>
  <div class="profile-section">
    <div class="avatar"><?= strtoupper(substr($siswa['nama'],0,1)) ?></div>
    <div class="profile-info">
      <div class="profile-name"><?= htmlspecialchars($siswa['nama']) ?></div>
      <div class="profile-meta">
        <span class="meta-chip"><i class="fas fa-id-card"></i> <?= htmlspecialchars($siswa['nis']) ?></span>
        <span class="meta-chip"><i class="fas fa-door-open"></i> Kelas <?= htmlspecialchars($siswa['nama_kelas'] ?? '-') ?></span>
        <?php if ($isKelas9): ?>
        <span class="meta-chip" style="background:rgba(124,58,237,.3);border-color:rgba(196,181,253,.5);">
          <i class="fas fa-graduation-cap"></i> Kelas 9
        </span>
        <?php endif; ?>
      </div>
    </div>
    <?php if ($rataRata !== null): ?>
    <div class="rata-chip">
      <div>
        <div style="font-size:9px;opacity:.8;line-height:1;">Rata-rata</div>
        <div class="rata-val"><?= $rataRata ?></div>
      </div>
    </div>
    <?php endif; ?>
  </div>
</div>

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

  <div class="ta-badge">
    <span><i class="fas fa-calendar-alt" style="margin-right:5px;"></i>TA <span><?= $ta ?></span></span>
    <span>Semester <span><?= $sem ?></span></span>
    <span style="color:var(--green-light);"><i class="fas fa-circle" style="font-size:8px;margin-right:4px;"></i>Aktif</span>
  </div>

  <!-- ══ PANEL: NILAI ══ -->
  <div class="panel active" id="panel-nilai">
    <div class="section-title"><div class="dot"></div> Nilai Akademik</div>
    <?php if (empty($nilaiList)): ?>
    <div class="empty-state">
      <i class="fas fa-book-open"></i>
      <p>Nilai belum tersedia untuk semester ini</p>
    </div>
    <?php else: ?>
    <?php $mcIdx = 0; ?>
    <?php foreach ($kelompokMap as $kode => $mapels): ?>
    <div class="kelompok-header">
      <i class="fas fa-layer-group" style="margin-right:5px;color:var(--blue-light);"></i>
      <?= isset($kelompokLabel[$kode]) ? $kelompokLabel[$kode] : 'Kelompok '.$kode ?>
    </div>
    <?php foreach ($mapels as $n):
      $na      = $n['nilai_akhir'] !== null ? fmtNilai($n['nilai_akhir']) : null;
      $naNum   = $na !== null ? intval($na) : null;
      $naClass = $naNum !== null ? ($naNum >= 75 ? 'naHijau' : ($naNum >= 60 ? 'naAmber' : 'naMerah')) : 'naGray';
      $psaj    = ($isKelas9 && isset($psajMap[$n['mapel_id']])) ? $psajMap[$n['mapel_id']] : null;
    ?>
    <div class="nilai-card mc-<?= $mcIdx % 10 ?>"><?php $mcIdx++; ?>

      <!-- Header: nama mapel + nilai akhir -->
      <div class="nilai-card-header">
        <div>
          <div class="mapel-name"><?= htmlspecialchars($n['nama_mapel']) ?></div>
          <div class="mapel-kode"><?= htmlspecialchars($n['kode_mapel']) ?></div>
        </div>
        <?php if ($na !== null): ?>
          <div class="nilai-akhir-pill <?= $naClass ?>"><?= $na ?></div>
        <?php else: ?>
          <div style="font-size:12px;color:var(--muted);font-weight:600;padding:5px 10px;">Belum diinput</div>
        <?php endif; ?>
      </div>

      <!-- Detail S1–S5 + STS + SAS -->
      <div class="nilai-grid">
        <?php foreach (array('sumatif_1'=>'S1','sumatif_2'=>'S2','sumatif_3'=>'S3','sumatif_4'=>'S4','sumatif_5'=>'S5') as $col=>$lbl): ?>
        <div class="nilai-item">
          <div class="n-label"><?= $lbl ?></div>
          <div class="n-val <?= $n[$col]===null?'kosong':'' ?>"><?= $n[$col]!==null ? fmtNilai($n[$col]) : '—' ?></div>
        </div>
        <?php endforeach; ?>
        <div class="nilai-item" style="border-left:1px solid var(--border);padding-left:4px;">
          <div class="n-label" style="color:var(--blue-light);">STS</div>
          <div class="n-val <?= $n['sts']===null?'kosong':'' ?>" style="<?= $n['sts']!==null?'color:var(--blue);':'' ?>"><?= $n['sts']!==null ? fmtNilai($n['sts']) : '—' ?></div>
        </div>
        <div class="nilai-item">
          <div class="n-label" style="color:var(--amber-light);">SAS</div>
          <div class="n-val <?= $n['sas']===null?'kosong':'' ?>" style="<?= $n['sas']!==null?'color:var(--amber);':'' ?>"><?= $n['sas']!==null ? fmtNilai($n['sas']) : '—' ?></div>
        </div>
      </div>

      <?php if ($isKelas9): ?>
      <!-- ── PSAJ Section ── -->
      <div class="psaj-section">
        <div class="psaj-header">
          <div class="psaj-badge-label">
            <i class="fas fa-graduation-cap"></i> PSAJ
          </div>
          <div class="psaj-mapel-sub">Penilaian Sumatif Akhir Jenjang</div>
          <?php if ($psaj && $psaj['psaj_nilai_akhir'] !== null): ?>
            <div class="psaj-nilai-akhir"><?= fmtNilai($psaj['psaj_nilai_akhir']) ?></div>
          <?php else: ?>
            <div class="psaj-belum">Belum diinput</div>
          <?php endif; ?>
        </div>
        <div class="psaj-grid">
          <?php
          $psajKols = array(
            'tertulis'   => 'Tes Tertulis',
            'praktik'    => 'Praktik',
            'proyek'     => 'Proyek',
            'portofolio' => 'Portofolio',
            'presentasi' => 'Presentasi',
          );
          foreach ($psajKols as $key => $lbl):
            $val = ($psaj && $psaj[$key] !== null) ? fmtNilai($psaj[$key]) : null;
          ?>
          <div class="psaj-item">
            <div class="p-label"><?= $lbl ?></div>
            <div class="p-val <?= $val===null?'kosong':'' ?>"><?= $val!==null ? $val : '—' ?></div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <?php endif; ?>

    </div>
    <?php endforeach; ?>
    <?php endforeach; ?>
    <?php endif; ?>
  </div>

  <!-- ══ PANEL: ABSENSI ══ -->
  <div class="panel" id="panel-absensi">
    <div class="section-title"><div class="dot" style="background:#E65100;"></div> Rekap Absensi</div>
    <?php $totS=intval($absensi['tot_s']); $totI=intval($absensi['tot_i']); $totA=intval($absensi['tot_a']); $totAll=$totS+$totI+$totA; ?>
    <div class="abs-grid">
      <div class="abs-card" style="background:linear-gradient(135deg,#1565C0,#42A5F5);color:#fff;">
        <div class="abs-icon"><i class="fas fa-thermometer-half"></i></div>
        <div class="abs-num"><?= $totS ?></div><div class="abs-label">Sakit</div>
      </div>
      <div class="abs-card" style="background:linear-gradient(135deg,#E65100,#FF9800);color:#fff;">
        <div class="abs-icon"><i class="fas fa-file-alt"></i></div>
        <div class="abs-num"><?= $totI ?></div><div class="abs-label">Izin</div>
      </div>
      <div class="abs-card" style="background:linear-gradient(135deg,#C62828,#EF5350);color:#fff;">
        <div class="abs-icon"><i class="fas fa-times-circle"></i></div>
        <div class="abs-num"><?= $totA ?></div><div class="abs-label">Alpha</div>
      </div>
    </div>
    <div style="background:#fff;border-radius:var(--radius);padding:18px 20px;box-shadow:0 2px 10px rgba(0,0,0,.06);border:1px solid var(--border);margin-bottom:14px;">
      <div style="font-size:12px;color:var(--muted);font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;">Total Ketidakhadiran</div>
      <div style="display:flex;align-items:center;gap:14px;">
        <div style="font-size:48px;font-weight:900;font-family:'Space Mono',monospace;color:<?= $totAll>10?'#C62828':($totAll>5?'#E65100':'#2E7D32') ?>;"><?= $totAll ?></div>
        <div>
          <div style="font-size:14px;font-weight:800;color:var(--text);">hari tidak hadir</div>
          <div style="font-size:12px;color:var(--muted);margin-top:2px;">Semester <?= $sem ?> TA <?= $ta ?></div>
          <?php if($totAll===0): ?><div style="font-size:12px;color:#2E7D32;font-weight:700;margin-top:4px;"><i class="fas fa-star"></i> Kehadiran sempurna!</div>
          <?php elseif($totAll<=5): ?><div style="font-size:12px;color:#1565C0;font-weight:700;margin-top:4px;"><i class="fas fa-thumbs-up"></i> Kehadiran baik</div>
          <?php elseif($totAll<=10): ?><div style="font-size:12px;color:#E65100;font-weight:700;margin-top:4px;"><i class="fas fa-exclamation-triangle"></i> Perlu diperhatikan</div>
          <?php else: ?><div style="font-size:12px;color:#C62828;font-weight:700;margin-top:4px;"><i class="fas fa-exclamation-circle"></i> Tingkat absensi tinggi</div>
          <?php endif; ?>
        </div>
      </div>
    </div>
    <?php if ($totAll > 0): ?>
    <div style="background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,.06);border:1px solid var(--border);">
      <div style="font-size:12px;color:var(--muted);font-weight:700;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;">Komposisi</div>
      <?php foreach (array(array('Sakit',$totS,'#42A5F5'),array('Izin',$totI,'#FF9800'),array('Alpha',$totA,'#EF5350')) as $b):
        $pct = $totAll>0 ? round($b[1]/$totAll*100) : 0; ?>
      <div class="prog-row">
        <div style="display:flex;justify-content:space-between;margin-bottom:5px;font-size:12px;font-weight:700;">
          <span><?= $b[0] ?></span><span style="color:<?= $b[2] ?>"><?= $b[1] ?> hari (<?= $pct ?>%)</span>
        </div>
        <div class="prog-bar-wrap"><div class="prog-bar" style="width:<?= $pct ?>%;background:<?= $b[2] ?>;"></div></div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>

  <!-- ══ PANEL: EKSTRA ══ -->
  <div class="panel" id="panel-ekstra">
    <div class="section-title"><div class="dot" style="background:#E65100;"></div> Ekstrakurikuler</div>
    <?php if (empty($ekstraList)): ?>
    <div class="empty-state"><i class="fas fa-trophy"></i><p>Belum ada data nilai ekstrakurikuler</p></div>
    <?php else: ?>
    <?php
    $ekPc = array(
      'A'=>array('color'=>'#2E7D32','bg'=>'#E8F5E9','label'=>'Sangat Baik'),
      'B'=>array('color'=>'#1565C0','bg'=>'#E3F2FD','label'=>'Baik'),
      'C'=>array('color'=>'#E65100','bg'=>'#FFF3E0','label'=>'Cukup'),
      'D'=>array('color'=>'#C62828','bg'=>'#FFEBEE','label'=>'Perlu Perbaikan'),
    );
    $ekIcons=array('⚽','🏀','🎸','🎨','🏊','📷','💻','🎭','🥋','🏐','🎺','✏️');
    $ekIdx=0;
    foreach ($ekstraList as $e):
      $pc=isset($ekPc[$e['predikat']])?$ekPc[$e['predikat']]:array('color'=>'var(--muted)','bg'=>'var(--surface2)','label'=>'');
    ?>
    <div class="ekstra-card">
      <div class="ekstra-badge" style="background:<?= $pc['bg'] ?>;color:<?= $pc['color'] ?>;"><?= $e['predikat'] ?></div>
      <div class="ekstra-info">
        <div class="ekstra-name"><?= htmlspecialchars($e['nama']) ?></div>
        <div class="ekstra-label" style="color:<?= $pc['color'] ?>;"><?= $pc['label'] ?></div>
        <?php if ($e['keterangan']): ?><div class="ekstra-ket"><?= htmlspecialchars($e['keterangan']) ?></div><?php endif; ?>
      </div>
      <div style="font-size:28px;"><?= $ekIcons[$ekIdx%count($ekIcons)] ?></div>
    </div>
    <?php $ekIdx++; endforeach; ?>
    <?php endif; ?>
  </div>

</div>

<nav class="bottom-nav">
  <button class="nav-item active" onclick="switchTab('nilai',this)">
    <i class="fas fa-book-open"></i>Nilai
  </button>
  <button class="nav-item" onclick="switchTab('absensi',this)">
    <i class="fas fa-calendar-check"></i>Absensi
  </button>
  <button class="nav-item" onclick="switchTab('ekstra',this)">
    <i class="fas fa-trophy"></i>Ekstra
  </button>
</nav>

<script>
function switchTab(name, btn) {
    document.querySelectorAll('.panel').forEach(function(p){ p.classList.remove('active'); });
    document.querySelectorAll('.nav-item').forEach(function(b){ b.classList.remove('active'); });
    document.getElementById('panel-'+name).classList.add('active');
    btn.classList.add('active');
    window.scrollTo({top:0,behavior:'smooth'});
}
window.addEventListener('load', function(){
    document.querySelectorAll('.prog-bar').forEach(function(el){
        var w = el.style.width; el.style.width = '0';
        setTimeout(function(){ el.style.width = w; }, 300);
    });
});
</script>
</body>
</html>