<?php
/**
 * IBVTE - Gallery Section with Lightbox
 */

require_once 'config.php';

// Dummy gallery data
$galleries = [
    [
        'id' => 1,
        'title' => 'Annual Day Celebration 2024',
        'description' => 'Our annual day celebration with students and faculty',
        'event_date' => '2024-12-15',
        'category' => 'Events',
        'cover' => 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400',
        'images' => [
            ['url' => 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800', 'caption' => 'Main Stage'],
            ['url' => 'https://images.unsplash.com/photo-1523580494863-6f3031224c94?w=800', 'caption' => 'Awards Ceremony'],
            ['url' => 'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=800', 'caption' => 'Cultural Program'],
            ['url' => 'https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?w=800', 'caption' => 'Group Photo'],
        ]
    ],
    [
        'id' => 2,
        'title' => 'Convocation Ceremony 2024',
        'description' => 'Graduation ceremony for batch 2023-24',
        'event_date' => '2024-10-20',
        'category' => 'Convocation',
        'cover' => 'https://images.unsplash.com/photo-1525921429624-479b6a26d84d?w=400',
        'images' => [
            ['url' => 'https://images.unsplash.com/photo-1525921429624-479b6a26d84d?w=800', 'caption' => 'Students with Degrees'],
            ['url' => 'https://images.unsplash.com/photo-1544531586-fde5298cdd40?w=800', 'caption' => 'Chief Guest Speech'],
            ['url' => 'https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?w=800', 'caption' => 'Certificate Distribution'],
        ]
    ],
    [
        'id' => 3,
        'title' => 'Campus Infrastructure',
        'description' => 'Our world-class campus facilities',
        'event_date' => '2024-08-01',
        'category' => 'Campus',
        'cover' => 'https://images.unsplash.com/photo-1562774053-701939374585?w=400',
        'images' => [
            ['url' => 'https://images.unsplash.com/photo-1562774053-701939374585?w=800', 'caption' => 'Main Building'],
            ['url' => 'https://images.unsplash.com/photo-1592280771100-1741cf9e80c7?w=800', 'caption' => 'Computer Lab'],
            ['url' => 'https://images.unsplash.com/photo-1497633762265-9d179a990aa6?w=800', 'caption' => 'Library'],
            ['url' => 'https://images.unsplash.com/photo-1544531586-fde5298cdd40?w=800', 'caption' => 'Seminar Hall'],
        ]
    ],
    [
        'id' => 4,
        'title' => 'Sports Meet 2024',
        'description' => 'Annual sports competition',
        'event_date' => '2024-02-15',
        'category' => 'Sports',
        'cover' => 'https://images.unsplash.com/photo-1461896836934- voices-of-america-3053485?w=400',
        'images' => [
            ['url' => 'https://images.unsplash.com/photo-1461896836934- voices-of-america-3053485?w=800', 'caption' => 'Athletics'],
            ['url' => 'https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=800', 'caption' => 'Cricket Match'],
            ['url' => 'https://images.unsplash.com/photo-1552674605-db6ffd4facb5?w=800', 'caption' => 'Winners'],
        ]
    ],
    [
        'id' => 5,
        'title' => 'Workshop on Digital Skills',
        'description' => 'Industry experts sharing knowledge',
        'event_date' => '2024-09-10',
        'category' => 'Workshops',
        'cover' => 'https://images.unsplash.com/photo-1544531586-fde5298cdd40?w=400',
        'images' => [
            ['url' => 'https://images.unsplash.com/photo-1544531586-fde5298cdd40?w=800', 'caption' => 'Expert Session'],
            ['url' => 'https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=800', 'caption' => 'Hands-on Training'],
        ]
    ],
];

$filter = $_GET['category'] ?? '';

// Filter galleries
$filteredGalleries = array_filter($galleries, function($g) use ($filter) {
    return empty($filter) || $g['category'] === $filter;
});

$categories = array_unique(array_column($galleries, 'category'));

include 'includes/header.php';
?>

<!-- Lightbox Modal -->
<div class="modal fade" id="lightboxModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark">
            <div class="modal-header border-0">
                <h5 class="modal-title text-white" id="lightboxCaption">Image Caption</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center p-0">
                <img id="lightboxImage" src="" class="img-fluid" style="max-height: 80vh;">
            </div>
            <div class="modal-footer border-0 justify-content-between">
                <button type="button" class="btn btn-outline-light" onclick="prevImage()">
                    <i class="fas fa-chevron-left me-1"></i>Previous
                </button>
                <span class="text-white" id="imageCounter">1 / 5</span>
                <button type="button" class="btn btn-outline-light" onclick="nextImage()">
                    Next<i class="fas fa-chevron-right ms-1"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<section class="py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="container">
        <div class="text-center text-white">
            <h1 class="fw-bold mb-3"><i class="fas fa-images me-2"></i>Photo Gallery</h1>
            <p class="lead mb-0">Cherished moments from our events and activities</p>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <!-- Category Filter -->
        <div class="d-flex justify-content-center flex-wrap gap-2 mb-5">
            <a href="gallery.php" class="btn <?= empty($filter) ? 'btn-primary' : 'btn-outline-primary' ?> rounded-pill px-4">
                All
            </a>
            <?php foreach ($categories as $cat): ?>
                <a href="?category=<?= urlencode($cat) ?>" class="btn <?= $filter === $cat ? 'btn-primary' : 'btn-outline-primary' ?> rounded-pill px-4">
                    <?= htmlspecialchars($cat) ?>
                </a>
            <?php endforeach; ?>
        </div>
        
        <!-- Gallery Grid -->
        <div class="row g-4">
            <?php foreach ($filteredGalleries as $gallery): ?>
                <div class="col-md-6 col-lg-4">
                    <div class="card gallery-card h-100 border-0 shadow-sm overflow-hidden">
                        <div class="position-relative" style="height: 250px; overflow: hidden;">
                            <img src="<?= $gallery['cover'] ?>" class="card-img-top gallery-image" 
                                 alt="<?= htmlspecialchars($gallery['title']) ?>" 
                                 onclick="openGallery(<?= $gallery['id'] ?>)">
                            <div class="gallery-overlay">
                                <span class="badge bg-primary position-absolute top-0 start-0 m-2">
                                    <?= htmlspecialchars($gallery['category']) ?>
                                </span>
                                <div class="position-absolute bottom-0 start-0 end-0 p-3 bg-gradient-dark">
                                    <h5 class="text-white mb-1"><?= htmlspecialchars($gallery['title']) ?></h5>
                                    <small class="text-white opacity-75">
                                        <i class="fas fa-calendar me-1"></i><?= formatDate($gallery['event_date']) ?>
                                        <span class="ms-2"><i class="fas fa-images me-1"></i><?= count($gallery['images']) ?> photos</span>
                                    </small>
                                </div>
                                <div class="gallery-hover-content">
                                    <button class="btn btn-light rounded-circle" onclick="openGallery(<?= $gallery['id'] ?>)">
                                        <i class="fas fa-expand"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-0"><?= htmlspecialchars($gallery['description']) ?></p>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <!-- No Results -->
        <?php if (empty($filteredGalleries)): ?>
            <div class="text-center py-5">
                <i class="fas fa-images fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No galleries found</h4>
                <a href="gallery.php" class="btn btn-primary mt-3">View All</a>
            </div>
        <?php endif; ?>
    </div>
</section>

<style>
    .gallery-card {
        transition: all 0.3s ease;
    }
    .gallery-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    }
    .gallery-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        cursor: pointer;
    }
    .gallery-card:hover .gallery-image {
        transform: scale(1.1);
    }
    .gallery-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);
    }
    .gallery-hover-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    .gallery-card:hover .gallery-hover-content {
        opacity: 1;
    }
    .bg-gradient-dark {
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    }
</style>

<script>
    let currentGallery = null;
    let currentImageIndex = 0;
    let currentImages = [];
    
    const galleries = <?= json_encode($galleries) ?>;
    
    function openGallery(galleryId) {
        currentGallery = galleries.find(g => g.id === galleryId);
        if (!currentGallery) return;
        
        currentImages = currentGallery.images;
        currentImageIndex = 0;
        showImage();
        
        const modal = new bootstrap.Modal(document.getElementById('lightboxModal'));
        modal.show();
    }
    
    function showImage() {
        const image = currentImages[currentImageIndex];
        document.getElementById('lightboxImage').src = image.url;
        document.getElementById('lightboxCaption').textContent = image.caption || '';
        document.getElementById('imageCounter').textContent = (currentImageIndex + 1) + ' / ' + currentImages.length;
    }
    
    function nextImage() {
        currentImageIndex = (currentImageIndex + 1) % currentImages.length;
        showImage();
    }
    
    function prevImage() {
        currentImageIndex = (currentImageIndex - 1 + currentImages.length) % currentImages.length;
        showImage();
    }
    
    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (!document.getElementById('lightboxModal').classList.contains('show')) return;
        if (e.key === 'ArrowRight') nextImage();
        if (e.key === 'ArrowLeft') prevImage();
        if (e.key === 'Escape') bootstrap.Modal.getInstance(document.getElementById('lightboxModal')).hide();
    });
</script>

<?php include 'includes/footer.php'; ?>