<!-- Page loader overlay — injected immediately so it shows before any JS loads -->

<div id="page-loader">

  <div class="pl-logo">

    <?php echo isset($school_name) ? htmlspecialchars($school_name) : 'Loading...'; ?>

  </div>

  <div class="pl-bar-track">

    <div class="pl-bar-fill"></div>

  </div>

</div>



<style>
  :root {

    --nav-bg: rgba(255, 255, 255, 0.8);

    --accent-blue: #4f46e5;

    --accent-red: #ef4444;

    --accent-orange: #f59e0b;

    --text-main: #1e293b;

    --exit-accent: #f43f5e;

    /* Rose/Ember for the Exit action */

    --exit-text: #334155;

  }





  /* 2026 Floating Navbar Style */

  .main-header.navbar {



    border-radius: 20px !important;

    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    background: var(--nav-bg) !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;

    padding: 0.75rem 1.5rem;

  }



  /* Search Bar Design */

  .navbar-search-modern {

    background: rgba(0, 0, 0, 0.04);

    border-radius: 12px;

    border: 1px solid transparent;

    transition: all 0.3s ease;

    padding: 5px 15px;

  }



  .navbar-search-modern:focus-within {

    background: #fff;

    border-color: var(--accent-blue);

    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);

  }



  .navbar-search-modern input {

    background: transparent;

    border: none;

    color: var(--text-main);

    outline: none;

  }



  /* Notification Badge Pulse */

  .navbar-badge {

    font-size: 0.65rem;

    font-weight: 700;

    padding: 2px 5px;

    border-radius: 50%;

    top: 5px !important;

    right: 2px !important;

    animation: pulse-badge 2s infinite;

  }



  @keyframes pulse-badge {

    0% {

      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);

    }



    70% {

      box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);

    }



    100% {

      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);

    }

  }



  /* Modern Dropdown Menus */

  .dropdown-menu-lg {

    border: 1px solid rgba(0, 0, 0, 0.05);

    border-radius: 18px !important;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    margin-top: 15px !important;

    overflow: hidden;

  }



  .dropdown-header {

    font-weight: 700;

    color: var(--text-main);

    padding: 15px;

    background: #f8fafc;

    border-bottom: 1px solid #f1f5f9;

  }



  .dropdown-item {

    padding: 12px 20px;

    transition: background 0.2s;

    border-radius: 10px;

    margin: 5px 10px;

    width: calc(100% - 20px);

  }



  .dropdown-item:hover {

    background-color: #f1f5f9;

  }



  /* Specific message styles */

  .msg-fullname {

    font-weight: 600;

    color: #334155;

    display: block;

  }



  .msg-subtitle {

    font-size: 0.85rem;

    color: #64748b;

  }



  .msg-date {

    font-size: 0.75rem;

    color: #94a3b8;

    margin-top: 4px;

    display: block;

  }



  /* Custom Loader 2026 */

  #loader {

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(8px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }



  .spinner {

    width: 40px;

    height: 40px;

    border: 3px solid #f3f3f3;

    border-top: 3px solid var(--accent-blue);

    border-radius: 50%;

    animation: spin 1s linear infinite;

  }



  @keyframes spin {

    0% {

      transform: rotate(0deg);

    }



    100% {

      transform: rotate(360deg);

    }

  }



  /* Exit Button Style inside Dropdown */

  .exit-btn-link {

    background: #fff1f2 !important;

    color: var(--exit-accent) !important;

    margin-top: 8px;

    justify-content: center;

    border: 1px solid rgba(244, 63, 94, 0.1);

  }



  .exit-btn-link:hover {

    background: var(--exit-accent) !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);

  }
</style>



<nav class="main-header navbar navbar-expand">

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-stream"></i></a>

    </li>

    <li class="nav-item d-none d-sm-inline-block">

      <a href="dashboard.php" class="nav-link font-weight-bold">Dashboard</a>

    </li>

  </ul>



  <form class="form-inline ml-3 d-none d-md-flex" onsubmit="return false;" style="position:relative;">

    <div class="navbar-search-modern d-flex align-items-center">

      <i class="fas fa-search text-muted mr-2"></i>

      <input type="search" id="navSearch" placeholder="Search records..." aria-label="Search" autocomplete="off">

    </div>

    <div id="navSearchResults" class="dropdown-menu dropdown-menu-lg"
      style="display:none; position:absolute; top:100%; left:0; min-width:280px; z-index:9999;"></div>

  </form>



  <ul class="navbar-nav ml-auto align-items-center">

    <li class="nav-item dropdown mr-2">

      <a class="nav-link" data-toggle="dropdown" href="#">

        <i class="far fa-bell"></i>

        <span class="badge badge-warning navbar-badge" id="message-count">0</span>

      </a>

      <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">

        <span class="dropdown-item dropdown-header text-center">Payment Approvals</span>

        <div id="payment-message-list" class="mt-2" style="max-height: 350px; overflow-y: auto;">

          <a class="dropdown-item text-center text-muted">No new requests</a>

        </div>

      </div>

    </li>



    <li class="nav-item dropdown mr-2">

      <a class="nav-link" data-toggle="dropdown" href="#">

        <i class="far fa-envelope"></i>

        <span class="badge badge-danger navbar-badge" id="email-message-count">0</span>

      </a>

      <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">

        <span class="dropdown-item dropdown-header text-center">Recent Emails</span>

        <div id="email-message-list" class="mt-2" style="max-height: 350px; overflow-y: auto;">

          <a class="dropdown-item text-center text-muted">No unread emails</a>

        </div>

      </div>

    </li>



    <li class="nav-item dropdown">

      <a class="nav-link d-flex align-items-center" data-toggle="dropdown" href="#">

        <div class="user-avatar-mini"
          style="width: 32px; height: 32px; border-radius: 10px; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; color: white;">

          <i class="fas fa-user-shield"></i>

        </div>

      </a>

      <div class="dropdown-menu dropdown-menu-right p-2" style="border-radius: 15px; min-width: 180px;">

        <a href="profile.php" class="dropdown-item">

          <i class="far fa-user-circle mr-2 text-primary"></i> My Profile

        </a>

        <a href="changepassword.php" class="dropdown-item">

          <i class="fas fa-key mr-2 text-muted"></i> Security Settings

        </a>

        <div class="dropdown-divider"></div>

        <a href="logout.php" class="dropdown-item exit-btn-link">

          <i class="fas fa-sign-out-alt mr-2"></i> Sign Out

        </a>

      </div>

    </li>

  </ul>

</nav>



<script>

  // ── Navbar live search ──────────────────────────────────────────────────────

  (function () {

    let searchTimer;

    const input = document.getElementById('navSearch');

    const box = document.getElementById('navSearchResults');

    if (!input) return;



    input.addEventListener('input', function () {

      clearTimeout(searchTimer);

      const q = this.value.trim();

      if (q.length < 2) { box.style.display = 'none'; return; }

      searchTimer = setTimeout(() => {

        fetch('includes/search.php?role=admin&q=' + encodeURIComponent(q))

          .then(r => r.json())

          .then(data => renderSearchResults(data.results, box));

      }, 280);

    });



    document.addEventListener('click', function (e) {

      if (!input.contains(e.target) && !box.contains(e.target)) box.style.display = 'none';

    });



    function renderSearchResults(results, box) {

      if (!results.length) {

        box.innerHTML = '<span class="dropdown-item text-muted text-center py-3">No results found</span>';

      } else {

        box.innerHTML = results.map(r => {

          const badge = r.type === 'page'

            ? `<span style="font-size:0.65rem;background:#eef2ff;color:#4f46e5;padding:1px 6px;border-radius:4px;margin-left:6px;font-weight:600;">PAGE</span>`

            : '';

          return `<a href="${r.url}" class="dropdown-item">

          <i class="${r.icon} mr-2 text-primary"></i>

          <span style="flex:1">

            <span class="msg-fullname">${r.label}${badge}</span>

            <span class="msg-subtitle">${r.sub}${r.detail && r.detail !== 'Page' ? ' &mdash; ' + r.detail : ''}</span>

          </span>

        </a>`;

        }).join('');

      }

      box.style.display = 'block';

    }

  })();



  document.addEventListener("DOMContentLoaded", function () {

    // Fetch payment requests

    fetch('includes/fetch_messages.php')

      .then(response => response.json())

      .then(data => {

        const paymentList = document.getElementById("payment-message-list");

        const paymentCount = document.getElementById("message-count");



        if (data.count > 0) {

          paymentCount.innerText = data.count;

          paymentList.innerHTML = "";

          data.messages.forEach(message => {

            const item = document.createElement("a");

            item.href = `redirect_to_approval.php?id=${message.id}`;

            item.classList.add("dropdown-item");

            item.innerHTML = `

            <span class="msg-fullname">${message.fullname}</span>

            <span class="msg-subtitle">${message.purpose} — NGN ${message.amount}</span>

            <span class="msg-date"><i class="far fa-clock mr-1"></i> ${message.date}</span>

          `;

            paymentList.appendChild(item);

          });

        }

      });



    // Fetch email notifications

    fetch('includes/fetch_email.php')

      .then(response => response.json())

      .then(data => {

        const emailList = document.getElementById("email-message-list");

        const emailCount = document.getElementById("email-message-count");



        if (data.count > 0) {

          emailCount.innerText = data.count;

          emailList.innerHTML = "";

          data.messages.forEach(message => {

            const item = document.createElement("a");

            item.href = `admin_emails.php?email_id=${message.id}`;

            item.classList.add("dropdown-item");

            item.innerHTML = `

            <span class="msg-fullname">${message.sender}</span>

            <span class="msg-subtitle" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;">${message.subject}</span>

            <span class="msg-date"><i class="far fa-clock mr-1"></i> ${message.date_received}</span>

          `;

            emailList.appendChild(item);

          });

        }

      });

  });

</script>