
<?php
/**
 * SisPen Snesaka - Header Template (Dropdown Sidebar)
 */
if (!isset($pageTitle)) $pageTitle = 'Dashboard';
if (!isset($activeMenu)) $activeMenu = '';
$isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
$pengaturan = getPengaturan();
$B = BASE_URL;

// Cek pembina ekskul
$_isPembina = false;
if (!$isAdmin && !empty($_SESSION['guru_id'])) {
    $_eksBina = db_fetch("SELECT id FROM ekstrakurikuler WHERE pembina_id=? AND status='aktif' LIMIT 1", [$_SESSION['guru_id']]);
    $_isPembina = !empty($_eksBina);
}

// Cek wali kelas
$_isWaliKelas = false;
if (!$isAdmin && !empty($_SESSION['guru_id'])) {
    $_kelasWali = db_fetch("SELECT id FROM kelas WHERE wali_kelas_id=? LIMIT 1", [$_SESSION['guru_id']]);
    $_isWaliKelas = !empty($_kelasWali);
}

// Tentukan grup menu mana yang aktif (untuk auto-expand)
$activeGroup = '';
$groupMap = [
    'guru','siswa','kelas','mapel'          => 'manajemen',
    'nilai-input','nilai-report'            => 'penilaian',
    'absensi','absensi-report'              => 'absensi',
    'ekstra','ekstra-list','bk-kelas'       => 'ekstra',
    'cetak'                                 => 'cetak',
    'psaj-input','psaj-cetak'               => 'psaj',
    'dapodik'                               => 'integrasi',
    'pengaturan','backup'                   => 'pengaturan',
    'profil'                                => 'akun',
];
foreach ($groupMap as $menu => $group) {
    if ($activeMenu === $menu) { $activeGroup = $group; break; }
}
// Mapping lebih sederhana
$menuGroups = [
    'guru'          => 'manajemen',
    'siswa'         => 'manajemen',
    'kelas'         => 'manajemen',
    'mapel'         => 'manajemen',
    'nilai-input'   => 'penilaian',
    'nilai-report'  => 'penilaian',
    'absensi'       => 'absensi',
    'absensi-report'=> 'absensi',
    'ekstra'        => 'ekstra',
    'ekstra-list'   => 'ekstra',
    'bk-kelas'      => 'ekstra',
    'cetak'         => 'cetak',
    'cetak-rapor-pts' => 'cetak',
    'psaj-input'    => 'psaj',
    'psaj-cetak'    => 'psaj',
    'dapodik'       => 'integrasi',
    'pengaturan'    => 'pengaturan',
    'backup'        => 'pengaturan',
    'profil'        => 'akun',
];
$activeGroup = $menuGroups[$activeMenu] ?? '';
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($pageTitle) ?> - SisPen Snesaka</title>
  <link rel="stylesheet" href="<?= $B ?>/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ── Dropdown Sidebar ────────────────────────────────── */
.sidebar-menu { padding: 10px 0 20px; }

/* Group header (tombol dropdown) */
.menu-group { margin-bottom: 2px; }

.menu-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 8px;
  margin: 0 8px;
  transition: background .18s;
  user-select: none;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.menu-group-header:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.menu-group-header.open {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.menu-group-header .gh-left {
  display: flex; align-items: center; gap: 10px;
}
.menu-group-header .gh-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.12);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background .18s;
}
.menu-group-header.open .gh-icon,
.menu-group-header:hover .gh-icon {
  background: rgba(255,255,255,.2);
}
.menu-group-header .gh-arrow {
  font-size: 11px;
  transition: transform .25s;
  opacity: .7;
}
.menu-group-header.open .gh-arrow {
  transform: rotate(90deg);
  opacity: 1;
}

/* Dropdown items */
.menu-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.menu-group-items.open {
  max-height: 500px;
}
.menu-group-items .menu-item {
  padding: 8px 16px 8px 54px;
  font-size: 12.5px;
  border-radius: 7px;
  margin: 1px 8px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
.menu-group-items .menu-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.menu-group-items .menu-item.active {
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 700;
}
.menu-group-items .menu-item .icon {
  width: 18px; text-align: center;
  opacity: .8;
}
.menu-group-items .menu-item.active .icon {
  opacity: 1;
}

/* Dashboard item (non-dropdown) */
.menu-item-single {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  margin: 0 8px 2px;
  border-radius: 8px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.menu-item-single:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.menu-item-single.active {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 700;
}
.menu-item-single .si-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.12);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.menu-item-single.active .si-icon {
  background: rgba(255,255,255,.25);
}

/* Divider tipis antar grup */
.menu-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 6px 18px;
}

/* Badge aktif indicator */
.menu-group-header .active-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  display: none;
}
.menu-group-header.has-active .active-dot { display: block; }
</style>
</head>
<body>
<div class="wrapper">

<!-- SIDEBAR -->
<aside class="sidebar" id="sidebar">
  <div class="sidebar-brand">
    <div class="brand-icon">S</div>
    <div class="brand-text">
      <div class="brand-name">SisPen Snesaka</div>
      <div class="brand-sub">Manajemen Penilaian SMP</div>
    </div>
  </div>

  <nav class="sidebar-menu">

    <!-- Dashboard (non-dropdown) -->
    <a href="<?= $B ?>/<?= $isAdmin ? 'admin.php' : 'guru.php' ?>"
       class="menu-item-single <?= $activeMenu === 'dashboard' ? 'active' : '' ?>">
      <div class="si-icon"><i class="fas fa-home"></i></div>
      Dashboard
    </a>

    <div class="menu-divider"></div>

    <?php if ($isAdmin): ?>
    <!-- Manajemen Data -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='manajemen'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-database"></i></div>
          Manajemen Data
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='manajemen'?'open':'' ?>">
        <a href="<?= $B ?>/modules/guru/list.php" class="menu-item <?= $activeMenu==='guru'?'active':'' ?>">
          <span class="icon"><i class="fas fa-chalkboard-teacher"></i></span> Data Guru
        </a>
        <a href="<?= $B ?>/modules/siswa/list.php" class="menu-item <?= $activeMenu==='siswa'?'active':'' ?>">
          <span class="icon"><i class="fas fa-users"></i></span> Data Siswa
        </a>
        <a href="<?= $B ?>/modules/kelas/list.php" class="menu-item <?= $activeMenu==='kelas'?'active':'' ?>">
          <span class="icon"><i class="fas fa-door-open"></i></span> Data Kelas
        </a>
        <a href="<?= $B ?>/modules/mapel/list.php" class="menu-item <?= $activeMenu==='mapel'?'active':'' ?>">
          <span class="icon"><i class="fas fa-book"></i></span> Mata Pelajaran
        </a>
        <a href="<?= $B ?>/modules/guru/bk_kelas.php" class="menu-item <?= $activeMenu==='bk-kelas'?'active':'' ?>">
          <span class="icon"><i class="fas fa-user-md"></i></span> Kelas Bimbingan BK
        </a>
        <a href="<?= $B ?>/modules/siswa/akun_siswa.php" class="menu-item <?= $activeMenu==='akun-siswa'?'active':'' ?>">
          <span class="icon"><i class="fas fa-user-graduate"></i></span> Akun Siswa
        </a>
      </div>
    </div>
    <?php endif; ?>

    <!-- Penilaian -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='penilaian'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-edit"></i></div>
          Penilaian
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='penilaian'?'open':'' ?>">
        <a href="<?= $B ?>/modules/nilai/input.php" class="menu-item <?= $activeMenu==='nilai-input'?'active':'' ?>">
          <span class="icon"><i class="fas fa-edit"></i></span> Input Nilai
        </a>
        <a href="<?= $B ?>/modules/nilai/report.php" class="menu-item <?= $activeMenu==='nilai-report'?'active':'' ?>">
          <span class="icon"><i class="fas fa-chart-bar"></i></span> Laporan Nilai
        </a>
      </div>
    </div>

    <!-- Absensi -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='absensi'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-calendar-check"></i></div>
          Absensi
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='absensi'?'open':'' ?>">
        <a href="<?= $B ?>/modules/absensi/input.php" class="menu-item <?= $activeMenu==='absensi'?'active':'' ?>">
          <span class="icon"><i class="fas fa-calendar-check"></i></span> Input Absensi
        </a>
        <a href="<?= $B ?>/modules/absensi/report.php" class="menu-item <?= $activeMenu==='absensi-report'?'active':'' ?>">
          <span class="icon"><i class="fas fa-clipboard-list"></i></span> Rekap Absensi
        </a>
      </div>
    </div>

    <!-- Ekstrakurikuler -->
    <?php if ($isAdmin || $_isPembina): ?>
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='ekstra'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-trophy"></i></div>
          Ekstrakurikuler
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='ekstra'?'open':'' ?>">
        <a href="<?= $B ?>/modules/ekstra/nilai.php" class="menu-item <?= $activeMenu==='ekstra'?'active':'' ?>">
          <span class="icon"><i class="fas fa-trophy"></i></span> Nilai Ekstra
        </a>
        <?php if ($isAdmin): ?>
        <a href="<?= $B ?>/modules/ekstra/list.php" class="menu-item <?= $activeMenu==='ekstra-list'?'active':'' ?>">
          <span class="icon"><i class="fas fa-list-ul"></i></span> Kelola Ekstra
        </a>
        <?php endif; ?>
      </div>
    </div>
    <?php endif; ?>

    <!-- Cetak -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='cetak'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-print"></i></div>
          Cetak
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='cetak'?'open':'' ?>">
        <a href="<?= $B ?>/<?= $isAdmin ? 'cetak_nilai.php' : 'cetak_nilai_guru.php' ?>"
           class="menu-item <?= $activeMenu==='cetak'?'active':'' ?>">
          <span class="icon"><i class="fas fa-print"></i></span> Cetak Daftar Nilai
        </a>
        <?php if ($isAdmin || $_isWaliKelas): ?>
        <a href="<?= $B ?>/modules/rapor/cetak_rapor_pts.php"
           class="menu-item <?= $activeMenu==='cetak-rapor-pts'?'active':'' ?>">
          <span class="icon"><i class="fas fa-file-alt"></i></span> Cetak Rapor PTS
        </a>
        <?php endif; ?>
      </div>
    </div>

    <!-- PSAJ -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='psaj'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-graduation-cap"></i></div>
          PSAJ Kelas 9
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='psaj'?'open':'' ?>">
        <a href="<?= $B ?>/modules/psaj/input.php" class="menu-item <?= $activeMenu==='psaj-input'?'active':'' ?>">
          <span class="icon"><i class="fas fa-edit"></i></span> Input Nilai PSAJ
        </a>
        <a href="<?= $B ?>/modules/psaj/cetak.php" class="menu-item <?= $activeMenu==='psaj-cetak'?'active':'' ?>">
          <span class="icon"><i class="fas fa-print"></i></span> Cetak Nilai PSAJ
        </a>
      </div>
    </div>

    <div class="menu-divider"></div>

    <?php if ($isAdmin): ?>
    <!-- Integrasi -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='integrasi'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-sync-alt"></i></div>
          Integrasi
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='integrasi'?'open':'' ?>">
        <a href="<?= $B ?>/modules/dapodik/sinkron.php" class="menu-item <?= $activeMenu==='dapodik'?'active':'' ?>">
          <span class="icon"><i class="fas fa-sync-alt"></i></span> Sinkron Dapodik
        </a>
      </div>
    </div>

    <!-- Pengaturan -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='pengaturan'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-cog"></i></div>
          Pengaturan
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='pengaturan'?'open':'' ?>">
        <a href="<?= $B ?>/modules/pengaturan.php" class="menu-item <?= $activeMenu==='pengaturan'?'active':'' ?>">
          <span class="icon"><i class="fas fa-cog"></i></span> Pengaturan Sekolah
        </a>
        <a href="<?= $B ?>/modules/backup/backup.php" class="menu-item <?= $activeMenu==='backup'?'active':'' ?>">
          <span class="icon"><i class="fas fa-database"></i></span> Backup & Restore
        </a>
      <a href="<?= $B ?>/modules/reset/reset.php" class="menu-item <?= $activeMenu==='backup'?'active':'' ?>">
          <span class="icon"><i class="fas fa-exclamation-triangle"></i></span> Reset Database
        </a>
      </div>
    </div>
    <?php endif; ?>

    <div class="menu-divider"></div>

    <!-- Akun -->
    <div class="menu-group">
      <div class="menu-group-header <?= $activeGroup==='akun'?'open has-active':'' ?>"
           onclick="toggleGroup(this)">
        <div class="gh-left">
          <div class="gh-icon"><i class="fas fa-user-circle"></i></div>
          Akun
          <span class="active-dot"></span>
        </div>
        <i class="fas fa-chevron-right gh-arrow"></i>
      </div>
      <div class="menu-group-items <?= $activeGroup==='akun'?'open':'' ?>">
        <?php if (!$isAdmin): ?>
        <a href="<?= $B ?>/modules/guru/profil.php" class="menu-item <?= $activeMenu==='profil'?'active':'' ?>">
          <span class="icon"><i class="fas fa-user-edit"></i></span> Profil Saya
        </a>
        <?php endif; ?>
        <a href="<?= $B ?>/logout.php" class="menu-item"
           onclick="return confirm('Yakin ingin keluar?')"
           style="color:#fca5a5;">
          <span class="icon"><i class="fas fa-sign-out-alt"></i></span> Logout
        </a>
      </div>
    </div>

  </nav>
</aside>

<!-- MAIN -->
<div class="main-content">
  <header class="topbar">
    <div class="topbar-left">
      <button id="toggleSidebar" style="cursor:pointer;font-size:15px;padding:0;">
        <i class="fas fa-bars"></i>
      </button>
      <div>
        <div class="topbar-title"><?= htmlspecialchars($pageTitle) ?></div>
        <?php if (isset($breadcrumb)): ?>
        <div class="topbar-breadcrumb">
          <i class="fas fa-home" style="font-size:10px;"></i>
          <span style="opacity:.4;">/</span>
          <?= $breadcrumb ?>
        </div>
        <?php endif; ?>
      </div>
    </div>
    <div class="topbar-right">

      <div class="topbar-datetime">
        <div class="td-date" id="tb-date">—</div>
        <div class="td-time" id="tb-time">—</div>
      </div>
      <div class="topbar-divider"></div>

      <?php if (!$isAdmin): ?>
      <a href="<?= $B ?>/modules/guru/profil.php" class="user-badge" style="text-decoration:none;" title="Edit Profil">
        <div class="avatar"><?= strtoupper(substr($_SESSION['nama'] ?? 'U', 0, 1)) ?></div>
        <div class="user-info">
          <div class="name"><?= htmlspecialchars($_SESSION['nama'] ?? '') ?></div>
          <div class="role"><?= ucfirst($_SESSION['role'] ?? '') ?> <i class="fas fa-pen" style="font-size:9px;opacity:.6;"></i></div>
        </div>
      </a>
      <?php else: ?>
      <div class="user-badge">
        <div class="avatar"><?= strtoupper(substr($_SESSION['nama'] ?? 'U', 0, 1)) ?></div>
        <div class="user-info">
          <div class="name"><?= htmlspecialchars($_SESSION['nama'] ?? '') ?></div>
          <div class="role"><?= ucfirst($_SESSION['role'] ?? '') ?></div>
        </div>
      </div>
      <?php endif; ?>

      <div class="topbar-divider"></div>

      <a href="<?= $B ?>/logout.php"
         onclick="return confirm('Yakin ingin keluar?')"
         style="display:flex;align-items:center;gap:7px;padding:0 14px;height:36px;border-radius:8px;background:rgba(220,38,38,.25);border:1px solid rgba(220,38,38,.4);color:#fca5a5;transition:all .2s;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;"
         onmouseover="this.style.background='rgba(220,38,38,.5)';this.style.borderColor='rgba(220,38,38,.7)';this.style.color='#fff';"
         onmouseout="this.style.background='rgba(220,38,38,.25)';this.style.borderColor='rgba(220,38,38,.4)';this.style.color='#fca5a5';">
        <i class="fas fa-sign-out-alt" style="font-size:13px;"></i>
        <span>Logout</span>
      </a>
    </div>
  </header>

  <main class="page-content">
    <?php
    $flash = getFlash();
    if ($flash): ?>
    <div class="alert alert-<?= $flash['type'] ?>">
      <i class="fas <?= $flash['type'] === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' ?>"></i>
      <?= htmlspecialchars($flash['message']) ?>
    </div>
    <?php endif; ?>

<script>
// Jam & tanggal real-time
(function(){
  var hr = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
  var bl = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'];
  function pad(n){ return n < 10 ? '0'+n : n; }
  function tick(){
    var d = new Date();
    document.getElementById('tb-date').textContent = hr[d.getDay()] + ', ' + d.getDate() + ' ' + bl[d.getMonth()] + ' ' + d.getFullYear();
    document.getElementById('tb-time').textContent = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
  }
  tick(); setInterval(tick, 1000);
})();

// Dropdown toggle
function toggleGroup(header) {
  var items  = header.nextElementSibling;
  var isOpen = header.classList.contains('open');
  // Tutup semua grup lain
  document.querySelectorAll('.menu-group-header').forEach(function(h) {
    if (h !== header) {
      h.classList.remove('open');
      h.nextElementSibling.classList.remove('open');
    }
  });
  // Toggle grup ini
  if (isOpen) {
    header.classList.remove('open');
    items.classList.remove('open');
  } else {
    header.classList.add('open');
    items.classList.add('open');
  }
}

// Sidebar toggle
(function(){
  var sidebar = document.getElementById('sidebar');
  var btn     = document.getElementById('toggleSidebar');
  var overlay = document.createElement('div');
  overlay.className = 'sidebar-overlay';
  document.body.appendChild(overlay);

  function isMobile(){ return window.innerWidth <= 768; }
  function open(){ sidebar.classList.add('open'); if(isMobile()) overlay.classList.add('show'); }
  function close(){ sidebar.classList.remove('open'); overlay.classList.remove('show'); }

  if(btn) btn.addEventListener('click', function(){
    if(isMobile()) { sidebar.classList.contains('open') ? close() : open(); }
    else {
      var main = document.querySelector('.main-content');
      if(sidebar.style.transform === 'translateX(-100%)'){
        sidebar.style.transform = ''; if(main) main.style.marginLeft = '';
      } else {
        sidebar.style.transform = 'translateX(-100%)'; if(main) main.style.marginLeft = '0';
      }
    }
  });
  overlay.addEventListener('click', close);
  document.querySelectorAll('.menu-item,.menu-item-single').forEach(function(i){
    i.addEventListener('click', function(){ if(isMobile()) close(); });
  });
  var tx = 0;
  document.addEventListener('touchstart', function(e){ tx = e.touches[0].clientX; }, {passive:true});
  document.addEventListener('touchend', function(e){
    var d = e.changedTouches[0].clientX - tx;
    if(!isMobile()) return;
    if(d > 60 && tx < 30) open();
    if(d < -60) close();
  }, {passive:true});
  window.addEventListener('resize', function(){
    if(!isMobile()){ overlay.classList.remove('show'); sidebar.classList.remove('open'); }
  });
})();
</script>