{% load static %}
{% block layout_menu %}
<aside id="layout-menu" class="layout-menu menu-vertical menu">
    <div class="app-brand demo">
      <a href="" class="app-brand-link">
        <span class="app-brand-logo demo menu-text fw-bold"><span style="color: black;">V</span></span>  
        <span class="app-brand-text demo menu-text fw-bold ms-2">{{function_name}}</span>
      </a>
      <a href="javascript:void(0);" class="layout-menu-toggle ms-auto">
        <i class="bx bx-chevron-left bx-sm align-middle"></i>
      </a>
    </div>

    <div class="menu-inner-shadow"></div>

    <ul class="menu-inner py-1">
      <!-- Dashboard -->
      <li class="menu-item">
        <a href="{% url 'visitors_dashboard' %}" class="menu-link">
          <i class="menu-icon tf-icons bx bx-home-circle"></i>
          <div data-i18n="Analytics">Dashboard</div>
        </a>
      </li>
      <li class="menu-item">
        <a href="{% url 'visitors_appointment' %}" class="menu-link">
          <i class="menu-icon tf-icons bx bx-home-circle"></i>
          <div data-i18n="Analytics">Appointment</div>
        </a>
      </li>
      
    </ul>
  </aside>
<!-- ✅ JavaScript to Highlight Active Menu Item -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var currentPath = window.location.pathname;
    var menuLinks = document.querySelectorAll(".menu-item a");

    menuLinks.forEach(function (link) {
      var href = link.getAttribute("href");

      // Skip if href is empty or #
      if (!href || href === '#' || href.startsWith('javascript')) return;

      // Check exact match
      if (currentPath === href) {
        const menuItem = link.closest(".menu-item");
        menuItem.classList.add("active");

        // Also open parent menu if inside submenu
        const parentSub = menuItem.closest(".menu-sub");
        if (parentSub) {
          parentSub.style.display = 'block';
          const parentToggle = parentSub.closest(".menu-item");
          if (parentToggle) {
            parentToggle.classList.add("open", "active");
          }
        }
      }
    });
  });
</script>
{% endblock layout_menu %}