<?php
// Ensure DB connection is active
if (!isset($conn) || !$conn) {
    @include_once(__DIR__ . '/db.php');
}

// Fetch Important Sites from DB (Controlled via Admin Panel)
$imp_sites = [];
if (isset($conn) && $conn) {
    $imp_res = $conn->query("SELECT * FROM important_sites WHERE status = 1 ORDER BY order_num ASC, id ASC");
    if ($imp_res && $imp_res->num_rows > 0) {
        while ($row = $imp_res->fetch_assoc()) {
            $imp_sites[] = $row;
        }
    }
}
?>

<?php if (!empty($imp_sites)): ?>
    <!-- ==========================================================================
         IMPORTANT SITES SECTION (Matching Reference Mockup & Admin Controlled)
         ========================================================================== -->
    <section class="imp-sites-section" id="impSitesSection">
        <div class="imp-border-line imp-border-top"></div>
        <div class="container py-3">
            <div class="imp-sites-header">
                <div class="imp-sites-badge">
                    <i class="fas fa-globe imp-globe-icon"></i>
                    <span>Important Sites</span>
                </div>
            </div>
            
            <div class="owl-carousel owl-theme" id="importantSitesCarousel">
                <?php foreach ($imp_sites as $s): 
                    $img_url = (strpos($s['image'], 'http') === 0) ? $s['image'] : 'uploads/important_sites/' . htmlspecialchars($s['image']);
                    $site_url = !empty($s['url']) ? htmlspecialchars($s['url']) : '#';
                    $site_title = htmlspecialchars($s['title']);
                ?>
                <div class="item">
                    <a href="<?php echo $site_url; ?>" target="_blank" rel="noopener noreferrer" class="imp-site-card" title="<?php echo $site_title; ?>">
                        <div class="imp-circle-wrap">
                            <div class="imp-site-circle">
                                <img src="<?php echo $img_url; ?>" alt="<?php echo $site_title; ?>" loading="lazy">
                            </div>
                        </div>
                        <div class="imp-site-title"><?php echo $site_title; ?></div>
                    </a>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="imp-border-line imp-border-bottom"></div>
    </section>
<?php endif; ?>

    <!-- Footer: DAIS Style Prestigious Institutional Dual-Campus Footer -->
    <footer class="dais-footer">
        <!-- Top Campus Navigation Bar (Like DAIS | NMAJS) -->
        <div class="dais-campus-topbar">
            <div class="container">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="d-flex align-items-center flex-wrap">
                        <span class="text-white-50 me-2 d-none d-sm-inline"><i class="fas fa-graduation-cap text-warning me-1"></i> Our Campuses:</span>
                        <a href="index.php#campuses" class="campus-pill active">
                            <span>B.S. PUBLIC SCHOOL</span>
                        </a>
                        <span class="campus-sep">|</span>
                        <a href="index.php#campuses" class="campus-pill">
                            <span>A.H. INTERNATIONAL SCHOOL</span>
                        </a>
                    </div>
                    <div class="d-none d-md-flex align-items-center gap-3 text-white-50 small">
                        <span><i class="fas fa-certificate text-warning me-1"></i> CBSE Pattern &bull; Estd. 2005</span>
                        <span>&bull;</span>
                        <span><i class="fas fa-laptop-code text-info me-1"></i> Smart Interactive Digital Campus</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Footer Section -->
        <div class="dais-footer-main">
            <div class="container">
                <div class="row g-4 align-items-start">
                    
                    <!-- Col 1: Brand & Dual Logos (Left) -->
                    <div class="col-lg-3 col-md-12">
                        <div class="dais-footer-brand">
                            <div class="dais-logo-cluster">
                                <a href="index.php" class="dais-logo-frame" title="B.S. Public School">
                                    <img src="images/logo_bsps.png" alt="B.S. Public School Logo">
                                </a>
                                <a href="index.php" class="dais-logo-frame" title="A.H. International School">
                                    <img src="images/logo_ah.png" alt="A.H. International School Logo">
                                </a>
                            </div>
                            <div class="dais-brand-title">B.S. PUBLIC SCHOOL &amp;<br>A.H. INTERNATIONAL SCHOOL</div>
                            <div class="dais-brand-estd">ESTD. 2005 &bull; MEERUT, U.P.</div>
                            <p class="dais-brand-desc">
                                Empowering young minds through foundational excellence, high academic standards, disciplined character, and state-of-the-art vocational learning.
                            </p>
                            <div class="dais-social-wrap">
                                <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="dais-social-btn" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                                <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="dais-social-btn" title="Instagram"><i class="fab fa-instagram"></i></a>
                                <a href="https://youtube.com" target="_blank" rel="noopener noreferrer" class="dais-social-btn" title="YouTube"><i class="fab fa-youtube"></i></a>
                                <a href="https://wa.me/919012020817" target="_blank" rel="noopener noreferrer" class="dais-social-btn" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Col 2: Navigation Links 1 -->
                    <div class="col-lg-2 col-6">
                        <div class="dais-links-col">
                            <h6>Navigation</h6>
                            <ul class="dais-links-list">
                                <li><a href="index.php"><?php echo __('home'); ?></a></li>
                                <li><a href="about-us.php"><?php echo __('about_us'); ?></a></li>
                                <li><a href="academics.php"><?php echo __('academics'); ?></a></li>
                                <li><a href="admission-enquiry.php"><?php echo __('admissions'); ?></a></li>
                                <li><a href="facilities.php"><?php echo __('facilities'); ?></a></li>
                                <li><a href="gallery.php"><?php echo __('gallery'); ?></a></li>
                                <li><a href="vision-mission.php">Vision &amp; Mission</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- Col 3: Navigation Links 2 (Student Portals & Services) -->
                    <div class="col-lg-2 col-6">
                        <div class="dais-links-col">
                            <h6>Student Portals</h6>
                            <ul class="dais-links-list">
                                <li><a href="admission-enquiry.php">Student Admission</a></li>
                                <li><a href="index.php#student-portals-section">Apply for TC</a></li>
                                <li><a href="index.php#student-portals-section">Student Leave Desk</a></li>
                                <li><a href="the-school.php">The School</a></li>
                                <li><a href="message-to-youth.php">Message to Youth</a></li>
                                <li><a href="contact-us.php"><?php echo __('contact_us'); ?></a></li>
                                <li><a href="admin/index.php">Admin Login</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- Col 4: BOTH SCHOOLS DETAILED INFORMATION (Exact user requirement) -->
                    <div class="col-lg-5 col-md-12">
                        <div class="dais-school-details-col">
                            
                            <!-- SCHOOL 1: B.S. PUBLIC SCHOOL -->
                            <div class="dais-school-card">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="school-badge badge-bsps"><i class="fas fa-school me-1"></i> Main Campus &bull; Estd. 2005</span>
                                    <span class="text-white-50 small"><i class="fas fa-check-circle text-success me-1"></i> CBSE Pattern</span>
                                </div>
                                <h5>B.S. PUBLIC SCHOOL</h5>
                                <div class="school-meta">
                                    <i class="fas fa-map-marker-alt"></i> B Block 25, Campus 2, 380, 2, Futa Rd, Hafta Bazar, Samar Garden, Meerut, UP - 250002
                                </div>
                                <div class="school-meta">
                                    <i class="fas fa-phone-alt"></i> Tel: <a href="tel:+919012020817" class="meta-link">+91 9012020817</a>, <a href="tel:+919084873729" class="meta-link">+91 9084873729</a>
                                </div>
                                <div class="school-meta">
                                    <i class="fas fa-envelope"></i> Email: <a href="mailto:bsstcindia@gmail.com" class="meta-link">bsstcindia@gmail.com</a>
                                </div>
                                <div class="school-meta">
                                    <i class="fas fa-globe"></i> Website: <a href="https://bspspublicschool.in" class="meta-link">www.bspspublicschool.in</a>
                                </div>
                            </div>

                            <!-- SCHOOL 2: A.H. INTERNATIONAL SCHOOL -->
                            <div class="dais-school-card">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="school-badge badge-ahis"><i class="fas fa-globe-asia me-1"></i> Advanced Campus</span>
                                    <span class="text-white-50 small"><i class="fas fa-star text-warning me-1"></i> Smart Interactive</span>
                                </div>
                                <h5>A.H. INTERNATIONAL SCHOOL</h5>
                                <div class="school-meta">
                                    <i class="fas fa-map-marker-alt"></i> B Block, Campus 2, Hafta Bazar Road, Samar Garden, Meerut, UP - 250002
                                </div>
                                <div class="school-meta">
                                    <i class="fas fa-phone-alt"></i> Tel: <a href="tel:+919012020817" class="meta-link">+91 9012020817</a>, <a href="tel:+919084873729" class="meta-link">+91 9084873729</a>
                                </div>
                                <div class="school-meta">
                                    <i class="fas fa-envelope"></i> Email: <a href="mailto:bsstcindia@gmail.com" class="meta-link">bsstcindia@gmail.com</a>
                                </div>
                                <div class="school-meta">
                                    <i class="fas fa-globe"></i> Website: <a href="https://bspspublicschool.in" class="meta-link">www.bspspublicschool.in</a>
                                </div>
                            </div>

                            <p class="dais-copyright-text mt-3">
                                &copy; <?php echo date('Y'); ?> B.S. Public School &amp; A.H. International School. All Rights Reserved.
                            </p>
                        </div>
                    </div>

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

        <!-- Sub-footer (Bottom Bar like DAIS) -->
        <div class="dais-subfooter">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 text-center text-md-start mb-2 mb-md-0">
                        <a href="contact-us.php">Terms &amp; Conditions</a>
                        <span class="sub-sep">|</span>
                        <a href="contact-us.php">Privacy Policy</a>
                        <span class="sub-sep">|</span>
                        <a href="the-school.php">Mandatory Public Disclosure</a>
                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <a href="index.php#campuses" class="more-campuses-link">
                            More About Our Campuses <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>


    <!-- JS Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
        $(document).ready(function(){
            // Gallery Carousel - Auto running with 3 items visible
            if ($(".gallery-carousel").length) {
                $(".gallery-carousel").owlCarousel({
                    loop: true,
                    margin: 20,
                    nav: true,
                    dots: true,
                    autoplay: true,
                    autoplayTimeout: 2500,
                    autoplayHoverPause: true,
                    smartSpeed: 700,
                    navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
                    responsive: {
                        0:    { items: 1 },
                        576:  { items: 2 },
                        992:  { items: 3 }
                    }
                });
            }

            // Important Sites Carousel (Auto-scrolling with circular cards)
            if ($("#importantSitesCarousel").length) {
                $("#importantSitesCarousel").owlCarousel({
                    loop: true,
                    margin: 15,
                    autoplay: true,
                    autoplayTimeout: 2800,
                    autoplayHoverPause: true,
                    smartSpeed: 600,
                    dots: true,
                    nav: false,
                    responsive: {
                        0:    { items: 2 },
                        480:  { items: 3 },
                        768:  { items: 4 },
                        992:  { items: 5 },
                        1200: { items: 6 }
                    }
                });
            }

            // Scroll Reveal Animation
            function reveal() {
                var reveals = document.querySelectorAll(".reveal");
                for (var i = 0; i < reveals.length; i++) {
                    var windowHeight = window.innerHeight;
                    var elementTop = reveals[i].getBoundingClientRect().top;
                    var elementVisible = 150;
                    if (elementTop < windowHeight - elementVisible) {
                        reveals[i].classList.add("active");
                    } else {
                        reveals[i].classList.remove("active");
                    }
                }
            }
            window.addEventListener("scroll", reveal);
            reveal(); // Initial check
        });
    </script>
</body>
</html>
