<?php
// ============================================
// GALLERY PAGE
// File: pages/gallery.php
// ============================================
require_once '../includes/db.php';

$page_title = 'Gallery';
$db = getDB();

$filter = isset($_GET['cat']) ? $_GET['cat'] : 'all';
$valid_filters = ['all','puncak','jalur','flora','fauna','sunrise','camp'];
if (!in_array($filter, $valid_filters)) $filter = 'all';

if ($filter === 'all') {
    $stmt = $db->query("SELECT * FROM gallery ORDER BY created_at DESC");
} else {
    $stmt = $db->prepare("SELECT * FROM gallery WHERE kategori = ? ORDER BY created_at DESC");
    $stmt->execute([$filter]);
}
$images = $stmt->fetchAll();
?>
<?php include '../includes/header.php'; ?>

<!-- PAGE HERO -->
<section class="page-hero">
    <div class="page-hero-bg" style="background-image:url('../assets/images/hero-gallery.jpg');background-image:url('../assets/images/hero-bg.jpg');"></div>
    <div class="page-hero-overlay"></div>
    <div class="container page-hero-content">
        <span class="section-label">FOTO & DOKUMENTASI</span>
        <h1 class="section-title">Gallery <span>Merbabu</span></h1>
        <nav aria-label="breadcrumb" class="mt-2">
            <ol class="breadcrumb" style="background:none;padding:0;font-size:0.82rem;">
                <li class="breadcrumb-item"><a href="../" class="text-muted text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active" style="color:var(--gold);">Gallery</li>
            </ol>
        </nav>
    </div>
</section>

<!-- GALLERY CONTENT -->
<section class="gallery-page">
    <div class="container">
        <!-- Filters -->
        <div class="d-flex flex-wrap gap-2 mb-4" data-aos="fade-up">
            <?php
            $cats = ['all' => 'Semua', 'puncak' => 'Puncak', 'jalur' => 'Jalur', 'flora' => 'Flora', 'fauna' => 'Fauna', 'sunrise' => 'Sunrise', 'camp' => 'Camp'];
            foreach ($cats as $k => $v):
            ?>
            <button class="filter-btn <?= $filter === $k ? 'active' : '' ?>" data-filter="<?= $k ?>">
                <?= $v ?>
            </button>
            <?php endforeach; ?>
        </div>

        <!-- Grid -->
        <div class="gallery-full-grid" data-aos="fade-up">
            <?php if (empty($images)): ?>
                <!-- Placeholder gallery if no DB images yet -->
                <?php
                $placeholders = [
                    ['puncak', 'Puncak Triangulasi', 'Puncak tertinggi Merbabu 3.145 mdpl'],
                    ['puncak', 'Puncak Kentengsongo', 'Salah satu dari 3 puncak utama Merbabu'],
                    ['jalur', 'Jalur Selo', 'Jalur pendakian paling populer via Boyolali'],
                    ['sunrise', 'Sunrise Merbabu', 'Matahari terbit dari balik awan'],
                    ['jalur', 'Savana Oro-oro Ombo', 'Padang savana menakjubkan di ketinggian'],
                    ['camp', 'Area Perkemahan', 'Berkemah di tengah savana Merbabu'],
                    ['puncak', 'Lautan Awan', 'Hamparan awan putih sejauh mata memandang'],
                    ['jalur', 'Hutan Pinus', 'Vegetasi khas jalur Merbabu'],
                    ['sunrise', 'Golden Hour', 'Cahaya keemasan saat matahari terbit'],
                ];
                foreach ($placeholders as $p):
                ?>
                <div class="gallery-full-item" data-cat="<?= $p[0] ?>">
                    <img src="https://via.placeholder.com/600x450/1a3a28/c9a227?text=<?= urlencode($p[1]) ?>"
                         alt="<?= htmlspecialchars($p[1]) ?>"
                         loading="lazy">
                    <div class="gallery-full-overlay">
                        <div>
                            <div class="fw-bold mb-1"><?= htmlspecialchars($p[1]) ?></div>
                            <div style="font-size:0.8rem;opacity:0.7;"><?= htmlspecialchars($p[2]) ?></div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <?php foreach ($images as $img): ?>
                <div class="gallery-full-item" data-cat="<?= $img['kategori'] ?>"
                     data-lightbox="true"
                     data-src="../assets/images/gallery/<?= htmlspecialchars($img['filename']) ?>"
                     data-title="<?= htmlspecialchars($img['judul']) ?>">
                    <img src="../assets/images/gallery/<?= htmlspecialchars($img['filename']) ?>"
                         alt="<?= htmlspecialchars($img['judul']) ?>"
                         loading="lazy"
                         onerror="this.src='https://via.placeholder.com/600x450/1a3a28/c9a227?text=<?= urlencode($img['judul']) ?>'">
                    <div class="gallery-full-overlay">
                        <div>
                            <div class="fw-bold mb-1"><?= htmlspecialchars($img['judul']) ?></div>
                            <?php if ($img['deskripsi']): ?>
                            <div style="font-size:0.8rem;opacity:0.7;"><?= htmlspecialchars($img['deskripsi']) ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</section>

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