<?php
/**
 * SisPen Snesaka - Dashboard Admin
 */
require_once 'includes/functions.php';
requireAdmin();

$pageTitle = 'Dashboard Admin';
$activeMenu = 'dashboard';
$breadcrumb = 'Beranda';

// Statistik
$totalGuru   = db_fetch("SELECT COUNT(*) as c FROM guru WHERE status='aktif'")['c'];
$totalSiswa  = db_fetch("SELECT COUNT(*) as c FROM siswa WHERE status='aktif'")['c'];
$totalSiswaL = db_fetch("SELECT COUNT(*) as c FROM siswa WHERE status='aktif' AND jenis_kelamin='L'")['c'];
$totalSiswaP = db_fetch("SELECT COUNT(*) as c FROM siswa WHERE status='aktif' AND jenis_kelamin='P'")['c'];
$totalKelas  = db_fetch("SELECT COUNT(*) as c FROM kelas WHERE tahun_ajaran = (SELECT tahun_ajaran_aktif FROM pengaturan LIMIT 1)")['c'];
$totalMapel  = db_fetch("SELECT COUNT(*) as c FROM mata_pelajaran WHERE status='aktif'")['c'];

$pengaturan  = getPengaturan();
$tahunAjaran = $pengaturan['tahun_ajaran_aktif'] ?? '2024/2025';
$semester    = $pengaturan['semester_aktif'] ?? '1';

// Kelas terbaru
$kelasList = db_fetchAll("
    SELECT k.*, g.nama as wali_kelas,
           COUNT(s.id) as jumlah_siswa
    FROM kelas k
    LEFT JOIN guru g ON g.id = k.wali_kelas_id
    LEFT JOIN siswa s ON s.kelas_id = k.id AND s.status = 'aktif'
    WHERE k.tahun_ajaran = ? AND k.semester = ?
    GROUP BY k.id
    ORDER BY k.tingkat, k.nama_kelas
", [$tahunAjaran, $semester]);

// Progress per Mapel
$progressMapel = db_fetchAll("
    SELECT m.nama_mapel, m.id as mapel_id,
           COUNT(DISTINCT n.siswa_id) as sudah,
           (SELECT COUNT(*) FROM siswa WHERE status='aktif') as total
    FROM mata_pelajaran m
    LEFT JOIN nilai n ON n.mapel_id = m.id AND n.tahun_ajaran = ? AND n.semester = ?
    WHERE m.status = 'aktif'
    GROUP BY m.id
    ORDER BY m.urutan, m.nama_mapel
", [$tahunAjaran, $semester]);

// Progress per Kelas
$progressKelas = db_fetchAll("
    SELECT k.nama_kelas, k.id as kelas_id,
           COUNT(DISTINCT s.id) as total_siswa,
           COUNT(DISTINCT n.siswa_id) as sudah,
           COUNT(DISTINCT n.mapel_id) as mapel_terisi,
           (SELECT COUNT(*) FROM mata_pelajaran WHERE status='aktif') as total_mapel
    FROM kelas k
    LEFT JOIN siswa s ON s.kelas_id = k.id AND s.status = 'aktif'
    LEFT JOIN nilai n ON n.kelas_id = k.id AND n.tahun_ajaran = ? AND n.semester = ?
    WHERE k.tahun_ajaran = ? AND k.semester = ?
    GROUP BY k.id
    ORDER BY k.tingkat, k.nama_kelas
", [$tahunAjaran, $semester, $tahunAjaran, $semester]);

// Progress per Guru
$progressGuru = db_fetchAll("
    SELECT g.nama, g.id as guru_id,
           COUNT(DISTINCT p.id) as total_pengampu,
           COUNT(DISTINCT CONCAT(n.siswa_id,'-',n.mapel_id,'-',n.kelas_id)) as sudah_input
    FROM guru g
    JOIN pengampu p ON p.guru_id = g.id AND p.tahun_ajaran = ? AND p.semester = ?
    LEFT JOIN nilai n ON n.guru_id = g.id AND n.tahun_ajaran = ? AND n.semester = ?
    WHERE g.status = 'aktif'
    GROUP BY g.id
    ORDER BY g.nama
", [$tahunAjaran, $semester, $tahunAjaran, $semester]);

include 'templates/header.php';
?>

<style>
.stat-card-custom {
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,.12);
}
.stat-card-custom .stat-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.stat-card-custom .label { font-size: 11px; opacity: .85; margin-bottom: 2px; }
.stat-card-custom .value { font-size: 28px; font-weight: 800; line-height: 1.1; }
.stat-card-custom .sub   { font-size: 11px; opacity: .7; margin-top: 2px; }

.sc-blue   { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.sc-amber  { background: linear-gradient(135deg, #b45309, #f59e0b); }
.sc-green  { background: linear-gradient(135deg, #065f46, #10b981); }
.sc-purple { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }
.sc-navy   { background: linear-gradient(135deg, #1d4ed8, #60a5fa); }
.sc-pink   { background: linear-gradient(135deg, #be185d, #f472b6); }

.tab-btn {
    padding: 7px 18px; border: none; border-radius: 20px;
    cursor: pointer; font-size: 13px; font-weight: 600;
    background: var(--bg); color: var(--text-muted);
    transition: all .2s;
}
.tab-btn.active { background: rgba(255,255,255,.25) !important; color: #fff !important; font-weight:700; }

.progress-section { display: none; }
.progress-section.active { display: block; }

.prog-row { margin-bottom: 14px; }
.prog-label { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 13px; }
.prog-name  { font-weight: 600; }
.prog-stat  { font-size: 12px; color: var(--text-muted); }
.prog-bar-wrap { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.prog-bar { height: 100%; border-radius: 99px; transition: width .5s; }

/* ── Kelas Dropdown ── */
.kelas-select-wrap {
    position: relative;
}
.kelas-select-wrap select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface, #fff);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
.kelas-select-wrap select:focus,
.kelas-select-wrap select:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,74,122,.1);
}
.kelas-select-wrap .select-arrow {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    font-size: 11px;
    transition: transform .2s;
}

/* Kelas detail panel */
.kelas-detail {
    margin-top: 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all .25s;
}
.kelas-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primary-dark, #1e3a5f), var(--primary, #1a4a7a));
    color: #fff;
}
.kelas-detail-header .kelas-nama {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .5px;
}
.kelas-detail-header .kelas-badge {
    font-size: 11px;
    background: rgba(255,255,255,.2);
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 600;
}
.kelas-detail-body {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.kelas-info-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
}
.kelas-info-item .ki-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.kelas-info-item .ki-label { font-size: 11px; color: var(--text-muted); margin-bottom: 1px; }
.kelas-info-item .ki-val   { font-weight: 700; font-size: 13px; }
.kelas-detail-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
}
.kelas-empty {
    padding: 28px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
</style>

<!-- STAT CARDS: 6 kolom -->
<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px;">

  <div class="stat-card-custom sc-blue">
    <div class="stat-icon"><i class="fas fa-chalkboard-teacher"></i></div>
    <div>
      <div class="label">Total Guru</div>
      <div class="value"><?= $totalGuru ?></div>
      <div class="sub">Guru aktif</div>
    </div>
  </div>

  <div class="stat-card-custom sc-amber">
    <div class="stat-icon"><i class="fas fa-users"></i></div>
    <div>
      <div class="label">Total Siswa</div>
      <div class="value"><?= $totalSiswa ?></div>
      <div class="sub">Siswa aktif</div>
    </div>
  </div>

  <div class="stat-card-custom sc-navy">
    <div class="stat-icon"><i class="fas fa-mars"></i></div>
    <div>
      <div class="label">Siswa Laki-Laki</div>
      <div class="value"><?= $totalSiswaL ?></div>
      <div class="sub"><?= $totalSiswa > 0 ? round($totalSiswaL / $totalSiswa * 100) : 0 ?>% dari total</div>
    </div>
  </div>

  <div class="stat-card-custom sc-pink">
    <div class="stat-icon"><i class="fas fa-venus"></i></div>
    <div>
      <div class="label">Siswa Perempuan</div>
      <div class="value"><?= $totalSiswaP ?></div>
      <div class="sub"><?= $totalSiswa > 0 ? round($totalSiswaP / $totalSiswa * 100) : 0 ?>% dari total</div>
    </div>
  </div>

  <div class="stat-card-custom sc-green">
    <div class="stat-icon"><i class="fas fa-door-open"></i></div>
    <div>
      <div class="label">Total Kelas</div>
      <div class="value"><?= $totalKelas ?></div>
      <div class="sub">TA <?= $tahunAjaran ?></div>
    </div>
  </div>

  <div class="stat-card-custom sc-purple">
    <div class="stat-icon"><i class="fas fa-book"></i></div>
    <div>
      <div class="label">Mata Pelajaran</div>
      <div class="value"><?= $totalMapel ?></div>
      <div class="sub">Aktif</div>
    </div>
  </div>

</div>

<!-- CONTENT GRID -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">

  <!-- ===== DAFTAR KELAS — Dropdown ===== -->
  <div class="card">
    <div class="card-header" style="background:linear-gradient(135deg,#0f2544,#1e4d8c);border-radius:var(--radius) var(--radius) 0 0;padding:14px 20px;">
      <span class="card-title" style="color:#fff;">
        <i class="fas fa-door-open" style="margin-right:8px;opacity:.9;"></i>Daftar Kelas
        <span style="background:rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:2px 10px;font-size:11px;font-weight:700;margin-left:6px;"><?= count($kelasList) ?> kelas</span>
      </span>
      <a href="<?= BASE_URL ?>/modules/kelas/list.php" class="btn btn-sm" style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);">Lihat Semua</a>
    </div>
    <div class="card-body">

      <?php if (empty($kelasList)): ?>
        <div class="kelas-empty">
          <i class="fas fa-inbox" style="font-size:28px;opacity:.3;display:block;margin-bottom:8px;"></i>
          Belum ada data kelas untuk TA <?= $tahunAjaran ?>
        </div>
      <?php else: ?>

      <!-- Encode data kelas ke JSON untuk JS -->
      <?php
        $kelasJson = [];
        foreach ($kelasList as $k) {
            $kelasJson[] = [
                'id'          => $k['id'],
                'nama_kelas'  => $k['nama_kelas'],
                'wali_kelas'  => $k['wali_kelas'] ?? '-',
                'jumlah_siswa'=> (int)$k['jumlah_siswa'],
                'tingkat'     => $k['tingkat'] ?? '',
            ];
        }
      ?>
      <script>
        var _kelasData = <?= json_encode($kelasJson, JSON_HEX_TAG) ?>;
        var _baseUrl   = '<?= BASE_URL ?>';
      </script>

      <!-- Dropdown pilih kelas -->
      <div class="kelas-select-wrap" style="margin-bottom:4px;">
        <select id="kelasDropdown" onchange="tampilkanKelas(this.value)">
          <option value="">— Pilih kelas untuk melihat detail —</option>
          <?php foreach ($kelasList as $k): ?>
          <option value="<?= $k['id'] ?>"><?= htmlspecialchars($k['nama_kelas']) ?> &nbsp;(<?= $k['jumlah_siswa'] ?> siswa)</option>
          <?php endforeach; ?>
        </select>
        <i class="fas fa-chevron-down select-arrow"></i>
      </div>

      <!-- Panel detail kelas -->
      <div id="kelasDetail">
        <!-- diisi oleh JS -->
        <div class="kelas-empty" style="padding:20px;">
          <i class="fas fa-hand-point-up" style="font-size:22px;opacity:.25;display:block;margin-bottom:6px;"></i>
          Pilih kelas dari dropdown di atas
        </div>
      </div>

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

  <!-- Quick Actions -->
  <div class="card">
    <div class="card-header" style="background:linear-gradient(135deg,#78350f,#b45309);border-radius:var(--radius) var(--radius) 0 0;padding:14px 20px;">
      <span class="card-title" style="color:#fff;">
        <i class="fas fa-bolt" style="margin-right:8px;opacity:.9;"></i>Aksi Cepat
      </span>
    </div>
    <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
      <a href="<?= BASE_URL ?>/modules/siswa/add.php" class="btn btn-primary" style="justify-content:center;">
        <i class="fas fa-user-plus"></i> Tambah Siswa
      </a>
      <a href="<?= BASE_URL ?>/modules/guru/add.php" class="btn btn-outline" style="justify-content:center;">
        <i class="fas fa-user-tie"></i> Tambah Guru
      </a>
      <a href="<?= BASE_URL ?>/modules/kelas/add.php" class="btn btn-outline" style="justify-content:center;">
        <i class="fas fa-plus"></i> Tambah Kelas
      </a>
      <a href="<?= BASE_URL ?>/modules/siswa/import.php" class="btn btn-outline" style="justify-content:center;">
        <i class="fas fa-file-excel"></i> Import Siswa
      </a>
      <a href="<?= BASE_URL ?>/cetak_nilai.php" class="btn btn-accent" style="grid-column:span 2;justify-content:center;">
        <i class="fas fa-print"></i> Cetak Daftar Nilai
      </a>
      <a href="<?= BASE_URL ?>/modules/psaj/input.php" class="btn btn-outline" style="justify-content:center;background:linear-gradient(135deg,#4c1d95,#7c3aed);color:#fff;border:none;">
        <i class="fas fa-graduation-cap"></i> Input PSAJ
      </a>
      <a href="<?= BASE_URL ?>/modules/psaj/cetak.php" class="btn btn-outline" style="justify-content:center;border-color:#7c3aed;color:#7c3aed;">
        <i class="fas fa-print"></i> Cetak PSAJ
      </a>
    </div>
  </div>
</div>

<!-- PROGRESS INPUT NILAI (3 TAB) -->
<div class="card">
  <div class="card-header" style="background:linear-gradient(135deg,#064e3b,#047857);border-radius:var(--radius) var(--radius) 0 0;padding:14px 20px;flex-wrap:wrap;gap:10px;">
    <span class="card-title" style="color:#fff;">
      <i class="fas fa-chart-line" style="margin-right:8px;opacity:.9;"></i>
      Progress Input Nilai
      <span style="background:rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:2px 10px;font-size:11px;font-weight:700;margin-left:8px;">Sem <?= $semester ?></span>
    </span>
    <div style="display:flex;gap:4px;background:rgba(255,255,255,.12);padding:4px;border-radius:24px;">
      <button class="tab-btn active" onclick="switchTab('mapel', this)"
              style="color:rgba(255,255,255,.8);background:transparent;">
        <i class="fas fa-book"></i> Per Mapel
      </button>
      <button class="tab-btn" onclick="switchTab('kelas', this)"
              style="color:rgba(255,255,255,.8);background:transparent;">
        <i class="fas fa-door-open"></i> Per Kelas
      </button>
      <button class="tab-btn" onclick="switchTab('guru', this)"
              style="color:rgba(255,255,255,.8);background:transparent;">
        <i class="fas fa-chalkboard-teacher"></i> Per Guru
      </button>
    </div>
  </div>
  <div class="card-body">

    <!-- TAB: Per Mapel -->
    <div id="tab-mapel" class="progress-section active">
      <?php if (empty($progressMapel)): ?>
        <p class="text-muted text-center">Belum ada data</p>
      <?php else: ?>
      <?php foreach ($progressMapel as $mp):
          $pct = $mp['total'] > 0 ? round(($mp['sudah'] / $mp['total']) * 100) : 0;
          $color = $pct >= 100 ? '#10b981' : ($pct >= 50 ? '#3b82f6' : '#f59e0b');
      ?>
      <div class="prog-row">
        <div class="prog-label">
          <span class="prog-name"><?= htmlspecialchars($mp['nama_mapel']) ?></span>
          <span class="prog-stat"><?= $mp['sudah'] ?>/<?= $mp['total'] ?> siswa &bull; <strong style="color:<?= $color ?>;"><?= $pct ?>%</strong></span>
        </div>
        <div class="prog-bar-wrap">
          <div class="prog-bar" style="width:<?= $pct ?>%;background:<?= $color ?>;"></div>
        </div>
      </div>
      <?php endforeach; ?>
      <?php endif; ?>
    </div>

    <!-- TAB: Per Kelas -->
    <div id="tab-kelas" class="progress-section">
      <?php if (empty($progressKelas)): ?>
        <p class="text-muted text-center">Belum ada data</p>
      <?php else: ?>
      <?php foreach ($progressKelas as $kl):
          $totalCells = $kl['total_siswa'] * $kl['total_mapel'];
          $pct = $totalCells > 0 ? round(($kl['sudah'] / $totalCells) * 100) : 0;
          $pct = min($pct, 100);
          $color = $pct >= 100 ? '#10b981' : ($pct >= 50 ? '#8b5cf6' : '#f59e0b');
      ?>
      <div class="prog-row">
        <div class="prog-label">
          <span class="prog-name">
            <span class="badge badge-blue" style="margin-right:6px;"><?= htmlspecialchars($kl['nama_kelas']) ?></span>
            <?= $kl['total_siswa'] ?> siswa &bull; <?= $kl['mapel_terisi'] ?>/<?= $kl['total_mapel'] ?> mapel terisi
          </span>
          <span class="prog-stat"><strong style="color:<?= $color ?>;"><?= $pct ?>%</strong></span>
        </div>
        <div class="prog-bar-wrap">
          <div class="prog-bar" style="width:<?= $pct ?>%;background:<?= $color ?>;"></div>
        </div>
      </div>
      <?php endforeach; ?>
      <?php endif; ?>
    </div>

    <!-- TAB: Per Guru -->
    <div id="tab-guru" class="progress-section">
      <?php if (empty($progressGuru)): ?>
        <p class="text-muted text-center">Belum ada guru yang memiliki pengampu aktif</p>
      <?php else: ?>
      <?php foreach ($progressGuru as $gr):
          $totalSiswaGuru = db_fetch("
              SELECT COALESCE(SUM(sub.jml),0) as total FROM (
                  SELECT COUNT(s.id) as jml
                  FROM pengampu p
                  JOIN siswa s ON s.kelas_id = p.kelas_id AND s.status = 'aktif'
                  WHERE p.guru_id = ? AND p.tahun_ajaran = ? AND p.semester = ?
                  GROUP BY p.kelas_id, p.mapel_id
              ) sub
          ", [$gr['guru_id'], $tahunAjaran, $semester]);
          $totalHarus = $totalSiswaGuru['total'] ?? 0;
          $pct = $totalHarus > 0 ? min(round(($gr['sudah_input'] / $totalHarus) * 100), 100) : 0;
          $color = $pct >= 100 ? '#10b981' : ($pct >= 50 ? '#3b82f6' : '#ef4444');
      ?>
      <div class="prog-row">
        <div class="prog-label">
          <span class="prog-name">
            <?= htmlspecialchars($gr['nama']) ?>
            <span style="font-size:11px;color:var(--text-muted);font-weight:400;margin-left:6px;"><?= $gr['total_pengampu'] ?> kelas</span>
          </span>
          <span class="prog-stat"><?= $gr['sudah_input'] ?>/<?= $totalHarus ?> nilai &bull; <strong style="color:<?= $color ?>;"><?= $pct ?>%</strong></span>
        </div>
        <div class="prog-bar-wrap">
          <div class="prog-bar" style="width:<?= $pct ?>%;background:<?= $color ?>;"></div>
        </div>
      </div>
      <?php endforeach; ?>
      <?php endif; ?>
    </div>

  </div>
</div>

<script>
// ── Kelas Dropdown Handler ───────────────────────────────
function tampilkanKelas(kelasId) {
    var panel = document.getElementById('kelasDetail');
    if (!kelasId) {
        panel.innerHTML = '<div class="kelas-empty" style="padding:20px;">'
            + '<i class="fas fa-hand-point-up" style="font-size:22px;opacity:.25;display:block;margin-bottom:6px;"></i>'
            + 'Pilih kelas dari dropdown di atas</div>';
        return;
    }

    var k = null;
    for (var i = 0; i < _kelasData.length; i++) {
        if (String(_kelasData[i].id) === String(kelasId)) { k = _kelasData[i]; break; }
    }
    if (!k) return;

    // Warna tingkat
    var tingkatColor = ['#3b82f6','#8b5cf6','#10b981'];
    var tIdx = (parseInt(k.tingkat) || 7) - 7;
    var color = tingkatColor[tIdx] || '#3b82f6';

    panel.innerHTML =
        '<div class="kelas-detail">'
        + '<div class="kelas-detail-header" style="background:linear-gradient(135deg,'+color+'cc,'+color+');">'
        +   '<span class="kelas-nama"><i class="fas fa-door-open" style="margin-right:8px;opacity:.8;"></i>' + escHtml(k.nama_kelas) + '</span>'
        +   '<span class="kelas-badge">Kelas ' + (k.tingkat || '-') + '</span>'
        + '</div>'
        + '<div class="kelas-detail-body">'
        +   '<div class="kelas-info-item">'
        +     '<div class="ki-icon" style="background:rgba(59,130,246,.12);color:#3b82f6;"><i class="fas fa-users"></i></div>'
        +     '<div><div class="ki-label">Jumlah Siswa</div><div class="ki-val">' + k.jumlah_siswa + ' siswa</div></div>'
        +   '</div>'
        +   '<div class="kelas-info-item">'
        +     '<div class="ki-icon" style="background:rgba(16,185,129,.12);color:#10b981;"><i class="fas fa-chalkboard-teacher"></i></div>'
        +     '<div><div class="ki-label">Wali Kelas</div><div class="ki-val">' + escHtml(k.wali_kelas) + '</div></div>'
        +   '</div>'
        + '</div>'
        + '<div class="kelas-detail-footer">'
        +   '<a href="' + _baseUrl + '/modules/nilai/input.php?kelas_id=' + k.id + '" class="btn btn-primary btn-sm" style="flex:1;justify-content:center;">'
        +     '<i class="fas fa-edit"></i> Input Nilai</a>'
        +   '<a href="' + _baseUrl + '/modules/siswa/list.php?kelas_id=' + k.id + '" class="btn btn-outline btn-sm" style="flex:1;justify-content:center;">'
        +     '<i class="fas fa-users"></i> Data Siswa</a>'
        +   '<a href="' + _baseUrl + '/modules/kelas/edit.php?id=' + k.id + '" class="btn btn-outline btn-sm" style="justify-content:center;">'
        +     '<i class="fas fa-cog"></i></a>'
        + '</div>'
        + '</div>';
}

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

// ── Progress Tab ─────────────────────────────────────────
function switchTab(name, btn) {
    document.querySelectorAll('.progress-section').forEach(function(s){ s.classList.remove('active'); });
    document.querySelectorAll('.tab-btn').forEach(function(b){ b.classList.remove('active'); });
    document.getElementById('tab-' + name).classList.add('active');
    btn.classList.add('active');
}
</script>

<?php include 'templates/footer.php'; ?>