<?php
// salesmanagersidebar.php




?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sales Manager 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;
  --sidebar-collapsed:76px;

  /* LIGHT THEME */
  --bg1:#ffffff;
  --bg2:#f8fafc;
  --accent:#2563eb;

  --text:#0f172a;
  --muted:#64748b;

  --panel:#f1f5f9;
  --border:#e2e8f0;
}

/* BASE */
html,body{
  height:100%;
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:#000;
  background:#f8fafc;
}
*{
  box-sizing: border-box;
}
/* SIDEBAR */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:var(--sidebar-width);
  background:#ffffff;
  display:flex;
  flex-direction:column;
  transition:.25s;
  box-shadow:0 0 20px rgba(0,0,0,0.05);
  z-index:1000;
  border-right:1px solid var(--border);
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  padding:14px;
  border-bottom:1px solid var(--border);
}

.logo{
  background:#ffffff;
  padding:8px 12px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px 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;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
  font-size:13px;
  transition:0.2s;
}

.search input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(37,99,235,0.1);
}

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

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

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

/* HOVER */
.menu a:hover,
.menu button:hover{
  background:#f1f5f9;
}

/* ACTIVE (FIXED - single clean version) */
.menu a.active{
  background:#e0ecff;
  border-left:3px solid var(--accent);
  font-weight:600;
  color:#1d4ed8;
}

/* ICON */
.icon{
   width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
}

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

/* SUBMENU */
.submenu{
  display:none;
  flex-direction:column;
  margin-left:0;
  margin-top:6px;
  gap:4px;
  padding-left:34px;
  width:100%;
}

.submenu.show{
  display:flex;
}

.submenu a{
  font-size:14px;
  width:100%;
  padding:8px 10px;
   align-items:center;
   gap:10px;
   display:flex;
  color:#475569;
  border-radius:6px;
  text-decoration:none;
  transition:0.2s;
}

.submenu a:hover{
  background:#f1f5f9;
  color:#000;
}

/* MOBILE BUTTON */
.mobile-toggle{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:1100;
  background:#fff;
  border:1px solid var(--border);
  color:#0f172a;
  font-size:20px;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
}

/* OVERLAY */
.overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.3);
  z-index:900;
}
/* ARROW */
.arrow{
  margin-left:auto;
  font-size:12px;
  color:#9ca3af;
  transition:0.3s;
}

/* ROTATE */
.menu-link[aria-expanded="true"] .arrow i{
  transform:rotate(180deg);
}

/* SUBMENU ICON */
.submenu a{
  display:flex;
  align-items:center;
  gap:8px;
}

.submenu a i{
  font-size:13px;
  width:16px;
  color:#6b7280;
}

/* MOBILE */
@media(max-width:880px){
  .sidebar{
    transform:translateX(-110%);
  }

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

  .mobile-toggle{
    display:block;
  }

  .overlay.show{
    display:block;
  }

  body.noscroll{
    overflow:hidden;
  }
}

/* SCROLLBAR (FIXED LIGHT) */
.menu::-webkit-scrollbar{
  width:6px;
}

.menu::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:10px;
}
  </style>
</head>
<body>

  <!-- mobile toggle -->
  <button class="mobile-toggle" id="mobileBtn" aria-label="Open menu" aria-controls="sidebar" aria-expanded="false">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>

  <!-- sidebar -->
  <aside class="sidebar" id="sidebar" role="navigation" aria-label="Sales manager sidebar">
    <div class="brand">
      <div class="logo">
        <img src="../logoB.png" alt="Company logo">
      </div>
    </div>

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

    <nav class="menu" id="mainMenu">
      <ul>
        <li>
          <a href="sales_manager_dashboard.php" class="menu-link <?php echo ($current==='sales_manager_dashboard.php')? 'active' : ''; ?>">
            <span class="icon"><i class="fa-solid fa-house"></i></span>
            <span class="label">Dashboard</span>
          </a>
        </li>

           <!-- Products & Billing -->
        <li>
<a href="#products" class="menu-link" data-toggle="submenu">
  <span class="icon"><i class="fa-solid fa-cube"></i></span>
  <span class="label">Products</span>

  <span class="arrow">
    <i class="fa-solid fa-chevron-down"></i>
  </span>
</a>
 
<div class="submenu" data-for="products">

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

  <a href="sample-product.php">
    <i class="fa-solid fa-flask"></i>
    Sample Product
  </a>

</div>
</li>
<!-- Billing Section -->
<li>
  <a href="#billing" 
     class="menu-link <?php echo in_array($current, ['customer_info.php','create_bill.php','bill_history.php','all_bills.php']) ? 'active' : ''; ?>" 
     data-toggle="submenu"
     aria-expanded="<?php echo in_array($current, ['customer_info.php','create_bill.php','bill_history.php','all_bills.php']) ? 'true' : 'false'; ?>">
     
    <span class="icon"><i class="fa fa-file-invoice-dollar"></i></span>
    <span class="label">Billing</span>
    <span class="arrow">
    <i class="fa-solid fa-chevron-down"></i>
  </span>
  </a>

  <div class="submenu <?php echo in_array($current, ['customer_info.php','create_bill.php','bill_history.php','all_bills.php']) ? 'show' : ''; ?>" data-for="billing">
    
    <a href="customer_info.php">Customer Info</a>
    <!-- Manager ke liye important -->
    <a href="all_bills.php">All Bills</a>

  </div>
</li>
        <!-- Doctors Section -->
        <li>
          <a href="#doctors" class="menu-link <?php echo in_array($current, ['doctors.php','doctor_transactions.php','pharma_companies.php'])? 'active' : ''; ?>" data-toggle="submenu" aria-expanded="<?php echo in_array($current, ['doctors.php','doctor_transactions.php','pharma_companies.php'])? 'true' : 'false'; ?>">
            <span class="icon"><i class="fa fa-user-md"></i></span>
            <span class="label">Doctors</span>
            <span class="arrow">
    <i class="fa-solid fa-chevron-down"></i>
  </span>
          </a>
          <div class="submenu <?php echo in_array($current, ['doctors.php','doctor_transactions.php','pharma_companies.php'])? 'show' : ''; ?>" data-for="doctors">
            <a href="doctors.php">Doctor Directory</a>
            <a href="doctor_transactions.php">Samples</a>
        
          </div>
        </li>

<li>
  <a href="new_order.php" class="menu-link <?php echo ($current==='new_order.php')? 'active' : ''; ?>">
    <span class="icon"><i class="fa-solid fa-cart-plus"></i></span>
    <span class="label">New Order</span>
  </a>
</li>

    <li>
  <a href="mr_list.php" class="menu-link <?php echo ($current==='mr_list.php')? 'active' : ''; ?>">
    <span class="icon"><i class="fa fa-user-nurse"></i></span>
    <span class="label">Medical Representative</span>
  </a>
</li>

     

       <li>
          <a href="sold_products.php" class="menu-link <?php echo ($current==='sold_products.php')? 'active' : ''; ?>">
            <span class="icon"><i class="fa-solid fa-box"></i></i></span>
            <span class="label">Sold Products</span>
          </a>
        </li>


        <li>
          <a href="unpaid_sales.php" class="menu-link <?php echo ($current==='unpaid_sales.php')? 'active' : ''; ?>">
            <span class="icon"><i class="fa-solid fa-credit-card"></i></i></span>
            <span class="label">Unpaid Sales</span>
          </a>
        </li>

        <!-- STOCK SECTION -->
<li>
  <a href="#stock" 
     class="menu-link <?php echo in_array($current, ['commercial_stock.php','sample_stock.php']) ? 'active' : ''; ?>" 
     data-toggle="submenu">

    <span class="icon"><i class="fa fa-box"></i></span>
    <span class="label">Stock</span>
    <span class="arrow">
    <i class="fa-solid fa-chevron-down"></i>
  </span>
  </a>

  <div class="submenu <?php echo in_array($current, ['commercial-stock.php','sample-stock.php']) ? 'show' : ''; ?>" data-for="stock">

    <a href="commercial-stock.php">Commercial Stock</a>
    <a href="sample-stock.php">Sample Stock</a>

  </div>
</li>
   

        <li>
  <a href="reports.php" class="menu-link <?php echo ($current==='reports.php')? 'active' : ''; ?>">
    <span class="icon"><i class="fa fa-chart-line"></i></span>
    <span class="label">Reports</span>
  </a>
</li>

      

      </ul>
    </nav>
  </aside>

  <div class="overlay" id="overlay" tabindex="-1" aria-hidden="true"></div>

  <!-- page content placeholder (so you can visualize layout) -->
  <main style="margin-left:var(--sidebar-width); padding:24px;">
    <!-- Your page content starts here -->
  </main>

  <script>
(function runWhenReady(fn){
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    fn();
  }
})(function(){
  const sidebar = document.getElementById('sidebar');
  const mobileBtn = document.getElementById('mobileBtn');
  const overlay = document.getElementById('overlay');
  const searchInput = document.getElementById('menuSearch');

  // Mobile toggle
  if (mobileBtn) {
    mobileBtn.addEventListener('click', function(){
      const isOpen = sidebar.classList.toggle('show');
      if (overlay) overlay.classList.toggle('show', isOpen);
      document.body.classList.toggle('noscroll', isOpen);
      mobileBtn.setAttribute('aria-expanded', !!isOpen);
    });
  }

  // Close on overlay click
  if (overlay) {
    overlay.addEventListener('click', function(){
      if (sidebar) sidebar.classList.remove('show');
      overlay.classList.remove('show');
      document.body.classList.remove('noscroll');
      if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
    });
  }

  // Submenu toggles
  document.querySelectorAll('[data-toggle="submenu"]').forEach(function(toggler){
    toggler.addEventListener('click', function(e){
      e.preventDefault();
      let href = this.getAttribute('href') || '';
      let key = (href.startsWith('#') ? href.slice(1) : '') || this.dataset.for;
      if (!key) return;

      const submenu = document.querySelector('.submenu[data-for="' + key + '"]');
      if (!submenu) return;

      const willShow = !submenu.classList.contains('show');

      // close other submenus
      document.querySelectorAll('.submenu.show').forEach(function(s){
        if (s !== submenu) {
          s.classList.remove('show');
          const related = document.querySelector('[data-toggle="submenu"][href="#' + s.dataset.for + '"]');
          if (related) related.setAttribute('aria-expanded', 'false');
        }
      });

      submenu.classList.toggle('show', willShow);
      this.setAttribute('aria-expanded', willShow ? 'true' : 'false');

      // When opening on small screens, ensure sidebar visible
      if (window.matchMedia('(max-width:880px)').matches && willShow) {
        if (sidebar) sidebar.classList.add('show');
        if (overlay) overlay.classList.add('show');
        document.body.classList.add('noscroll');
        if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'true');
      }
    });
  });

  // Search filtering
  if (searchInput) {
    searchInput.addEventListener('input', function(){
      const value = this.value.trim().toLowerCase();

      document.querySelectorAll('#mainMenu > ul > li').forEach(function(item){
        const text = item.innerText.toLowerCase();
        if (text.includes(value)) {
          item.style.display = '';
        } else {
          item.style.display = 'none';
        }
      });
    });
  }

  // Close sidebar on escape (mobile)
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') {
      if (sidebar) sidebar.classList.remove('show');
      if (overlay) overlay.classList.remove('show');
      document.body.classList.remove('noscroll');
      if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
    }
  });

});
  </script>
</body>
</html>