<!-- Page loader overlay -->

<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 {

    --tch-bg: rgba(255, 255, 255, 0.88);

    --tch-accent: #059669;

    /* Emerald/Sage Green */

    --tch-dark: #064e3b;

    --tch-text: #111827;

    --tch-border: rgba(209, 213, 219, 0.5);

    --accent-blue: #059669;

  }



  /* 2026 Floating Navbar for Teachers */

  .main-header.navbar {

    border-radius: 18px !important;

    border: 1px solid var(--tch-border) !important;

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

    backdrop-filter: blur(12px);

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

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

    padding: 0.6rem 1.4rem;

    transition: transform 0.3s ease;

  }





  /* Productivity-Focused Search */

  .teacher-search-box {

    background: #f3f4f6;

    border-radius: 12px;

    padding: 6px 18px;

    display: flex;

    align-items: center;

    border: 1px solid transparent;

    transition: all 0.3s;

    width: 100%;

    max-width: 300px;

  }



  .teacher-search-box:focus-within {

    background: #ffffff;

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

    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);

  }



  .teacher-search-box input {

    border: none;

    background: transparent;

    outline: none;

    font-size: 0.9rem;

    color: var(--tch-text);

    margin-left: 10px;

    width: 100%;

  }



  /* Refined Dropdown Menu */

  .dropdown-menu-lg {

    border-radius: 20px !important;

    border: 1px solid var(--tch-border) !important;

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

    margin-top: 15px !important;

    padding: 8px !important;

  }



  .dropdown-item {

    border-radius: 12px;

    padding: 10px 16px;

    font-weight: 500;

    color: #374151;

    transition: all 0.2s;

    display: flex;

    align-items: center;

  }



  .dropdown-item:hover {

    background: #ecfdf5;

    color: var(--tch-accent);

    transform: translateX(4px);

  }



  .dropdown-item i {

    width: 25px;

    font-size: 1.1rem;

    color: #9ca3af;

  }



  .dropdown-item:hover i {

    color: var(--tch-accent);

  }



  /* 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);

    }

  }
</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" style="color: var(--tch-dark);"></i>

      </a>

    </li>

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

      <a href="teacher_dashboard.php" class="nav-link font-weight-bold" style="color: var(--tch-dark);">Dashboard</a>

    </li>

  </ul>



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

    <div class="teacher-search-box">

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

      <input type="search" id="navSearchT" placeholder="Search students, classes..." aria-label="Search"
        autocomplete="off">

    </div>

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

  </form>



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

    <li class="nav-item dropdown">

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

        <div
          style="background: #ecfdf5; color: var(--tch-accent); padding: 5px 12px; border-radius: 10px; border: 1px solid rgba(5, 150, 105, 0.1); display: flex; align-items: center; gap: 8px;">

          <i class="fas fa-chalkboard-teacher"></i>

          <span class="d-none d-sm-inline" style="font-size: 0.85rem; font-weight: 700;">TEACHER</span>

        </div>

      </a>

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

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

          <i class="far fa-user-circle"></i> My Profile

        </a>

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

          <i class="fas fa-key"></i> Security Settings

        </a>

        <div class="dropdown-divider" style="margin: 8px 12px; opacity: 0.4;"></div>

        <a href="logoutteacher.php" class="dropdown-item" style="color: #dc2626; background: rgba(220, 38, 38, 0.05);">

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

        </a>

      </div>

    </li>

  </ul>

</nav>



<script>

  (function () {

    let t;

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

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

    if (!input) return;

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

      clearTimeout(t);

      const q = this.value.trim();

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

      t = setTimeout(() => {

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

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

          .then(data => {

            if (!data.results.length) {

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

            } else {

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

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

                <i class="${r.icon} mr-2" style="color:var(--tch-accent)"></i>

                <span><strong style="display:block;font-size:.85rem">${r.label}</strong>

                <small class="text-muted">${r.sub}${r.detail ? ' — ' + r.detail : ''}</small></span>

              </a>`

              ).join('');

            }

            box.style.display = 'block';

          });

      }, 280);

    });

    document.addEventListener('click', e => {

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

    });

  })();

</script>