{% load static %}

<!-- ─────────────── Navbar Styles ─────────────── -->
<style>
  .dropdown-menu {
    background: rgba(255,255,255) !important;
    border: none !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    min-width: 220px;
    z-index: 1000;
  }
  .dropdown-submenu { position: relative; }
  .dropdown-submenu > .dropdown-menu {
    top: 0; left: 100%; margin-left: 0.4rem;
    border-radius: 0.6rem; z-index: 1001;
  }
  .dropdown-item {
    padding: 0.5rem 1rem !important;
    color: #333 !important;
    transition: background 0.15s ease;
  }
  .dropdown-item:hover {
    color: #ffffff !important;
    background: rgba(1,71,143,1) !important;
  }
  .dropdown-header {
    padding: 0.5rem 1rem 0.2rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #555 !important;
  }

  /* ── Mobile submenu styles ── */
  @media (max-width: 767.98px) {
    .dropdown-submenu > .dropdown-menu {
      position: static !important;
      left: 0 !important;
      margin-left: 0 !important;
      box-shadow: none !important;
      border-left: 2px solid #01478f !important;
      margin-left: 0.75rem !important;
      padding-left: 0 !important;
    }
    .dropdown-submenu > .dropdown-menu .dropdown-item {
      padding-left: 1.5rem !important;
    }
    .dropdown-submenu > .dropdown-menu .dropdown-menu .dropdown-item {
      padding-left: 2.5rem !important;
    }
    .dropdown-submenu > .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
      padding-left: 3.5rem !important;
    }
  }
</style>

<nav id="posNavbar" class="navbar navbar-expand-md navbar-dark" style="background:#01478f;">
  <div class="container-fluid">

    <!-- Mobile branch name center -->
    <div class="mx-auto d-md-none">
      {% if current_branch_name %}
        <a class="navbar-brand d-flex align-items-center" href="{% url 'pos:index' %}">
          <span class="navbar-text font-weight-bold text-white">{{ current_branch_name }}</span>
        </a>
      {% endif %}
    </div>

    <!-- Mobile toggle -->
    <button class="navbar-toggler" type="button"
      data-toggle="collapse" data-target="#posMainNav"
      aria-controls="posMainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Nav links -->
    <div class="collapse navbar-collapse" id="posMainNav">
      <ul class="navbar-nav mr-auto">

        {% for menu in navbar_menu %}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#"
               id="navMenu_{{ forloop.counter }}"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="navbar-text font-weight-bold text-white">
                {% if menu.icon %}<i class="{{ menu.icon }}"></i> {% endif %}{{ menu.label }}
              </span>
            </a>
            {% if menu.children %}
              <ul class="dropdown-menu" aria-labelledby="navMenu_{{ forloop.counter }}">
                {% for child in menu.children %}
                  {% include "pos/navbar/_menu_item.html" with item=child %}
                {% endfor %}
              </ul>
            {% endif %}
          </li>
        {% endfor %}

      </ul>

      <!-- Desktop branch name center -->
      <div class="flex-grow-1 d-none d-md-flex justify-content-center">
        {% if current_branch_name %}
          <span class="navbar-text font-weight-bold text-white">{{ current_branch_name }}</span>
        {% endif %}
      </div>

      <!-- User menu -->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown no-arrow">
          <a class="nav-link dropdown-toggle d-flex align-items-center" href="#"
             id="userMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="{% static 'img/undraw_profile.svg' %}" class="rounded-circle mr-2" height="28" alt="User">
          </a>
          <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="userMenu">
            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
              <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- ─────────────── Submenu Toggle Script ─────────────── -->
<script>
$(document).ready(function(){
  // Submenu toggle (desktop hover + click, mobile click)
  $('.dropdown-submenu > a').on('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    // Is level ke doosre open submenus band karo
    $(this).closest('.dropdown-menu').find('.dropdown-menu.show').not($(this).next('.dropdown-menu')).removeClass('show');
    // Yeh toggle karo
    $(this).next('.dropdown-menu').toggleClass('show');
  });

  // Jab parent dropdown band ho, sab submenus bhi band karo
  $('.nav-item.dropdown').on('hidden.bs.dropdown', function(){
    $(this).find('.dropdown-menu .show').removeClass('show');
  });
});
</script>