<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="CII - Cooperative Investment Initiative">
    <meta name="description" content="View CII certificate presentations and road show events. See our community in action and the success stories of our members.">
    <meta name="keywords" content="CII gallery, certificate presentation, road show, events, community, cooperative">
    <!-- ======== Page title ============ -->
    <title>Gallery | CII Cooperative Investment Initiative</title>
    <!--<< Favcion >>-->
    <link rel="shortcut icon" href="assets/img/favicon.phtml">

    <!--<< All Min Css >>-->
    <link rel="stylesheet" href="assets/css/all.min.css">
    <!--<< Animate.css >>-->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!--<< Magnific Popup.css >>-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--<< MeanMenu.css >>-->
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <!--<< Swiper Bundle.css >>-->
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <!--<< Nice Select.css >>-->
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <!--<< Flaticon.css >>-->
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <!--<< Main.css >>-->
    <link href="assets/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="src/output.css">
    <style>
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            padding: 40px 0;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(19, 58, 157, 0.1);
            transition: all 0.3s ease;
            aspect-ratio: 1/1;
        }

        .gallery-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 32px rgba(19, 58, 157, 0.2);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.08);
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(19, 58, 157, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 2;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-overlay-icon {
            color: white;
            font-size: 36px;
        }

        .gallery-section-title {
            color: #133A9D;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 12px;
            margin-top: 60px;
        }

        .gallery-section-title:first-of-type {
            margin-top: 0;
        }

        .gallery-section-subtitle {
            color: #666;
            font-size: 16px;
            margin-bottom: 32px;
            font-weight: 500;
        }

        .gallery-divider {
            height: 3px;
            background: linear-gradient(to right, #133A9D, #7318AB, #CC66CC);
            width: 80px;
            margin-bottom: 20px;
            border-radius: 2px;
        }

        /* Lightbox Modal */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }

        .lightbox.active {
            display: flex;
        }

        .lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-image {
            max-width: 100%;
            max-height: 100%;
            border-radius: 12px;
            object-fit: contain;
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 40px;
            color: white;
            font-size: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(19, 58, 157, 0.5);
        }

        .lightbox-close:hover {
            background: #133A9D;
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 24px;
            cursor: pointer;
            background: rgba(19, 58, 157, 0.5);
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 1001;
        }

        .lightbox-nav:hover {
            background: #133A9D;
        }

        .lightbox-prev {
            left: 20px;
        }

        .lightbox-next {
            right: 20px;
        }

        .lightbox-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 16px;
            background: rgba(19, 58, 157, 0.7);
            padding: 10px 20px;
            border-radius: 25px;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .gallery-container {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 16px;
            }

            .lightbox-close {
                top: 10px;
                right: 20px;
            }

            .lightbox-nav {
                width: 40px;
                height: 40px;
                font-size: 18px;
            }

            .lightbox-prev {
                left: 10px;
            }

            .lightbox-next {
                right: 10px;
            }
        }
    </style>
</head>

<body>
    <?php include '_partials/header.phtml'; ?>

    <main style="margin-top: 150px;">
        <!-- Breadcrumb -->
        <div class="breadcrumb-banner bg-[#F8F8F8] rounded-[30px] overflow-hidden relative">
            <div class="et-container max-w-[clamp(1150px,92.75vw,1765px)]">
                <img src="assets/img/banner/breadcrumb-banner.png" alt="img" class="w-full aspect-[1741/434] min-h-[200px] object-cover rounded-[30px]">
                <h1 class="breadcrumb-title absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-[clamp(40px,4.47vw,85px)] font-semibold leading-[1.08] max-w-full w-max">Gallery</h1>
                <div class="boxes relative ml-auto max-w-[clamp(250px,14.19vw,270px)]">
                    <ul class="breadcrumb-cont absolute flex items-center flex-wrap gap-[16px] left-[0px] bottom-[-7px] pb-[10px]">
                        <li class="text-primary font-medium">
                            <a href="index" class="font-semibold">Home</a>
                        </li>
                        <li>
                            <i class="fa-solid fa-arrow-right"></i>
                        </li>
                        <li class="text-secondary font-medium">
                            Gallery
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Gallery Section -->
        <section class="gallery-section bg-etWhite py-[clamp(60px,5.25vw,100px)]">
            <div class="et-container max-w-[clamp(900px,70vw,1400px)]">
                <!-- Certificate Presentations Section -->
                <div class="gallery-section-intro">
                    <div class="gallery-divider"></div>
                    <h2 class="gallery-section-title">Certificate Presentations</h2>
                    <p class="gallery-section-subtitle">Celebrating our members and their achievement milestones in the cooperative investment journey.</p>
                </div>

                <div class="gallery-container">
                    <?php
                    $certDir = 'info/cert';
                    $certImages = array_filter(scandir($certDir), function($file) use ($certDir) {
                        return in_array(strtolower(pathinfo($file, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif']) && is_file($certDir . '/' . $file);
                    });
                    sort($certImages);

                    foreach ($certImages as $image):
                        $imagePath = $certDir . '/' . $image;
                    ?>
                        <div class="gallery-item" onclick="openLightbox('<?php echo htmlspecialchars($imagePath); ?>', 'cert')">
                            <img src="<?php echo htmlspecialchars($imagePath); ?>" alt="Certificate Presentation">
                            <div class="gallery-overlay">
                                <i class="fas fa-search-plus gallery-overlay-icon"></i>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <!-- Road Show Events Section -->
                <div class="gallery-section-intro">
                    <div class="gallery-divider"></div>
                    <h2 class="gallery-section-title">Road Show Events</h2>
                    <p class="gallery-section-subtitle">Connecting with our community and sharing the vision of cooperative investment across different regions.</p>
                </div>

                <div class="gallery-container">
                    <?php
                    $roadshowDir = 'info/roadshow';
                    $roadshowImages = array_filter(scandir($roadshowDir), function($file) use ($roadshowDir) {
                        return in_array(strtolower(pathinfo($file, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif']) && is_file($roadshowDir . '/' . $file);
                    });
                    sort($roadshowImages);

                    foreach ($roadshowImages as $image):
                        $imagePath = $roadshowDir . '/' . $image;
                    ?>
                        <div class="gallery-item" onclick="openLightbox('<?php echo htmlspecialchars($imagePath); ?>', 'roadshow')">
                            <img src="<?php echo htmlspecialchars($imagePath); ?>" alt="Road Show Event">
                            <div class="gallery-overlay">
                                <i class="fas fa-search-plus gallery-overlay-icon"></i>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
    </main>

    <?php include '_partials/footer.phtml'; ?>

    <!-- Lightbox Modal -->
    <div id="lightbox" class="lightbox">
        <div class="lightbox-content">
            <img id="lightboxImage" class="lightbox-image" src="" alt="">
            <span class="lightbox-close" onclick="closeLightbox()">
                <i class="fas fa-times"></i>
            </span>
            <span class="lightbox-prev" onclick="previousImage()">
                <i class="fas fa-chevron-left"></i>
            </span>
            <span class="lightbox-next" onclick="nextImage()">
                <i class="fas fa-chevron-right"></i>
            </span>
            <span class="lightbox-counter">
                <span id="currentImage">1</span> / <span id="totalImages">1</span>
            </span>
        </div>
    </div>

    <script>
        let currentCategory = '';
        let currentImageIndex = 0;
        let allImages = [];

        function openLightbox(imagePath, category) {
            const lightbox = document.getElementById('lightbox');
            const lightboxImage = document.getElementById('lightboxImage');
            currentCategory = category;

            // Get all images for the current category
            const categoryItems = document.querySelectorAll(`.gallery-item`);
            allImages = [];

            categoryItems.forEach(item => {
                const img = item.querySelector('img');
                if (category === 'cert') {
                    if (img.src.includes('info/cert')) {
                        allImages.push(img.src);
                    }
                } else if (category === 'roadshow') {
                    if (img.src.includes('info/roadshow')) {
                        allImages.push(img.src);
                    }
                }
            });

            currentImageIndex = allImages.indexOf(imagePath);
            if (currentImageIndex === -1) {
                currentImageIndex = 0;
            }

            lightboxImage.src = allImages[currentImageIndex];
            updateLightboxCounter();
            lightbox.classList.add('active');

            // Prevent body scroll
            document.body.style.overflow = 'hidden';
        }

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

        function previousImage() {
            if (allImages.length === 0) return;
            currentImageIndex = (currentImageIndex - 1 + allImages.length) % allImages.length;
            document.getElementById('lightboxImage').src = allImages[currentImageIndex];
            updateLightboxCounter();
        }

        function nextImage() {
            if (allImages.length === 0) return;
            currentImageIndex = (currentImageIndex + 1) % allImages.length;
            document.getElementById('lightboxImage').src = allImages[currentImageIndex];
            updateLightboxCounter();
        }

        function updateLightboxCounter() {
            document.getElementById('currentImage').textContent = currentImageIndex + 1;
            document.getElementById('totalImages').textContent = allImages.length;
        }

        // Close lightbox on Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeLightbox();
            }
        });

        // Navigate with arrow keys
        document.addEventListener('keydown', function(event) {
            const lightbox = document.getElementById('lightbox');
            if (lightbox.classList.contains('active')) {
                if (event.key === 'ArrowLeft') {
                    previousImage();
                } else if (event.key === 'ArrowRight') {
                    nextImage();
                }
            }
        });

        // Close lightbox when clicking outside the image
        document.getElementById('lightbox').addEventListener('click', function(e) {
            if (e.target === this) {
                closeLightbox();
            }
        });
    </script>
</body>

</html>
