<?php
$pageTitle = "Gallery | B.S. Public School Meerut";
$pageDesc = "Explore the vibrant campus life, events, and activities of B.S. Public School Meerut through our photo gallery.";
require_once('header.php');
require_once('db.php');

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

// Fetch all slider images (to also include in gallery page)
$slider_res = $conn->query("SELECT * FROM sliders WHERE status = 1 ORDER BY id DESC");
$sliders = [];
while($row = $slider_res->fetch_assoc()) {
    $sliders[] = $row;
}
?>

<!-- Page Header with Hero -->
<section class="gallery-page-hero">
    <div class="gallery-hero-overlay"></div>
    <div class="container position-relative text-center text-white py-5" style="z-index:2;">
        <h1 class="display-4 fw-bold mb-3">Our Photo Gallery</h1>
        <p class="lead mb-0">Explore the vibrant life & moments of B.S. Public School</p>
        <nav aria-label="breadcrumb" class="mt-3">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a href="index.php" class="text-white text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Gallery</li>
            </ol>
        </nav>
    </div>
</section>

<!-- ===== SECTION 1: SLIDER IMAGES IN GALLERY ===== -->
<?php if (!empty($sliders)): ?>
<section class="section-padding bg-light">
    <div class="container">
        <div class="section-title text-center reveal mb-5">
            <span class="subtitle">Special Moments</span>
            <h2>Featured Highlights</h2>
            <p class="text-muted">Key moments featured on our homepage slider.</p>
            <div class="line mx-auto"></div>
        </div>
        <div class="row g-4">
            <?php foreach($sliders as $slide): ?>
            <div class="col-lg-4 col-md-6 reveal">
                <div class="rainbow-border" onclick="openLightbox('uploads/sliders/<?php echo $slide['image']; ?>', '<?php echo htmlspecialchars($slide['title']); ?>')">
                    <div class="gallery-card m-0" style="cursor:pointer;">
                        <div class="gallery-img-wrapper">
                            <img src="uploads/sliders/<?php echo $slide['image']; ?>" alt="<?php echo htmlspecialchars($slide['title']); ?>" loading="lazy">
                            <div class="gallery-zoom-icon"><i class="fas fa-search-plus"></i></div>
                        </div>
                        <div class="gallery-content">
                            <h4 class="mb-0"><?php echo htmlspecialchars($slide['title'] ?: 'School Event'); ?></h4>
                            <?php if($slide['subtitle']): ?>
                            <p class="text-muted small mb-0"><?php echo htmlspecialchars($slide['subtitle']); ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ===== SECTION 2: GALLERY IMAGES IN 3x3 GRID ===== -->
<section class="section-padding bg-white">
    <div class="container">
        <div class="section-title text-center reveal mb-5">
            <span class="subtitle">Campus Life</span>
            <h2>Our Complete Gallery</h2>
            <p class="text-muted">All activities, events, and achievements from our school campus.</p>
            <div class="line mx-auto"></div>
        </div>

        <?php if (!empty($gallery_items)): ?>
        <div class="row g-4" id="galleryGrid">
            <?php foreach($gallery_items as $index => $item): ?>
            <div class="col-lg-4 col-md-6 gallery-grid-item reveal">
                <div class="rainbow-border" onclick="openLightbox('uploads/gallery/<?php echo $item['image']; ?>', '<?php echo htmlspecialchars($item['heading']); ?>')">
                    <div class="gallery-card m-0" style="cursor:pointer;">
                        <div class="gallery-img-wrapper">
                            <img src="uploads/gallery/<?php echo $item['image']; ?>" alt="<?php echo htmlspecialchars($item['heading']); ?>" loading="lazy">
                            <div class="gallery-zoom-icon"><i class="fas fa-search-plus"></i></div>
                        </div>
                        <div class="gallery-content">
                            <h4 class="mb-0"><?php echo htmlspecialchars($item['heading']); ?></h4>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div class="text-center py-5">
            <i class="fas fa-images fa-5x text-muted mb-4"></i>
            <h4 class="text-muted">No gallery images yet. Add some from the Admin Panel.</h4>
            <a href="admin/manage_gallery.php" class="btn btn-admission mt-3">Go to Admin Panel</a>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- ===== LIGHTBOX MODAL ===== -->
<div id="lightboxModal" class="lightbox-modal" onclick="closeLightbox()">
    <div class="lightbox-content" onclick="event.stopPropagation()">
        <button class="lightbox-close" onclick="closeLightbox()"><i class="fas fa-times"></i></button>
        <img id="lightboxImg" src="" alt="">
        <div id="lightboxCaption" class="lightbox-caption"></div>
        <div class="lightbox-nav">
            <button id="lightboxPrev" onclick="changeLightbox(-1)"><i class="fas fa-chevron-left"></i></button>
            <button id="lightboxNext" onclick="changeLightbox(1)"><i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</div>

<!-- Gallery Extra CSS -->
<style>
.gallery-page-hero {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    background: linear-gradient(rgba(0,50,20,0.7), rgba(0,0,0,0.8)), url('http://bsps.co.in/images_new/4.jpg') center/cover no-repeat;
    padding: 80px 0;
}
.gallery-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,104,55,0.6), rgba(0,0,0,0.5));
}
.gallery-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(0,104,55,0.9);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: 0.4s;
    z-index: 5;
}
.gallery-card:hover .gallery-zoom-icon {
    transform: translate(-50%, -50%) scale(1);
}
/* Lightbox */
.lightbox-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.lightbox-modal.active {
    display: flex;
}
.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}
.lightbox-content img {
    max-width: 85vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 60px rgba(0,104,55,0.5);
}
.lightbox-caption {
    color: white;
    margin-top: 15px;
    font-size: 1.2rem;
    font-weight: 600;
}
.lightbox-close {
    position: absolute;
    top: -20px;
    right: -20px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1;
    transition: 0.3s;
}
.lightbox-close:hover { background: #bb2d3b; transform: scale(1.1); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% + 100px);
    left: -50px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.lightbox-nav button {
    pointer-events: all;
    background: rgba(0,104,55,0.85);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    cursor: pointer;
    transition: 0.3s;
}
.lightbox-nav button:hover { background: var(--primary-color); transform: scale(1.1); }
</style>

<!-- Lightbox JS -->
<script>
var allImages = [];
var currentIndex = 0;

// Build all images array from gallery
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[onclick^="openLightbox"]').forEach(function(el, i) {
        var match = el.getAttribute('onclick').match(/openLightbox\('([^']+)',\s*'([^']*)'\)/);
        if(match) allImages.push({src: match[1], caption: match[2]});
    });
});

function openLightbox(src, caption) {
    currentIndex = allImages.findIndex(function(img){ return img.src === src; });
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightboxCaption').textContent = caption;
    document.getElementById('lightboxModal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    document.getElementById('lightboxModal').classList.remove('active');
    document.body.style.overflow = '';
}

function changeLightbox(dir) {
    currentIndex = (currentIndex + dir + allImages.length) % allImages.length;
    var img = allImages[currentIndex];
    document.getElementById('lightboxImg').src = img.src;
    document.getElementById('lightboxCaption').textContent = img.caption;
}

// Keyboard navigation
document.addEventListener('keydown', function(e) {
    if (!document.getElementById('lightboxModal').classList.contains('active')) return;
    if (e.key === 'ArrowRight') changeLightbox(1);
    if (e.key === 'ArrowLeft') changeLightbox(-1);
    if (e.key === 'Escape') closeLightbox();
});
</script>

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