<?php

require_once "dbconnection.php";



$announcementText = "📢 No announcements available.";

$sql = "SELECT title, message FROM announcements 

        WHERE DATE(created_at) + INTERVAL days_to_display DAY >= CURDATE()

        ORDER BY id DESC";



$stmt = $con->prepare($sql);

$stmt->execute();

$stmt->bind_result($title, $message);



$items = [];

while ($stmt->fetch()) {

  $safeTitle = htmlspecialchars($title, ENT_QUOTES, 'UTF-8');

  $safeMessage = htmlspecialchars($message, ENT_QUOTES, 'UTF-8');

  $items[] = "<span class='ticker-tag'>NEW</span> <strong>{$safeTitle}</strong>: {$safeMessage}";

}

$stmt->close();



if (!empty($items)) {

  $announcementText = implode(" &nbsp;&nbsp;&nbsp; • &nbsp;&nbsp;&nbsp; ", $items);

}

?>

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

    --exit-bg: rgba(255, 255, 255, 0.75);

    --exit-accent: #f43f5e;

    /* Rose/Ember for the Exit action */

    --exit-text: #334155;

    --exit-glass-border: rgba(255, 255, 255, 0.4);

    --accent-blue: #f43f5e;

  }
   :root {

    --std-primary: #0ea5e9;

    /* Sky Blue */

    --std-dark: #1e3a8a;

    /* Royal Blue */

    --std-glass: rgba(255, 255, 255, 0.85);

    --accent-blue: #4f46e5;

  }



  /* 2026 Ultra-Light Floating Navbar */

  .main-header.navbar {

    border-radius: 20px !important;

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

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

    backdrop-filter: blur(18px) saturate(180%);

    -webkit-backdrop-filter: blur(18px) saturate(180%);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

    padding: 0.7rem 1.5rem;

  }





  /* Minimalist Search Bar */

  .search-minimal {

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

    border-radius: 12px;

    padding: 6px 15px;

    border: 1px solid transparent;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  }



  .search-minimal:focus-within {

    background: #fff;

    border-color: #cbd5e1;

    width: 240px;

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

  }



  .search-minimal input {

    border: none;

    background: transparent;

    outline: none;

    font-size: 0.9rem;

    color: var(--exit-text);

    width: 100%;

  }



  /* Portal Exit Dropdown */

  .dropdown-menu-lg {

    border-radius: 22px !important;

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

    padding: 12px !important;

    margin-top: 15px !important;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08) !important;

  }



  .dropdown-item {

    border-radius: 14px;

    padding: 12px 16px;

    margin-bottom: 4px;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    font-weight: 500;

    color: #64748b;

  }



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

  }



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

    }

  }
  /* Floating Announcement Capsule */

  .announcement-bar {

    margin: 0 20px 15px 20px;

    background: linear-gradient(90deg, var(--std-dark), var(--std-primary));

    color: #fff;

    padding: 8px 20px;

    border-radius: 50px;

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);

    overflow: hidden;

    position: relative;

  }



  .announcement-icon {

    margin-right: 15px;

    animation: bell-shake 2s infinite;

  }



  @keyframes bell-shake {



    0%,

    100% {

      transform: rotate(0);

    }



    10%,

    30% {

      transform: rotate(15deg);

    }



    20%,

    40% {

      transform: rotate(-15deg);

    }



    50% {

      transform: rotate(0);

    }

  }



  .ticker-tag {

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

    padding: 2px 8px;

    border-radius: 6px;

    font-size: 0.7rem;

    margin-right: 8px;

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

  }



  .announcement-track {

    display: inline-block;

    white-space: nowrap;

    padding-left: 100%;

    animation: marquee 40s linear infinite;

  }



  @keyframes marquee {

    0% {

      transform: translateX(0);

    }



    100% {

      transform: translateX(-100%);

    }

  }
  
  .announcement-close {

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

    width: 24px;

    height: 24px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 15px;

    cursor: pointer;

    transition: 0.3s;

  }



  .announcement-close:hover {

    background: rgba(255, 255, 255, 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 text-muted"></i>

      </a>

    </li>

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

      <a href="#" class="nav-link font-weight-bold" style="color: var(--exit-text);">Dashboard</a>

    </li>

  </ul>



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

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

      <i class="fas fa-search text-muted mr-2" style="font-size: 0.8rem;"></i>

      <input type="search" id="navSearchEnt" placeholder="Find module..." aria-label="Search" autocomplete="off">

    </div>

    <div id="navSearchResultsEnt" 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">

    <li class="nav-item dropdown">

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

        <div

          style="width: 38px; height: 38px; border-radius: 50%; background: #f8fafc; display: flex; align-items: center; justify-content: center; border: 1px solid #f1f5f9;">

          <i class="fas fa-user-circle text-muted" style="font-size: 1.2rem;"></i>

        </div>

      </a>

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

        <a href="#" class="dropdown-item">

          <i class="far fa-envelope-open mr-3"></i> Messages

        </a>

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

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

          <i class="fas fa-power-off mr-2"></i> <b>EXIT</b>

        </a>

      </div>

    </li>

  </ul>

</nav>

<div class="announcement-bar" id="announcementBar">

  <i class="fas fa-bell announcement-icon"></i>

  <div

    style="flex: 1; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);">

    <div class="announcement-track">

      <?php echo $announcementText; ?>

    </div>

  </div>

  <div class="announcement-close" id="announcementClose">

    <i class="fas fa-times" style="font-size: 10px;"></i>

  </div>

</div>







<script>

  (function () {

    let t;

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

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

    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=entrance&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(--exit-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>