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

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

<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;

  --bg1:#ffffff;
  --bg2:#ffffff;

  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;

  --panel:#f3f4f6;
}

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:#111827;
display:flex;
flex-direction:column;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
z-index:1000;
border-right:1px solid #e5e7eb;
}
*{
box-sizing:border-box;
}
/* BRAND */

.brand{
display:flex;
align-items:center;
justify-content:center;
padding:18px;
border-bottom:1px solid rgba(255,255,255,.05);
font-size:18px;
font-weight:700;
}

/* SEARCH */

.search{
padding:10px;
border-bottom:1px solid rgba(255,255,255,.05);
}

.search input{
width:100%;
padding:8px 10px;
border-radius:8px;
  background:#f9fafb;
  color:#111827;
  border:1px solid #e5e7eb;
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{
display:flex;
align-items:center;
gap:12px;
width:100%;
padding:12px 14px;
border-radius:8px;
border:0;
background:none;
color:#111827;
text-decoration:none;
cursor:pointer;
font-size:14px;
transition:.15s;
}

/* ICON */

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

.icon i{
  font-size:17px;
}
.menu a.active{
  background:transparent;
  border-left:none;
  font-weight:600;
}
.menu a:hover{
  background:#e5e7eb;
}
/* MOBILE BUTTON */

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

.logo{
background:#fff;
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 img{
width:180px;
height:70px;
object-fit:contain;
}

.dropdown .submenu{
display:none;
flex-direction:column;
padding-left:20px;
}

.dropdown.active .submenu{
display:flex;
}

/* OVERLAY */
.overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
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;
}

}
.dropdown .submenu {
    display: none;
    list-style: none;
    padding-left: 15px;
}

.submenu li a.active {
    font-weight: bold;
}
</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" alt="Logo">
</div>
</div>

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

<nav class="menu">

<ul>

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




<!-- PRODUCT DROPDOWN -->

<li class="dropdown">

<a href="#">
<span class="icon"><i class="fa-solid fa-cube"></i></span>
<span>Product</span>
<i class="fa fa-chevron-down" style="margin-left:auto;font-size:12px;"></i>
</a>

<ul class="submenu">

<li>
<a href="add_product.php">
<span class="icon"><i class="fa fa-plus"></i></span>
<span>Add Commercial Product</span>
</a>
</li>
<li>
<a href="sample-product.php">
<span class="icon"><i class="fa fa-plus"></i></span>
<span>Add Sample Product</span>
</a>
</li>

<li>


<a href="manage_product.php">
<span class="icon"><i class="fa fa-list"></i></span>
<span>Manage Commertial Product</span>
</a>
</li>
<li>
<a href="manage-sample-product.php">
<span class="icon"><i class="fa fa-list"></i></span>
<span>Manage Sample Product</span>
</a>
</li>

</ul>

</li>

<!-- DOSSIER DROPDOWN -->

<li class="dropdown">

<a href="#">
<span class="icon"><i class="fa-solid fa-folder-open"></i></span>
<span>Dossier List</span>
<i class="fa fa-chevron-down" style="margin-left:auto;font-size:12px;"></i>
</a>

<ul class="submenu">

<li>
<a href="agency_admin.php">
<span class="icon"><i class="fa fa-building"></i></span>
<span>UnRegistered Products</span>
</a>
</li>

<li>
<a href="moh_submission.php">
<span class="icon"><i class="fa fa-paper-plane"></i></span>
<span>MOH To Government Submission</span>
</a>
</li>

<li>
<a href="register_product.php">
<span class="icon"><i class="fa fa-registered"></i></span>
<span>Register Product</span>
</a>
</li>


<li>
<a href="view_variations.php" class="<?php if($current=='view_variations.php') echo 'active'; ?>">
<span class="icon"><i class="fa fa-code-branch"></i></span>
<span>Variation Module</span>
</a>
</li>
</ul>

</li>


<li class="dropdown">
    <a href="#" class="<?php if($current=='stock-limit.php' || $current=='commercial-stock.php' || $current=='sample-stock.php') echo 'active'; ?>">
        <span class="icon"><i class="fa-solid fa-boxes-stacked"></i></span>
        <span>Stock</span>
    </a>

    <ul class="submenu">
        <li>
            <a href="commercial-stock.php" class="<?php if($current=='commercial-stock.php') echo 'active'; ?>">
                <span class="icon"><i class="fa fa-warehouse"></i></span>
                <span>Commercial Stock</span>
            </a>
        </li>
        <li>
            <a href="sample-stock.php" class="<?php if($current=='sample-stock.php') echo 'active'; ?>">
                <span class="icon"><i class="fa fa-box-open"></i></span>
                <span>Sample Stock</span>
            </a>
        </li>
    </ul>
</li>
<li>
<a href="reports.php" class="<?php if($current=='reports.php') echo 'active'; ?>">
<span class="icon"><i class="fa 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");

};


/* SEARCH MENU */

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

const value = this.value.toLowerCase();

document.querySelectorAll(".menu > ul > li").forEach(function(menuItem){

let text = menuItem.innerText.toLowerCase();
let submenu = menuItem.querySelector(".submenu");

if(text.includes(value)){

menuItem.style.display = "";

if(submenu){
menuItem.classList.add("active");
}

}else{

menuItem.style.display = "none";

}

});

/* show all again when search empty */

if(value === ""){

document.querySelectorAll(".menu > ul > li").forEach(function(menuItem){

menuItem.style.display = "";
menuItem.classList.remove("active");

});

}

});


/* DROPDOWN MENU */

document.querySelectorAll(".dropdown > a").forEach(menu => {

menu.addEventListener("click", function(e){

e.preventDefault();

this.parentElement.classList.toggle("active");

});

});

</script>