<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="icon" type="image/png" href="/uploads/layout/favicon.png" />
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%= typeof title !=='undefined' ? title + ' | ' : '' %>CMS.HAILearning
  </title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <!-- Global CSS Variables -->
  <link rel="stylesheet" href="/assets/css/variables.css" />
  <!-- CMS Component System -->
  <link rel="stylesheet" href="/assets/css/components/button.css" />
  <link rel="stylesheet" href="/assets/css/components/card.css" />
  <link rel="stylesheet" href="/assets/css/components/form.css" />
  <link rel="stylesheet" href="/assets/css/components/modal.css" />
  <link rel="stylesheet" href="/assets/css/components/table.css" />
  <!-- Layout Styles -->
  <link rel="stylesheet" href="/assets/css/layout.css" />

  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      position: relative;
      background-color: #f5f7fa;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    body::before {
      content: none;
    }

    .navbar {
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      padding: 0.75rem 0;
    }

    .navbar .container {
      max-width: 1600px;
      width: 98%;
    }

    .navbar-brand {
      font-weight: bold;
      color: var(--primary-color) !important;
      margin-right: 2rem;
    }

    .navbar-nav {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .navbar-collapse {
      justify-content: space-between;
    }

    .nav-item {
      display: flex;
      align-items: center;
    }

    .nav-link {
      color: #333;
      font-weight: 500;
      padding: 0.5rem 1rem;
      transition: all 0.3s ease;
      white-space: nowrap;
      font-size: 0.95rem;
    }

    .nav-link:hover {
      color: var(--primary-color);
    }

    .nav-link.active {
      color: var(--primary-color);
      font-weight: 600;
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      border: none;
      padding: 8px 20px;
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      color: white;
    }

    .btn-primary:hover {
      background-color: var(--primary-dark);
      border-color: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(184, 183, 106, 0.25);
    }

    .btn-primary::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent);
      transition: all 0.5s ease;
    }

    .btn-primary:hover::after {
      left: 100%;
    }

    .btn-outline-primary {
      color: var(--primary-color);
      border-color: var(--primary-color);
      transition: all 0.3s ease;
    }

    .btn-outline-primary:hover {
      background-color: var(--primary-color);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(184, 183, 106, 0.18);
    }

    .hero {
      padding: 5rem 10rem;
      background-color: rgba(255, 255, 255, 0.85);
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      margin-top: 2rem;
    }

    .feature-card {
      transition: transform 0.3s;
      border: none;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      background-color: rgba(255, 255, 255, 0.9);
    }

    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .feature-card i {
      color: var(--primary-color);
    }

    .highlight-text {
      color: var(--primary-color);
      font-weight: bold;
    }

    .hover-opacity:hover {
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }

    footer {
      background: linear-gradient(90deg, var(--primary-dark), var(--primary-color), var(--primary-light), #0048b4);
      color: white;
      margin-top: 3rem;
    }

    footer .container {
      padding: 2rem 0;
    }

    footer hr {
      border-color: rgba(255, 255, 255, 0.2);
      margin: 2rem 0;
    }

    footer h5 {
      font-weight: bold;
      margin-bottom: 1rem;
    }

    footer p,
    footer a {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    footer a:hover {
      color: white !important;
    }

    footer .text-light {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    .page-content {
      line-height: 1.8;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 2rem;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .page-content img {
      max-width: 100%;
      height: auto;
      margin: 1rem 0;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    section {
      margin: 2rem 0;
    }

    .section-light {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 3rem 0;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .section-dark {
      background-color: rgba(184, 183, 106, 0.12);
      padding: 3rem 0;
      border-radius: 15px;
      color: var(--text-light);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    }

    .img-shine {
      position: relative;
      overflow: hidden;
    }

    .img-shine::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent);
      transition: all 0.5s ease;
    }

    .img-shine:hover::after {
      left: 100%;
    }

    .alert {
      border-radius: 10px;
      border: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .alert-success {
      background-color: #fff3e0;
      color: #e65100;
    }

    .alert-danger {
      background-color: #ffcdd2;
      color: #c62828;
    }

    .fixed-bottom-buttons {
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 1rem;
      z-index: 1000;
      width: 25%;
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }

    .fixed-bottom-buttons .btn {
      min-width: 120px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    /* Add padding to prevent content from being hidden behind fixed buttons */
    .content-with-fixed-buttons {
      padding-bottom: 80px;
    }

    main {
      flex: 1;
      z-index: 1;
      position: relative;
    }

    .dropdown-menu {
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border: none;
      padding: 0.5rem;
    }

    .dropdown-item {
      padding: 0.5rem 1rem;
      border-radius: 6px;
    }

    .dropdown-item:hover {
      background-color: var(--secondary-color);
    }

    .dropdown-item.active {
      background-color: var(--primary-color);
      color: white;
    }

    /* Navigation submenu styles */
    .nav-level-container {
      position: relative;
    }

    .nav-level-submenu {
      position: absolute;
      top: 0;
      left: 100%;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 0 8px 8px 0;
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
      padding: 0.5rem 0;
      min-width: 220px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease-in-out;
      z-index: 1001;
    }

    /* Submenu hiện ra bên trái khi ở cuối dropdown */
    .nav-level-submenu.submenu-left {
      left: auto;
      right: 100%;
      border-radius: 8px 0 0 8px;
    }

    /* Submenu hiện ra phía trên khi ở cuối dropdown */
    .nav-level-submenu.submenu-top {
      top: auto;
      bottom: 0;
    }

    .nav-level-container:hover .nav-level-submenu {
      opacity: 1;
      visibility: visible;
    }

    .nav-submenu-indicator {
      font-size: 0.7rem;
      opacity: 0.6;
    }

    .nav-level-container:hover .nav-submenu-indicator {
      opacity: 1;
    }

    .nav-submenu-item {
      padding: 0.4rem 1rem;
      font-size: 0.9rem;
    }

    .nav-submenu-item.disabled {
      color: #999;
      font-style: italic;
      pointer-events: none;
    }

    .nav-create-new-btn {
      background-color: rgba(184, 183, 106, 0.05);
      font-weight: 500;
      color: var(--primary-color) !important;
    }

    .nav-create-new-btn:hover {
      background-color: rgba(184, 183, 106, 0.1);
    }

    /* Bỏ bullet points cho submenu */
    .nav-level-submenu {
      list-style: none;
      padding-left: 0;
    }

    .nav-level-submenu li {
      list-style: none;
    }

    @media (max-width: 991.98px) {
      .navbar-nav {
        gap: 0;
      }

      .nav-item {
        width: 100%;
      }

      .nav-link {
        color: #333;
        font-weight: 500;
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
        white-space: nowrap;
        font-size: 0.95rem;
      }

      .nav-link:hover {
        color: var(--primary-color);
      }

      .nav-link.active {
        color: var(--primary-color);
        font-weight: 600;
      }

      .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        border: none;
        padding: 8px 20px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        color: white;
      }

      .btn-primary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(184, 183, 106, 0.25);
      }

      .btn-primary::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
        transition: all 0.5s ease;
      }

      .btn-primary:hover::after {
        left: 100%;
      }

      .btn-outline-primary {
        color: var(--primary-color);
        border-color: var(--primary-color);
        transition: all 0.3s ease;
      }

      .btn-outline-primary:hover {
        background-color: var(--primary-color);
        border: none;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(184, 183, 106, 0.18);
      }

      .hero {
        padding: 5rem 10rem;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        margin-top: 2rem;
      }

      .feature-card {
        transition: transform 0.3s;
        border: none;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.9);
      }

      .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .feature-card i {
        color: var(--primary-color);
      }

      .highlight-text {
        color: var(--primary-color);
        font-weight: bold;
      }

      .hover-opacity:hover {
        opacity: 0.8;
        transition: opacity 0.3s ease;
      }

      footer {
        background: linear-gradient(90deg, #9a994a, #b8b76a, #c9c88a, #d9d8aa);
        color: white;
        margin-top: 3rem;
      }

      footer .container {
        padding: 2rem 0;
      }

      footer hr {
        border-color: rgba(255, 255, 255, 0.2);
        margin: 2rem 0;
      }

      footer h5 {
        font-weight: bold;
        margin-bottom: 1rem;
      }

      footer p,
      footer a {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      footer a:hover {
        color: white !important;
      }

      footer .text-light {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      .page-content {
        line-height: 1.8;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }

      .page-content img {
        max-width: 100%;
        height: auto;
        margin: 1rem 0;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      section {
        margin: 2rem 0;
      }

      .section-light {
        background-color: rgba(255, 255, 255, 0.85);
        padding: 3rem 0;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }

      .section-dark {
        background-color: rgba(184, 183, 106, 0.12);
        padding: 3rem 0;
        border-radius: 15px;
        color: var(--text-light);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
      }

      .img-shine {
        position: relative;
        overflow: hidden;
      }

      .img-shine::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
        transition: all 0.5s ease;
      }

      .img-shine:hover::after {
        left: 100%;
      }

      .alert {
        border-radius: 10px;
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      .alert-success {
        background-color: #fff3e0;
        color: #e65100;
      }

      .alert-danger {
        background-color: #ffcdd2;
        color: #c62828;
      }

      .fixed-bottom-buttons {
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 1rem;
        z-index: 1000;
        width: 25%;
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
      }

      .fixed-bottom-buttons .btn {
        min-width: 120px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }

      /* Add padding to prevent content from being hidden behind fixed buttons */
      .content-with-fixed-buttons {
        padding-bottom: 80px;
      }

      main {
        flex: 1;
        z-index: 1;
        position: relative;
        padding: 0.75rem 1rem;
      }

      .dropdown-menu {
        border: none;
        box-shadow: none;
        padding: 0 1rem;
      }
    }
  </style>
  <%- style %>
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light sticky-top">
    <div class="container">
      <a class="navbar-brand d-flex align-items-center" href="/">
        <img src="/img/logo/logo-hai-learning.png" alt="Logo" style="
              width: 45px;
              height: 45px;
              border-radius: 50%;
              margin-right: 10px;
            " />
        CMS.HAILearning
      </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">
          <li class="nav-item">
            <a class="nav-link <%= currentPath === '/' ? 'active' : '' %>" href="/">Main</a>
          </li>
          <li class="nav-item">
            <span class="nav-link text-muted px-2">|</span>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle <%= currentPath === '/admin/home' || currentPath === '/admin/header' || currentPath === '/admin/footer' ? 'active' : '' %>"
              href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Home
            </a>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/home' ? 'active' : '' %>"
                  href="/admin/home">Homepage</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/header' ? 'active' : '' %>"
                  href="/admin/header">Header & Menu</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/footer' ? 'active' : '' %>"
                  href="/admin/footer">Footer</a>
              </li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle <%= currentPath === '/admin/about-us' || currentPath === '/admin/safety' || currentPath === '/admin/faq' || currentPath === '/admin/insurance' || currentPath === '/admin/travel' || currentPath === '/admin/terms-conditions' ? 'active' : '' %>"
              href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              About
            </a>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/about-us' ? 'active' : '' %>"
                  href="/admin/about-us">About us</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/safety' ? 'active' : '' %>"
                  href="/admin/safety">Safety</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/faq' ? 'active' : '' %>" 
                  href="/admin/faq">FAQ</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/insurance' ? 'active' : '' %>"
                  href="/admin/insurance">Insurance</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/travel' ? 'active' : '' %>"
                  href="/admin/travel">Travel</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/terms-conditions' ? 'active' : '' %>"
                  href="/admin/terms-conditions">Terms & Conditions</a>
              </li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle <%= currentPath === '/admin/service' || currentPath === '/admin/activity' ? 'active' : '' %>"
              href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Services
            </a>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/service' ? 'active' : '' %>"
                  href="/admin/service">Service</a>
              </li>
              <li>
                <a class="dropdown-item <%= currentPath === '/admin/activity' ? 'active' : '' %>"
                  href="/admin/activity">Activity & Booking</a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link <%= currentPath === '/admin/blog' ? 'active' : '' %>"
              href="/admin/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link <%= currentPath === '/admin/contact' ? 'active' : '' %>" 
              href="/admin/contact">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link <%= currentPath === '/admin/appointment' ? 'active' : '' %>"
              href="/admin/appointment">Appointment</a>
          </li>
          <li class="nav-item">
            <a class="nav-link <%= currentPath === '/admin/pricing' ? 'active' : '' %>"
              href="/admin/pricing">Pricing</a>
          </li>
        </ul>
        <div class="d-flex align-items-center">
          <% if (locals.user) { %>
            <a href="/admin/dashboard" class="btn btn-primary me-2">
              <i class="fas fa-tachometer-alt me-1"></i>Dashboard
            </a>
            <a href="/auth/logout" class="btn btn-outline-danger">
              <i class="fas fa-sign-out-alt me-1"></i>Logout
            </a>
            <% } else { %>
              <a href="/auth/login" class="btn btn-outline-primary">
                <i class="fas fa-sign-in-alt me-1"></i>Login
              </a>
              <% } %>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <main>
    <!-- Flash Messages Data (Hidden) -->
    <% if(typeof success_msg !=='undefined' || typeof error_msg !=='undefined' || typeof error !=='undefined' ) { %>
      <div id="flash-messages-data" style="display: none">
        <%- JSON.stringify({ success_msg: typeof success_msg !=='undefined' && success_msg ? success_msg : null,
          error_msg: typeof error_msg !=='undefined' && error_msg ? error_msg : null, error: typeof error !=='undefined'
          && error ? error : null }) %>
      </div>
      <% } %> <%- body %>
  </main>

  <!-- Footer -->
  <footer class="mt-5">
    <div class="container py-4">
      <div class="row">
        <div class="col-md-4 mb-4 mb-md-0">
          <h5 class="mb-3">CMS.HAILearning</h5>
          <p>Simple and effective API management system.</p>
        </div>
        <div class="col-md-4 mb-4 mb-md-0">
          <h5 class="mb-3">Links</h5>
          <ul class="list-unstyled">
            <% if (locals.user) { %>
              <li class="mb-2">
                <a href="/admin/dashboard" class="text-decoration-none hover-opacity">Dashboard</a>
              </li>
              <% } else { %>
                <li class="mb-2">
                  <a href="/auth/login" class="text-decoration-none hover-opacity">Login</a>
                </li>
                <% } %>
          </ul>
        </div>
        <div class="col-md-4">
          <h5 class="mb-3">Contact</h5>
          <p class="mb-2">
            <i class="fas fa-map-marker-alt me-2"></i> 734 Luy Ban Bich St., Tan Thanh Ward, Tan Phu Dist, HCMC
          </p>
          <p class="mb-2">
            <i class="fas fa-envelope me-2"></i> <a href="mailto:get-info@hai.edu.vn" class="text-decoration-none hover-opacity">get-info@hai.edu.vn</a>
          </p>
          <p class="mb-2">
            <i class="fas fa-globe me-2"></i> <a href="https://hai.edu.vn" target="_blank" class="text-decoration-none hover-opacity">hai.edu.vn</a>
          </p>
        </div>
      </div>
      <hr class="my-4" />
      <div class="text-center">
        <p class="mb-0">
          &copy; <%= new Date().getFullYear() %> CMS.HAILearning. All rights
            reserved.
        </p>
      </div>
    </div>
  </footer>
  <!-- Import JS tại đây -->
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Axios for API calls -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- SortableJS for drag and drop -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

  <!-- Toast JS -->
  <script src="/js/toast.js"></script>

  <!-- Flash Handler JS -->
  <script src="/js/flash-handler.js"></script>

  <!-- Custom JS Utilities -->
  <script src="/js/main.js"></script>

  <!-- Custom modal enhancement -->
  <script src="/js/custom-modal.js"></script>

  <script>
    // Load Level Types cho dropdown menu Academics với submenu programmes
    document.addEventListener("DOMContentLoaded", function () {
      var levelDropdownMenu = document.getElementById("levelDropdownMenu");
      if (!levelDropdownMenu) return;

      var defaultItems = Array.from(levelDropdownMenu.children).slice(0, 4);

      fetch("/api/level-types")
        .then(function (response) {
          if (response.ok) {
            return response.json();
          }
          return [];
        })
        .then(function (types) {
          if (types.length > 0) {
            levelDropdownMenu.innerHTML = "";

            defaultItems.forEach(function (item) {
              levelDropdownMenu.appendChild(item.cloneNode(true));
            });

            types.forEach(function (type) {
              var formattedType = type
                .split("-")
                .map(function (word) {
                  return word.charAt(0).toUpperCase() + word.slice(1);
                })
                .join(" ");

              var container = document.createElement("li");
              container.className = "nav-level-container";

              var link = document.createElement("a");
              link.href = "/admin/level?type=" + type;
              link.className = "dropdown-item d-flex justify-content-between align-items-center";
              link.innerHTML =
                '<span><i class="fas fa-user-graduate me-2" style="color: var(--primary-color);"></i>' +
                formattedType + '</span><i class="fas fa-chevron-right nav-submenu-indicator"></i>';

              if (window.location.pathname.includes("/admin/level") && window.location.search.includes(
                "type=" + type)) {
                link.classList.add("active");
              }

              container.appendChild(link);

              var submenu = document.createElement("ul");
              submenu.className = "nav-level-submenu";
              container.appendChild(submenu);

              levelDropdownMenu.appendChild(container);

              var adjustSubmenuPosition = function () {
                setTimeout(function () {
                  var containerRect = container.getBoundingClientRect();
                  var submenuWidth = 220;
                  var viewportWidth = window.innerWidth;
                  var viewportHeight = window.innerHeight;

                  submenu.classList.remove("submenu-left", "submenu-top");

                  if (containerRect.right + submenuWidth > viewportWidth - 20) {
                    submenu.classList.add("submenu-left");
                  }

                  var submenuHeight = submenu.scrollHeight;

                  if (containerRect.bottom + submenuHeight > viewportHeight - 20) {
                    submenu.classList.add("submenu-top");
                  }
                }, 100);
              };

              container.addEventListener("mouseenter", adjustSubmenuPosition);

              fetch("/api/allpro/" + type)
                .then(function (programmeResponse) {
                  if (programmeResponse.ok) {
                    return programmeResponse.json();
                  }
                  return [];
                })
                .then(function (programmes) {
                  var createNewBtn = document.createElement("li");
                  var createNewLink = document.createElement("a");
                  createNewLink.href = "/admin/programme/create?level_type=" + type;
                  createNewLink.className = "dropdown-item nav-submenu-item nav-create-new-btn";
                  createNewLink.innerHTML =
                    '<i class="fas fa-plus me-2" style="color: var(--primary-color);"></i>Create New Programme';
                  createNewBtn.appendChild(createNewLink);
                  submenu.appendChild(createNewBtn);

                  var divider = document.createElement("li");
                  divider.innerHTML = '<hr class="dropdown-divider">';
                  submenu.appendChild(divider);

                  if (programmes && programmes.length > 0) {
                    programmes.forEach(function (programme) {
                      var programmeItem = document.createElement("li");
                      var programmeLink = document.createElement("a");
                      programmeLink.href = "/admin/programme?code=" + programme.code;
                      programmeLink.className = "dropdown-item nav-submenu-item";
                      programmeLink.innerHTML =
                        '<i class="fas fa-graduation-cap me-2" style="color: var(--primary-color);"></i>' +
                        programme.name;
                      programmeItem.appendChild(programmeLink);
                      submenu.appendChild(programmeItem);
                    });
                  } else {
                    var noProgItem = document.createElement("li");
                    var noProgMessage = document.createElement("a");
                    noProgMessage.className = "dropdown-item nav-submenu-item disabled";
                    noProgMessage.innerHTML = "No programmes available";
                    noProgItem.appendChild(noProgMessage);
                    submenu.appendChild(noProgItem);
                  }
                })
                .catch(function (progError) {
                  console.error("Error loading programmes for " + type + ":", progError);
                });
            });

            console.log("Added " + types.length + " custom level types with submenus to navigation dropdown");
          }
        })
        .catch(function (error) {
          console.error("Error loading level types for navigation dropdown:", error);
        });
    });
  </script>

  <%- script %>
</body>

</html>