<?php
// admin.php — Portal Admin Sekolah (3D Sidebar + Icons + Dark Default)
$NAMA_SEKOLAH = "SMK MUHIBBAH SANDAKAN";
$LOGO = "logo.png";
$pages = [
  ["file"=>"admin_hem.php", "label"=>"HEM", "icon"=>"bi-house-heart"],
  ["file"=>"admin_kurikulum.php", "label"=>"Kurikulum", "icon"=>"bi-journal-text"],
  ["file"=>"admin_kokurikulum.php", "label"=>"Kokurikulum", "icon"=>"bi-trophy"],
  ["file"=>"admin_guru.php", "label"=>"Guru", "icon"=>"bi-people"],
  ["file"=>"admin_pelajar.php", "label"=>"Pelajar", "icon"=>"bi-person-badge"],
  ["file"=>"admin_kelas.php", "label"=>"Kelas", "icon"=>"bi-building"]
];
?>
<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Portal Admin Sekolah</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<style>
  body {
    margin:0; height:100vh; display:flex; font-family:Segoe UI,Arial,sans-serif;
  }
  .sidebar {
    width:240px; background:#1e1e2f; color:#fff; display:flex; flex-direction:column;
    position:fixed; top:0; bottom:0; left:0; z-index:1000;
    box-shadow: 4px 0 12px rgba(0,0,0,.6);
  }
  .sidebar header {
    padding:16px; display:flex; align-items:center; gap:10px;
    background:linear-gradient(145deg,#2d2d44,#1a1a2e);
    box-shadow: inset 2px 2px 6px rgba(0,0,0,.6), inset -2px -2px 6px rgba(255,255,255,.05);
  }
  .sidebar header img {width:40px; height:40px; object-fit:contain;}
  .sidebar header .title {font-weight:700; font-size:15px; line-height:1.2;}
  .sidebar nav {flex:1; overflow-y:auto; padding-top:10px;}
  .sidebar nav a {
    color:#ccc; padding:12px 16px; text-decoration:none; display:flex; align-items:center; gap:10px;
    border-radius:8px; margin:4px 8px; font-weight:500; transition:all .2s;
    background:linear-gradient(145deg,#2a2a40,#1a1a2e);
    box-shadow: 3px 3px 6px rgba(0,0,0,.7), -2px -2px 5px rgba(255,255,255,.05);
  }
  .sidebar nav a:hover {
    background:linear-gradient(145deg,#33334d,#202038);
    color:#fff; transform:translateY(-2px);
    box-shadow: 2px 2px 8px rgba(0,0,0,.9), -2px -2px 6px rgba(255,255,255,.08);
  }
  .sidebar nav a.active {
    background:linear-gradient(145deg,#1976d2,#0d47a1);
    color:#fff; font-weight:600;
    box-shadow: inset 2px 2px 6px rgba(0,0,0,.6), inset -2px -2px 6px rgba(255,255,255,.1);
  }
  
  .main {
    flex:1; display:flex; flex-direction:column; min-width:0;
    margin-left:240px; /* offset sidebar */
  }
  .main header {
    padding:12px; background:#333; color:#fff; font-size:18px; font-weight:600;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  iframe {flex:1; border:none; width:100%;}

  body.dark {background:#121212; color:#eee;}
</style>
</head>
<body class="dark">

<div class="sidebar">
  <header>
    <img src="<?=$LOGO?>" alt="Logo" onerror="this.style.visibility='hidden'">
    <div class="title"><?=$NAMA_SEKOLAH?><br><small>Admin Panel</small></div>
  </header>
  <nav id="menu" class="nav flex-column">
    <?php foreach($pages as $p): ?>
      <a class="nav-link" href="<?=$p['file']?>" target="frame">
        <i class="bi <?=$p['icon']?>"></i> <?=$p['label']?>
      </a>
    <?php endforeach; ?>
  </nav>
</div>

<div class="main">
  <header id="pageTitle">
    <span>Admin — <?=$pages[0]['label']?></span>
    <div class="d-flex gap-2">
      <a href="index.php" target="_blank" class="btn btn-sm btn-warning">🌐 Lihat Portal</a>
      <!--button onclick="toggleTheme()" class="btn btn-sm btn-outline-light">🌙/☀️</button-->
    </div>
  </header>
  <iframe name="frame" id="frame" src="<?=$pages[0]['file']?>"></iframe>
</div>

<script>
  const pages = <?=json_encode($pages)?>;
  const menuLinks = document.querySelectorAll("#menu a");
  const pageTitle = document.getElementById("pageTitle").querySelector("span");

  function setActive(i){
    menuLinks.forEach((a,j)=> a.classList.toggle("active", j===i));
    pageTitle.textContent = "Admin — " + pages[i].label;
  }

  menuLinks.forEach((a,i)=>{
    a.addEventListener("click",()=> setActive(i));
  });

  setActive(0);

  function toggleTheme(){
    document.body.classList.toggle("dark");
    localStorage.setItem("theme",document.body.classList.contains("dark")?"dark":"light");
  }
  window.onload=function(){
    if(localStorage.getItem("theme")==="light"){document.body.classList.remove("dark");}
  };
</script>

</body>
</html>
