<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Lembar Nilai Pembelajaran – SMPN 1 Maospati</title>
  <link rel="icon" type="image/png" href="Images/logo new.png" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #1a1a2e; --card: #16213e; --accent: #e8630a; --accent2: #f59e0b;
      --green: #22c55e; --red: #ef4444; --text: #f1f5f9; --muted: #94a3b8;
      --border: #334155; --radius: 12px;
    }
    body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

    /* ── LOGIN ── */
    .login-screen {
      min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .login-box {
      background: var(--card); border: 1px solid var(--border); border-radius: 16px;
      padding: 40px 36px; width: 100%; max-width: 380px; text-align: center;
    }
    .login-box img { width: 64px; margin-bottom: 16px; }
    .login-box h2 { font-size: 1.25rem; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
    .login-box p { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }
    .login-box input {
      width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
      padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 12px; outline: none;
      transition: border-color .2s;
    }
    .login-box input:focus { border-color: var(--accent); }
    .login-err { color: var(--red); font-size: 0.82rem; margin-bottom: 10px; display: none; }

    /* ── NAVBAR ── */
    .navbar {
      background: var(--card); border-bottom: 1px solid var(--border);
      padding: 14px 24px; display: flex; align-items: center; gap: 12px;
      position: sticky; top: 0; z-index: 100;
    }
    .navbar img { width: 36px; }
    .navbar h1 { font-size: 1rem; font-weight: 700; color: var(--accent); }
    .navbar .spacer { flex: 1; }
    .navbar .guru-name { font-size: 0.82rem; color: var(--muted); }

    /* ── LAYOUT ── */
    .main { padding: 24px; max-width: 1100px; margin: 0 auto; }

    /* ── BUTTONS ── */
    .btn {
      padding: 8px 18px; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
      cursor: pointer; border: none; transition: opacity .2s, transform .2s; display: inline-flex; align-items: center; gap: 6px;
    }
    .btn:hover { opacity: .85; transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-ghost   { background: transparent; color: var(--muted); border: 1px solid var(--border); }
    .btn-pdf     { background: #0f3460; color: var(--accent2); border: 1px solid var(--accent2); }

    /* ── TOOLBAR ── */
    .toolbar {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
    }
    .toolbar input {
      background: var(--bg); border: 1px solid var(--border); color: var(--text);
      padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; outline: none;
      min-width: 220px; transition: border-color .2s;
    }
    .toolbar input:focus { border-color: var(--accent); }
    .toolbar .spacer { flex: 1; }

    /* ── TABS ── */
    .tabs {
      display: flex; gap: 4px;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 10px; padding: 5px;
    }
    .tab-btn {
      padding: 7px 18px; border-radius: 7px; font-size: 0.85rem; font-weight: 600;
      cursor: pointer; border: none; background: transparent; color: var(--muted);
      transition: background .2s, color .2s;
    }
    .tab-btn.active { background: var(--accent); color: #fff; }

    /* ── STUDENT CARDS ── */
    .cards-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
    }
    .student-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 18px 20px; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s;
    }
    .student-card:hover {
      border-color: var(--accent); transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(232,99,10,.15);
    }
    .student-card .sc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
    .student-card .sc-name { font-size: 0.97rem; font-weight: 700; color: var(--text); }
    .student-card .sc-user { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
    .student-card .sc-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
    .sc-stat { font-size: 0.75rem; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 4px 9px; }
    .sc-stat span { color: var(--accent2); font-weight: 700; }

    /* ── BADGES ── */
    .badge {
      display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.73rem; font-weight: 700;
    }
    .k7 { background: rgba(96,165,250,.15); color: #60a5fa; }
    .k8 { background: rgba(251,191,36,.15); color: var(--accent2); }
    .k9 { background: rgba(232,99,10,.15);  color: var(--accent); }
    .badge-hadir  { background: rgba(34,197,94,.15);  color: var(--green); }
    .badge-sakit  { background: rgba(251,191,36,.15); color: var(--accent2); }
    .badge-izin   { background: rgba(96,165,250,.15); color: #60a5fa; }
    .badge-alpa   { background: rgba(239,68,68,.15);  color: var(--red); }
    .badge-mandiri  { background: rgba(96,165,250,.15); color: #60a5fa; }
    .badge-kelompok { background: rgba(167,139,250,.15); color: #a78bfa; }

    /* ── DETAIL HEADER ── */
    .detail-header {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
    }
    .detail-header .info h2 { font-size: 1.2rem; font-weight: 800; }
    .detail-header .info p  { font-size: 0.83rem; color: var(--muted); margin-top: 4px; }
    .detail-header .actions { display: flex; gap: 10px; flex-wrap: wrap; }

    /* ── SECTIONS ── */
    .section { margin-bottom: 24px; }
    .section-title {
      font-size: 0.95rem; font-weight: 700; color: var(--accent2);
      margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
    }

    /* ── TABLE ── */
    .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
    table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
    thead tr { background: #0f3460; color: var(--accent2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; }
    th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover { background: rgba(255,255,255,.03); }
    td.num-val { font-weight: 700; color: var(--green); }
    td.num-val.low { color: var(--red); }

    /* ── RINGKASAN ── */
    .ringkasan-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
    }
    .ringkasan-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px; text-align: center;
    }
    .ringkasan-card.highlight { border-color: var(--accent); background: rgba(232,99,10,.08); }
    .r-val { font-size: 2rem; font-weight: 800; color: var(--accent2); }
    .ringkasan-card.highlight .r-val { color: var(--accent); }
    .r-lbl { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

    /* ── LOADING / SPINNER ── */
    .loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px; color: var(--muted); font-size: 0.9rem; }
    .spinner {
      width: 22px; height: 22px; border: 3px solid var(--border);
      border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── EMPTY STATE ── */
    .empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 0.88rem; }
    .empty-icon { font-size: 2.5rem; margin-bottom: 10px; }

    /* ── TOAST ── */
    .toast {
      position: fixed; bottom: 24px; right: 24px; background: var(--green); color: #fff;
      padding: 12px 20px; border-radius: 10px; font-size: 0.88rem; font-weight: 600;
      z-index: 9999; transform: translateY(80px); opacity: 0;
      transition: transform .3s, opacity .3s; pointer-events: none;
    }
    .toast.show { transform: translateY(0); opacity: 1; }
    .toast.err  { background: var(--red); }

    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      .main { padding: 16px; }
      .toolbar { flex-direction: column; align-items: stretch; }
      .toolbar .spacer { display: none; }
      .toolbar input { min-width: unset; }
      .detail-header { flex-direction: column; align-items: flex-start; }
      th, td { padding: 9px 10px; font-size: 0.82rem; }
      .navbar h1 { font-size: 0.88rem; }
    }
  </style>
</head>
<body>

<!-- ══════════════════════════════════════
     LOGIN SCREEN
══════════════════════════════════════ -->
<div class="login-screen" id="login-screen">
  <div class="login-box">
    <img src="Images/logo new.png" alt="Logo SMPN 1 Maospati" />
    <h2>Lembar Nilai Pembelajaran</h2>
    <p>Kelas Digital SMPN 1 Maospati</p>
    <input type="text"     id="l-user" placeholder="Username guru" autocomplete="username" />
    <input type="password" id="l-pass" placeholder="Password"      autocomplete="current-password" />
    <div class="login-err" id="l-err">Username atau password salah.</div>
    <button class="btn btn-primary" id="l-btn" style="width:100%;padding:11px;justify-content:center" onclick="doLogin()">
      Masuk →
    </button>
  </div>
</div>

<!-- ══════════════════════════════════════
     MAIN APP
══════════════════════════════════════ -->
<div id="app" style="display:none">

  <!-- NAVBAR -->
  <nav class="navbar">
    <img src="Images/logo new.png" alt="Logo" />
    <h1>📋 Lembar Nilai Pembelajaran</h1>
    <div class="spacer"></div>
    <span class="guru-name" id="guru-name"></span>
    <button class="btn btn-ghost" style="margin-left:12px;padding:7px 14px" onclick="doLogout()">Keluar</button>
  </nav>

  <!-- ── DAFTAR SISWA ── -->
  <div id="view-list" class="main">
    <div class="toolbar">
      <div class="tabs" id="kelas-tabs">
        <button class="tab-btn active" data-kelas="" onclick="setKelas(this,'')">Semua</button>
        <button class="tab-btn" data-kelas="7" onclick="setKelas(this,'7')">Kelas 7</button>
        <button class="tab-btn" data-kelas="8" onclick="setKelas(this,'8')">Kelas 8</button>
        <button class="tab-btn" data-kelas="9" onclick="setKelas(this,'9')">Kelas 9</button>
      </div>
      <div class="spacer"></div>
      <input type="text" id="search-siswa" placeholder="🔍 Cari nama / username..." oninput="renderSiswa()" />
    </div>
    <div id="siswa-container">
      <div class="loading"><div class="spinner"></div>Memuat data siswa...</div>
    </div>
  </div>

  <!-- ── DETAIL NILAI ── -->
  <div id="view-detail" class="main" style="display:none">

    <!-- Header -->
    <div class="detail-header">
      <div class="info">
        <h2 id="d-nama">–</h2>
        <p id="d-info">–</p>
      </div>
      <div class="actions">
        <button class="btn btn-ghost" onclick="backToList()">← Kembali</button>
        <button class="btn btn-pdf"   onclick="downloadPDF()">⬇️ Download PDF</button>
      </div>
    </div>

    <!-- Loading detail -->
    <div id="detail-loading" class="loading"><div class="spinner"></div>Memuat nilai siswa...</div>

    <!-- Konten detail -->
    <div id="detail-content" style="display:none">

      <!-- Absensi -->
      <div class="section">
        <div class="section-title">📋 Nilai Absensi</div>
        <div class="table-wrap" id="wrap-absensi">
          <table>
            <thead>
              <tr><th>#</th><th>Tanggal</th><th>Status</th><th>Nilai</th></tr>
            </thead>
            <tbody id="tbl-absensi"></tbody>
          </table>
        </div>
      </div>

      <!-- Latihan -->
      <div class="section">
        <div class="section-title">📝 Nilai Latihan</div>
        <div class="table-wrap" id="wrap-latihan">
          <table>
            <thead>
              <tr><th>#</th><th>Judul Latihan</th><th>Jawaban Benar</th><th>Total Soal</th><th>Skor</th></tr>
            </thead>
            <tbody id="tbl-latihan"></tbody>
          </table>
        </div>
      </div>

      <!-- Praktek -->
      <div class="section">
        <div class="section-title">🔧 Nilai Praktek</div>
        <div class="table-wrap" id="wrap-praktek">
          <table>
            <thead>
              <tr><th>#</th><th>Judul Praktek</th><th>Tipe</th><th>Nilai</th><th>Feedback</th></tr>
            </thead>
            <tbody id="tbl-praktek"></tbody>
          </table>
        </div>
      </div>

      <!-- Ringkasan -->
      <div class="section">
        <div class="section-title">📊 Ringkasan Nilai</div>
        <div class="ringkasan-grid">
          <div class="ringkasan-card">
            <div class="r-val" id="r-absensi">–</div>
            <div class="r-lbl">Rata-rata Absensi</div>
          </div>
          <div class="ringkasan-card">
            <div class="r-val" id="r-latihan">–</div>
            <div class="r-lbl">Rata-rata Latihan</div>
          </div>
          <div class="ringkasan-card">
            <div class="r-val" id="r-praktek">–</div>
            <div class="r-lbl">Rata-rata Praktek</div>
          </div>
          <div class="ringkasan-card highlight">
            <div class="r-val" id="r-akhir">–</div>
            <div class="r-lbl">🏆 Nilai Akhir</div>
          </div>
        </div>
      </div>

    </div><!-- /detail-content -->
  </div><!-- /view-detail -->

</div><!-- /app -->

<!-- TOAST -->
<div class="toast" id="toast"></div>

<!-- CDN: jsPDF + autotable -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>

<script>
/* ══════════════════════════════════════
   SUPABASE CONFIG
══════════════════════════════════════ */
const SB_URL = 'https://phvxpayweithofafbhta.supabase.co';
const SB_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBodnhwYXl3ZWl0aG9mYWZiaHRhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzgxMzcwMDksImV4cCI6MjA5MzcxMzAwOX0.35Wd8yqW69is6GyX3QhLO5PbIlF6QzQj3wMpujUfYRE';

async function sbFetch(table, params = '') {
  const res = await fetch(`${SB_URL}/rest/v1/${table}?${params}`, {
    headers: {
      'apikey': SB_KEY,
      'Authorization': `Bearer ${SB_KEY}`,
      'Content-Type': 'application/json'
    }
  });
  if (!res.ok) throw new Error(`Supabase error: ${res.status}`);
  return res.json();
}

/* ══════════════════════════════════════
   STATE
══════════════════════════════════════ */
let currentGuru   = null;
let allSiswa      = [];
let filterKelas   = '';
let currentSiswa  = null;
let detailData    = { absensi: [], latihan: [], praktek: [] };

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
let toastTimer;
function showToast(msg, isErr = false) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.className = 'toast show' + (isErr ? ' err' : '');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => { t.className = 'toast'; }, 3000);
}

/* ══════════════════════════════════════
   LOGIN / LOGOUT
══════════════════════════════════════ */
document.getElementById('l-pass').addEventListener('keydown', e => {
  if (e.key === 'Enter') doLogin();
});
document.getElementById('l-user').addEventListener('keydown', e => {
  if (e.key === 'Enter') document.getElementById('l-pass').focus();
});

async function doLogin() {
  const username = document.getElementById('l-user').value.trim();
  const password = document.getElementById('l-pass').value.trim();
  const errEl    = document.getElementById('l-err');
  const btn      = document.getElementById('l-btn');

  errEl.style.display = 'none';
  if (!username || !password) {
    errEl.textContent = 'Username dan password wajib diisi.';
    errEl.style.display = 'block';
    return;
  }

  btn.textContent = 'Memeriksa...';
  btn.disabled = true;

  try {
    const rows = await sbFetch('guru', `username=eq.${encodeURIComponent(username)}&password=eq.${encodeURIComponent(password)}&select=id,nama,username`);
    if (!rows || rows.length === 0) {
      errEl.textContent = 'Username atau password salah.';
      errEl.style.display = 'block';
    } else {
      currentGuru = rows[0];
      document.getElementById('guru-name').textContent = '👤 ' + currentGuru.nama;
      document.getElementById('login-screen').style.display = 'none';
      document.getElementById('app').style.display = 'block';
      loadSiswa();
    }
  } catch (err) {
    errEl.textContent = 'Gagal terhubung ke server. Coba lagi.';
    errEl.style.display = 'block';
    console.error(err);
  } finally {
    btn.textContent = 'Masuk →';
    btn.disabled = false;
  }
}

function doLogout() {
  currentGuru  = null;
  allSiswa     = [];
  filterKelas  = '';
  currentSiswa = null;
  document.getElementById('l-user').value = '';
  document.getElementById('l-pass').value = '';
  document.getElementById('l-err').style.display = 'none';
  document.getElementById('app').style.display = 'none';
  document.getElementById('login-screen').style.display = 'flex';
  showView('list');
}

/* ══════════════════════════════════════
   VIEW SWITCHING
══════════════════════════════════════ */
function showView(v) {
  document.getElementById('view-list').style.display   = v === 'list'   ? 'block' : 'none';
  document.getElementById('view-detail').style.display = v === 'detail' ? 'block' : 'none';
}

function backToList() {
  currentSiswa = null;
  showView('list');
}

/* ══════════════════════════════════════
   LOAD SISWA LIST
══════════════════════════════════════ */
async function loadSiswa() {
  const container = document.getElementById('siswa-container');
  container.innerHTML = '<div class="loading"><div class="spinner"></div>Memuat data siswa...</div>';
  try {
    const [siswaRows, absensiRows, latihanRows, praktekRows] = await Promise.all([
      sbFetch('siswa', 'select=id,nama_lengkap,username,kelas&order=kelas.asc,nama_lengkap.asc'),
      sbFetch('absensi', 'select=username,status'),
      sbFetch('nilai_latihan', 'select=username,skor'),
      sbFetch('pengumpulan_tugas', 'select=username,nilai,dinilai_at')
    ]);

    // Build summary maps
    const absensiMap  = {};
    const latihanMap  = {};
    const praktekMap  = {};

    for (const r of absensiRows) {
      if (!absensiMap[r.username]) absensiMap[r.username] = 0;
      if (r.status === 'hadir') absensiMap[r.username]++;
    }
    for (const r of latihanRows) {
      if (!latihanMap[r.username]) latihanMap[r.username] = 0;
      latihanMap[r.username]++;
    }
    for (const r of praktekRows) {
      if (!praktekMap[r.username]) praktekMap[r.username] = 0;
      if (r.dinilai_at) praktekMap[r.username]++;
    }

    allSiswa = siswaRows.map(s => ({
      ...s,
      _hadirCount:   absensiMap[s.username]  || 0,
      _latihanCount: latihanMap[s.username]  || 0,
      _praktekCount: praktekMap[s.username]  || 0
    }));

    renderSiswa();
  } catch (err) {
    container.innerHTML = `<div class="empty"><div class="empty-icon">⚠️</div>Gagal memuat data siswa.<br><small>${err.message}</small></div>`;
    console.error(err);
  }
}

/* ══════════════════════════════════════
   FILTER & RENDER SISWA
══════════════════════════════════════ */
function setKelas(btn, kelas) {
  filterKelas = kelas;
  document.querySelectorAll('#kelas-tabs .tab-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  renderSiswa();
}

function renderSiswa() {
  const q         = (document.getElementById('search-siswa').value || '').toLowerCase();
  const container = document.getElementById('siswa-container');

  let list = allSiswa;
  if (filterKelas) list = list.filter(s => String(s.kelas) === filterKelas);
  if (q)           list = list.filter(s =>
    s.nama_lengkap.toLowerCase().includes(q) ||
    s.username.toLowerCase().includes(q)
  );

  if (list.length === 0) {
    container.innerHTML = `<div class="empty"><div class="empty-icon">🔍</div>Tidak ada siswa yang ditemukan.</div>`;
    return;
  }

  const kelasClass = { '7': 'k7', '8': 'k8', '9': 'k9' };
  container.innerHTML = `<div class="cards-grid">${list.map(s => `
    <div class="student-card" onclick="openDetail(${JSON.stringify(s).replace(/"/g, '&quot;')})">
      <div class="sc-top">
        <div>
          <div class="sc-name">${escHtml(s.nama_lengkap)}</div>
          <div class="sc-user">@${escHtml(s.username)}</div>
        </div>
        <span class="badge ${kelasClass[s.kelas] || ''}">Kelas ${s.kelas}</span>
      </div>
      <div class="sc-stats">
        <div class="sc-stat">✅ Hadir: <span>${s._hadirCount}</span></div>
        <div class="sc-stat">📝 Latihan: <span>${s._latihanCount}</span></div>
        <div class="sc-stat">🔧 Praktek: <span>${s._praktekCount}</span></div>
      </div>
    </div>`).join('')}</div>`;
}

/* ══════════════════════════════════════
   OPEN DETAIL
══════════════════════════════════════ */
async function openDetail(siswa) {
  currentSiswa = siswa;
  showView('detail');

  document.getElementById('d-nama').textContent = siswa.nama_lengkap;
  document.getElementById('d-info').textContent = `Kelas ${siswa.kelas} · @${siswa.username}`;

  document.getElementById('detail-loading').style.display = 'flex';
  document.getElementById('detail-content').style.display = 'none';

  try {
    const [absensi, latihan, praktek] = await Promise.all([
      sbFetch('absensi',
        `username=eq.${encodeURIComponent(siswa.username)}&select=tanggal,status,alasan&order=tanggal.asc`),
      sbFetch('nilai_latihan',
        `username=eq.${encodeURIComponent(siswa.username)}&select=judul_latihan,jawaban_benar,total_soal,skor&order=created_at.asc`),
      sbFetch('pengumpulan_tugas',
        `username=eq.${encodeURIComponent(siswa.username)}&select=judul_praktek,tipe,nilai,feedback&order=created_at.asc`)
    ]);

    detailData = { absensi, latihan, praktek };
    renderDetail();
  } catch (err) {
    showToast('Gagal memuat nilai siswa.', true);
    console.error(err);
    document.getElementById('detail-loading').innerHTML =
      `<div class="empty"><div class="empty-icon">⚠️</div>Gagal memuat data.<br><small>${err.message}</small></div>`;
  }
}

/* ══════════════════════════════════════
   RENDER DETAIL TABLES
══════════════════════════════════════ */
function renderDetail() {
  const { absensi, latihan, praktek } = detailData;

  /* ── Absensi ── */
  const tbA = document.getElementById('tbl-absensi');
  if (absensi.length === 0) {
    tbA.innerHTML = `<tr><td colspan="4"><div class="empty"><div class="empty-icon">📋</div>Belum ada data absensi.</div></td></tr>`;
  } else {
    const statusBadge = { hadir: 'badge-hadir', sakit: 'badge-sakit', izin: 'badge-izin', alpa: 'badge-alpa' };
    tbA.innerHTML = absensi.map((r, i) => {
      const nilaiA = r.status === 'hadir' ? 100 : 20;
      const cls    = nilaiA === 100 ? 'num-val' : 'num-val low';
      return `<tr>
        <td>${i + 1}</td>
        <td>${formatTanggal(r.tanggal)}</td>
        <td><span class="badge ${statusBadge[r.status] || ''}">${capitalize(r.status)}</span></td>
        <td class="${cls}">${nilaiA}</td>
      </tr>`;
    }).join('');
  }

  /* ── Latihan ── */
  const tbL = document.getElementById('tbl-latihan');
  if (latihan.length === 0) {
    tbL.innerHTML = `<tr><td colspan="5"><div class="empty"><div class="empty-icon">📝</div>Belum ada data latihan.</div></td></tr>`;
  } else {
    tbL.innerHTML = latihan.map((r, i) => `<tr>
      <td>${i + 1}</td>
      <td>${escHtml(r.judul_latihan || '–')}</td>
      <td>${r.jawaban_benar ?? '–'}</td>
      <td>${r.total_soal ?? '–'}</td>
      <td class="num-val">${r.skor ?? '–'}</td>
    </tr>`).join('');
  }

  /* ── Praktek ── */
  const tbP = document.getElementById('tbl-praktek');
  if (praktek.length === 0) {
    tbP.innerHTML = `<tr><td colspan="5"><div class="empty"><div class="empty-icon">🔧</div>Belum ada data praktek.</div></td></tr>`;
  } else {
    tbP.innerHTML = praktek.map((r, i) => {
      const tipeCls = r.tipe === 'kelompok' ? 'badge-kelompok' : 'badge-mandiri';
      const nilaiCls = (r.nilai != null && r.nilai >= 70) ? 'num-val' : 'num-val low';
      return `<tr>
        <td>${i + 1}</td>
        <td>${escHtml(r.judul_praktek || '–')}</td>
        <td><span class="badge ${tipeCls}">${capitalize(r.tipe || '–')}</span></td>
        <td class="${nilaiCls}">${r.nilai ?? '–'}</td>
        <td style="color:var(--muted);font-size:0.82rem">${escHtml(r.feedback || '–')}</td>
      </tr>`;
    }).join('');
  }

  /* ── Ringkasan ── */
  const avgAbsensi = absensi.length
    ? avg(absensi.map(r => r.status === 'hadir' ? 100 : 20))
    : null;
  const avgLatihan = latihan.length
    ? avg(latihan.map(r => r.skor ?? 0))
    : null;
  const praktekDinilai = praktek.filter(r => r.nilai != null);
  const avgPraktek = praktekDinilai.length
    ? avg(praktekDinilai.map(r => r.nilai))
    : null;

  // Weighted: absensi 20%, latihan 40%, praktek 40%
  let nilaiAkhir = null;
  const parts = [];
  if (avgAbsensi !== null) parts.push({ w: 0.2, v: avgAbsensi });
  if (avgLatihan !== null) parts.push({ w: 0.4, v: avgLatihan });
  if (avgPraktek !== null) parts.push({ w: 0.4, v: avgPraktek });

  if (parts.length > 0) {
    const totalW = parts.reduce((s, p) => s + p.w, 0);
    nilaiAkhir   = parts.reduce((s, p) => s + p.v * p.w, 0) / totalW;
  }

  document.getElementById('r-absensi').textContent = avgAbsensi !== null ? avgAbsensi.toFixed(1) : '–';
  document.getElementById('r-latihan').textContent = avgLatihan !== null ? avgLatihan.toFixed(1) : '–';
  document.getElementById('r-praktek').textContent = avgPraktek !== null ? avgPraktek.toFixed(1) : '–';
  document.getElementById('r-akhir').textContent   = nilaiAkhir  !== null ? nilaiAkhir.toFixed(1)  : '–';

  document.getElementById('detail-loading').style.display = 'none';
  document.getElementById('detail-content').style.display = 'block';
}

/* ══════════════════════════════════════
   DOWNLOAD PDF
══════════════════════════════════════ */
function downloadPDF() {
  if (!currentSiswa) return;
  const { jsPDF } = window.jspdf;
  if (!jsPDF) { showToast('jsPDF belum siap.', true); return; }

  const doc  = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
  const { absensi, latihan, praktek } = detailData;
  const siswa = currentSiswa;
  const today = new Date().toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' });

  const ACCENT  = [232, 99, 10];
  const DARK    = [22, 33, 62];
  const MUTED   = [148, 163, 184];
  const WHITE   = [241, 245, 249];
  const GREEN   = [34, 197, 94];
  const RED     = [239, 68, 68];

  let y = 15;

  // ── Header ──
  doc.setFillColor(...DARK);
  doc.rect(0, 0, 210, 38, 'F');

  doc.setFontSize(14);
  doc.setFont('helvetica', 'bold');
  doc.setTextColor(...ACCENT);
  doc.text('Lembar Nilai Pembelajaran', 14, y + 6);

  doc.setFontSize(9);
  doc.setFont('helvetica', 'normal');
  doc.setTextColor(...MUTED);
  doc.text(`Kelas ${siswa.kelas}  ·  SMPN 1 Maospati  ·  Dicetak: ${today}`, 14, y + 13);

  doc.setFontSize(11);
  doc.setFont('helvetica', 'bold');
  doc.setTextColor(...WHITE);
  doc.text(siswa.nama_lengkap, 14, y + 22);

  doc.setFontSize(8);
  doc.setFont('helvetica', 'normal');
  doc.setTextColor(...MUTED);
  doc.text(`@${siswa.username}`, 14, y + 28);

  y = 46;

  // ── Helper: section title ──
  function sectionTitle(title) {
    doc.setFontSize(10);
    doc.setFont('helvetica', 'bold');
    doc.setTextColor(...ACCENT);
    doc.text(title, 14, y);
    doc.setDrawColor(...ACCENT);
    doc.setLineWidth(0.4);
    doc.line(14, y + 1.5, 196, y + 1.5);
    y += 6;
  }

  // ── Absensi table ──
  sectionTitle('Nilai Absensi');
  if (absensi.length === 0) {
    doc.setFontSize(8); doc.setTextColor(...MUTED); doc.setFont('helvetica', 'italic');
    doc.text('Belum ada data absensi.', 14, y); y += 8;
  } else {
    doc.autoTable({
      startY: y,
      head: [['#', 'Tanggal', 'Status', 'Nilai']],
      body: absensi.map((r, i) => [
        i + 1,
        formatTanggal(r.tanggal),
        capitalize(r.status),
        r.status === 'hadir' ? 100 : 20
      ]),
      styles: { fontSize: 8, cellPadding: 2.5, textColor: [241, 245, 249], fillColor: [22, 33, 62] },
      headStyles: { fillColor: [15, 52, 96], textColor: [251, 191, 36], fontStyle: 'bold' },
      alternateRowStyles: { fillColor: [26, 26, 46] },
      columnStyles: { 0: { cellWidth: 10 }, 3: { fontStyle: 'bold' } },
      didParseCell(data) {
        if (data.section === 'body' && data.column.index === 3) {
          data.cell.styles.textColor = data.cell.raw === 100 ? GREEN : RED;
        }
      },
      margin: { left: 14, right: 14 }
    });
    y = doc.lastAutoTable.finalY + 8;
  }

  // ── Latihan table ──
  sectionTitle('Nilai Latihan');
  if (latihan.length === 0) {
    doc.setFontSize(8); doc.setTextColor(...MUTED); doc.setFont('helvetica', 'italic');
    doc.text('Belum ada data latihan.', 14, y); y += 8;
  } else {
    doc.autoTable({
      startY: y,
      head: [['#', 'Judul Latihan', 'Jawaban Benar', 'Total Soal', 'Skor']],
      body: latihan.map((r, i) => [
        i + 1,
        r.judul_latihan || '–',
        r.jawaban_benar ?? '–',
        r.total_soal ?? '–',
        r.skor ?? '–'
      ]),
      styles: { fontSize: 8, cellPadding: 2.5, textColor: [241, 245, 249], fillColor: [22, 33, 62] },
      headStyles: { fillColor: [15, 52, 96], textColor: [251, 191, 36], fontStyle: 'bold' },
      alternateRowStyles: { fillColor: [26, 26, 46] },
      columnStyles: { 0: { cellWidth: 10 }, 4: { fontStyle: 'bold', textColor: GREEN } },
      margin: { left: 14, right: 14 }
    });
    y = doc.lastAutoTable.finalY + 8;
  }

  // ── Praktek table ──
  sectionTitle('Nilai Praktek');
  if (praktek.length === 0) {
    doc.setFontSize(8); doc.setTextColor(...MUTED); doc.setFont('helvetica', 'italic');
    doc.text('Belum ada data praktek.', 14, y); y += 8;
  } else {
    doc.autoTable({
      startY: y,
      head: [['#', 'Judul Praktek', 'Tipe', 'Nilai', 'Feedback']],
      body: praktek.map((r, i) => [
        i + 1,
        r.judul_praktek || '–',
        capitalize(r.tipe || '–'),
        r.nilai ?? '–',
        r.feedback || '–'
      ]),
      styles: { fontSize: 8, cellPadding: 2.5, textColor: [241, 245, 249], fillColor: [22, 33, 62] },
      headStyles: { fillColor: [15, 52, 96], textColor: [251, 191, 36], fontStyle: 'bold' },
      alternateRowStyles: { fillColor: [26, 26, 46] },
      columnStyles: { 0: { cellWidth: 10 }, 3: { fontStyle: 'bold' }, 4: { cellWidth: 55, fontSize: 7 } },
      margin: { left: 14, right: 14 }
    });
    y = doc.lastAutoTable.finalY + 8;
  }

  // ── Ringkasan ──
  const avgA = absensi.length ? avg(absensi.map(r => r.status === 'hadir' ? 100 : 20)) : null;
  const avgL = latihan.length ? avg(latihan.map(r => r.skor ?? 0)) : null;
  const pd   = praktek.filter(r => r.nilai != null);
  const avgP = pd.length ? avg(pd.map(r => r.nilai)) : null;

  const parts2 = [];
  if (avgA !== null) parts2.push({ w: 0.2, v: avgA });
  if (avgL !== null) parts2.push({ w: 0.4, v: avgL });
  if (avgP !== null) parts2.push({ w: 0.4, v: avgP });
  const totalW2 = parts2.reduce((s, p) => s + p.w, 0);
  const nilaiAkhir2 = parts2.length ? (parts2.reduce((s, p) => s + p.v * p.w, 0) / totalW2) : null;

  // Check if we need a new page
  if (y > 240) { doc.addPage(); y = 15; }

  sectionTitle('Ringkasan Nilai');
  doc.autoTable({
    startY: y,
    head: [['Komponen', 'Rata-rata', 'Bobot']],
    body: [
      ['Absensi',  avgA !== null ? avgA.toFixed(1) : '–', '20%'],
      ['Latihan',  avgL !== null ? avgL.toFixed(1) : '–', '40%'],
      ['Praktek',  avgP !== null ? avgP.toFixed(1) : '–', '40%'],
      ['NILAI AKHIR', nilaiAkhir2 !== null ? nilaiAkhir2.toFixed(1) : '–', '100%']
    ],
    styles: { fontSize: 9, cellPadding: 3, textColor: [241, 245, 249], fillColor: [22, 33, 62] },
    headStyles: { fillColor: [15, 52, 96], textColor: [251, 191, 36], fontStyle: 'bold' },
    alternateRowStyles: { fillColor: [26, 26, 46] },
    didParseCell(data) {
      if (data.section === 'body' && data.row.index === 3) {
        data.cell.styles.fontStyle = 'bold';
        data.cell.styles.textColor = ACCENT;
        data.cell.styles.fillColor = [15, 52, 96];
      }
    },
    margin: { left: 14, right: 14 }
  });

  // ── Footer ──
  const pageCount = doc.internal.getNumberOfPages();
  for (let i = 1; i <= pageCount; i++) {
    doc.setPage(i);
    doc.setFontSize(7);
    doc.setTextColor(...MUTED);
    doc.text(`SMPN 1 Maospati – Lembar Nilai Pembelajaran – ${today}`, 14, 290);
    doc.text(`Halaman ${i} / ${pageCount}`, 196, 290, { align: 'right' });
  }

  const safeName = siswa.nama_lengkap.replace(/[^a-zA-Z0-9 ]/g, '').replace(/\s+/g, '_');
  doc.save(`Nilai_${safeName}_Kelas${siswa.kelas}.pdf`);
  showToast('PDF berhasil diunduh!');
}

/* ══════════════════════════════════════
   HELPERS
══════════════════════════════════════ */
function avg(arr) {
  if (!arr.length) return 0;
  return arr.reduce((s, v) => s + Number(v), 0) / arr.length;
}

function capitalize(str) {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function escHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

function formatTanggal(dateStr) {
  if (!dateStr) return '–';
  try {
    return new Date(dateStr).toLocaleDateString('id-ID', {
      day: '2-digit', month: 'short', year: 'numeric'
    });
  } catch { return dateStr; }
}
</script>
</body>
</html>