  <?php
  /* adminsidebar.php
    Updated: tighter spacing, larger icons, dropdown chevrons
  */
  $current = basename($_SERVER['PHP_SELF']);

/* =========================
   OPEN MENUS
========================= */

$openManagement = in_array($current, [
'users.php',
'roles.php',
'settings.php',
'add_pharmacy.php'
]);

$openInventory = in_array($current, [
'products.php',
'stock.php',
'stock_alerts.php'
]);

$openSales = in_array($current, [
'medical_representatives.php',
'daily_sales.php',
'sales_reports.php',
'unpaid_bills_approval.php'
]);

$openOrders = in_array($current, [
'new_orders.php',
'order_history.php'
]);

$openAgency = in_array($current, [
'agency_list.php',
'agency_reports.php'
]);

$openProcure = in_array($current, [
'purchase_orders.php',
'invoices.php'
]);

$openReports = in_array($current, [
'monthly_reports.php',
'custom_reports.php'
]);
  ?>
  <!-- PUT THIS INSIDE <head> -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#071127">
  <title>ERP Admin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

  :root{
  --sidebar-width: 260px;
  --sidebar-collapsed: 76px;

  --bg-1: #ffffff;
  --bg-2: #ffffff;

  --text: #111827;      /* dark black text */
  --muted: #6b7280;    /* gray text */
  --accent: #2563eb;   /* blue highlight */

  --panel: rgba(0,0,0,0.04);
  --icon-size: 48px;
  --icon-font-size: 20px;
  --radius: 10px;
}
  *{box-sizing:border-box}
  body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f5f7fb}

  /* sidebar base */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-right: 1px solid #e5e7eb;
    transition: width .22s ease, transform .18s ease;
    overflow: hidden;
    display:flex;
    flex-direction:column;
    z-index:1000;
    border-right: 1px solid rgba(255,255,255,0.03);
  }
  .sidebar.collapsed { width: var(--sidebar-collapsed); }

  /* brand */
  .brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px;
    border-bottom:1px solid rgba(255,255,255,0.03);
  }
  /* logo container */
  .logo{
    background:#ffffff;
    padding:8px 12px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
    width:100%;
    max-width:210px;
  }
  

  /* logo image */
  .logo img{
    width:180px;
    height: 70px;;
    object-fit:contain;
    display:block;
  }

  /* collapsed sidebar logo */
  .sidebar.collapsed .logo{
    padding:6px;
    max-width:50px;
  }

  .sidebar.collapsed .logo img{
    width:28px;
  }
  .brand .title {
    font-weight:700;font-size:15px;line-height:1;
  }
  .brand .subtitle { font-size:12px;color:var(--muted); }

  /* hide title when collapsed */
  .sidebar.collapsed .brand .title,
  .sidebar.collapsed .brand .subtitle { display:none }

  /* controls */
  .controls { margin-left:auto; display:flex; gap:8px; align-items:center; }
  .icon-btn{
    background:transparent;border:0;color:inherit;padding:6px;border-radius:8px;cursor:pointer;
  }
  .icon-btn:hover{ background:var(--panel) }

  /* search */
  .search { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.03); }
  .search input[type="search"]{
    width:100%;padding:8px 10px;border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb;;
    color:#111827;outline:none;font-size:13px;
  }
  .sidebar.collapsed .search{ display:none }

  /* nav list - tighter spacing */
  .nav { padding:8px; overflow:auto; flex:1; }
  .nav ul{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0px; } /* gap reduced from 8 -> 6 */

  /* item padding reduced slightly */
  .nav a, .nav button.menu-toggle{
    display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:8px;text-decoration:none;color:inherit;
    background:transparent;border:0;cursor:pointer;font-size:14px;width:100%;
    transition: background .12s, transform .08s;
  }
.nav a:hover, .nav button.menu-toggle:hover{
  background:#f1f5f9;
}
  /* bigger icon container */
  .nav .icon {
    width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
    background:transparent;flex:0 0 var(--icon-size);color:#374151;
    transition: background .12s, color .12s;
  }
  /* increase font-size of Font Awesome icons inside icon box */
  .nav .icon i { font-size: var(--icon-font-size); }

  /* label hide on collapse */
  .sidebar.collapsed .label { display:none }
  .muted { color:var(--muted);font-size:12px }

  /* active link */
.nav a.active{
  background:#e0edff;
  color:#1d4ed8;
  font-weight:600;
  box-shadow: inset 3px 0 0 var(--accent);
}
  /* submenu: pull a bit closer to parent */
  .submenu {
    margin-top:6px;margin-left:42px;margin-right:10px;display:none;flex-direction:column;gap:6px; /* left reduced from 46 -> 42 */
  }
  .submenu a{ padding:7px 12px;border-radius:8px;font-size:13px;color:#6b7280;; display:flex; align-items:center; gap:8px; }
  .submenu a:hover{background:#f1f5f9;
  color:#111827; }
  .submenu.show{ display:flex; }

  /* chevron for dropdowns */
  .menu-toggle .chev {
    margin-left:auto;
    transition: transform .18s ease;
    color:var(--muted);
    font-size:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* rotate when expanded (JS sets aria-expanded) */
  .menu-toggle[aria-expanded="true"] .chev {
    transform: rotate(180deg);
    color: var(--text);
  }

  /* footer */
  .footer {
    padding:12px 14px;border-top:1px solid rgba(255,255,255,0.03);display:flex;gap:12px;align-items:center;
  }
  .user-avatar{width:44px;height:44px;border-radius:8px;background:white;color:#06203a;display:flex;align-items:center;justify-content:center;font-weight:700}
  .sidebar.collapsed .username{ display:none }
  .signout { margin-left:auto;color:#ffb4b4; text-decoration:none }

  /* mobile */
  .mobile-toggle { display:none; position:fixed; left:14px; top:14px; z-index:1100;color:#000; }
  @media (max-width:880px){
    .sidebar{ transform: translateX(-8px); position:fixed; transition: transform .2s ease; }
    .sidebar.hidden { transform: translateX(-120%); }
    .mobile-toggle { display:block; }
    .overlay { display:none }
    .overlay.show { position:fixed; inset:0;background:rgba(2,6,23,0.45); z-index:1050; display:block }
    body.noscroll { overflow:hidden }
  }

  /* scrollbar */
  .nav::-webkit-scrollbar{width:8px}
  .nav::-webkit-scrollbar-thumb{background: rgba(255,255,255,0.04); border-radius:8px}
  </style>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <!-- mobile hamburger -->
  <button class="mobile-toggle icon-btn" aria-label="Open menu" id="mobileOpenBtn" title="Menu" >
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M4 7h16M4 12h16M4 17h16" stroke="#000" stroke-width="1.6" stroke-linecap="round"/>
    </svg>
  </button>

  <aside class="sidebar" id="sidebar" aria-label="Main sidebar">
  <div class="brand">
      <div class="logo">
          <img src="../logoB.png" alt="ERP Logo">
      </div>
  </div>

      <div class="controls" role="toolbar" aria-label="Sidebar controls" style="margin-left:auto">
        <button class="icon-btn" id="collapseBtn" aria-pressed="false" title="Collapse sidebar">
          <!-- chevron icon -->
        
        </button>
      </div>
    </div>

    <div class="search">
      <input id="menuSearch" type="search" placeholder="Search menu..." aria-label="Search menu">
    </div>

    <nav class="nav" role="navigation" aria-label="Main menu">
  <ul>
<li>
<a href="admin_dashboard.php" class="<?php echo ($current=='dashboard.php')?'active':'' ?>">
<span class="icon"><i class="fa-solid fa-house"></i></span>
<span class="label">Dashboard</span>
</a>
</li>

<!-- Management -->
<li>
<button class="menu-toggle" data-target="menu-manage" aria-expanded="<?php echo $openManagement ? 'true':'false' ?>">
  <span class="icon"><i class="fa-solid fa-user-gear"></i></span>
  <span class="label">Management</span>
  <i class="fa-solid fa-chevron-down chev"></i>
</button>

<div id="menu-manage" class="submenu <?php echo $openManagement ? 'show':'' ?>">
  <a href="roles.php"><i class="fa-solid fa-shield-halved"></i> Roles & Permissions</a>
  <a href="admin_product_approval.php"><i class="fa-solid fa-circle-check"></i> Product Approval</a>
  <a href="admin_moh_submissions.php"><i class="fa-solid fa-file-circle-check"></i> MOH Submission</a>
  </div>
</li>

<!-- Inventory -->
<li>
<button class="menu-toggle" data-target="menu-inv" aria-expanded="<?php echo $openInventory ? 'true':'false' ?>">
  <span class="icon"><i class="fa-solid fa-cubes"></i></span>
  <span class="label">Inventory</span>
  <i class="fa-solid fa-chevron-down chev"></i>
</button>

<div id="menu-inv" class="submenu <?php echo $openInventory ? 'show':'' ?>">

  <a href="products.php">
    <i class="fa-solid fa-box-open"></i>
    Commercial Product
  </a>

  <a href="manage-sample-product.php">
    <i class="fa-solid fa-vial"></i>
    Sample Product
  </a>
</div>
</li>

<!-- Sales -->
<li>
<button class="menu-toggle" data-target="menu-sales" aria-expanded="<?php echo $openSales ? 'true':'false' ?>">
  <span class="icon"><i class="fa-solid fa-chart-simple"></i></span>
  <span class="label">Sales</span>
  <i class="fa-solid fa-chevron-down chev"></i>
</button>

<div id="menu-sales" class="submenu <?php echo $openSales ? 'show':'' ?>">
  <a href="sales_reports.php"><i class="fa-solid fa-chart-pie"></i> Sales Reports</a>
  <a href="unpaid_bills_approval.php">
    <i class="fa-solid fa-circle-check"></i> Unpaid Bills 
  </a>
</div>
</li>

<!-- Orders -->
<li>

<button class="menu-toggle"
        data-target="menu-orders"
        aria-expanded="<?php echo $openOrders ? 'true':'false' ?>">

  <span class="icon">
    <i class="fa-solid fa-cart-shopping"></i>
  </span>

  <span class="label">
    Orders
  </span>

  <i class="fa-solid fa-chevron-down chev"></i>

</button>

<div id="menu-orders"
     class="submenu <?php echo $openOrders ? 'show':'' ?>">

  <a href="new_orders.php">

    <i class="fa-solid fa-plus"></i>

    New Order

  </a>

  <a href="order_history.php">

    <i class="fa-solid fa-clock-rotate-left"></i>

    Order History

  </a>

</div>

</li>
<!-- Agency -->
<li>
<button class="menu-toggle" data-target="menu-agency" aria-expanded="<?php echo $openAgency ? 'true':'false' ?>">
  <span class="icon"><i class="fa-solid fa-city"></i></span>
  <span class="label">Agency</span>
  <i class="fa-solid fa-chevron-down chev"></i>
</button>

<div id="menu-agency" class="submenu <?php echo $openAgency ? 'show':'' ?>">
  <a href="agency_list.php"><i class="fa-solid fa-building-circle-check"></i> All Agency </a>
  <a href="agency_reports.php"><i class="fa-solid fa-file-lines"></i> Agency Reports</a>
  <a href="agency_requests.php"><i class="fa-solid fa-user-plus"></i> Agency Requests</a>
</div>
</li>

<!-- Stock Alert -->
<li>
<button class="menu-toggle" data-target="menu-stock-alert">
  <span class="icon">
    <i class="fa-solid fa-bell"></i>
  </span>
  <span class="label">Stock Alert</span>
  <i class="fa-solid fa-chevron-down chev"></i>
</button>

<div id="menu-stock-alert" class="submenu">
  <a href="commercial-stock.php">
    <i class="fa-solid fa-boxes-packing"></i> Commercial Stock
  </a>
  <a href="sample-stock.php">
    <i class="fa-solid fa-flask-vial"></i> Sample Stock
  </a>
</div>
</li>
<li>
<a href="doctors.php" class="<?php echo ($current=='doctors.php')?'active':'' ?>">
  <span class="icon">
    <i class="fa-solid fa-user-plus"></i>
  </span>
  <span class="label">Add Doctor</span>
</a>
</li>
<li>
<a href="add_pharmacy.php" class="<?php echo ($current=='add_pharmacy.php')?'active':'' ?>">
  <span class="icon">
    <i class="fa-solid fa-prescription-bottle-medical"></i>
  </span>
  <span class="label">Add Pharmacy</span>
</a>
</li>
<li>
<a href="Addcountry.php" class="<?php echo ($current=='Addcountry.php')?'active':'' ?>">
  <span class="icon">
    <i class="fa-solid fa-globe"></i>
  </span>
  <span class="label">Country</span>
</a>
</li>
<li>
<a href="doctor_reports.php" class="<?php echo ($current=='doctor_reports.php')?'active':'' ?>">
  <span class="icon">
    <i class="fa-solid fa-user-doctor"></i>
  </span>
  <span class="label">Doctor Reports</span>
</a>
</li>
<!--<li>-->
<!--<a href="admin_discount.php" class="<?php echo ($current=='admin_discount.php')?'active':'' ?>">-->
<!--  <span class="icon">-->
<!--    <i class="fa-solid fa-tags"></i>-->
<!--  </span>-->
<!--  <span class="label">Discount</span>-->
<!--</a>-->
<!--</li>-->

<!--<li>-->
<!--<a href="admin_due_alert.php" class="<?php echo ($current=='admin_due_alert.php')?'active':'' ?>">-->
<!--  <span class="icon">-->
<!--    <i class="fa-solid fa-file-invoice-dollar"></i>-->
<!--  </span>-->
<!--  <span class="label">Due Alerts</span>-->
<!--</a>-->
<!--</li>-->

<!-- Reports -->
<li>
<button class="menu-toggle" data-target="menu-rep" aria-expanded="<?php echo $openReports ? 'true':'false' ?>">
  <span class="icon"><i class="fa-solid fa-chart-pie"></i></span>
  <span class="label">Reports</span>
  <i class="fa-solid fa-chevron-down chev"></i>
</button>

<div id="menu-rep" class="submenu <?php echo $openReports ? 'show':'' ?>">
  <a href="monthly_reports.php"><i class="fa-solid fa-calendar-days"></i> Monthly Summary</a>
  <a href="custom_reports.php"><i class="fa-solid fa-chart-area"></i> Custom Reports</a>
</div>
</li>

  </ul>
  </nav>

  
  </aside>

  <!-- overlay for mobile -->
  <div class="overlay" id="overlay" style="display:none"></div>

  <script>
  (function(){
    const sidebar = document.getElementById('sidebar');
    const collapseBtn = document.getElementById('collapseBtn');
    const mobileOpenBtn = document.getElementById('mobileOpenBtn');
    const overlay = document.getElementById('overlay');
    const search = document.getElementById('menuSearch');

    // restore collapsed state
    if(localStorage.getItem('sidebar-collapsed') === 'true') {
      sidebar.classList.add('collapsed');
      collapseBtn && collapseBtn.setAttribute('aria-pressed','true');
    }

    collapseBtn && collapseBtn.addEventListener('click', function(){
      const collapsed = sidebar.classList.toggle('collapsed');
      collapseBtn.setAttribute('aria-pressed', collapsed ? 'true' : 'false');
      localStorage.setItem('sidebar-collapsed', collapsed ? 'true' : 'false');
    });

    // menu toggles
    document.querySelectorAll('.menu-toggle').forEach(btn=>{
      btn.addEventListener('click', () => {
        const id = btn.getAttribute('data-target');
        const el = document.getElementById(id);
        const isShown = el.classList.toggle('show');
        btn.setAttribute('aria-expanded', isShown ? 'true' : 'false');
      });
    });

    // mobile open/close
    function openMobile(){
      sidebar.classList.remove('hidden');
      overlay.classList.add('show');
      document.body.classList.add('noscroll');
    }
    function closeMobile(){
      sidebar.classList.add('hidden');
      overlay.classList.remove('show');
      document.body.classList.remove('noscroll');
    }

    mobileOpenBtn && mobileOpenBtn.addEventListener('click', ()=>{
      if(sidebar.classList.contains('hidden')) openMobile(); else closeMobile();
    });
    overlay && overlay.addEventListener('click', closeMobile);

    // search filter
    search && search.addEventListener('input', function(){
      const q = this.value.trim().toLowerCase();
      document.querySelectorAll('.nav ul li').forEach(li=>{
        const text = (li.textContent || li.innerText).toLowerCase();
        if(!q) { li.style.display = ''; return; }
        li.style.display = text.includes(q) ? '' : 'none';
      });
    });

    // keyboard accessible: toggle submenu with Enter/Space when focused
    document.querySelectorAll('.menu-toggle').forEach(btn=>{
      btn.addEventListener('keydown', (e)=>{
        if(e.key === 'Enter' || e.key === ' ') {
          e.preventDefault(); btn.click();
        }
      });
    });

    // collapse sidebar initially on small screens
    if(window.innerWidth <= 880) {
      sidebar.classList.add('hidden');
    }

  })();
  </script>