<?php
$pageTitle = "B.S. Public School | Nurturing Minds, Shaping Futures";
$pageDesc = "B.S. Public School Meerut - Providing quality education, vocational training, and skills for a self-reliant future. Admission Open for 2026-27.";
require_once('header.php');
require_once('db.php');

// Fetch Sliders
$sliders = [];
if ($db_connected) {
    // Auto-import Gallery Images from 'images/function/' if table is empty
    $check_gallery = $conn->query("SELECT id FROM gallery LIMIT 1");
    if ($check_gallery && $check_gallery->num_rows == 0) {
        $source_dir = 'images/function/';
        $dest_dir = 'uploads/gallery/';
        if (!file_exists($dest_dir)) mkdir($dest_dir, 0777, true);
        
        $images = glob($source_dir . "*.{jpg,jpeg,png,gif,webp,jpeg}", GLOB_BRACE);
        if ($images) {
            foreach ($images as $img_path) {
                $filename = basename($img_path);
                $new_filename = time() . '_' . $filename;
                if (copy($img_path, $dest_dir . $new_filename)) {
                    $stmt = $conn->prepare("INSERT INTO gallery (image, heading) VALUES (?, 'Campus Event')");
                    $stmt->bind_param("s", $new_filename);
                    $stmt->execute();
                }
            }
        }
    }

    $slider_res = $conn->query("SELECT * FROM sliders WHERE status = 1 ORDER BY id DESC");
    if ($slider_res) {
        while($row = $slider_res->fetch_assoc()) {
            $sliders[] = $row;
        }
    }

    // Fetch Gallery (All images for carousel)
    $gallery_res = $conn->query("SELECT * FROM gallery WHERE status = 1 ORDER BY id DESC");
    if ($gallery_res) {
        while($row = $gallery_res->fetch_assoc()) {
            $gallery_items[] = $row;
        }
    }

    // Fetch Board Members
    $board_members = [];
    $bm_res = $conn->query("SELECT * FROM board_members WHERE status = 1 ORDER BY order_num ASC, id ASC");
    if ($bm_res && $bm_res->num_rows > 0) {
        while($row = $bm_res->fetch_assoc()) {
            $board_members[] = $row;
        }
    }

    // Fetch Events Gallery (5 items for mosaic)
    $event_items = [];
    $ev_res = $conn->query("SELECT * FROM event_gallery WHERE status = 1 ORDER BY order_num ASC, id ASC LIMIT 5");
    if ($ev_res && $ev_res->num_rows > 0) {
        while($row = $ev_res->fetch_assoc()) {
            $event_items[] = $row;
        }
    }

    // Fetch Director's Desk
    $director_data = null;
    $dd_res = $conn->query("SELECT * FROM director_desk LIMIT 1");
    if ($dd_res && $dd_res->num_rows > 0) {
        $director_data = $dd_res->fetch_assoc();
    }

    // Fetch Our Schools (Campuses)
    $our_schools = [];
    $sc_res = $conn->query("SELECT * FROM our_schools WHERE status = 1 ORDER BY order_num ASC, id ASC");
    if ($sc_res && $sc_res->num_rows > 0) {
        while($row = $sc_res->fetch_assoc()) {
            $our_schools[] = $row;
        }
    }
} else {
    $gallery_items = [];
    $board_members = [];
    $event_items = [];
    $director_data = null;
    $our_schools = [];
}

// Fallback defaults if tables empty or not connected
if (empty($board_members)) {
    $board_members = [
        ['name' => 'Dr. Furkan Saifi', 'designation' => 'Secretary', 'image' => 'secretary_furkan.webp'],
        ['name' => 'Smt. Sashi Sagar', 'designation' => 'Registrar', 'image' => 'president_sashi.webp'],
        ['name' => 'Dr. Vinod Kothari', 'designation' => 'Exam Controller', 'image' => 'exam_controller_vinod.webp'],
        ['name' => 'Charan Singh', 'designation' => 'President', 'image' => 'president_charan.webp'],
        ['name' => 'Sanjay Kumar Verma', 'designation' => 'Joint Secretary', 'image' => 'joint_secretary_sanjay.webp'],
        ['name' => 'Arshi Saifi', 'designation' => 'Board Member', 'image' => 'board_member_arshi.webp'],
        ['name' => 'Adv. Abhishek Giri', 'designation' => 'Legal Advisor', 'image' => 'adv_abhishek.jpg'],
    ];
}

if (empty($event_items)) {
    $event_items = [
        ['title' => 'IBVTE Event 1', 'image' => 'gov_gallery_1.webp'],
        ['title' => 'IBVTE Event 2', 'image' => 'gov_gallery_2.webp'],
        ['title' => 'IBVTE Event 3', 'image' => 'gov_gallery_3.webp'],
        ['title' => 'IBVTE Event 4', 'image' => 'gov_gallery_4.webp'],
        ['title' => 'IBVTE Event 5', 'image' => 'gov_gallery_5.webp'],
    ];
}

if (!$director_data) {
    $director_data = [
        'badge' => "DIRECTOR'S DESK",
        'title' => "From Director's Desk",
        'subtitle' => "Leadership vision and message for holistic education.",
        'director_name' => "Dr. Furkan Saifi",
        'designation' => "Principle",
        'image' => "secretary_furkan.webp",
        'quote' => "BS Public School & AH International School is committed to transforming education through modern curriculum, moral discipline, and holistic development to build real-world careers and empower students for future success.",
        'stamp_image' => "images/logo_bsps.png"
    ];
}

if (empty($our_schools)) {
    $our_schools = [
        [
            'id' => 1,
            'name' => 'B.S. Public School',
            'tagline' => 'CBSE Pattern • Foundational Excellence (Nursery to 10th)',
            'description' => 'Empowering young minds through comprehensive curriculum, disciplined environment, modern laboratories, and value-based education.',
            'badge' => 'Main Campus • Estd. 2005',
            'image' => 'bs_public_school.webp',
            'explore_link' => 'the-school.php',
            'admission_link' => 'admission-enquiry.php',
            'order_num' => 1
        ],
        [
            'id' => 2,
            'name' => 'A.H. International School',
            'tagline' => 'World-Class Pedagogy • Smart Interactive Digital Campus',
            'description' => 'State-of-the-art educational infrastructure cultivating global competence, critical thinking, sports training, and creative innovation.',
            'badge' => 'International Standard • Advanced Campus',
            'image' => 'ah_international_school.webp',
            'explore_link' => 'facilities.php',
            'admission_link' => 'admission-enquiry.php',
            'order_num' => 2
        ]
    ];
}
?>

    <!-- Hero Slider (Dynamic) -->
    <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <?php if(empty($sliders)): ?>
            <!-- Fallback Static Sliders if DB is empty -->
            <div class="carousel-item active" style="background-image: url('http://bsps.co.in/images_new/4.jpg');">
                <div class="carousel-overlay"></div>
                <div class="container h-100 position-relative">
                    <div class="carousel-caption">
                        <span class="subtitle"><?php echo __('academic_excellence'); ?></span>
                        <h2 class="display-2 fw-bold"><?php echo __('nurturing_minds'); ?></h2>
                        <p class="lead"><?php echo __('hero_desc'); ?></p>
                        <a href="about-us.php" class="btn btn-admission py-3 px-5 fs-5 mt-3"><?php echo __('discover_school'); ?></a>
                    </div>
                </div>
            </div>
            <?php else: ?>
                <?php foreach($sliders as $key => $slide): ?>
                <div class="carousel-item <?php echo $key == 0 ? 'active' : ''; ?>" style="background-image: url('uploads/sliders/<?php echo $slide['image']; ?>');">
                    <div class="carousel-overlay"></div>
                    <div class="container h-100 position-relative">
                        <div class="carousel-caption">
                            <span class="subtitle"><?php echo htmlspecialchars($slide['subtitle']); ?></span>
                            <h2 class="display-2 fw-bold"><?php echo nl2br(htmlspecialchars($slide['title'])); ?></h2>
                            <p class="lead"><?php echo htmlspecialchars($slide['description']); ?></p>
                            <?php if($slide['link']): ?>
                            <a href="<?php echo $slide['link']; ?>" class="btn btn-admission py-3 px-5 fs-5 mt-3"><?php echo __('about_us'); ?></a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <!-- Dynamic News & Info Section -->
    <section id="news" class="py-4 bg-dark text-white overflow-hidden" style="background: var(--navy-deep) !important; border-bottom: 2px solid var(--accent-color);">
        <div class="container-fluid">
            <div class="ticker-wrapper d-flex align-items-center">
                <div class="ticker-badge px-4 py-2 fw-bold text-nowrap rounded-end me-3"><?php echo __('latest_news'); ?></div>
                <marquee behavior="scroll" direction="left" class="fs-5">
                    🚀 <strong><?php echo __('news_1'); ?></strong> 
                    | 💡 <strong><?php echo __('news_2'); ?></strong> 
                </marquee>
            </div>
        </div>
    </section>

    <!-- Leadership & Director Desk Section (Exact Match to Reference) -->
    <section class="leadership-showcase py-5 bg-light">
        <div class="container">
            <div class="row g-4 align-items-stretch">

                <!-- BOX 1: Hon'ble Commission / Board Leadership -->
                <div class="col-lg-3 col-md-6">
                    <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                        <div class="box-header mb-3 text-center">
                            <span class="badge bg-warning text-dark mb-2">HON'BLE BOARD MEMBERS</span>
                            <h4 class="fw-bold mb-1">Board Leadership</h4>
                            <p class="small text-muted">Core leadership directing the vision of BSPS.</p>
                        </div>
                        <!-- ECI Style Vertical Scrolling Marquee of Leaders -->
                        <div class="commission-marquee-wrap flex-grow-1" style="height: 330px; overflow: hidden; position: relative;">
                            <div class="commission-marquee-inner d-flex flex-column" style="gap: 15px;">
                                <?php 
                                // Duplicate array once for seamless continuous loop
                                $loop_members = array_merge($board_members, $board_members);
                                foreach($loop_members as $m): 
                                    $img_file = $m['image'];
                                    $m_img = (str_starts_with($img_file, 'http') || str_starts_with($img_file, 'images/'))
                                        ? $img_file
                                        : (file_exists('uploads/board/' . $img_file) ? 'uploads/board/' . $img_file : 'images/' . $img_file);
                                    $m_ver = file_exists($m_img) ? filemtime($m_img) : time();
                                ?>
                                <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                    <div class="eci-photo-frame">
                                        <img src="<?php echo htmlspecialchars($m_img) . '?v=' . $m_ver; ?>" alt="<?php echo htmlspecialchars($m['name']); ?>" onerror="this.src='https://ui-avatars.com/api/?name=<?php echo urlencode($m['name']); ?>&background=0b3b60&color=fff';">
                                    </div>
                                    <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;"><?php echo htmlspecialchars($m['name']); ?></h5>
                                    <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 700; text-transform: uppercase; color: #d90429 !important;"><?php echo htmlspecialchars($m['designation']); ?></span>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- BOX 2: Our Events Gallery -->
                <div class="col-lg-5 col-md-6">
                    <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                        <div class="box-header mb-3 text-center">
                            <span class="badge bg-primary text-white mb-2">OUR EVENTS</span>
                            <h4 class="fw-bold mb-1">Our Events Gallery</h4>
                        </div>
                        <!-- Mosaic-Style Gallery of 5 Event/Award images -->
                        <div class="gov-gallery-grid flex-grow-1" style="height: 330px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8px;">
                            <?php
                            $grid_styles = [
                                0 => 'grid-column: span 3; grid-row: span 3;',
                                1 => 'grid-column: span 3; grid-row: span 2;',
                                2 => 'grid-column: span 3; grid-row: span 2;',
                                3 => 'grid-column: span 3; grid-row: span 3;',
                                4 => 'grid-column: span 3; grid-row: span 2;',
                            ];
                            foreach($event_items as $idx => $ev):
                                $ev_file = $ev['image'];
                                $ev_img = (str_starts_with($ev_file, 'http') || str_starts_with($ev_file, 'images/'))
                                    ? $ev_file
                                    : (file_exists('uploads/events/' . $ev_file) ? 'uploads/events/' . $ev_file : 'images/' . $ev_file);
                                $style = $grid_styles[$idx] ?? 'grid-column: span 3; grid-row: span 2;';
                            ?>
                            <div class="gallery-mosaic-item rounded-3 overflow-hidden shadow-sm" style="<?php echo $style; ?> cursor: pointer; position: relative; border: 2px solid #fd7e14;">
                                <img src="<?php echo htmlspecialchars($ev_img); ?>" class="w-100 h-100 object-fit-cover" alt="<?php echo htmlspecialchars($ev['title']); ?>" style="transition: transform 0.4s ease;">
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>

                <!-- BOX 3: Director's Desk -->
                <div class="col-lg-4 col-md-12">
                    <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                        <div class="box-header mb-3">
                            <span class="badge bg-danger text-white mb-2"><?php echo htmlspecialchars($director_data['badge']); ?></span>
                            <h4 class="fw-bold mb-2"><?php echo htmlspecialchars($director_data['title']); ?></h4>
                            <p class="small text-muted"><?php echo htmlspecialchars($director_data['subtitle']); ?></p>
                        </div>
                        <div class="director-photo-container text-center mb-3">
                            <div class="director-box overflow-hidden rounded-4 mb-2 mx-auto" style="position: relative; max-width: 300px; height: 215px; border: 2px solid #e2e8f0;">
                                <?php 
                                $d_file = $director_data['image'];
                                $d_img = (str_starts_with($d_file, 'http') || str_starts_with($d_file, 'images/'))
                                    ? $d_file
                                    : (file_exists('uploads/director/' . $d_file) ? 'uploads/director/' . $d_file : 'images/' . $d_file);
                                $d_ver = file_exists($d_img) ? filemtime($d_img) : time();
                                ?>
                                <img src="<?php echo htmlspecialchars($d_img) . '?v=' . $d_ver; ?>" class="img-fluid rounded-4 w-100 h-100" style="object-fit: cover; object-position: center center;" alt="<?php echo htmlspecialchars($director_data['director_name']); ?>" onerror="this.src='https://ibvte.com/assets/images/secretary_furkan.webp';">
                            </div>
                            <div class="mt-2">
                                <span class="d-block text-muted small fw-semibold"><?php echo htmlspecialchars($director_data['designation']); ?></span>
                                <h6 class="fw-bold text-dark mb-0 fs-5"><?php echo htmlspecialchars($director_data['director_name']); ?></h6>
                            </div>
                        </div>
                        <div class="flex-grow-1 d-flex flex-column justify-content-between">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="director-quote-container" style="position: relative; min-height: 105px; padding: 0 5px; text-align: justify;">
                                        <span style="font-size: 2.2rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: absolute; top: -5px; left: -2px; opacity: 0.35;">&ldquo;</span>
                                        <span style="font-style: italic; font-weight: 700; color: #0f172a; font-size: 0.86rem; line-height: 1.6; display: inline; padding-left: 14px; font-family: 'Outfit', sans-serif;">
                                            <?php echo htmlspecialchars($director_data['quote']); ?>
                                        </span>
                                        <span style="font-size: 2.2rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: relative; bottom: -12px; opacity: 0.35;">&rdquo;</span>
                                    </div>
                                </div>
                                <div class="col-4 text-center">
                                    <img src="<?php echo htmlspecialchars($director_data['stamp_image'] ?? 'images/logo_bsps.png'); ?>" alt="School Seal" class="img-fluid" style="max-height: 95px; object-fit: contain;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>

    <!-- Leadership Section CSS -->
    <style>
    @keyframes borderRotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .eci-photo-frame {
        position: relative;
        width: 130px;
        height: 140px;
        margin: 15px auto 10px;
        overflow: hidden;
        border-radius: 8px;
        padding: 3px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .eci-photo-frame::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background: conic-gradient(
            #0d6efd,
            #d90429,
            #ffc107,
            #0d6efd
        );
        animation: borderRotate 4s linear infinite;
        z-index: -1;
    }
    .eci-photo-frame::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        background: #fff;
        z-index: 0;
        border-radius: 5px;
    }
    .eci-photo-frame img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        z-index: 2;
        border-radius: 5px;
        border: none;
        box-shadow: none;
    }
    .commission-marquee-wrap {
        position: relative;
        height: 330px;
        overflow: hidden;
    }
    .commission-marquee-inner {
        display: flex;
        flex-direction: column;
        animation: commissionScrollUp 42s linear infinite;
    }
    .commission-marquee-wrap:hover .commission-marquee-inner {
        animation-play-state: paused;
    }
    @keyframes commissionScrollUp {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-50%); }
    }
    .gallery-mosaic-item img {
        transition: transform 0.4s ease;
    }
    .gallery-mosaic-item:hover img {
        transform: scale(1.08);
    }
    .board-box {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #edf2f7;
    }
    .board-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 35, 70, 0.09) !important;
    }
    </style>

    <!-- ==============================================
         OUR INSTITUTIONS & CAMPUSES (DAIS INTERACTIVE SHOWCASE)
         ============================================== -->
    <section id="our-schools-showcase" class="py-5 position-relative" style="background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7;">
        <div class="container py-3">
            <!-- Section Header -->
            <div class="row align-items-center mb-4">
                <div class="col-lg-8">
                    <span class="badge text-uppercase px-3 py-2 fw-bold mb-2 shadow-sm" style="background: #e0e7ff; color: #1e3a8a; letter-spacing: 1.5px; font-size: 0.78rem;">
                        <i class="fas fa-university text-warning me-2"></i> Our Institutions &amp; Campuses
                    </span>
                    <h2 class="display-6 fw-bold text-dark mb-2" style="font-family: 'Cinzel', serif;">
                        Centers of Academic &amp; Holistic Excellence
                    </h2>
                    <p class="text-muted lead fs-6 mb-0">
                        Select or hover over our institutions below to explore each campus, infrastructure, and academic atmosphere.
                    </p>
                </div>
                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                    <a href="admission-enquiry.php" class="btn btn-warning px-4 py-2 fw-bold text-dark rounded-pill shadow-sm">
                        <i class="fas fa-user-graduate me-2"></i> Admissions Open 2026-27
                    </a>
                </div>
            </div>

            <!-- Interactive Showcase Row -->
            <div class="row g-4 align-items-center">
                <!-- Left Column: School Interactive Selector (Tabs) -->
                <div class="col-lg-5 col-md-12">
                    <div class="school-tabs-container d-flex flex-column gap-3">
                        <?php foreach($our_schools as $idx => $school): ?>
                            <?php 
                            $sc_img = (str_starts_with($school['image'], 'http') || str_starts_with($school['image'], 'images/'))
                                ? $school['image']
                                : 'uploads/campuses/' . $school['image'];
                            $sc_ver = file_exists($sc_img) ? filemtime($sc_img) : time();
                            $sc_full_img = htmlspecialchars($sc_img) . '?v=' . $sc_ver;
                            ?>
                            <div class="school-tab-card p-4 rounded-4 <?php echo $idx === 0 ? 'active' : ''; ?>"
                                 data-school-index="<?php echo $idx; ?>"
                                 data-school-name="<?php echo htmlspecialchars($school['name']); ?>"
                                 data-school-badge="<?php echo htmlspecialchars($school['badge']); ?>"
                                 data-school-tagline="<?php echo htmlspecialchars($school['tagline']); ?>"
                                 data-school-desc="<?php echo htmlspecialchars($school['description']); ?>"
                                 data-school-img="<?php echo $sc_full_img; ?>"
                                 data-explore-link="<?php echo htmlspecialchars($school['explore_link'] ?? 'the-school.php'); ?>"
                                 data-admission-link="<?php echo htmlspecialchars($school['admission_link'] ?? 'admission-enquiry.php'); ?>">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="flex-grow-1 pe-3">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="school-tab-badge badge px-3 py-1 rounded-pill small fw-semibold">
                                                <?php echo htmlspecialchars($school['badge']); ?>
                                            </span>
                                            <span class="school-active-indicator small fw-bold">Active Campus</span>
                                        </div>
                                        <h3 class="school-tab-title mb-2">
                                            <?php echo htmlspecialchars($school['name']); ?>
                                        </h3>
                                        <p class="school-tab-tagline mb-0 small">
                                            <?php echo htmlspecialchars($school['tagline']); ?>
                                        </p>
                                    </div>
                                    <div class="school-tab-arrow d-flex align-items-center justify-content-center rounded-circle">
                                        <i class="fas fa-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- Right Column: Grand Showcase Card (DAIS Style) -->
                <div class="col-lg-7 col-md-12">
                    <?php 
                    $first_img = (str_starts_with($our_schools[0]['image'], 'http') || str_starts_with($our_schools[0]['image'], 'images/'))
                        ? $our_schools[0]['image']
                        : 'uploads/campuses/' . $our_schools[0]['image'];
                    $first_ver = file_exists($first_img) ? filemtime($first_img) : time();
                    $first_full_img = htmlspecialchars($first_img) . '?v=' . $first_ver;
                    ?>
                    <div class="school-showcase-card position-relative rounded-4 overflow-hidden shadow-lg" id="schoolShowcaseCard">
                        <!-- Campus Background Image -->
                        <div class="showcase-img-container position-relative overflow-hidden" style="height: 490px;">
                            <img id="showcaseImage" 
                                 src="<?php echo $first_full_img; ?>" 
                                 alt="<?php echo htmlspecialchars($our_schools[0]['name']); ?>" 
                                 class="w-100 h-100 object-fit-cover showcase-main-photo">
                            <div class="showcase-gradient-overlay"></div>

                            <!-- Top Floating Badge -->
                            <div class="position-absolute top-0 start-0 m-3 m-md-4 z-2">
                                <span class="badge showcase-pill-badge px-3 py-2 rounded-pill shadow-sm d-inline-flex align-items-center gap-2" id="showcaseBadge">
                                    <i class="fas fa-certificate text-warning"></i>
                                    <span><?php echo htmlspecialchars($our_schools[0]['badge']); ?></span>
                                </span>
                            </div>

                            <!-- Top Right Quick Info -->
                            <div class="position-absolute top-0 end-0 m-3 m-md-4 z-2 d-none d-sm-block">
                                <span class="badge bg-white text-dark px-3 py-2 rounded-pill shadow-sm fw-bold">
                                    <i class="fas fa-check-circle text-success me-1"></i> Recognized &amp; Affiliated
                                </span>
                            </div>

                            <!-- Bottom Glass Content Panel -->
                            <div class="showcase-bottom-panel position-absolute bottom-0 start-0 end-0 p-3 p-md-4 z-2">
                                <div class="showcase-glass-card p-3 p-md-4 rounded-4 shadow-sm">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-2">
                                        <div>
                                            <h4 class="text-white fw-bold mb-1" id="showcaseTitle" style="font-family: 'Cinzel', serif;">
                                                <?php echo htmlspecialchars($our_schools[0]['name']); ?>
                                            </h4>
                                            <p class="text-white-50 small mb-0" id="showcaseTagline">
                                                <?php echo htmlspecialchars($our_schools[0]['tagline']); ?>
                                            </p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <a href="<?php echo htmlspecialchars($our_schools[0]['explore_link'] ?? 'the-school.php'); ?>" 
                                               id="showcaseExploreBtn" 
                                               class="btn btn-sm btn-outline-light rounded-pill px-3 py-2 fw-semibold">
                                                <i class="fas fa-compass me-1"></i> Explore Campus
                                            </a>
                                            <a href="<?php echo htmlspecialchars($our_schools[0]['admission_link'] ?? 'admission-enquiry.php'); ?>" 
                                               id="showcaseApplyBtn" 
                                               class="btn btn-sm btn-warning rounded-pill px-3 py-2 fw-bold text-dark shadow-sm">
                                                <i class="fas fa-paper-plane me-1"></i> Apply Now
                                            </a>
                                        </div>
                                    </div>
                                    <p class="text-light small mb-0 d-none d-md-block" id="showcaseDesc" style="opacity: 0.92; line-height: 1.55;">
                                        <?php echo htmlspecialchars($our_schools[0]['description']); ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Schools Showcase Styles & Script -->
    <style>
    .school-tab-card {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-left: 6px solid transparent;
        cursor: pointer;
        position: relative;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 14px rgba(0,0,0,0.03);
    }
    .school-tab-card:hover {
        border-color: #f5a623;
        border-left: 6px solid #f5a623;
        transform: translateX(6px);
        box-shadow: 0 10px 25px rgba(245, 166, 35, 0.12);
    }
    .school-tab-card.active {
        background: #ffffff;
        border-color: #f5a623;
        border-left: 6px solid #f5a623;
        transform: translateX(8px);
        box-shadow: 0 14px 32px rgba(11, 59, 96, 0.12);
    }
    .school-tab-card .school-tab-title {
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: 1.6rem;
        color: #0b3b60;
        transition: color 0.3s ease;
    }
    .school-tab-card:hover .school-tab-title,
    .school-tab-card.active .school-tab-title {
        color: #b45309; /* Rich golden amber */
    }
    .school-tab-card .school-tab-badge {
        background: #f1f5f9;
        color: #475569;
        transition: all 0.3s ease;
    }
    .school-tab-card.active .school-tab-badge {
        background: #fef3c7;
        color: #92400e;
    }
    .school-tab-card .school-active-indicator {
        display: none;
        color: #16a34a;
        font-size: 0.75rem;
    }
    .school-tab-card.active .school-active-indicator {
        display: inline-block;
    }
    .school-tab-card .school-tab-tagline {
        color: #64748b;
        line-height: 1.5;
        transition: color 0.3s ease;
    }
    .school-tab-card.active .school-tab-tagline {
        color: #1e293b;
        font-weight: 500;
    }
    .school-tab-card .school-tab-arrow {
        width: 42px;
        height: 42px;
        background: #f1f5f9;
        color: #94a3b8;
        transition: all 0.3s ease;
        flex-shrink: 0;
        font-size: 1rem;
    }
    .school-tab-card:hover .school-tab-arrow,
    .school-tab-card.active .school-tab-arrow {
        background: #f5a623;
        color: #ffffff;
        transform: scale(1.08) translateX(2px);
    }

    /* Right Showcase Box */
    .school-showcase-card {
        border: 4px solid #ffffff;
        border-radius: 24px;
        background: #0b3b60;
    }
    .showcase-gradient-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7, 37, 69, 0.25) 0%, rgba(7, 37, 69, 0.05) 40%, rgba(7, 37, 69, 0.92) 100%);
        pointer-events: none;
        z-index: 1;
    }
    .showcase-pill-badge {
        background: rgba(11, 59, 96, 0.88);
        backdrop-filter: blur(8px);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.25);
        font-size: 0.88rem;
    }
    .showcase-glass-card {
        background: rgba(11, 59, 96, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .showcase-main-photo {
        transition: opacity 0.35s ease, transform 0.45s ease;
    }
    .showcase-main-photo.fade-out {
        opacity: 0.15;
        transform: scale(1.03);
    }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabs = document.querySelectorAll('.school-tab-card');
        const photo = document.getElementById('showcaseImage');
        const title = document.getElementById('showcaseTitle');
        const tagline = document.getElementById('showcaseTagline');
        const desc = document.getElementById('showcaseDesc');
        const badge = document.getElementById('showcaseBadge');
        const exploreBtn = document.getElementById('showcaseExploreBtn');
        const applyBtn = document.getElementById('showcaseApplyBtn');

        function switchSchool(tab) {
            if (tab.classList.contains('active')) return;

            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');

            const sName = tab.getAttribute('data-school-name');
            const sBadge = tab.getAttribute('data-school-badge');
            const sTagline = tab.getAttribute('data-school-tagline');
            const sDesc = tab.getAttribute('data-school-desc');
            const sImg = tab.getAttribute('data-school-img');
            const sExplore = tab.getAttribute('data-explore-link');
            const sAdmission = tab.getAttribute('data-admission-link');

            // Cross-fade photo
            if (photo) {
                photo.classList.add('fade-out');
                setTimeout(() => {
                    photo.src = sImg;
                    photo.alt = sName;
                    photo.onload = () => {
                        photo.classList.remove('fade-out');
                    };
                    // In case browser served instantly from cache
                    setTimeout(() => photo.classList.remove('fade-out'), 60);
                }, 160);
            }

            if (title) title.innerText = sName;
            if (tagline) tagline.innerText = sTagline;
            if (desc) desc.innerText = sDesc;
            if (badge) {
                const span = badge.querySelector('span');
                if (span) span.innerText = sBadge;
            }
            if (exploreBtn) exploreBtn.href = sExplore;
            if (applyBtn) applyBtn.href = sAdmission;
        }

        tabs.forEach(tab => {
            // Hover interaction
            tab.addEventListener('mouseenter', function() {
                switchSchool(this);
            });
            // Tap/click interaction
            tab.addEventListener('click', function() {
                switchSchool(this);
            });
        });
    });
    </script>

    <!-- ==============================================
         STUDENT ACTION PORTALS (3-COLUMN IBVTE STYLE)
         ============================================== -->
    <section id="student-portals-section" class="py-5 bg-white position-relative" style="border-bottom: 2px solid #e2e8f0;">
        <div class="container py-2">
            <div class="row g-4 justify-content-center text-center">

                <!-- CARD 1: Student Admission -->
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="portal-card portal-card-cyan h-100">
                        <div>
                            <div class="d-flex align-items-center justify-content-center mb-3">
                                <span class="portal-icon-pill icon-cyan"><i class="fas fa-user-graduate"></i></span>
                            </div>
                            <h4 class="portal-card-title-cyan mb-3">STUDENT ADMISSION</h4>
                            <p class="portal-card-desc">
                                FOR NEW ADMISSIONS, STUDENT REGISTRATION, DOCUMENT VERIFICATION, AND ACADEMIC PROCEDURES.
                            </p>
                        </div>
                        <div class="d-flex align-items-center justify-content-center gap-2 pt-2">
                            <button type="button" class="btn btn-portal-dark flex-fill" data-bs-toggle="modal" data-bs-target="#admissionModal">
                                <i class="fas fa-sign-in-alt me-1"></i> APPLY ONLINE
                            </button>
                            <a href="admission-enquiry.php" class="btn btn-portal-gold flex-fill">
                                <i class="fas fa-paper-plane me-1"></i> APPLY NOW
                            </a>
                        </div>
                    </div>
                </div>

                <!-- CARD 2: TC Apply -->
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="portal-card portal-card-purple h-100">
                        <div>
                            <div class="d-flex align-items-center justify-content-center mb-3">
                                <span class="portal-icon-pill icon-purple"><i class="fas fa-file-contract"></i></span>
                            </div>
                            <h4 class="portal-card-title-purple mb-3">TC APPLICATION</h4>
                            <p class="portal-card-desc">
                                APPLY ONLINE FOR TRANSFER CERTIFICATE (TC), CLEARANCE, AND CHARACTER CERTIFICATE HERE.
                            </p>
                        </div>
                        <div class="d-flex align-items-center justify-content-center gap-2 pt-2">
                            <button type="button" class="btn btn-portal-dark flex-fill" data-bs-toggle="modal" data-bs-target="#tcModal">
                                <i class="fas fa-edit me-1"></i> APPLY TC
                            </button>
                            <button type="button" class="btn btn-portal-gold flex-fill" data-bs-toggle="modal" data-bs-target="#tcModal">
                                <i class="fas fa-arrow-right me-1"></i> APPLY NOW
                            </button>
                        </div>
                    </div>
                </div>

                <!-- CARD 3: Leave Application (Chutti ki Application) -->
                <div class="col-lg-4 col-md-12 col-12">
                    <div class="portal-card portal-card-red h-100">
                        <div>
                            <div class="d-flex align-items-center justify-content-center mb-3">
                                <span class="portal-icon-pill icon-red"><i class="fas fa-calendar-times"></i></span>
                            </div>
                            <h4 class="portal-card-title-red mb-3">STUDENT LEAVE DESK</h4>
                            <p class="portal-card-desc">
                                SUBMIT DIGITAL LEAVE APPLICATION (CHUTTI KI APPLICATION) FOR SICK LEAVE OR URGENT WORK.
                            </p>
                        </div>
                        <div class="d-flex align-items-center justify-content-center gap-2 pt-2">
                            <button type="button" class="btn btn-portal-dark flex-fill" data-bs-toggle="modal" data-bs-target="#leaveModal">
                                <i class="fas fa-pen-alt me-1"></i> WRITE LEAVE
                            </button>
                            <button type="button" class="btn btn-portal-gold flex-fill" data-bs-toggle="modal" data-bs-target="#leaveModal">
                                <i class="fas fa-paper-plane me-1"></i> APPLY NOW
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- ==============================================
         PORTAL STYLES
         ============================================== -->
    <style>
    .portal-card {
        background: #ffffff;
        border-radius: 14px;
        padding: 30px 24px 26px;
        box-shadow: 0 10px 25px rgba(0, 35, 70, 0.05);
        border: 1px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .portal-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 36px rgba(0, 35, 70, 0.12);
    }
    .portal-card-cyan {
        border-top: 5px solid #00b4d8;
    }
    .portal-card-purple {
        border-top: 5px solid #6f42c1;
    }
    .portal-card-red {
        border-top: 5px solid #dc3545;
    }
    .portal-card-title-cyan {
        color: #00b4d8;
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: 0.5px;
    }
    .portal-card-title-purple {
        color: #6f42c1;
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: 0.5px;
    }
    .portal-card-title-red {
        color: #dc3545;
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: 0.5px;
    }
    .portal-card-desc {
        color: #475569;
        font-size: 0.88rem;
        line-height: 1.6;
        letter-spacing: 0.3px;
        margin-bottom: 25px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .portal-icon-pill {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }
    .icon-cyan { background: #e0f2fe; color: #0284c7; }
    .icon-purple { background: #f3e8ff; color: #7c3aed; }
    .icon-red { background: #fee2e2; color: #dc2626; }

    .btn-portal-dark {
        background: #1e293b;
        color: #ffffff;
        font-weight: 700;
        font-size: 0.82rem;
        padding: 10px 14px;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.25s ease;
        border: none;
    }
    .btn-portal-dark:hover {
        background: #0f172a;
        color: #ffffff;
        transform: scale(1.02);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    }
    .btn-portal-gold {
        background: #f59e0b;
        color: #0f172a;
        font-weight: 700;
        font-size: 0.82rem;
        padding: 10px 14px;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.25s ease;
        border: none;
        text-decoration: none;
        display: inline-block;
    }
    .btn-portal-gold:hover {
        background: #d97706;
        color: #ffffff;
        transform: scale(1.02);
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
    }
    </style>

    <!-- ==============================================
         MODAL 1: STUDENT ADMISSION QUICK REGISTRATION
         ============================================== -->
    <div class="modal fade" id="admissionModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4 border-0 shadow-lg">
                <div class="modal-header text-white" style="background: linear-gradient(135deg, #0284c7, #0b3b60);">
                    <div>
                        <h5 class="modal-title fw-bold mb-0"><i class="fas fa-user-graduate me-2"></i> Student Admission Registration (2026-27)</h5>
                        <small class="text-white-50">B.S. Public School &amp; A.H. International School</small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="formAdmissionQuick">
                    <input type="hidden" name="type" value="admission">
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Student's Full Name <span class="text-danger">*</span></label>
                                <input type="text" name="student_name" class="form-control" placeholder="Enter student's name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Father's / Guardian's Name <span class="text-danger">*</span></label>
                                <input type="text" name="parent_name" class="form-control" placeholder="Enter parent's name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Select Class / Grade <span class="text-danger">*</span></label>
                                <select name="grade" class="form-select" required>
                                    <option value="" disabled selected>Select class</option>
                                    <option value="Nursery">Nursery</option>
                                    <option value="LKG">LKG</option>
                                    <option value="UKG">UKG</option>
                                    <option value="Class 1">Class 1</option>
                                    <option value="Class 2">Class 2</option>
                                    <option value="Class 3">Class 3</option>
                                    <option value="Class 4">Class 4</option>
                                    <option value="Class 5">Class 5</option>
                                    <option value="Class 6">Class 6</option>
                                    <option value="Class 7">Class 7</option>
                                    <option value="Class 8">Class 8</option>
                                    <option value="Class 9">Class 9</option>
                                    <option value="Class 10">Class 10</option>
                                    <option value="Skill Training Course">Skill Training Course</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Parent Contact Number <span class="text-danger">*</span></label>
                                <input type="tel" name="phone" class="form-control" placeholder="10-digit mobile number" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Email Address</label>
                                <input type="email" name="email" class="form-control" placeholder="Optional email address">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Residential Address</label>
                                <input type="text" name="address" class="form-control" placeholder="City / Area, Meerut">
                            </div>
                        </div>
                        <div id="admissionAlert" class="mt-3 d-none"></div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary px-4 fw-bold" id="btnSubmitAdmission">
                            <span class="btn-text">Submit Registration <i class="fas fa-paper-plane ms-1"></i></span>
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ==============================================
         MODAL 2: TC APPLICATION (TRANSFER CERTIFICATE)
         ============================================== -->
    <div class="modal fade" id="tcModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4 border-0 shadow-lg">
                <div class="modal-header text-white" style="background: linear-gradient(135deg, #7c3aed, #4c1d95);">
                    <div>
                        <h5 class="modal-title fw-bold mb-0"><i class="fas fa-file-contract me-2"></i> Apply for Transfer Certificate (TC)</h5>
                        <small class="text-white-50">Online Clearance &amp; School Leaving Certificate</small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="formTC">
                    <input type="hidden" name="type" value="tc">
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Select School Branch <span class="text-danger">*</span></label>
                                <select name="school_name" class="form-select" required>
                                    <option value="B.S. Public School" selected>B.S. Public School</option>
                                    <option value="A.H. International School">A.H. International School</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Class Last Studied <span class="text-danger">*</span></label>
                                <input type="text" name="class_name" class="form-control" placeholder="e.g. Class 8th / 10th" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Student's Full Name <span class="text-danger">*</span></label>
                                <input type="text" name="student_name" class="form-control" placeholder="Full name of student" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Father's Name <span class="text-danger">*</span></label>
                                <input type="text" name="father_name" class="form-control" placeholder="Father's name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Scholar / Admission Number</label>
                                <input type="text" name="scholar_no" class="form-control" placeholder="e.g. BSPS-2024-55 (If known)">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Parent Contact / WhatsApp Mobile <span class="text-danger">*</span></label>
                                <input type="tel" name="parent_mobile" class="form-control" placeholder="10-digit mobile number" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Reason for TC / School Leaving <span class="text-danger">*</span></label>
                                <textarea name="reason_for_leaving" class="form-control" rows="2" placeholder="e.g. Parent job transfer, family relocating, higher secondary admission..." required></textarea>
                            </div>
                        </div>
                        <div id="tcAlert" class="mt-3 d-none"></div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary px-4 fw-bold" style="background:#7c3aed; border-color:#7c3aed;" id="btnSubmitTC">
                            <span class="btn-text">Submit TC Application <i class="fas fa-check-circle ms-1"></i></span>
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ==============================================
         MODAL 3: STUDENT LEAVE APPLICATION (CHUTTI KI APPLICATION)
         ============================================== -->
    <div class="modal fade" id="leaveModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4 border-0 shadow-lg">
                <div class="modal-header text-white" style="background: linear-gradient(135deg, #dc2626, #991b1b);">
                    <div>
                        <h5 class="modal-title fw-bold mb-0"><i class="fas fa-envelope-open-text me-2"></i> Student Leave Application (छुट्टी की एप्लीकेशन)</h5>
                        <small class="text-white-50">Submit leave directly to School Principal &amp; Website Application Box</small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="formLeave">
                    <input type="hidden" name="type" value="leave">
                    <div class="modal-body p-4">
                        <div class="alert alert-info py-2 px-3 small rounded-3 mb-3">
                            <i class="fas fa-info-circle me-1"></i> <strong>Note:</strong> Yeh application submit hone ke baad school website ke <strong>Admin Application Box</strong> me darj ho jayegi aur aap ise turant <strong>WhatsApp Group</strong> me bhi share kar sakenge.
                        </div>

                        <div class="row g-3">
                            <!-- School Branch -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Select School / Branch <span class="text-danger">*</span></label>
                                <select name="school_name" class="form-select" required>
                                    <option value="B.S. Public School" selected>B.S. Public School</option>
                                    <option value="A.H. International School">A.H. International School</option>
                                </select>
                            </div>

                            <!-- Class -->
                            <div class="col-md-3 col-6">
                                <label class="form-label fw-bold">Class / Grade <span class="text-danger">*</span></label>
                                <select name="class_name" class="form-select" required>
                                    <option value="">-- Select Class --</option>
                                    <option value="Nursery">Nursery</option>
                                    <option value="LKG">LKG</option>
                                    <option value="UKG">UKG</option>
                                    <option value="Class 1">Class 1</option>
                                    <option value="Class 2">Class 2</option>
                                    <option value="Class 3">Class 3</option>
                                    <option value="Class 4">Class 4</option>
                                    <option value="Class 5">Class 5</option>
                                    <option value="Class 6">Class 6</option>
                                    <option value="Class 7">Class 7</option>
                                    <option value="Class 8">Class 8</option>
                                    <option value="Class 9">Class 9</option>
                                    <option value="Class 10">Class 10</option>
                                </select>
                            </div>

                            <!-- Section -->
                            <div class="col-md-3 col-6">
                                <label class="form-label fw-bold">Section / Roll No</label>
                                <input type="text" name="section" class="form-control" placeholder="Sec A / Roll 12">
                            </div>

                            <!-- Student Name -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Student's Full Name (छात्र का नाम) <span class="text-danger">*</span></label>
                                <input type="text" name="student_name" class="form-control" placeholder="Student ka poora naam" required>
                            </div>

                            <!-- Father Name -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Father's Name (पिता का नाम) <span class="text-danger">*</span></label>
                                <input type="text" name="father_name" class="form-control" placeholder="Pita ka naam" required>
                            </div>

                            <!-- Dates -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Leave From Date (कब से) <span class="text-danger">*</span></label>
                                <input type="date" name="from_date" class="form-control" value="<?php echo date('Y-m-d'); ?>" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Leave To Date (कब तक) <span class="text-danger">*</span></label>
                                <input type="date" name="to_date" class="form-control" value="<?php echo date('Y-m-d'); ?>" required>
                            </div>

                            <!-- Reason Type -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Chutti Ka Karan (Reason) <span class="text-danger">*</span></label>
                                <select name="reason_type" class="form-select" required>
                                    <option value="">-- Chutti Ka Karan Chunein --</option>
                                    <option value="Achanak Tabiyat Kharab / Fever">Achanak Tabiyat Kharab / Fever / Illness</option>
                                    <option value="Zaroori Kaam / Urgent Work">Ghar Par Zaroori Kaam / Urgent Work</option>
                                    <option value="Parivarik Karyakram / Function">Parivarik Karyakram / Family Function / Shaadi</option>
                                    <option value="Doctor Appointment / Checkup">Doctor Appointment / Medical Checkup</option>
                                    <option value="Out of Station / Gaon Jana">Out of Station / Bahar Gaon Jana</option>
                                    <option value="Anya Karan / Other Reason">Anya Karan / Other Reason</option>
                                </select>
                            </div>

                            <!-- Mobile -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Parent WhatsApp / Mobile No <span class="text-danger">*</span></label>
                                <input type="tel" name="parent_mobile" class="form-control" placeholder="10-digit WhatsApp number" required>
                            </div>

                            <!-- Detailed Reason -->
                            <div class="col-12">
                                <label class="form-label fw-bold">Application Details / Vistar Se Karan Likhein</label>
                                <textarea name="reason_details" class="form-control" rows="3" placeholder="Respected Principal Sir, I kindly request you to grant me leave for..."></textarea>
                            </div>
                        </div>

                        <div id="leaveAlert" class="mt-3 d-none"></div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger px-4 fw-bold" id="btnSubmitLeave">
                            <span class="btn-text">Submit Application <i class="fas fa-paper-plane ms-1"></i></span>
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ==============================================
         SUCCESS MODAL (WITH WHATSAPP SHARE OPTION)
         ============================================== -->
    <div class="modal fade" id="applicationSuccessModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow-lg text-center p-4">
                <div class="my-3">
                    <div class="rounded-circle bg-success text-white d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 75px; height: 75px; font-size: 2.2rem;">
                        <i class="fas fa-check"></i>
                    </div>
                </div>
                <h4 class="fw-bold text-dark mb-1">Application Submitted!</h4>
                <p class="text-muted small mb-3" id="successModalMsg">Aapki application safaltapoorvak darj ho chuki hai.</p>
                <div class="p-3 bg-light rounded-3 mb-3 text-start">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="text-muted small">Application Number:</span>
                        <strong class="text-primary font-monospace" id="successAppNo">---</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted small">Destination:</span>
                        <span class="badge bg-success">Admin Application Box</span>
                    </div>
                </div>
                <div class="d-grid gap-2">
                    <a href="#" id="btnShareWhatsApp" target="_blank" class="btn btn-success py-2.5 fw-bold shadow-sm d-none">
                        <i class="fab fa-whatsapp me-2 fs-5"></i> Forward to School WhatsApp Group
                    </a>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close Window</button>
                </div>
            </div>
        </div>
    </div>

    <!-- AJAX Handlers for Application Submissions -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Universal form submitter
        function handleAjaxForm(formId, alertId, btnId, modalId) {
            const form = document.getElementById(formId);
            if (!form) return;

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const alertBox = document.getElementById(alertId);
                const btn = document.getElementById(btnId);
                const btnText = btn.querySelector('.btn-text');
                const spinner = btn.querySelector('.spinner-border');

                // UI loading state
                btn.disabled = true;
                btnText.classList.add('d-none');
                spinner.classList.remove('d-none');
                alertBox.className = 'mt-3 d-none';

                const formData = new FormData(form);

                fetch('submit_application.php', {
                    method: 'POST',
                    body: formData
                })
                .then(r => r.json())
                .then(data => {
                    btn.disabled = false;
                    btnText.classList.remove('d-none');
                    spinner.classList.add('d-none');

                    if (data.status === 'success') {
                        // Close current modal
                        const currentModal = bootstrap.Modal.getInstance(document.getElementById(modalId));
                        if (currentModal) currentModal.hide();
                        form.reset();

                        // Populate and show success modal
                        document.getElementById('successModalMsg').innerText = data.message;
                        document.getElementById('successAppNo').innerText = data.app_no || 'BSPS-APP';

                        const waBtn = document.getElementById('btnShareWhatsApp');
                        if (data.whatsapp_msg) {
                            waBtn.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(data.whatsapp_msg);
                            waBtn.classList.remove('d-none');
                        } else {
                            waBtn.classList.add('d-none');
                        }

                        const successModal = new bootstrap.Modal(document.getElementById('applicationSuccessModal'));
                        successModal.show();
                    } else {
                        alertBox.className = 'mt-3 alert alert-danger';
                        alertBox.innerText = data.message || 'Error submitting application.';
                    }
                })
                .catch(err => {
                    btn.disabled = false;
                    btnText.classList.remove('d-none');
                    spinner.classList.add('d-none');
                    alertBox.className = 'mt-3 alert alert-danger';
                    alertBox.innerText = 'Network error. Please try again.';
                });
            });
        }

        handleAjaxForm('formAdmissionQuick', 'admissionAlert', 'btnSubmitAdmission', 'admissionModal');
        handleAjaxForm('formTC', 'tcAlert', 'btnSubmitTC', 'tcModal');
        handleAjaxForm('formLeave', 'leaveAlert', 'btnSubmitLeave', 'leaveModal');
    });
    </script>
    <!-- Gallery Section -->
    <section class="section-padding bg-white">
        <div class="container-fluid px-lg-5">
            <div class="section-title text-center reveal">
                <span class="subtitle"><?php echo __('moments_captured'); ?></span>
                <h2><?php echo __('campus_gallery'); ?></h2>
                <p class="text-muted"><?php echo __('gallery_desc'); ?></p>
                <div class="line mx-auto"></div>
            </div>

            <div class="owl-carousel gallery-carousel mt-5">
                <?php foreach($gallery_items as $item): ?>
                <div class="gallery-carousel-item">
                    <div class="rainbow-border">
                        <div class="gallery-card m-0">
                            <div class="gallery-img-wrapper">
                                <img src="uploads/gallery/<?php echo $item['image']; ?>" alt="<?php echo htmlspecialchars($item['heading']); ?>" loading="lazy">
                            </div>
                            <div class="gallery-content">
                                <h4 class="mb-0"><?php echo htmlspecialchars($item['heading']); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <div class="text-center mt-5">
                <a href="gallery.php" class="btn btn-admission px-5 py-3 fs-5">
                    <i class="fas fa-images me-2"></i> <?php echo __('view_full_gallery'); ?>
                </a>
            </div>
        </div>
    </section>

    <!-- Our Management Section -->
    <section class="section-padding bg-light overflow-hidden">
        <div class="container">
            <div class="section-title text-center reveal">
                <span class="subtitle"><?php echo __('our_management'); ?></span>
                <h2>Meet Our Visionary Leaders</h2>
                <div class="line mx-auto"></div>
            </div>

            <div class="row g-4 mt-5 justify-content-center row-cols-1 row-cols-md-2 row-cols-lg-3">
                <!-- Chairman -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/chairman_plain.png" alt="Chairman" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('chairman_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('chairman'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('chairman_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Secretary -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/adv abhishek giri secretory bs public School.jpeg" alt="Secretary" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('secretary_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('secretary'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('secretary_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Principal -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="http://bsps.co.in/images/2.jpg" alt="Principal" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);">Furkan Saifi</h5>
                            <p class="text-muted small mb-3"><?php echo __('principal'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('principal_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Manager Wisdom -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/MUSTUFA SAIFI  manager wisdom learning school.jpeg" alt="Manager Wisdom" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('manager_wisdom_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('manager_wisdom'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('manager_wisdom_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Manager BSPS -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/manager mukeem saifi bs public school.jpeg" alt="Manager BSPS" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('manager_bsps_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('manager_bsps'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('manager_bsps_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Awards & Recognition Section -->
    <section class="section-padding bg-white position-relative award-section" style="background-image: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('http://bsps.co.in/images_new/7.jpg'); background-size: cover; background-attachment: fixed;">
        <div class="container">
            <div class="section-title text-center reveal">
                <span class="subtitle">ABOUT US</span>
                <?php 
                $igt = explode(',', __('inspiring_growth_title'));
                $igt_1 = trim($igt[0]);
                $igt_2 = isset($igt[1]) ? trim($igt[1]) : '';
                ?>
                <h2><span style="color: var(--accent-color);"><?php echo $igt_1; ?></span><?php if($igt_2): ?>, <?php echo $igt_2; ?><?php endif; ?></h2>
                <h5 class="text-muted mt-3"><?php echo __('edu_philosophy'); ?></h5>
                <div class="line mx-auto"></div>
            </div>

            <div class="row g-4 mt-5">
                <div class="col-lg-4 col-md-6 reveal">
                    <div class="award-card text-center p-4 h-100">
                        <div class="award-top p-4">
                            <h5 class="fw-bold text-white mb-0"><?php echo __('award_1'); ?></h5>
                        </div>
                        <div class="award-bottom bg-white p-4 shadow-sm">
                            <div class="award-icon fs-1 text-warning"><i class="fas fa-trophy"></i></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 reveal">
                    <div class="award-card text-center p-4 h-100">
                        <div class="award-top p-4" style="background: linear-gradient(135deg, var(--primary-light), var(--primary-color));">
                            <h5 class="fw-bold text-white mb-0"><?php echo __('award_2'); ?></h5>
                        </div>
                        <div class="award-bottom bg-white p-4 shadow-sm">
                            <div class="award-icon fs-1 text-warning"><i class="fas fa-trophy"></i></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 reveal">
                    <div class="award-card text-center p-4 h-100">
                        <div class="award-top p-4" style="background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));">
                            <h5 class="fw-bold text-white mb-0"><?php echo __('award_3'); ?></h5>
                        </div>
                        <div class="award-bottom bg-white p-4 shadow-sm">
                            <div class="award-icon fs-1 text-warning"><i class="fas fa-trophy"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


<?php require_once('footer.php'); ?>