{% load static %}

{% block extrastyle %}
<style>
  /* ===========================
     Navbar Base
  =========================== */
  .navbar {
    background-color: #89ceb9 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    z-index: 1030;
  }

  /* Critical: allow mega menu to overflow */
  .navbar,
  .navbar .container-fluid,
  .navbar-collapse,
  .navbar-nav,
  .nav-item.dropdown {
    overflow: visible !important;
  }

  .navbar-brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: #1a3c34 !important;
    transition: all 0.3s ease;
  }

  .navbar-brand img {
    transition: transform 0.35s ease;
  }

  .navbar-brand:hover img {
    transform: scale(1.08) rotate(-6deg);
  }

  .navbar-brand:hover {
    color: #0d6efd !important;
  }

  /* ===========================
     Nav Links
  =========================== */
  .navbar-nav .nav-link {
    position: relative;
    font-weight: 500;
    color: #2c3e50 !important;
    padding: 0.65rem 1rem !important;
    margin: 0 0.15rem;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 0;
    height: 2.5px;
    background: #0d6efd;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.3s ease;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
    color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.08);
  }

  .navbar-nav .nav-link:hover::after,
  .navbar-nav .nav-link.active::after {
    width: 55%;
  }

  /* ===========================
     Mega Menu
  =========================== */
  .mega-dropdown {
    position: static; /* important for full-width behaviour */
  }

  .mega-menu {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    padding: 1.75rem 1.5rem;
    background: #ffffff;
    
    /* Prevent overflow / cutting off */
    width: max-content;
    max-width: min(920px, 96vw);
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(10px);
    
    opacity: 0;
    visibility: hidden;
    display: block;
    transition: all 0.28s ease;
    z-index: 1050;
  }

  /* Show on hover (desktop) */
  @media (min-width: 992px) {
    .mega-dropdown:hover > .mega-menu,
    .mega-dropdown.show > .mega-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
  }

  .mega-menu .mega-column {
    padding: 0 1.1rem;
    min-width: 200px;
  }

  .mega-menu .mega-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #6c757d;
    margin-bottom: 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid #e9ecef;
  }

  .mega-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    font-weight: 500;
    color: #343a40;
    white-space: nowrap;
    transition: all 0.22s ease;
  }

  .mega-menu .dropdown-item i {
    width: 22px;
    color: #0d6efd;
  }

  .mega-menu .dropdown-item:hover {
    background: #f0f7ff;
    color: #0d6efd;
    padding-left: 1.15rem;
  }

  /* ===========================
     User Dropdown
  =========================== */
  .user-dropdown .dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    min-width: 240px;
    padding: 0.6rem;
    z-index: 1050;
  }

  .user-dropdown .dropdown-item {
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-weight: 500;
  }

  .user-dropdown .dropdown-item:hover {
    background: #f8f9fa;
  }

  .user-dropdown .dropdown-item.text-danger:hover {
    background: #fff5f5;
    color: #dc3545 !important;
  }

  /* ===========================
     Mobile
  =========================== */
  @media (max-width: 991.98px) {
    .mega-dropdown {
      position: relative;
    }

    .mega-menu {
      position: static !important;
      transform: none !important;
      left: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-shadow: none;
      border-radius: 12px;
      padding: 0.75rem 0.5rem;
      margin-top: 0.5rem;
      background: #f8f9fa;
      opacity: 1;
      visibility: visible;
      display: none; /* controlled by Bootstrap collapse/show */
    }

    .mega-dropdown.show > .mega-menu {
      display: block;
    }

    .mega-menu .row {
      flex-direction: column;
    }

    .mega-menu .mega-column {
      padding: 0.75rem 0.5rem;
      border-bottom: 1px solid #e9ecef;
      min-width: 100%;
    }

    .mega-menu .mega-column:last-child {
      border-bottom: none;
    }

    .navbar-collapse {
      background: #ffffff;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      margin-top: 0.5rem;
      padding: 0.75rem;
    }
  }

  /* Sign Up Button */
  .btn-signup {
    background: #ffffff;
    color: #0d6efd;
    font-weight: 600;
    border-radius: 50px;
    padding: 0.45rem 1.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .btn-signup:hover {
    background: #0d6efd;
    color: #ffffff;
    transform: translateY(-2px);
  }
</style>
{% endblock %}

<!-- =========================== Navbar =========================== -->
<nav class="navbar navbar-expand-lg sticky-top">
  <div class="container-fluid px-3 px-lg-4">

    <!-- Brand -->
    <a class="navbar-brand d-flex align-items-center gap-2" href="{% url 'core:home' %}">
      <img src="{% static 'images/rccg.jpg' %}" 
           alt="Bursary & Scholarship" 
           class="rounded-circle shadow-sm" 
           width="42" height="42">
      <span class="d-none d-sm-inline">Bursary & Scholarship Award System</span>
      <span class="d-inline d-sm-none">Bursary System</span>
    </a>

    <!-- Toggler -->
    <button class="navbar-toggler border-0 shadow-none" type="button" 
            data-bs-toggle="collapse" data-bs-target="#navbarNav" 
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Menu -->
    <div class="collapse navbar-collapse" id="navbarNav">

      <!-- Left Links -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:home' %}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:about' %}">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:help_center' %}">Help</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:contact' %}">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:scholarship_wizard_start' %}">Application Form</a>
        </li>
      </ul>

      <!-- Right Side -->
      <ul class="navbar-nav align-items-lg-center">

        {% if user.is_authenticated %}

          <!-- ========== Management Mega Menu ========== -->
          {% if user.is_staff or user.is_superuser %}
          <li class="nav-item dropdown mega-dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" 
               data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
              <i class="bi bi-shield-lock me-1"></i> Management
            </a>

            <div class="dropdown-menu mega-menu">
              <div class="row g-0">

                <!-- Column 1 -->
                <div class="col-lg-4 mega-column">
                  <div class="mega-title">Dashboard & Users</div>
                  <a class="dropdown-item" href="{% url 'core:admin_dashboard' %}">
                    <i class="bi bi-speedometer2 me-2"></i> Admin Dashboard
                  </a>
                  <a class="dropdown-item" href="{% url 'core:user_management' %}">
                    <i class="bi bi-people me-2"></i> User Management
                  </a>
                  <a class="dropdown-item" href="">
                    <i class="bi bi-chat-dots me-2"></i> SMS Message Center
                  </a>
                </div>

                <!-- Column 2 -->
                <div class="col-lg-4 mega-column">
                  <div class="mega-title">Assessments</div>
                  <a class="dropdown-item" href="{% url 'cbt:assessment_list' %}">
                    <i class="bi bi-clipboard-check me-2"></i> All Assessments
                  </a>
                  <a class="dropdown-item" href="{% url 'cbt:assessment_create' %}">
                    <i class="bi bi-plus-circle me-2"></i> New Assessment
                  </a>

                  <div class="mega-title mt-3">Question Bank</div>
                  <a class="dropdown-item" href="{% url 'cbt:admin_questions_list' %}">
                    <i class="bi bi-question-circle me-2"></i> Questions
                  </a>
                  <a class="dropdown-item" href="{% url 'cbt:admin_upload_data' %}">
                    <i class="bi bi-upload me-2"></i> Upload Data
                  </a>
                </div>

                <!-- Column 3 -->
                <div class="col-lg-4 mega-column">
                  <div class="mega-title">Monitoring & Results</div>
                  <a class="dropdown-item" href="{% url 'cbt:admin_attempts_list' %}">
                    <i class="bi bi-bar-chart me-2"></i> Assessment Results
                  </a>
                  <a class="dropdown-item" href="{% url 'cbt:admin_user_score_summary' %}">
                    <i class="bi bi-trophy me-2"></i> User Score Summary
                  </a>
                  <a class="dropdown-item" href="{% url 'cbt:admin_answers_list' %}">
                    <i class="bi bi-check2-square me-2"></i> Answers
                  </a>
                  <a class="dropdown-item" href="{% url 'cbt:admin_proctor_reports' %}">
                    <i class="bi bi-shield-check me-2"></i> Proctor Reports
                  </a>
                </div>

              </div>
            </div>
          </li>
          {% endif %}

          <!-- ========== User Dropdown ========== -->
          <li class="nav-item dropdown user-dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" 
               data-bs-toggle="dropdown" aria-expanded="false">
              <i class="bi bi-person-circle me-1"></i>
              {{ user.get_full_name|default:user.username }}
            </a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <a class="dropdown-item" href="{% url 'cbt:assessment_list' %}">
                  <i class="fa fa-graduation-cap me-2"></i> CBT Exams
                </a>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item" href="{% url 'core:profile' %}">
                  <i class="bi bi-person-badge me-2"></i> Profile
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'core:report_issue' %}">
                  <i class="bi bi-exclamation-circle me-2"></i> Report an Issue
                </a>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item text-danger" href="{% url 'account_logout' %}">
                  <i class="bi bi-box-arrow-right me-2"></i> Logout
                </a>
              </li>
            </ul>
          </li>

        {% else %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_login' %}">Login</a>
          </li>
          <li class="nav-item ms-lg-2">
            <a class="btn btn-signup" href="{% url 'account_signup' %}">Sign Up</a>
          </li>
        {% endif %}

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