{% 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;">A</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 'admin_dashboard' %}" class="menu-link">
          <i class="menu-icon tf-icons bx bx-tachometer"></i>
          <div data-i18n="Analytics">Dashboard</div>
        </a>
      </li>

      <!-- Masters -->
      <li class="menu-item {% if  'role' in  request.path  or 'location' in  request.path or   '/area' in  request.path or   '/company' in  request.path or    'department' in  request.path or   'designation' in  request.path  %}active open{% endif %}">
        <a href="javascript:void(0);" class="menu-link menu-toggle">
          <i class="menu-icon tf-icons bx bx-layout"></i>
          <div data-i18n="Masters">Masters</div>
        </a>

        <ul class="menu-sub">
<!--          <li class="menu-item">-->
<!--            <a href="javascript:void(0);" class="menu-link menu-toggle">-->
<!--              <i class="menu-icon tf-icons bx bx-sitemap"></i>-->
<!--              <div data-i18n="Roles">Roles</div>-->
<!--            </a>-->
<!--            <ul class="menu-sub">-->
<!--              <li class="menu-item">-->
<!--                <a href="{% url 'admin_role_all' %}" class="menu-link">-->
<!--                  <div data-i18n="All Roles">All Roles</div>-->
<!--                </a>-->
<!--              </li>-->
<!--              <li class="menu-item">-->
<!--                <a href="{% url 'admin_role_add' %}" class="menu-link">-->
<!--                  <div data-i18n="Add New Role">Add New Role</div>-->
<!--                </a>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </li>-->
          <li class="menu-item">
            <a href="javascript:void(0);" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-map"></i>
              <div data-i18n="Locations">Locations</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="{% url 'admin_location' %}" class="menu-link">
                  <div data-i18n="All Locations">All Locations</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="{% url 'admin_location_add' %}" class="menu-link">
                  <div data-i18n="Add Location">Add Location</div>
                </a>
              </li>
            </ul>
          </li>
          <li class="menu-item">
            <a href="javascript:void(0);" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-globe"></i>
              <div data-i18n="Areas">Areas</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="{% url 'admin_area' %}" class="menu-link">
                  <div data-i18n="All Areas">All Areas</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="{% url 'admin_area_add' %}" class="menu-link">
                  <div data-i18n="Add Area">Add Area</div>
                </a>
              </li>
            </ul>
          </li>
          <li class="menu-item">
            <a href="javascript:void(0);" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-building"></i>
              <div data-i18n="Companies">Companies</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="{% url 'admin_company' %}" class="menu-link">
                  <div data-i18n="All Companies">All Companies</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="{% url 'admin_company_add' %}" class="menu-link">
                  <div data-i18n="Add Company">Add Company</div>
                </a>
              </li>
            </ul>
          </li>
          <li class="menu-item">
            <a href="javascript:void(0);" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-home"></i>
              <div data-i18n="Departments">Departments</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="{% url 'admin_department' %}" class="menu-link">
                  <div data-i18n="All Departments">All Departments</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="{% url 'admin_department_add' %}" class="menu-link">
                  <div data-i18n="Add Department">Add Department</div>
                </a>
              </li>
            </ul>
          </li>
          <li class="menu-item">
            <a href="javascript:void(0);" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-up-arrow-alt"></i>
              <div data-i18n="Designations">Designations</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="{% url 'admin_designation' %}" class="menu-link">
                  <div data-i18n="All Designations">All Designations</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="{% url 'admin_designation_add' %}" class="menu-link">
                  <div data-i18n="Add Designation">Add Designation</div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="" class="menu-link menu-toggle">
          <i class="menu-icon tf-icons bx bx-user"></i>
          <div data-i18n="Users">Users</div>
        </a>
        <ul class="menu-sub">
          <li class="menu-item">
            <a href="{% url 'admin_user' %}" class="menu-link">
              <div data-i18n="All Users">All Users</div>
            </a>
          </li>
          <li class="menu-item">
            <a href="{% url 'admin_user_add' %}" class="menu-link">
              <div data-i18n="Add Users">Add Users</div>
            </a>
          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="{% url 'auto_email' %}" class="menu-link">
          <i class="menu-icon tf-icons bx bx-dock-top"></i>
          <div data-i18n="Account Settings">Auto Email</div>
        </a>
      </li>
      <li class="menu-item">
        <a href="{% url 'admin_report' %}" class="menu-link">
          <i class="menu-icon tf-icons bx bx-dock-top"></i>
          <div data-i18n="Account">Report</div>
        </a>
      </li>
      <li class="menu-item">
        <a href="" class="menu-link menu-toggle">
          <i class="menu-icon tf-icons bx bx-user"></i>
          <div data-i18n="Visitor">Visitor</div>
        </a>
        <ul class="menu-sub">
              <li class="menu-item">
                <a href="{% url 'admin_visitor' %}" class="menu-link">
                  <div data-i18n="All Visitor Appointment">All Appointment</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="{% url 'admin_visitor_user'%}" class="menu-link">
                  <div data-i18n="Add Visitor Registered Users">All Registered Users</div>
                </a>
              </li>
            </ul>
      </li>
      <li class="menu-item">
        <a href="" class="menu-link menu-toggle">
          <i class="menu-icon tf-icons bx bx-layout"></i>
          <div data-i18n="safety_training">Safety Training</div>
        </a>
        <ul class="menu-sub">
          <li class="menu-item">
            <a href="{% url 'admin_safety_training' %}" class="menu-link">
              <div data-i18n="All Users">All Safety Training</div>
            </a>
          </li>
          <li class="menu-item">
            <a href="{% url 'admin_safety_training_add' %}" class="menu-link">
              <div data-i18n="Add Safety Training">Add Safety Training</div>
            </a>
          </li>
        </ul>
      </li>
      {% if setting.is_gate_pass_template_active %}
      <li class="menu-item">
        <a href="{% url 'admin_gate_pass' %}" class="menu-link">
          <i class="menu-icon tf-icons bx bx-tachometer"></i>
          <div data-i18n="Analytics">Gate Pass Template</div>
        </a>
      </li>
      {% endif %}
      <li class="menu-item">
        <a href="{% url 'admin_setting_update' %}" class="menu-link">
          <i class="menu-icon tf-icons bx bx-cog"></i>
          <div data-i18n="Connections">Setting</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 %}