<?php 
// Set page title before including header
$pageTitle = "Events and Gallery - E&SE Kotli";
include_once 'header_new.php'; 
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Base Styles */
        html, body {
            overflow: auto;
            height: auto;
        }
        
         /* Hero Section */
    .hero-section {
        position: relative;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .carousel-item {
        height: calc(100vh - 56px - 150px);
        min-height: 400px;
        background-size: cover;
        background-position: center;
    }
    
    .carousel-item img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    
    .carousel-caption {
        background: rgba(0, 0, 0, 0.6);
        padding: 1.5rem;
        border-radius: 8px;
        bottom: 20%;
        left: 5%;
        right: 5%;
        width: 90%;
    }
    
    .carousel-caption h3 {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        font-weight: 700;
        margin-bottom: 1rem;
    }
    
	.carousel-fade .carousel-item {
    transition: opacity 0.6s ease-in-out; /* Reduced from default 0.6s */
	}    
                
        /* Gallery Grid */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .image-container {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            aspect-ratio: 4/3;
        }
        
        .image-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        .gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
        }
        
        /* Fullscreen Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            animation: fadeIn 0.3s;
        }
        
        .modal-open {
            overflow: hidden;
        }
        
        .modal-open .navbar,
        .modal-open .hero-section,
        .modal-open .container h1,
        .modal-open footer {
            display: none !important;
        }
        
        .modal-content {
            display: block;
            max-width: 90%;
            max-height: 90%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: zoomIn 0.3s;
        }
        
        /* Modal Controls */
        .close-btn {
            position: fixed;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10000;
            background: rgba(0,0,0,0.5);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .close-btn:hover {
            color: #ff5252;
            transform: rotate(90deg);
        }
        
        .modal-nav {
            position: fixed;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            box-sizing: border-box;
            z-index: 10000;
            transform: translateY(-50%);
        }
        

        .nav-arrow {
            color: white;
            font-size: 40px;
            cursor: pointer;
            background: rgba(0,0,0,0.5);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .nav-arrow:hover {
            background: rgba(0,0,0,0.8);
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes zoomIn {
            from { transform: translate(-50%, -50%) scale(0.8); }
            to { transform: translate(-50%, -50%) scale(1); }
        }
        
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            h1.stylish-header {
                font-size: 5vw;
            }
            
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .close-btn {
                top: 10px;
                right: 15px;
                font-size: 30px;
                width: 40px;
                height: 40px;
            }
        }
    </style>
</head>

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

<h1 class="text-center text-uppercase stylish-header"><strong>Events And Gallery</strong></h1>
    <div class="container">       
        
        <main>
            <?php
                $directory = 'gallery/';
                $images = glob($directory . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
                usort($images, function($a, $b) {
                    return filemtime($b) - filemtime($a);
                });

                $groupedImages = [];
                foreach ($images as $image) {
                    $date = date("F d, Y", filemtime($image));
                    $groupedImages[$date][] = $image;
                }

                if (!empty($groupedImages)) {
                    foreach ($groupedImages as $date => $images) {
                        echo '<section class="mb-5">';
                        echo '<h2 class="text-center">' . $date . '</h2>';
                        echo '<div class="gallery">';
                        foreach ($images as $image) {
                            $name = pathinfo($image, PATHINFO_FILENAME);
                            $name = ucwords(str_replace(['_', '-'], ' ', $name));
                            echo '<div class="image-container">';
                            echo '<img src="' . $image . '" alt="' . htmlspecialchars($name) . '" class="zoomable">';
                            echo '</div>';
                        }
                        echo '</div></section>';
                    }
                } else {
                    echo '<div class="alert alert-info text-center">No images available at the moment.</div>';
                }
            ?>
        </main>

        <!-- Image Modal -->
        <div id="imageModal" class="modal">
            <span class="close-btn">&times;</span>
            <div class="modal-nav">
                <div class="nav-arrow prev-arrow">&#10094;</div>
                <div class="nav-arrow next-arrow">&#10095;</div>
            </div>
            <img class="modal-content" id="modalImage">
        </div>

        <script>
        document.addEventListener('DOMContentLoaded', function() {
			
			    // Initialize carousel with faster transition
			var myCarousel = document.querySelector('#mainCarousel');
			var carousel = new bootstrap.Carousel(myCarousel, {
				interval: 2000, // Change slide every 2 seconds (2000ms)
				ride: 'carousel',
				wrap: true,
				pause: false // Remove this if you want to pause on hover
			});
			
			// Optional: Add faster transition animation
			var carouselInner = document.querySelector('.carousel-inner');
			carouselInner.style.transition = 'transform 0.5s ease-in-out';
	
            const modal = document.getElementById("imageModal");
            const modalImg = document.getElementById("modalImage");
            const closeBtn = document.querySelector(".close-btn");
            const prevArrow = document.querySelector(".prev-arrow");
            const nextArrow = document.querySelector(".next-arrow");
            const body = document.body;
            const galleryImages = Array.from(document.querySelectorAll('.zoomable'));
            let currentImageIndex = 0;

            // Open modal with image
            function openModal(index) {
                currentImageIndex = index;
                modalImg.src = galleryImages[currentImageIndex].src;
                modal.style.display = "block";
                body.classList.add("modal-open");
            }

            // Navigation functions
            function showPrevImage() {
                currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
                modalImg.src = galleryImages[currentImageIndex].src;
            }

            function showNextImage() {
                currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
                modalImg.src = galleryImages[currentImageIndex].src;
            }

            // Event listeners
            galleryImages.forEach((img, index) => {
                img.addEventListener('click', () => openModal(index));
            });

            prevArrow.addEventListener('click', (e) => {
                e.stopPropagation();
                showPrevImage();
            });

            nextArrow.addEventListener('click', (e) => {
                e.stopPropagation();
                showNextImage();
            });

            closeBtn.addEventListener('click', () => {
                modal.style.display = "none";
                body.classList.remove("modal-open");
            });

            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.display = "none";
                    body.classList.remove("modal-open");
                }
            });

            // Keyboard navigation
            document.addEventListener('keydown', function(e) {
                if (modal.style.display === "block") {
                    switch(e.key) {
                        case "Escape":
                            modal.style.display = "none";
                            body.classList.remove("modal-open");
                            break;
                        case "ArrowLeft":
                            showPrevImage();
                            break;
                        case "ArrowRight":
                            showNextImage();
                            break;
                    }
                }
            });
        });
        </script>
    </div>
</body>
</html>

<?php include_once 'footer_new.php'; ?>