<!-- navbar.php -->
<nav class="navbar navbar-expand-lg shadow-sm" style="background: #f8f9fa;">
  <div class="container">
    <a class="navbar-brand" href="inventory.php">
        <img src="assets/logo/logo.png" alt="Nilatech Inventory" height="40">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto align-items-center">

        <!-- Stock Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" style="color: black;">Stock</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="purchase.php">Inward</a></li>
            <li><a class="dropdown-item" href="outward.php">Outward</a></li>
            <li><a class="dropdown-item" href="return_product.php">Return</a></li>
          </ul>
        </li>

        <!-- View Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" style="color: black;">View</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="inventory.php">Inward</a></li>
            <li><a class="dropdown-item" href="outward_view.php">Outward</a></li>
            <li><a class="dropdown-item" href="fault_view.php">Fault</a></li>
          </ul>
        </li>

        <li class="nav-item"><a class="nav-link active" href="categories.php" style="color: black;">Categories</a></li>
        <li class="nav-item"><a class="nav-link" href="report.php" style="color: black;">Net Stock</a></li>

        <!-- User Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" style="color: black;">
            👤 <?php echo ucfirst(htmlspecialchars($_SESSION['username'] ?? 'User')); ?>
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="logout.php">Logout</a></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

<!-- Custom CSS to change dropdown hover/active color to green -->
<style>
/* Keep normal nav links black */
.navbar-nav .nav-link {
    color: black !important;
}

/* Dropdown items hover/focus/active */
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown-menu .dropdown-item:active {
    background-color: #006016ff !important; /* green background */
    color: white !important; /* white text */
}
</style>
