<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<!-- Banner -->
<section class="page-banner">
  <div class="max-w-[1200px] mx-auto px-6">
    <h1>Event Gallery</h1>
    <p>Visual Highlights of Our Exquisite Ceremonies and Catering Feasts</p>
  </div>
</section>

<!-- Gallery Section -->
<section class="py-24">
  <div class="max-w-[1200px] mx-auto px-6">
    
    <!-- Category Filter Tabs -->
    <div class="flex justify-center gap-3 flex-wrap mb-12" id="filter-tabs">
      <button class="bg-saffron text-white shadow-[0_4px_12px_rgba(224,94,43,0.25)] px-6 py-2.5 rounded-full font-medium text-[0.9rem] cursor-pointer transition-all duration-200 active-tab-btn" data-category="All">All</button>
      <button class="bg-gold-light border border-gold/20 text-charcoal-light hover:border-gold hover:text-gold-dark px-6 py-2.5 rounded-full font-medium text-[0.9rem] cursor-pointer transition-all duration-200" data-category="Decor">Decor</button>
      <button class="bg-gold-light border border-gold/20 text-charcoal-light hover:border-gold hover:text-gold-dark px-6 py-2.5 rounded-full font-medium text-[0.9rem] cursor-pointer transition-all duration-200" data-category="Catering">Catering</button>
      <button class="bg-gold-light border border-gold/20 text-charcoal-light hover:border-gold hover:text-gold-dark px-6 py-2.5 rounded-full font-medium text-[0.9rem] cursor-pointer transition-all duration-200" data-category="Ceremonies">Ceremonies</button>
    </div>

    <!-- Grid Layout -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="gallery-grid">
      <?php if (empty($galleryItems)): ?>
        <div class="col-span-full text-center py-12 text-charcoal-muted">
          <i data-lucide="image-off" class="w-12 h-12 mx-auto mb-4 opacity-40 text-gold"></i>
          <p class="font-title text-[1.2rem]">No photos uploaded yet</p>
        </div>
      <?php else: ?>
        <?php foreach ($galleryItems as $item): ?>
          <!-- Item -->
          <div class="gallery-card relative rounded-md overflow-hidden shadow-sm aspect-[4/3] cursor-pointer border border-gold/10 hover:-translate-y-1.5 hover:shadow-lg hover:border-gold/30 transition-all duration-400 group" data-category="<?= esc($item['category']) ?>">
            <div class="w-full h-full bg-cover bg-center transition-all duration-600 group-hover:scale-108" style="background-image: url('<?= esc($item['image_path']) ?>');" aria-label="<?= esc($item['title']) ?>"></div>
            <div class="absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-charcoal/90 via-charcoal/40 to-transparent text-white opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-400 flex flex-col gap-1">
              <span class="text-[0.75rem] uppercase text-gold font-semibold tracking-[0.15em]"><?= esc($item['category']) ?></span>
              <h4 class="font-title text-[1.25rem] text-white"><?= esc($item['title']) ?></h4>
            </div>
          </div>
        <?php endforeach; ?>
      <?php endif; ?>
    </div>
  </div>
</section>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
  // Gallery Category Filtering Script
  document.addEventListener('DOMContentLoaded', () => {
    const filterButtons = document.querySelectorAll('#filter-tabs button');
    const galleryCards = document.querySelectorAll('#gallery-grid .gallery-card');

    filterButtons.forEach(button => {
      button.addEventListener('click', () => {
        // Remove active styles from previous button
        filterButtons.forEach(btn => {
          btn.className = "bg-gold-light border border-gold/20 text-charcoal-light hover:border-gold hover:text-gold-dark px-6 py-2.5 rounded-full font-medium text-[0.9rem] cursor-pointer transition-all duration-200";
        });

        // Add active style to clicked button
        button.className = "bg-saffron text-white shadow-[0_4px_12px_rgba(224,94,43,0.25)] px-6 py-2.5 rounded-full font-medium text-[0.9rem] cursor-pointer transition-all duration-200 active-tab-btn";

        const category = button.getAttribute('data-category');

        galleryCards.forEach(card => {
          const cardCategory = card.getAttribute('data-category');
          if (category === 'All' || cardCategory === category) {
            card.style.display = 'block';
            // Trigger slight fade animation
            card.classList.add('animate-fade-in-up');
            setTimeout(() => card.classList.remove('animate-fade-in-up'), 800);
          } else {
            card.style.display = 'none';
          }
        });
      });
    });
  });
</script>
<?= $this->endSection() ?>
