<section class="page-banner">
    <div class="container">
        <h1><?= htmlspecialchars($category['name']) ?></h1>
        <p><?= htmlspecialchars($category['description'] ?? '') ?></p>
        <div class="breadcrumb">
            <a href="/">Home</a> <i class="fas fa-chevron-right"></i> <a href="/gallery">Gallery</a> <i class="fas fa-chevron-right"></i> <?= htmlspecialchars($category['name']) ?>
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <?php if (empty($images)): ?>
        <div style="text-align:center; padding:60px 20px;">
            <i class="fas fa-images" style="font-size:48px; color:#ccc; margin-bottom:20px; display:block;"></i>
            <h3 style="color:#888;">No images in this category yet</h3>
            <a href="/gallery" class="btn-primary" style="margin-top:20px; display:inline-block;">Back to Gallery</a>
        </div>
        <?php else: ?>
        <div class="section-header fade-in-up">
            <h2><?= htmlspecialchars($category['name']) ?></h2>
            <div class="section-divider"></div>
            <p><?= count($images) ?> photo<?= count($images) !== 1 ? 's' : '' ?> in this collection</p>
        </div>
        <div class="gallery-grid fade-in-up">
            <?php foreach ($images as $idx => $img): ?>
            <div class="gallery-item" onclick="openLightbox(<?= $idx ?>)">
                <img src="<?= htmlspecialchars($img['image_url']) ?>" alt="<?= htmlspecialchars($img['title']) ?>" loading="lazy">
                <div class="gallery-item-overlay">
                    <h4><?= htmlspecialchars($img['title']) ?></h4>
                    <?php if ($img['created_at']): ?>
                    <span class="gallery-item-date"><i class="fas fa-calendar"></i> <?= date('M d, Y', strtotime($img['created_at'])) ?></span>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
        
        <div style="text-align:center; margin-top:40px;">
            <a href="/gallery" class="btn-primary"><i class="fas fa-arrow-left"></i> Back to Gallery</a>
        </div>
    </div>
</section>

<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
    <button class="lightbox-close" onclick="closeLightbox(event)"><i class="fas fa-times"></i></button>
    <button class="lightbox-prev" onclick="lightboxNav(-1, event)"><i class="fas fa-chevron-left"></i></button>
    <button class="lightbox-next" onclick="lightboxNav(1, event)"><i class="fas fa-chevron-right"></i></button>
    <div class="lightbox-content" onclick="event.stopPropagation()">
        <img id="lightbox-img" src="" alt="">
        <div class="lightbox-caption">
            <h3 id="lightbox-title"></h3>
            <p id="lightbox-desc"></p>
        </div>
    </div>
</div>

<script>
var galleryImages = <?= json_encode(array_map(function($img) { return ['url' => $img['image_url'], 'title' => $img['title'], 'desc' => $img['description'] ?? '']; }, $images)) ?>;
var currentLightboxIndex = 0;

function openLightbox(idx) {
    currentLightboxIndex = idx;
    showLightboxImage();
    document.getElementById('lightbox').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function showLightboxImage() {
    var img = galleryImages[currentLightboxIndex];
    document.getElementById('lightbox-img').src = img.url;
    document.getElementById('lightbox-title').textContent = img.title;
    document.getElementById('lightbox-desc').textContent = img.desc;
}

function closeLightbox(e) {
    if (e) e.stopPropagation();
    document.getElementById('lightbox').classList.remove('active');
    document.body.style.overflow = '';
}

function lightboxNav(dir, e) {
    if (e) e.stopPropagation();
    currentLightboxIndex += dir;
    if (currentLightboxIndex < 0) currentLightboxIndex = galleryImages.length - 1;
    if (currentLightboxIndex >= galleryImages.length) currentLightboxIndex = 0;
    showLightboxImage();
}

document.addEventListener('keydown', function(e) {
    var lb = document.getElementById('lightbox');
    if (!lb || !lb.classList.contains('active')) return;
    if (e.key === 'Escape') closeLightbox(e);
    if (e.key === 'ArrowLeft') lightboxNav(-1, e);
    if (e.key === 'ArrowRight') lightboxNav(1, e);
});
</script>
