<?php include 'header-in.php';
include 'backoffice/connection.php'; // Include database connection

// Fetch all categories
$categoriesQuery = "SELECT * FROM categories ORDER BY category_name ASC";
$categoriesResult = mysqli_query($conn, $categoriesQuery);

// Fetch all gallery items with category names
$galleryQuery = "SELECT g.*, c.category_name 
                 FROM gallery g 
                 LEFT JOIN categories c ON g.category_id = c.id 
                 ORDER BY g.id ASC";
$galleryResult = mysqli_query($conn, $galleryQuery);
?>






<!-- ============ INNER BANNER + BREADCRUMB ============ -->
<section class="inner-banner">
  <!-- Background Image (Use hotel lobby/food shot) -->
  <img src="images/slide-1.jpg" alt="Hotel Banner" class="inner-banner-bg">
  <div class="inner-banner-overlay"></div>
  
  <div class="banner-content">
    <h1 class="banner-title">Gallery</h1>
    <p class="banner-subtitle">Explore Our Spaces</p>
    
    <!-- ✅ Center Aligned Breadcrumb -->
    <nav aria-label="breadcrumb">
      <ul class="custom-breadcrumb list-unstyled mb-0">
        <li><a href="index.php"><i class="bi bi-house-door me-1"></i>Home</a></li>
        <li class="separator"><i class="bi bi-chevron-right"></i></li>
        <li class="active">Gallery</li>
      </ul>
    </nav>
  </div>
</section>

<!-- ============ GALLERY CONTENT ============ -->
<section class="gallery-section">
  <div class="container">

    <!-- ✅ Filter Dropdown (Center Align) -->
    <div class="filter-wrap">
      <div class="dropdown-custom" id="galFilterWrap">
        <button type="button" class="drop-btn" onclick="toggleDrop()">
          <span id="selectedText">All Categories</span>
          <i class="bi bi-chevron-down" id="dropIcon"></i>
        </button>
        <div class="drop-menu" id="dropMenu">
          <div class="drop-item selected" onclick="filterGal('All', this)">All Categories</div>
          <?php if (mysqli_num_rows($categoriesResult) > 0): ?>
            <?php while ($category = mysqli_fetch_assoc($categoriesResult)): ?>
              <div class="drop-item" onclick="filterGal('<?php echo htmlspecialchars($category['category_name']); ?>', this)">
                <?php echo htmlspecialchars($category['category_name']); ?>
              </div>
            <?php endwhile; ?>
          <?php endif; ?>
        </div>
      </div>
    </div>

    <!-- Gallery Grid -->
    <div class="gallery-grid" id="gridContainer">
      <?php if (mysqli_num_rows($galleryResult) > 0): ?>
        <?php while ($gallery = mysqli_fetch_assoc($galleryResult)): ?>
          <div class="g-item" data-cat="<?php echo htmlspecialchars($gallery['category_name'] ?? 'Uncategorized'); ?>" data-desc="<?php echo htmlspecialchars($gallery['category_name'] ?? 'Gallery Image'); ?>" onclick="openLB(this)">
            <?php if (!empty($gallery['image'])): ?>
              <img src="backoffice/gallery_images/<?php echo htmlspecialchars($gallery['image']); ?>" class="g-img" alt="<?php echo htmlspecialchars($gallery['category_name'] ?? 'Gallery'); ?>">
            <?php else: ?>
              <img src="images/a2.jpg" class="g-img" alt="Gallery">
            <?php endif; ?>
            <span class="g-badge"><i class="bi bi-image"></i> <?php echo htmlspecialchars($gallery['category_name'] ?? 'Uncategorized'); ?></span>
          </div>
        <?php endwhile; ?>
      <?php else: ?>
        <div class="col-12 text-center" style="padding: 2rem;">
          <p>No gallery items available at the moment.</p>
        </div>
      <?php endif; ?>
    </div>
  </div>
</section>

<!-- ============ LIGHTBOX HTML ============ -->
<div class="lb-overlay" id="lightBox" onclick="closeLB(event)">
  <button class="lb-close" onclick="closeLB()"><i class="bi bi-x-lg"></i></button>
  
  <button class="lb-nav lb-prev" onclick="changeImg(-1)"><i class="bi bi-chevron-left"></i></button>
  <button class="lb-nav lb-next" onclick="changeImg(1)"><i class="bi bi-chevron-right"></i></button>

  <div class="lb-container">
    <img src="" class="lb-img" id="lbImg" alt="Preview">
    <p class="lb-caption" id="lbCaption"></p>
  </div>
</div>







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