<?php
$current = basename($_SERVER['PHP_SELF']);
?>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Agency Panel</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<style>
:root{
  --sidebar-width:260px;

  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;
  --border:#e5e7eb;
}

body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

/* SIDEBAR */

.sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:var(--sidebar-width);
  background:#ffffff;
  color:var(--text);
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  border-right:1px solid var(--border);
  z-index:1000;
}

/* BRAND */

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  border-bottom:1px solid var(--border);
}

.logo{
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  width:100%;
  max-width:210px;
}

.logo img{
  width:180px;
  height:70px;
  object-fit:contain;
}

/* SEARCH */

.search{
  padding:10px;
  border-bottom:1px solid var(--border);
}

.search input{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  background:#f9fafb;
  color:#111827;
  border:1px solid var(--border);
  outline:none;
  font-size:13px;
}

/* MENU */

.menu{
  flex:1;
  overflow:auto;
  padding:8px;
}

.menu ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.menu a,
.menu button{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border:0;
  background:none;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
}

/* REMOVE HOVER EFFECT */

.menu a:hover,
.menu button:hover{
  background:transparent;
}

/* ICON */

.icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#4b5563;
}

.icon i{
  font-size:17px;
}

/* ACTIVE (LIKE RA SIDEBAR) */
.menu a:hover,
.menu button:hover{
  background:#e5e7eb;
  border-radius:10px;
}

.menu a{
  transition:all 0.2s ease;
}

/* SUBMENU */

.submenu{
  display:none;
  flex-direction:column;
  margin-left:34px;
  gap:4px;
}

.submenu.show{
  display:flex;
}

.submenu a{
  font-size:13px;
  padding:6px 10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
}

/* REMOVE SUBMENU HOVER */

.submenu a:hover{
  background:transparent;
  color:var(--text);
}

/* SUBMENU ICON ALIGN */

.submenu a i{
  width:18px;
  text-align:center;
}

/* MOBILE */

.mobile-toggle{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:1100;
  background:none;
  border:none;
  color:#111827;
  font-size:22px;
}

.overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  z-index:900;
}

@media(max-width:880px){

  .sidebar{
    transform:translateX(-110%);
    transition:transform .25s ease;
  }

  .sidebar.show{
    transform:translateX(0);
  }

  .mobile-toggle{
    display:block;
  }

  .overlay.show{
    display:block;
  }

  body.noscroll{
    overflow:hidden;
  }
}

/* SCROLLBAR */

.menu::-webkit-scrollbar{
  width:6px;
}

.menu::-webkit-scrollbar-thumb{
  background:#e5e7eb;
  border-radius:8px;
}
</style>

<button class="mobile-toggle" id="mobileBtn">
<i class="fa fa-bars"></i>
</button>

<aside class="sidebar" id="sidebar">

<div class="brand">
<div class="logo">
<img src="../logoB.png">
</div>
</div>

<div class="search">
<input type="search" id="menuSearch" placeholder="Search menu">
</div>
<nav class="menu">

<ul>

<!-- DASHBOARD -->
<li>
<a href="agency_dashboard.php" class="<?php if($current=='agency_dashboard.php') echo 'active'; ?>">
<span class="icon"><i class="fa-solid fa-house"></i></span>
<span>Dashboard</span>
</a>
</li>

<!-- PRODUCT -->
<li>

<button class="menu-toggle" data-target="productMenu">
<span class="icon"><i class="fa-solid fa-cube"></i></span>
<span>Product</span>
<i class="fa fa-chevron-down" style="margin-left:auto"></i>
</button>

<div id="productMenu" class="submenu">
<a href="all-product.php">
  <i class="fa-solid fa-boxes-stacked" style="width:18px;margin-right:8px;"></i>
  Commercial Product
</a>

<a href="sample-product.php">
  <i class="fa-solid fa-vial" style="width:18px;margin-right:8px;"></i>
  Sample Product
</a>
</div>

</li>

<!-- SOLD PRODUCT -->
<li>

<button class="menu-toggle" data-target="soldMenu">
<span class="icon"><i class="fa-solid fa-chart-line"></i></span>
<span>Sold Product</span>
<i class="fa fa-chevron-down" style="margin-left:auto"></i>
</button>

<div id="soldMenu" class="submenu">

<a href="paid-bills.php">
  <i class="fa-solid fa-circle-check" style="margin-right:8px;"></i>
  Paid Bills
</a>

<a href="unpaid-bills.php">
  <i class="fa-solid fa-clock" style="margin-right:8px;"></i>
  Unpaid Bills
</a>
</div>

</li>

<li>

<button class="menu-toggle" data-target="stockMenu">
<span class="icon"><i class="fa-solid fa-bell"></i></i></span>
<span>Stock Alert</span>
<i class="fa fa-chevron-down" style="margin-left:auto"></i>
</button>

<div id="stockMenu" class="submenu">

<a href="commercial-stock.php">
  <i class="fa-solid fa-boxes-stacked" style="width:18px;margin-right:8px;"></i>
  Commercial Stock
</a>

<a href="sample-stock.php">
  <i class="fa-solid fa-flask-vial" style="width:18px;margin-right:8px;"></i>
  Sample Stock
</a>

</div>

</li>
<!-- SALES MANAGER -->
<li>
<a href="approve_sales_managers.php">
<span class="icon"><i class="fa-solid fa-user-tie"></i></span>
<span>Sales Manager</span>
</a>
</li>
<!-- WHOLESALER -->
<li>
<a href="wholesaler.php">
<span class="icon"><i class="fa-solid fa-warehouse"></i></span>
<span>Wholesaler</span>
</a>
</li>

<!-- MEDICAL REPRESENTATIVE -->
<li>
<a href="medical-representative.php">
<span class="icon"><i class="fa-solid fa-user"></i></span>
<span>Medical Representative</span>
</a>
</li>

<li class="menu-item">
    <a href="expire-alert.php" class="menu-link">
        <span class="icon"><i class="fa-solid fa-clock"></i></span>
        <span class="menu-text">Expire Alerts</span>
    </a>
</li>
<!-- REPORTS -->

<li>
<a href="reports.php" class="<?php if($current=='reports.php') echo 'active'; ?>">
<span class="icon"><i class="fa-solid fa-chart-column"></i></span>
<span>Reports</span>
</a>
</li>

</ul>
</nav>

</aside>

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

<script>

const sidebar = document.getElementById("sidebar");
const mobileBtn = document.getElementById("mobileBtn");
const overlay = document.getElementById("overlay");
const searchInput = document.getElementById("menuSearch");

/* MOBILE MENU */

mobileBtn.onclick = () => {

sidebar.classList.toggle("show");
overlay.classList.toggle("show");
document.body.classList.toggle("noscroll");

};

overlay.onclick = () => {

sidebar.classList.remove("show");
overlay.classList.remove("show");
document.body.classList.remove("noscroll");

};

/* SUBMENU */

document.querySelectorAll(".menu-toggle").forEach(btn => {

btn.addEventListener("click", function(){

const target = document.getElementById(this.dataset.target);

if(target){
target.classList.toggle("show");
}

});

});

/* SEARCH */

searchInput.addEventListener("input", function(){

const value = this.value.toLowerCase();

document.querySelectorAll(".menu li").forEach(item => {

const text = item.innerText.toLowerCase();

item.style.display = text.includes(value) ? "" : "none";

});

});

</script>