<?php
// Secure database connection.
include 'connection.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>District Judicairy Buner</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <link href="img/favicon.ico" rel="icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .header-top-bar {
            padding: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            text-align: center;
        }
        
        .header-logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        .header-text {
            color: #fff;
            direction: rtl;
            margin: 0;
            font-size: 3.5rem;
            line-height: 1.2;
        }

        .navbar-nav {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .navbar-nav .nav-link {
            padding-left: 1rem;
            padding-right: 1rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .navbar-brand img {
            width: 120px;
            height: auto;
        }

        .navbar-nav .nav-link i {
            margin-right: 8px;
        }
        
        @media (max-width: 992px) {
            .header-logo-container {
                flex-direction: column;
                gap: 5px;
            }
            .header-text {
                font-size: 2.2rem;
            }
        }
    </style>
</head>

<body>
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <h4>Loading...</h4>
        </div>
    </div>
    <div class="container-fluid bg-dark px-0">
        <div class="header-top-bar bg-dark">
            <div class="header-logo-container">
                <a href="index.php" class="navbar-brand p-0">
                    <img src="img/logo.png" alt="District Judiciary Buner Logo">
                </a>
                <h1 class="header-text">
                    ضلعی عدلیہ بونیر
                </h1>
            </div>
        </div>
        <div class="nav-container w-100">
            <nav class="navbar navbar-expand-lg bg-dark navbar-dark p-3 p-lg-0">
                <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <div class="navbar-nav">
                        <?php
                        $currentPage = basename($_SERVER['PHP_SELF']);
                        ?>
                        <a href="index.php" class="nav-item nav-link <?php if ($currentPage == 'index.php') {echo 'active';} ?>"><i class="fa fa-home"></i> Home</a>
                          <a href="causelist.php" class="nav-item nav-link <?php if ($currentPage == 'causelist.php') {echo 'active';} ?>"><i class="fa fa-list-alt"></i> Cause List</a>
                        <a href="news.php" class="nav-item nav-link <?php if ($currentPage == 'news.php') {echo 'active';} ?>"><i class="fa fa-newspaper"></i> News & Events</a>
                        <a href="jobs.php" class="nav-item nav-link <?php if ($currentPage == 'jobs.php') {echo 'active';} ?>"><i class="fa fa-briefcase"></i> Tenders & Jobs</a>
                        <a href="judicial.php" class="nav-item nav-link <?php if ($currentPage == 'judicial.php') {echo 'active';} ?>"><i class="fa fa-gavel"></i> Judicial Officers</a>
                        <a href="staff.php" class="nav-item nav-link <?php if ($currentPage == 'staff.php') {echo 'active';} ?>"><i class="fa fa-users"></i> Staff</a>
                      
                        <a href="research.php" class="nav-item nav-link <?php if ($currentPage == 'research.php') {echo 'active';} ?>"><i class="fa fa-book"></i> Publications/Research</a>
                        <a href="downloads.php" class="nav-item nav-link <?php if ($currentPage == 'downloads.php') {echo 'active';} ?>"><i class="fa fa-download"></i> Downloads</a>
                        <a href="police-stations.php" class="nav-item nav-link <?php if ($currentPage == 'police-stations.php') {echo 'active';} ?>"><i class="fa fa-building"></i> Police Stations</a>
                        <a href="PSagency.php" class="nav-item nav-link <?php if ($currentPage == 'PSagency.php') {echo 'active';} ?>"><i class="fa fa-user-tie"></i> PS Agency</a>
                        <a href="mod.php" class="nav-item nav-link <?php if ($currentPage == 'mod.php') {echo 'active';} ?>"><i class="fa fa-shield-alt"></i> MOD's</a>
                        <a href="about.php" class="nav-item nav-link <?php if ($currentPage == 'about.php') {echo 'active';} ?>"><i class="fa fa-info-circle"></i> About Buner</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <marquee style="margin-top:3px;">
        <?php
        $stmt = $conn->prepare("SELECT an_titile, details FROM `announcement` WHERE 1 ORDER BY ID DESC LIMIT 3");
        $stmt->execute();
        $aresult = $stmt->get_result();
        if ($aresult && $aresult->num_rows > 0) {
            $announcement = "";
            while ($arow = $aresult->fetch_assoc()) {
                $announcement .= "&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; *&nbsp;&nbsp; " . htmlspecialchars($arow["an_titile"]) . "&nbsp;&nbsp;/". htmlspecialchars($arow["details"]);
            }
            echo '<span class="text-white" style="font-size: 1.1rem; font-weight: 500;">' . $announcement . '</span>';
        }
        $stmt->close();
        ?>
    </marquee>