<?php
// salesexecutivesidebar.php
// Sidebar tailored for Sales Executive role
$current = basename($_SERVER['PHP_SELF']);
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sales Executive 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;
  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;
  --panel:#f1f5f9;
  --border:#e5e7eb;
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
}

/* SIDEBAR */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:var(--sidebar-width);
  background:#ffffff;
  color:#111827;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  border-right:1px solid var(--border);
  z-index:1001;
  overflow:hidden;
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  padding:14px;
  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 6px 18px rgba(0,0,0,0.15);
  width:100%;
  max-width:210px;
}

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

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

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

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

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

.menu a,
.menu button{
  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:15px;
  transition:.15s ease;
  position:relative;
}

.menu a:hover,
.menu button:hover{
  background:#f3f4f6;
}

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

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

/* ACTIVE */
.menu a.active{
  background:#e5e7eb;
  font-weight:600;
}

/* CARET */
.chev{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:var(--muted);
  transition:transform .18s ease;
}

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

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

.submenu.show{
  display:flex;
}

.submenu a{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  padding:8px 10px;
  color:#6b7280;
  border-radius:8px;
  text-decoration:none;
}

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

/* MOBILE BUTTON */
.mobile-toggle{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:1100;
  border:none;
  color:#000;
  width:42px;
  height:42px;
  border-radius:10px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

.mobile-toggle i{
  font-size:16px;
}

/* OVERLAY */
.overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  z-index:900;
}

.overlay.show{
  display:block;
}

body.noscroll{
  overflow:hidden;
}

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

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

  .mobile-toggle{
    display:flex;
  }

  .search input{
    font-size:13px;
    padding:10px;
  }

  .menu a,
  .menu button{
    font-size:14px;
    padding:12px;
  }

  .submenu a{
    font-size:13px;
    padding:8px 10px;
  }
}

/* SCROLLBAR */
.menu::-webkit-scrollbar{
  width:8px;
}

.menu::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.12);
  border-radius:8px;
}
</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 executive sidebar">
    <div class="brand">
      <div class="logo">
        <!-- update path to logo as needed -->
        <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>

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

<!-- Products -->
<li>
  <a href="#products" 
     class="menu-link <?php echo in_array($current, ['products.php','product_view.php','sample_products.php']) ? 'active' : ''; ?>" 
     data-toggle="submenu"
     aria-expanded="<?php echo in_array($current, ['products.php','product_view.php','sample_products.php']) ? 'true' : 'false'; ?>">
       
    <span class="icon"><i class="fa-solid fa-cube"></i></span>
    <span class="label">Products</span>
    <span class="chev"><i class="fa fa-chevron-down"></i></span>
  </a>

  <div class="submenu <?php echo in_array($current, ['products.php','product_view.php','sample_products.php']) ? 'show' : ''; ?>" data-for="products">
    
    <a href="products.php">
      <i class="fa-solid fa-box" style="width:18px;"></i>
      Commercial Product
    </a>

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

    <a href="doctor_assignments.php">
      <i class="fa-solid fa-user-doctor" style="width:18px;"></i>
      Assignments & Meetings
    </a>

  </div>
</li>

  <!-- Stock -->
  <li>
    <a href="#stock" 
       class="menu-link <?php echo in_array($current, ['stock.php','stock_check.php']) ? 'active' : ''; ?>" 
       data-toggle="submenu"
       aria-expanded="<?php echo in_array($current, ['stock.php','stock_check.php']) ? 'true' : 'false'; ?>">
       
      <span class="icon"><i class="fa-solid fa-boxes-stacked"></i></span>
      <span class="label">Stock</span>
      <span class="chev"><i class="fa fa-chevron-down"></i></span>
    </a>

    <div class="submenu <?php echo in_array($current, ['stock.php','stock_check.php']) ? 'show' : ''; ?>" data-for="stock">
          <a href="stock_check.php">
            <i class="fa-solid fa-magnifying-glass"></i>
            Check Stock
          </a>      
          
      <a href="stock.php">
        <i class="fa-solid fa-clipboard-list"></i>
        Stock Ledger
      </a>
    </div>
  </li>

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

  <div class="submenu <?php echo in_array($current, ['customer_info.php','bill_history.php']) ? 'show' : ''; ?>" data-for="billing">
      <a href="customer_info.php">
        <i class="fa-solid fa-user"></i>
        Customer Info
      </a>

      <a href="bill_history.php">
      <i class="fa-solid fa-file-invoice"></i>
      Bill History
    </a>

  </div>
</li>

<!-- ORDER -->
<li>
  <a href="#orders" 
     class="menu-link <?php echo in_array($current, ['new_order.php','order_history.php']) ? 'active' : ''; ?>" 
     data-toggle="submenu"
     aria-expanded="<?php echo in_array($current, ['new_order.php','order_history.php']) ? 'true' : 'false'; ?>">
    
    <span class="icon">
      <i class="fa-solid fa-cart-shopping"></i>
    </span>

    <span class="label">Orders</span>
    <span class="chev"><i class="fa fa-chevron-down"></i></span>
  </a>

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

    <a href="new_order.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>
  <!-- Sold Products -->
<li>
  <a href="#sales" 
     class="menu-link <?php echo in_array($current, ['sold_products.php','paid_sales.php','unpaid_sales.php']) ? 'active' : ''; ?>" 
     data-toggle="submenu"
     aria-expanded="<?php echo in_array($current, ['sold_products.php','paid_sales.php','unpaid_sales.php']) ? 'true' : 'false'; ?>">
    
    <span class="icon">
      <i class="fa-solid fa-chart-line"></i>
    </span>

    <span class="label">Sales</span>
    <span class="chev"><i class="fa fa-chevron-down"></i></span>
  </a>

  <div class="submenu <?php echo in_array($current, ['sold_products.php','paid_sales.php','unpaid_sales.php']) ? 'show' : ''; ?>" data-for="sales">

    <a href="sold_products.php">
      <i class="fa-solid fa-chart-column" style="width:18px;"></i>
      All Sales
    </a>

    <a href="unpaid_sales.php">
      <i class="fa-solid fa-clock" style="width:18px;"></i>
      Unpaid
    </a>

  </div>
</li>
<!-- STOCK SECTION -->
<li>
  <a href="#stockAlert" 
     class="menu-link <?php echo in_array($current, ['commercial-stock.php','sample-stock.php']) ? 'active' : ''; ?>" 
     data-toggle="submenu"
     aria-expanded="<?php echo in_array($current, ['commercial-stock.php','sample-stock.php']) ? 'true' : 'false'; ?>">

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

    <span class="label">Stock Alert</span>
    <span class="chev"><i class="fa fa-chevron-down"></i></span>
  </a>

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

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

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

  </div>
</li>

  
  <!-- Visits -->
  <li>
    <a href="visits.php" class="menu-link <?php echo ($current==='visits.php')? 'active' : ''; ?>">
      <span class="icon"><i class="fa-solid fa-user-doctor"></i></span>
      <span class="label">Doctor Visits</span>
    </a>
  </li>
<!-- Pharmacy Visit -->
<li>
  <a href="pharmacy_visit.php" class="menu-link <?php echo ($current==='pharmacy_visit.php')? 'active' : ''; ?>">
    <span class="icon">
      <i class="fa-solid fa-prescription-bottle-medical"></i>
    </span>
    <span class="label">Pharmacy Visit</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;">
    <!-- Page content -->
  </main>

  <script>
/* Safe, DOM-ready wrapper. Uses the same submenu logic as your working admin sidebar. */
(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();

      // href like "#orders"
      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 so only one opens at a time
      document.querySelectorAll('.submenu.show').forEach(function(s){
        if (s !== submenu) {
          s.classList.remove('show');
          // update toggler aria
          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');

      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();
        item.style.display = text.includes(value) ? '' : 'none';
      });
    });
  }

  // Close sidebar on Escape
  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>