<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E&SE Kotli - District School Management System</title>
    
    <!-- Favicon -->
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            --success-color: #27ae60;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f9f9f9;
            padding-top: 0 !important;
            width: 100%;
            min-width: 320px;
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        /* Fluid typography */
        @media (min-width: 768px) {
            html {
                font-size: calc(16px + (20 - 16) * (100vw - 768px) / (1920 - 768));
            }
        }
        
        @media (min-width: 1920px) {
            html {
                font-size: 20px;
            }
        }
        
        /* Navigation - Mobile Optimized */
        .navbar {
            background-color: var(--primary-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 0.5rem 1rem;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1030;
        }
        
        .navbar-brand img {
            height: 35px;
            width: auto;
        }
        
        .nav-link {
            color: white;
            font-weight: 400;
            padding: 0.5rem 0.8rem;
            border-radius: 4px;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }
        
        .nav-link:hover, .nav-link:focus {
            background-color: rgba(255,255,255,0.1);
            color: var(--accent-color);
        }
        
        /* Search Button and Searched Text - Mobile Optimized */
        .search-input {
            width: 200px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
            font-size: 0.875rem;
        }
        
        .search-btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background-color: var(--accent-color);
            color: white;
            font-size: 0.875rem;
        }
        
        .search-btn:hover {
            background-color: #e67e22;
        }
        
        /* Highlight the Searched Text */
        mark.highlighted {
            background-color: yellow;
            color: black;
            padding: 0 2px;
            border-radius: 3px;
        }
        
        /* Active nav item styles */
        .navbar-dark .navbar-nav .nav-link.active,
        .navbar-dark .navbar-nav .nav-link.show,
        .navbar-dark .navbar-nav .nav-item.show .nav-link {
            color: #ffcc00 !important;
            font-weight: bold;
            background-color: transparent !important;
        }
        
        /* Hover states */
        .navbar-dark .navbar-nav .nav-link.active:hover,
        .navbar-dark .navbar-nav .nav-link.active:focus {
            color: #ffdb4d !important;
        }
        
        /* FIXED: Simple Dropdown Styles */
        .dropdown-menu {
            background-color: white;
            border: none;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            display: none;
            position: absolute;
            z-index: 1000;
            min-width: 200px;
        }
        
        .dropdown-menu.show {
            display: block;
        }
        
        /* Ensure dropdowns are positioned correctly */
        .dropdown {
            position: relative;
        }
        
        /* For the "Register" button (primary) */
		.btn-primary:hover, .btn-primary:focus {
			background-color: #e67e22; /* Darker orange */
			border-color: #e67e22;
		}
		
		/* For dropdown items inside these buttons */
		.dropdown-item {
            padding: 0.5rem 1rem;
            transition: all 0.2s ease;
            color: #333;
            display: block;
            text-decoration: none;
        }
        
        .dropdown-item:hover {
			background-color: var(--secondary-color);
			color: white;
		}
		
        /* Navbar Actions Container - Mobile Optimized */
        .nav-actions {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0.5rem;
        }
        
        /* Button group for login/register */
        .btn-group-mobile {
            display: flex;
            gap: 0.3rem;
        }
        
        .btn-group-mobile .btn {
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        /* Logo Table Styles - Mobile Optimized */
        .logo-custom-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 56px; /* Height of navbar */
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border: none !important;
        }
        
        .logo-custom-table td {
            padding: 1rem;
            vertical-align: middle;
            border: none !important;
        }
        
        .logo-col-1, .logo-col-3 {
            text-align: center;
            width: 15%;
        }
        
        .logo-col-2 {
            text-align: center;
            width: 70%;
        }
        
        .logo-col-2 p {
            margin: 0.2rem 0;
            line-height: 1.1;
            font-family: 'Montserrat', sans-serif;
        }
        
        .main-title {
            font-size: clamp(1.5rem, 3.5vw, 2.5rem);
            font-weight: 800;
            color: #006600;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
            white-space: nowrap;
            margin-bottom: 0.5rem;
        }
        
        .sub-title {
            font-size: clamp(1rem, 2vw, 1.5rem);
            color: var(--dark-color);
        }
        
        .logo-custom-table img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        /* Hero Section - Mobile Optimized */
        .hero-section {
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .carousel-item {
            height: calc(100vh - 56px - 150px); /* Adjust for navbar and logo table */
            min-height: 400px;
            background-size: cover;
            background-position: center;
        }
        
        .carousel-item img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        
        .carousel-caption {
            background: rgba(0, 0, 0, 0.6);
            padding: 1.5rem;
            border-radius: 8px;
            bottom: 20%;
            left: 5%;
            right: 5%;
            width: 90%;
        }
        
        .carousel-caption h3 {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        /* Updated News Ticker Styles - Mobile Optimized */
        .news-ticker {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 0.75rem 0;
            margin: 1.5rem 0;
            overflow: hidden;
        }

        .news-container {
            display: flex;
            align-items: center;
            width: 100%;
            position: relative;
        }

        .news-label {
            background-color: var(--accent-color);
            padding: 0.5rem 1rem;
            font-weight: 600;
            margin-right: 1.25rem;
            border-radius: 4px;
            flex-shrink: 0;
            z-index: 1;
        }

        .news-content-wrapper {
            flex-grow: 1;
            overflow: hidden;
            position: relative;
            height: 1.5em;
        }

        .news-content {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            animation: ticker 15s linear infinite;
            position: absolute;
            top: 0;
            left: 0;
        }

        .news-ticker:hover .news-content {
            animation-play-state: paused !important;
        }

        @keyframes ticker {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        
        /* Stats Section - Mobile Optimized */
        .stats-section {
            padding: 0rem 0;
            background-color: var(--primary-color);
            color: white;
            margin: 0rem 0;
        }
        
        .stat-number {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            color: var(--accent-color);
        }
        
        /* Accordion */
        .accordion-button:not(.collapsed) {
            color: var(--accent-color);
            background-color: rgba(243, 156, 18, 0.1);
        }
        
        /* Footer - Mobile Optimized */
        footer {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 0;
            font-size: 0.875rem;
        }
        
        .footer-logo {
            height: 35px;
            width: auto;
        }
        
        /* ========== MOBILE RESPONSIVE STYLES ========== */
        
        /* Large Tablets and Small Desktops */
        @media (max-width: 992px) {
            .navbar-nav {
                padding-top: 1rem;
            }
            
            .nav-item {
                margin-bottom: 0.5rem;
            }
            
            .nav-actions {
                margin: 1rem 0;
                justify-content: flex-start;
            }
            
            .logo-col-2 p {
                margin: 0.1rem 0;
                line-height: 1;
            }
            
            .main-title {
                font-size: clamp(1.3rem, 3.5vw, 2rem);
            }
            
            .sub-title {
                font-size: clamp(0.9rem, 1.8vw, 1.3rem);
            }
            
            /* Improve dropdown positioning */
            .dropdown-menu {
                position: static !important;
                float: none !important;
                width: 100% !important;
                margin-top: 0.5rem !important;
                box-shadow: none;
                border: 1px solid rgba(0,0,0,0.1);
            }
            
            .carousel-item {
                height: calc(100vh - 56px - 130px);
                min-height: 350px;
            }
        }
        
        /* Tablets */
        @media (max-width: 768px) {
            .hero-section {
                height: calc(100vh - 56px - 120px);
                min-height: 350px;
            }
            
            .carousel-caption {
                bottom: 10%;
                padding: 1rem;
            }
            
            .carousel-caption h3 {
                font-size: 1.3rem;
            }
            
            .news-container {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .news-label {
                margin-bottom: 0.75rem;
                margin-right: 0;
            }
            
            .news-content {
                white-space: normal;
                animation: none;
                padding-left: 0;
                position: static;
            }
            
            .logo-custom-table td {
                padding: 0.75rem;
            }
            
            .logo-col-1, .logo-col-3 {
                width: 20%;
            }
            
            .logo-col-2 {
                width: 60%;
            }
            
            .main-title {
                font-size: clamp(1.2rem, 3vw, 1.8rem);
                white-space: normal;
                line-height: 1.2;
            }
            
            .sub-title {
                font-size: clamp(0.8rem, 1.6vw, 1.1rem);
            }
            
            /* Adjust search bar for tablets */
            .search-input {
                width: 180px;
            }
            
            .nav-actions {
                gap: 0.4rem;
            }
        }
        
        /* Mobile Phones */
        @media (max-width: 576px) {
            .navbar {
                padding: 0.4rem 0.75rem;
            }
            
            .navbar-brand img {
                height: 30px;
            }
            
            .navbar-toggler {
                padding: 0.2rem 0.4rem;
                font-size: 0.9rem;
            }
            
            /* Hero section mobile adjustments */
            .hero-section {
                height: calc(100vh - 56px - 100px);
                min-height: 250px;
            }
            
            .carousel-caption {
                display: none; /* Hide captions on very small screens */
            }
            
            .carousel-item {
                min-height: 200px;
            }
            
            /* Stats mobile adjustments */
            .stat-item {
                padding: 0.5rem !important;
            }
            
            .stat-number {
                font-size: 1.5rem;
            }
            
            /* Logo table mobile layout */
            .logo-custom-table {
                display: block;
                margin-top: 50px; /* Adjusted for smaller navbar */
            }
            
            .logo-custom-table tbody {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            
            .logo-custom-table tr {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            
            .logo-custom-table td {
                width: 100% !important;
                text-align: center !important;
                padding: 0.5rem;
            }
            
            .logo-col-2 {
                order: -1;
                margin-bottom: 0.5rem;
            }
            
            .main-title {
                font-size: 1.3rem;
                line-height: 1.3;
                margin-bottom: 0.3rem;
            }
            
            .sub-title {
                font-size: 0.9rem;
            }
            
            .logo-col-1, .logo-col-3 {
                width: 40%;
                padding: 0.3rem;
            }
            
            .logo-custom-table img {
                max-height: 60px;
                margin: 0 auto;
            }
            
            /* Mobile navigation actions - buttons in single line */
            .nav-actions {
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                gap: 0.5rem;
                margin: 0.5rem 0;
                align-items: center;
            }
            
            /* Button group stays in single line */
            .btn-group-mobile {
                display: flex;
                gap: 0.3rem;
                margin-right: 0.5rem;
            }
            
            .btn-group-mobile .btn {
                padding: 0.3rem 0.6rem;
                font-size: 0.8rem;
                white-space: nowrap;
            }
            
            .input-group {
                width: 100% !important;
                margin-top: 0.5rem;
                flex: 1;
                min-width: 150px;
            }
            
            .search-input {
                width: 100%;
                font-size: 0.85rem;
            }
            
            /* Main content mobile adjustments */
            main.container {
                padding: 0 10px;
            }
            
            .display-4 {
                font-size: 2rem !important;
            }
            
            .accordion-button {
                font-size: 0.9rem;
                padding: 0.8rem 1rem;
            }
            
            .accordion-body img {
                width: 60px !important;
                height: 60px !important;
            }
            
            .footer-logo {
                height: 25px;
            }
            
            /* Improve dropdown menus for mobile */
            .dropdown-menu {
                position: static !important;
                transform: none !important;
                width: 100%;
                margin-top: 0.5rem;
            }
        }
        
        /* Small Mobile Phones */
        @media (max-width: 380px) {
            .navbar {
                padding: 0.3rem 0.5rem;
            }
            
            .main-title {
                font-size: 1.1rem;
            }
            
            .sub-title {
                font-size: 0.8rem;
            }
            
            .logo-custom-table td {
                padding: 0.3rem;
            }
            
            .logo-custom-table img {
                max-height: 50px;
            }
            
            .nav-link {
                font-size: 0.9rem;
                padding: 0.4rem 0.6rem;
            }
            
            /* Adjust button sizes for very small screens */
            .btn-group-mobile .btn {
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }
            
            .input-group {
                min-width: 120px;
            }
            
            .search-input {
                font-size: 0.8rem;
            }
            
            .stat-number {
                font-size: 1.2rem;
            }
            
            .display-4 {
                font-size: 1.8rem !important;
            }
        }
        
        /* Extra Small Screens */
        @media (max-width: 320px) {
            /* Ensure buttons stay in single line with smaller text */
            .btn-group-mobile .btn {
                font-size: 0.7rem;
                padding: 0.2rem 0.4rem;
            }
            
            .nav-actions {
                gap: 0.3rem;
            }
            
            .input-group {
                min-width: 110px;
            }
            
            .main-title {
                font-size: 1rem;
            }
        }
        
        /* Fix for very tall screens */
        @media (max-height: 500px) and (orientation: landscape) {
            .navbar-collapse {
                max-height: 70vh;
                overflow-y: auto;
            }
            
            .hero-section {
                height: calc(100vh - 56px - 80px);
                min-height: 200px;
            }
        }
        
        /* Add this to animated elements */
        .animate__animated {
            will-change: transform, opacity;
        }
        
        /* Simple dropdown arrow */
        .dropdown-toggle::after {
            display: inline-block;
            margin-left: 0.255em;
            vertical-align: 0.255em;
            content: "";
            border-top: 0.3em solid;
            border-right: 0.3em solid transparent;
            border-bottom: 0;
            border-left: 0.3em solid transparent;
        }
    </style>
</head>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand d-lg-none" href="#">
                <img src="images/Head_Logo1.png" alt="Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
                    
                    <!-- Summary Dropdown -->
                    <li class="nav-item dropdown" id="summaryDropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button">
                            Summary
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="schools_info.php">Schools</a></li>
                            <li><a class="dropdown-item" href="teacher&staff_info.php">Teachers & Staff</a></li>
                            <li><a class="dropdown-item" href="students_info.php">Students</a></li>
                            <li><a class="dropdown-item" href="overall_info.php">Overall Summary</a></li>
                        </ul>
                    </li>
                    
                    <li class="nav-item"><a class="nav-link" href="org_chart.php">Org Chart</a></li>
                    
                    <!-- Private Schools Dropdown -->
                    <li class="nav-item dropdown" id="privateSchoolsDropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button">
                            Private Schools
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="reg_schools.php">Registered</a></li>
                            <li><a class="dropdown-item" href="unreg_schools.php">Unregistered</a></li>
                            <li><a class="dropdown-item" href="blacklist_schools.php">Blacklist</a></li>
                            <li><a class="dropdown-item" href="reg_procedure.php">Procedure</a></li>
                        </ul>
                    </li>
                    
                    <li class="nav-item"><a class="nav-link" href="notification_show.php">Notifications</a></li>
                    <li class="nav-item"><a class="nav-link" href="gallery_show.php">Gallery</a></li>
                    <li class="nav-item"><a class="nav-link" href="contact_us.php">Contact</a></li>
                    
                    <!-- More Dropdown Menu - SIMPLIFIED -->
                    <li class="nav-item dropdown" id="moreDropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button">
                            More
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="elementary_board.php"><i class="fas fa-school me-2"></i>Elementary Board</a></li>
                            <li><a class="dropdown-item" href="examinations.php"><i class="fas fa-file-alt me-2"></i>Examinations</a></li>
                            <li><a class="dropdown-item" href="admissions.php"><i class="fas fa-user-graduate me-2"></i>Admissions</a></li>
                            <li><a class="dropdown-item" href="fort.php"><i class="fas fa-shield-alt me-2"></i>FORT</a></li>
                        </ul>
                    </li>
                </ul>

                <div class="nav-actions">
                    <!-- Login/Register buttons in a single line group -->
                    <div class="btn-group-mobile">
                        <div class="dropdown" id="loginDropdown">
                            <button class="btn btn-outline-light btn-sm dropdown-toggle" type="button">
                                Log In
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="login.php">School Login</a></li>
                                <li><a class="dropdown-item" href="login_emp.php">Employee Login</a></li>
                            </ul>
                        </div>
                        
                        <div class="dropdown" id="registerDropdown">
                            <button class="btn btn-primary btn-sm dropdown-toggle" type="button">
                                Register
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="register.php">School Registration</a></li>
                                <li><a class="dropdown-item" href="register_emp.php">Employee Registration</a></li>
                            </ul>
                        </div> 
                    </div>
                    
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control search-input" placeholder="Search Site..." id="searchInput">
                        <button class="btn search-btn" id="searchBtn"><i class="fas fa-search"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Logo Table -->
    <a href="index.php" style="display: block; text-decoration: none;">
        <table class="logo-custom-table">
            <tbody>
                <tr>
                    <td class="logo-col-1">
                        <img src="images/Head_Logo1.png" alt="District Logo" loading="lazy">
                    </td>
                    <td class="logo-col-2">
                        <div class="main-title">DISTRICT SCHOOLS INFORMATION SYSTEM</div>
                        <p class="sub-title"><strong>A Project of Elementary &amp; Secondary Education</strong></p>
                        <p class="sub-title">District Kotli AJ&amp;K</p>
                    </td>
                    <td class="logo-col-3">
                        <img src="images/Head_Logo2.png" alt="Government Logo" loading="lazy">
                    </td>
                </tr>
            </tbody>
        </table>
    </a>

    <!-- Hero Carousel -->
    <section class="hero-section">
        <div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
            
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/11.jpg" alt="Students learning in classroom" loading="lazy" width="1200" height="800">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Empowering Future Generations</h3>
                        <p>Quality education for all students across Kotli district</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/2.jpg" alt="School building" loading="lazy" width="1200" height="800">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Modern Educational Facilities</h3>
                        <p>State-of-the-art infrastructure for better learning</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/Header.jpg" alt="Teacher and students" loading="lazy" width="1200" height="800">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Dedicated Educators</h3>
                        <p>Committed teachers shaping young minds</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/3.jpg" alt="Students in lab" loading="lazy">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Hands-on Learning</h3>
                        <p>Practical education for real-world success</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev" aria-label="Previous slide">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next" aria-label="Next slide">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </button>
        </div>
    </section>

    <!-- News Ticker -->
    <div class="news-ticker">
        <div class="container">
            <div class="news-container">
                <div class="news-label animate__animated animate__pulse animate__infinite">
                    <i class="fas fa-bullhorn me-2"></i>LATEST NEWS
                </div>
                <div class="news-content-wrapper">
                    <div class="news-content" id="newsContent">
                        Loading latest updates... 
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- District Stats -->
    <section class="stats-section">
        <div class="container">
            <div class="row g-3">
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="schoolsCount">0</div>
                        <div class="stat-label">Schools</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="studentsCount">0</div>
                        <div class="stat-label">Students</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="teachersCount">0</div>
                        <div class="stat-label">Teachers</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="successRate">0%</div>
                        <div class="stat-label">Success Rate</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container my-5">
        <div class="text-center mb-5">
            <h1 class="display-4 fw-bold mb-3">Welcome to E&SE Kotli District</h1>
            <p class="lead">
                Committed to providing quality education and fostering academic excellence across all schools in our district.
            </p>
        </div>
        
        <!-- Messages Accordion -->
        <div class="accordion mb-5" id="messagesAccordion">
            <div class="accordion-item border-0 shadow-sm mb-3">
                <h2 class="accordion-header">
                    <button class="accordion-button bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMinister" aria-expanded="true" aria-controls="collapseMinister">
                        <i class="fas fa-user-tie me-2"></i>Message From Minister E&SE
                    </button>
                </h2>
                <div id="collapseMinister" class="accordion-collapse collapse show" data-bs-parent="#messagesAccordion">
                    <div class="accordion-body">
                        <div class="d-flex align-items-start">
                            <img src="images/Minister.jpg" loading="lazy" class="rounded-circle me-3" alt="Minister" width="80" height="80">
                            <div>
                                <h5 class="mb-2">Loading...</h5>
                                <p class="mb-0" style="text-align: justify;">Loading message...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="accordion-item border-0 shadow-sm mb-3">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSecretary" aria-expanded="false" aria-controls="collapseSecretary">
                        <i class="fas fa-user-graduate me-2"></i>Message From Secretary E&SE
                    </button>
                </h2>
                <div id="collapseSecretary" class="accordion-collapse collapse" data-bs-parent="#messagesAccordion">
                    <div class="accordion-body">
                        <div class="d-flex align-items-start">
                            <img src="images/Secretary.jpg" loading="lazy" class="rounded-circle me-3" alt="Secretary" width="80" height="80">
                            <div>
                                <h5 class="mb-2">Loading...</h5>
                                <p class="mb-0" style="text-align: justify;">Loading message...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="accordion-item border-0 shadow-sm">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDEO" aria-expanded="false" aria-controls="collapseDEO">
                        <i class="fas fa-user-shield me-2"></i>Message From DEO
                    </button>
                </h2>
                <div id="collapseDEO" class="accordion-collapse collapse" data-bs-parent="#messagesAccordion">
                    <div class="accordion-body">
                        <div class="d-flex align-items-start">
                            <img src="images/Deo.jpg" loading="lazy" class="rounded-circle me-3" alt="DEO" width="80" height="80">
                            <div>
                                <h5 class="mb-2">Loading...</h5>
                                <p class="mb-0" style="text-align: justify;">Loading message...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="py-3">
        <div class="container">
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
                <img src="images/Head_Logo1.png" class="footer-logo me-md-3 mb-2 mb-md-0" alt="District Logo" loading="lazy" width="150" height="40">
                <div class="text-center text-md-left small">
                    Copyright <sup>©</sup> <span id="currentYear"></span> - All Rights Reserved To E&SE District Kotli AK
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM Ready Function
        document.addEventListener('DOMContentLoaded', function() {
			
            // Initialize carousel with faster transition
            var myCarousel = document.querySelector('#mainCarousel');
            var carousel = new bootstrap.Carousel(myCarousel, {
                interval: 2000, // Change slide every 2 seconds (2000ms)
                ride: 'carousel',
                wrap: true,
                pause: false
            });
			
            // Optional: Add faster transition animation
            var carouselInner = document.querySelector('.carousel-inner');
            carouselInner.style.transition = 'transform 0.5s ease-in-out';
			
            // Set current year in footer
            document.getElementById('currentYear').textContent = new Date().getFullYear();
            
            // Load messages
            loadMessages();
            
            // Fetch news
            fetchNews();
            
            // Animate stats
            animateStats();
            
            // Set active nav item
            setActiveNavItem();
            
            // Initialize scroll animations
            initScrollAnimations();
            
            // Initialize ALL dropdowns - including "More"
            initializeAllDropdowns();
        });

        // SIMPLE DROPDOWN SOLUTION - Works for all dropdowns including "More"
        function initializeAllDropdowns() {
            console.log("Initializing all dropdowns...");
            
            // Handle all dropdown toggles
            document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
                console.log("Found dropdown toggle:", toggle.textContent.trim());
                
                toggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    console.log("Clicked dropdown:", this.textContent.trim());
                    
                    // Get the dropdown menu
                    let menu;
                    if (this.tagName === 'BUTTON') {
                        // For button dropdowns (Login, Register)
                        menu = this.nextElementSibling;
                    } else {
                        // For nav link dropdowns (Summary, Private Schools, More)
                        menu = this.parentElement.querySelector('.dropdown-menu');
                    }
                    
                    if (menu) {
                        console.log("Found menu for:", this.textContent.trim());
                        
                        // Toggle current menu
                        const isShowing = menu.classList.contains('show');
                        
                        // Close all other dropdowns first
                        document.querySelectorAll('.dropdown-menu.show').forEach(function(otherMenu) {
                            if (otherMenu !== menu) {
                                otherMenu.classList.remove('show');
                                console.log("Closed other menu");
                            }
                        });
                        
                        // Toggle current menu
                        if (!isShowing) {
                            menu.classList.add('show');
                            console.log("Opened menu for:", this.textContent.trim());
                        } else {
                            menu.classList.remove('show');
                            console.log("Closed menu for:", this.textContent.trim());
                        }
                    }
                });
            });
            
            // Close dropdowns when clicking outside
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.dropdown') && !e.target.closest('.nav-item.dropdown')) {
                    document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
                        menu.classList.remove('show');
                    });
                }
            });
            
            // Close dropdowns when clicking a dropdown item
            document.querySelectorAll('.dropdown-item').forEach(function(item) {
                item.addEventListener('click', function() {
                    document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
                        menu.classList.remove('show');
                    });
                });
            });
            
            // Hover support for desktop
            if (window.innerWidth > 992) {
                document.querySelectorAll('.nav-item.dropdown').forEach(function(dropdown) {
                    dropdown.addEventListener('mouseenter', function() {
                        const menu = this.querySelector('.dropdown-menu');
                        if (menu) {
                            menu.classList.add('show');
                        }
                    });
                    
                    dropdown.addEventListener('mouseleave', function() {
                        const menu = this.querySelector('.dropdown-menu');
                        if (menu) {
                            menu.classList.remove('show');
                        }
                    });
                });
            }
            
            console.log("Dropdown initialization complete");
        }

        // Load messages from JSON
        async function loadMessages() {
            try {
                const response = await fetch('data/messages.json');
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                const messages = await response.json();
                
                if (!messages || typeof messages !== 'object') {
                    throw new Error('Invalid data format');
                }
                
                updateMessage('#collapseMinister', messages.minister);
                updateMessage('#collapseSecretary', messages.secretary);
                updateMessage('#collapseDEO', messages.deo);
                
            } catch (error) {
                console.error('Error loading messages:', error);
                showErrorMessage();
            }
        }
        
        function updateMessage(selector, data) {
            const section = document.querySelector(`${selector} .accordion-body`);
            if (section) {
                section.querySelector('h5').textContent = data.title;
                section.querySelector('p').textContent = data.content;
            }
        }
        
        function showErrorMessage() {
            document.querySelectorAll('.accordion-body').forEach(section => {
                section.querySelector('h5').textContent = 'Content Unavailable';
                section.querySelector('p').textContent = 'Please try again later or contact support.';
            });
        }
        
        // Fetch news with hover handling
        async function fetchNews() {
            try {
                const response = await fetch('data/news.txt');
                if (!response.ok) throw new Error('Network error');
                const newsText = await response.text();
                const newsContent = document.getElementById('newsContent');
                
                const newsItems = newsText.split('|').map(item => item.trim());
                const formattedNews = newsItems.join(' | ');
                
                newsContent.textContent = formattedNews;
                restartTickerAnimation();
                
            } catch (error) {
                console.error('Error fetching news:', error);
                document.getElementById('newsContent').textContent = 
                    'Important: Updates are loading.....';
            }
        }
        
        function restartTickerAnimation() {
            const newsContent = document.getElementById('newsContent');
            const wrapper = newsContent.parentElement;
            
            const textWidth = newsContent.scrollWidth;
            const containerWidth = wrapper.clientWidth;
            
            if (textWidth > containerWidth) {
                const duration = Math.max(10, textWidth / 100);
                newsContent.style.animation = `ticker ${duration}s linear infinite`;
                
                newsContent.onmouseenter = () => newsContent.style.animationPlayState = 'paused';
                newsContent.onmouseleave = () => newsContent.style.animationPlayState = 'running';
            } else {
                newsContent.style.animation = 'none';
            }
        }
        
        // Animate statistics counting
        function animateStats() {
            animateValue('schoolsCount', 0, 152, 2000);
            animateValue('studentsCount', 0, 45600, 2000);
            animateValue('teachersCount', 0, 2100, 2000);
            animateValue('successRate', 0, 94, 2000);
        }
        
        function animateValue(id, start, end, duration) {
            const element = document.getElementById(id);
            let startTime = null;
            
            const animationStep = (timestamp) => {
                if (!startTime) startTime = timestamp;
                const progress = Math.min((timestamp - startTime) / duration, 1);
                const value = Math.floor(progress * (end - start) + start);
                element.textContent = id === 'successRate' ? `${value}%` : value.toLocaleString();
                if (progress < 1) requestAnimationFrame(animationStep);
            };
            
            requestAnimationFrame(animationStep);
        }
        
        // Set active navigation item
        function setActiveNavItem() {
            const currentPath = window.location.pathname.split('/').pop() || 'index.php';
            const homeLink = document.querySelector('.nav-link[href="index.php"]');
            
            // Reset all active states first
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // Set active based on current page
            document.querySelectorAll('.nav-link').forEach(link => {
                const linkPath = link.getAttribute('href').split('/').pop();
                if (linkPath === currentPath) {
                    link.classList.add('active');
                }
            });
            
            // If no active link found (like on homepage), activate Home
            if (document.querySelectorAll('.nav-link.active').length === 0) {
                homeLink.classList.add('active');
            }
        }
        
        // Initialize scroll animations
        function initScrollAnimations() {
            const animateOnScroll = () => {
                document.querySelectorAll('.animate__animated').forEach(element => {
                    if (isElementInViewport(element)) {
                        const animation = element.dataset.animation || 'animate__fadeIn';
                        element.classList.add(animation);
                    }
                });
            };
            
            window.addEventListener('scroll', debounce(animateOnScroll, 100));
            animateOnScroll();
        }
        
        // Helper function to check if element is in viewport
        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.75
            );
        }
        
        // Debounce function for performance
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(context, args);
                }, wait);
            };
        }
    </script>
    
    <script>
        // Search Functionality
        document.addEventListener('DOMContentLoaded', function() {
            const searchBtn = document.getElementById('searchBtn');
            const searchInput = document.getElementById('searchInput');
            
            // Handle search button click
            searchBtn.addEventListener('click', function(e) {
                e.preventDefault();
                performSearch();
            });
            
            // Handle Enter key in search input
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    performSearch();
                }
            });
            
            function performSearch() {
                const searchTerm = searchInput.value.trim();
                if (searchTerm) {
                    window.location.href = `search_site.php?query=${encodeURIComponent(searchTerm)}`;
                } else {
                    alert('Please enter a search term');
                }
            }
        });
    </script>
</body>
</html>