<?php
// index.php — Portal Digital Sekolah (auto rotate + timer + preview, Bootstrap + Icons)
$NAMA_SEKOLAH = "SMK MUHIBBAH SANDAKAN";
$LOGO = "logo.png";

function safe($s){
  return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8');
}

$pages = [
  ["file"=>"index_pengetua.php", "label"=>"Pengetua", "icon"=>"bi-person-vcard"],
  ["file"=>"index_hem.php", "label"=>"HEM", "icon"=>"bi-heart-pulse"],
  ["file"=>"index_kurikulum.php", "label"=>"Kurikulum", "icon"=>"bi-journal-text"],
  ["file"=>"index_kokurikulum.php", "label"=>"Kokurikulum", "icon"=>"bi-trophy"],
  ["file"=>"index_guru.php", "label"=>"Guru", "icon"=>"bi-people"],
  ["file"=>"index_pelajar.php", "label"=>"Pelajar", "icon"=>"bi-person-badge"],
  ["file"=>"index_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 Digital 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; font-family:Segoe UI,Arial,sans-serif;}

  header {
    background:#1976d2;
    color:#fff;
    padding:12px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 3px 8px rgba(0,0,0,.3);
  }

  header img {
    width:75px;
    height:75px;
    object-fit:contain;
  }

  header .title {
    font-size:26px;
    font-weight:800;
    text-transform:uppercase;
  }

  header .subtitle {
    font-size:15px;
    opacity:0.9;
  }

  /* NAV MENU */
  nav {background:#1565c0; padding:5px 10px;}
  nav a {
    color:#eee !important;
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 14px;
    border-radius:8px 8px 0 0;
    margin-right:6px;
    background:linear-gradient(145deg,#1e88e5,#1565c0);
    box-shadow:2px 2px 6px rgba(0,0,0,.4), -2px -2px 6px rgba(255,255,255,.05);
    transition:0.2s;
  }
  nav a:hover {
    background:linear-gradient(145deg,#2196f3,#0d47a1);
    color:#fff !important;
    transform:translateY(-2px);
  }
  nav a.active {
    background:linear-gradient(145deg,#1976d2,#0d47a1);
    font-weight:700;
    box-shadow:inset 2px 2px 6px rgba(0,0,0,.4);
  }

  iframe {
    width:100%;
    height:calc(100vh - 160px);
    border:none;
  }

  .statusbar {
    font-size:14px;
    background:#f8f9fa;
    padding:8px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
  }

  /* DARK MODE */
  body.dark {background:#121212; color:#eee;}
  body.dark header {background:#333;}
  body.dark nav {background:#222;}
  body.dark .statusbar {background:#333; color:#eee;}
</style>
</head>

<body>

<!-- HEADER TANPA BANNER -->
<header>
  <img src="<?=safe($LOGO)?>" alt="Logo" onerror="this.style.visibility='hidden'">

  <div>
    <div class="title"><?= safe($NAMA_SEKOLAH) ?></div>
    <div class="subtitle">Portal Digital Sekolah</div>
  </div>

  <div class="ms-auto d-flex align-items-center gap-2">
    <button onclick="toggleTheme()" class="btn btn-sm btn-light">🌙/☀️</button>
    <a href="admin.php" 
       target="_blank" 
       class="btn btn-sm btn-outline-light fw-bold"
       style="font-size:20px;line-height:1;">&#8942;</a>
  </div>
</header>

<!-- MENU -->
<nav id="menu" class="nav">
  <?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>

<!-- STATUS BAR -->
<div class="statusbar">
  <div>⏱️ Pertukaran dalam <span id="timer">20</span> saat</div>
  <div>➡️ Seterusnya: <span id="nextLabel"><?=$pages[1]['label']?></span></div>
</div>

<!-- IFRAME VIEWER -->
<iframe name="frame" id="frame" src="<?=$pages[0]['file']?>"></iframe>

<script>
  const pages = <?=json_encode($pages)?>;
  let idx = 0;
  let countdown = 20;
  const frame = document.getElementById("frame");
  const menuLinks = document.querySelectorAll("#menu a");
  const timerEl = document.getElementById("timer");
  const nextLabel = document.getElementById("nextLabel");

  function setActive(i){
    menuLinks.forEach((a,j)=> a.classList.toggle("active", j===i));
  }

  function rotate(){
    idx = (idx+1) % pages.length;
    frame.src = pages[idx].file;
    setActive(idx);
    countdown = 20;
    timerEl.textContent = countdown;
    nextLabel.textContent = pages[(idx+1) % pages.length].label;
  }

  // Countdown auto-rotate
  setInterval(()=>{
    countdown--;
    if(countdown<=0){ rotate(); }
    timerEl.textContent = countdown;
  },1000);

  // Manual click navigation
  menuLinks.forEach((a,i)=>{
    a.addEventListener("click",(e)=>{
      e.preventDefault();
      idx = i;
      frame.src = pages[idx].file;
      setActive(idx);
      countdown = 20;
      nextLabel.textContent = pages[(idx+1) % pages.length].label;
    });
  });

  setActive(0);

  // Dark mode
  function toggleTheme(){
    document.body.classList.toggle("dark");
    localStorage.setItem("theme",document.body.classList.contains("dark")?"dark":"light");
  }

  window.onload=function(){
    if(localStorage.getItem("theme")==="dark"){
      document.body.classList.add("dark");
    }
  };
</script>

</body>
</html>
