<?php
/**
 * Gallery Page — Gmind Institute
 *
 * Full photo gallery with category filters and lightbox.
 *
 * Expected PHP variables:
 *   $galleryItems — array of gallery records
 *   $categories   — array of distinct category strings
 *   $settings     — key-value pairs from settings table
 *   $csrfToken    — CSRF token string
 *   $currentPage  — string 'gallery'
 */
$galleryItems = $galleryItems ?? [];
$categories   = $categories   ?? [];
$settings     = $settings     ?? [];
$basePath     = defined('BASE_PATH') ? BASE_PATH : '/gmind';
include __DIR__ . '/../layouts/header.php';

?>
<!-- Page Banner -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1><?= __('gallery.page_title') ?></h1>
        <p><?= __('gallery.page_subtitle') ?></p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= $basePath ?>/"><?= __('gallery.breadcrumb_home') ?></a>
            <span aria-hidden="true">/</span>
            <span><?= __('gallery.breadcrumb_gallery') ?></span>
        </nav>
    </div>
</section>

<!-- Gallery Section -->
<section class="gallery-section" aria-label="Photo Gallery">
    <div class="container">
        <?php if (!empty($categories)): ?>
        <div class="gallery-filters" role="tablist" aria-label="Filter gallery by category">
            <button class="gallery-filter-btn active" data-category="all" role="tab" aria-selected="true"><?= __('gallery.all') ?></button>
            <?php foreach ($categories as $cat): ?>
            <button class="gallery-filter-btn" data-category="<?= htmlspecialchars($cat, ENT_QUOTES, 'UTF-8') ?>" role="tab" aria-selected="false"><?= htmlspecialchars(ucfirst($cat), ENT_QUOTES, 'UTF-8') ?></button>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <div class="gallery-grid">
            <?php if (!empty($galleryItems)): ?>
                <?php foreach ($galleryItems as $item): ?>
                <div class="gallery-card animate-on-scroll" data-category="<?= htmlspecialchars($item['category'] ?? '', ENT_QUOTES, 'UTF-8') ?>" onclick="openLightbox(this)">
                    <div class="gallery-card-image">
                        <img src="<?= htmlspecialchars(!empty($item['image']) ? upload_url($item['image']) : $basePath . '/images/gallery-default.jpg', ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars($item['title'] ?? 'Gallery Image', ENT_QUOTES, 'UTF-8') ?>" loading="lazy" data-title="<?= htmlspecialchars($item['title'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
                        <div class="gallery-card-overlay">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
                        </div>
                    </div>
                    <?php if (!empty($item['title'])): ?>
                    <div class="gallery-card-info">
                        <h3 class="gallery-card-title"><?= htmlspecialchars($item['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                        <?php if (!empty($item['category'])): ?>
                        <span class="gallery-card-category"><?= htmlspecialchars(ucfirst($item['category']), ENT_QUOTES, 'UTF-8') ?></span>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="gallery-empty" style="grid-column:1/-1;text-align:center;padding:60px 20px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                    <p style="margin-top:16px;color:#999;font-size:1.1rem;"><?= __('gallery.no_images') ?></p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Lightbox Modal -->
<div class="gallery-lightbox" id="galleryLightbox">
    <button class="gallery-lightbox-close" aria-label="Close lightbox">&times;</button>
    <img class="gallery-lightbox-img" id="lightboxImg" src="" alt="">
    <div class="gallery-lightbox-caption" id="lightboxCaption"></div>
</div>

<script>
function openLightbox(card) {
    var img = card.querySelector('.gallery-card-image img');
    var title = img ? img.getAttribute('data-title') : '';
    var src = img ? img.src : '';
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightboxCaption').textContent = title;
    document.getElementById('galleryLightbox').classList.add('active');
    document.body.style.overflow = 'hidden';
}
document.querySelector('.gallery-lightbox-close').addEventListener('click', function() {
    document.getElementById('galleryLightbox').classList.remove('active');
    document.body.style.overflow = '';
});
document.getElementById('galleryLightbox').addEventListener('click', function(e) {
    if (e.target === this) {
        this.classList.remove('active');
        document.body.style.overflow = '';
    }
});
</script>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
