<?php
if (session_status() === PHP_SESSION_NONE) session_start();

$active = $active ?? 'dashboard';
$adminName = $_SESSION['admin_username'] ?? 'Admin';

function nav_active($key, $active){ return $key === $active ? 'active' : ''; }
function nav_open($group, $active){
  $map = [
    'staff'  => ['staff_all','staff_active','staff_banned','staff_create'],
    'branch' => ['branch_active','branch_banned','branch_create'],
  ];
  return (isset($map[$group]) && in_array($active, $map[$group], true)) ? 'open' : '';
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" href="assets/css/nav.css">
  <link rel="stylesheet" href="assets/css/home.css">
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700;900&display=swap" rel="stylesheet">

  <title>Gas Admin</title>
</head>

<body>
<div class="layout">
  <div class="overlay" id="overlay"></div>

  <aside class="side" id="side">
    <div class="brand">
      <div class="mark">GS</div>
      <div>
        <h1>Gas Admin</h1>
        <p>Secure Control Center</p>
      </div>
    </div>

    <nav class="menu">
      <a class="link <?php echo nav_active('dashboard',$active); ?>" href="dashboard.php">
        <span>Dashboard</span><span class="pill">HOME</span>
      </a>

      <div class="drop <?php echo nav_open('staff',$active); ?>">
        <button class="drop-btn" type="button" aria-expanded="<?php echo nav_open('staff',$active) ? 'true' : 'false'; ?>">
          <span>Manage Staffs</span><span class="drop-arrow">▾</span>
        </button>
        <div class="drop-menu">
          <a class="sublink <?php echo nav_active('staff_all',$active); ?>" href="staffs.php">All Staffs</a>
          <a class="sublink <?php echo nav_active('staff_active',$active); ?>" href="staffs-active.php">Active Staffs</a>
          <a class="sublink <?php echo nav_active('staff_banned',$active); ?>" href="staffs-banned.php">Banned Staffs</a>
          <a class="sublink <?php echo nav_active('staff_create',$active); ?>" href="create-staff.php">Create Staff</a>
        </div>
      </div>

      <div class="drop <?php echo nav_open('branch',$active); ?>">
        <button class="drop-btn" type="button" aria-expanded="<?php echo nav_open('branch',$active) ? 'true' : 'false'; ?>">
          <span>Manage Branches</span><span class="drop-arrow">▾</span>
        </button>
        <div class="drop-menu">
          <a class="sublink <?php echo nav_active('branch_active',$active); ?>" href="branches-active.php">Active Branches</a>
          <a class="sublink <?php echo nav_active('branch_banned',$active); ?>" href="branches-banned.php">Banned Branches</a>
          <a class="sublink <?php echo nav_active('branch_create',$active); ?>" href="branches-create.php">Create Branch</a>
        </div>
      </div>

      <a class="link <?php echo nav_active('settings',$active); ?>" href="site-settings.php">
        <span>Site Settings</span><span class="pill">CFG</span>
      </a>

      <a class="link" href="logout.php">
        <span>Log Out</span><span class="pill">EXIT</span>
      </a>
    </nav>

    <div class="sidebox">
      <p class="t">Logged in as</p>
      <p class="s"><?php echo htmlspecialchars((string)$adminName); ?></p>
    </div>
  </aside>

  <div class="main">
    <header class="topbar">
      <div class="topbar-left">
        <button class="topbar-toggle" id="toggleSide" type="button" aria-label="Toggle menu">☰</button>
        <div class="topbar-brand">
          <div class="topbar-mark">GS</div>
          <div class="topbar-title">
            <div class="t1">Gas Admin Dashboard</div>
            <div class="t2">Secure Admin</div>
          </div>
        </div>
      </div>

      <div class="topbar-right">
        <div class="topbar-user">
          <div class="u1">Admin</div>
          <div class="u2"><?php echo htmlspecialchars((string)$adminName); ?></div>
        </div>
       
      </div>
    </header>

    <!-- PAGE CONTENT STARTS AFTER THIS LINE -->
    <main class="content">

<script>
(function(){
  const side = document.getElementById('side');
  const overlay = document.getElementById('overlay');
  const toggle = document.getElementById('toggleSide');

  function openSide(){
    side.classList.add('open');
    overlay.classList.add('show');
    document.body.style.overflow = 'hidden';
  }
  function closeSide(){
    side.classList.remove('open');
    overlay.classList.remove('show');
    document.body.style.overflow = '';
  }

  // Toggle sidebar
  if(toggle){
    toggle.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      side.classList.contains('open') ? closeSide() : openSide();
    }, {passive:false});
  }

  // Click overlay closes
  if(overlay){
    overlay.addEventListener('click', (e) => {
      e.preventDefault();
      closeSide();
    }, {passive:false});
  }

  // Prevent clicks inside sidebar from closing
  if(side){
    side.addEventListener('click', (e) => {
      e.stopPropagation();
    });
  }

  // Dropdowns
  document.querySelectorAll('.drop-btn').forEach(btn=>{
    btn.addEventListener('click', (e)=>{
      e.preventDefault();
      e.stopPropagation();
      const p = btn.closest('.drop');
      if(!p) return;
      p.classList.toggle('open');
      btn.setAttribute('aria-expanded', p.classList.contains('open') ? 'true' : 'false');
    }, {passive:false});
  });

  // Close on ESC
  document.addEventListener('keydown', (e)=>{
    if(e.key === 'Escape') closeSide();
  });

  // Close sidebar on mobile when clicking any link
  document.querySelectorAll('.side a').forEach(a=>{
    a.addEventListener('click', ()=>{
      if(window.matchMedia('(max-width: 1100px)').matches) closeSide();
    });
  });

})();
</script>
