<?php
require_once 'config/database.php';

// Fetch gallery images
$images = [];
try {
    // Fetch all images from gallery table
    $stmt = $pdo->query("SELECT * FROM gallery ORDER BY created_at DESC LIMIT 50");
    $images = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
} catch (Throwable $e) {
    $images = [];
}

// Group by category
$categories = [];
foreach ($images as $img) {
    $cat = $img['category'] ?? 'সাধারণ';
    if (!isset($categories[$cat])) {
        $categories[$cat] = [];
    }
    $categories[$cat][] = $img;
}
?>
<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ফটো গ্যালারী - বিদ্যা নিকেতন উচ্চ বিদ্যালয়</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Hind Siliguri', sans-serif;
      background: #f5f7fa;
    }
    
    .jb-navbar {
      background: linear-gradient(135deg, #006747 0%, #004d35 100%);
      box-shadow: 0 4px 20px rgba(0, 103, 71, 0.3);
      border-bottom: 3px solid #F42A41;
    }
    
    .jb-navbar .navbar-brand {
      color: #fff !important;
      font-weight: 800;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .page-header {
      background: linear-gradient(135deg, #006747 0%, #004d35 100%);
      color: #fff;
      padding: 50px 0;
      margin-bottom: 40px;
      border-bottom: 5px solid #F42A41;
      text-align: center;
    }
    
    .page-header h1 {
      font-weight: 800;
      font-size: 2.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .category-title {
      color: #006747;
      font-weight: 700;
      border-bottom: 3px solid #F42A41;
      padding-bottom: 10px;
      margin-bottom: 30px;
    }
    
    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0, 103, 71, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
      border: 3px solid transparent;
    }
    
    .gallery-item:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(0, 103, 71, 0.3);
      border-color: #F42A41;
    }
    
    .gallery-item img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: all 0.3s ease;
    }
    
    .gallery-item:hover img {
      transform: scale(1.1);
    }
    
    .gallery-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0, 103, 71, 0.9), transparent);
      color: #fff;
      padding: 20px;
      transform: translateY(100%);
      transition: all 0.3s ease;
    }
    
    .gallery-item:hover .gallery-overlay {
      transform: translateY(0);
    }
    
    .btn-primary {
      background: linear-gradient(135deg, #006747 0%, #004d35 100%);
      border: none;
      font-weight: 600;
    }
    
    .btn-primary:hover {
      background: linear-gradient(135deg, #004d35 0%, #006747 100%);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 103, 71, 0.4);
    }
    
    /* Lightbox Modal */
    .modal-content {
      background: transparent;
      border: none;
    }
    
    .modal-body {
      padding: 0;
    }
    
    .modal-body img {
      width: 100%;
      border-radius: 10px;
      border: 4px solid #F42A41;
    }
    
    .btn-close {
      background: #fff;
      opacity: 1;
      border-radius: 50%;
      padding: 10px;
    }
    
    /* Mobile Responsive */
    @media (max-width: 991px) {
      .navbar-brand {
        font-size: 1.2rem;
      }
      
      .page-header h1 {
        font-size: 2rem;
      }
      
      .category-title {
        font-size: 1.3rem;
      }
      
      .gallery-item img {
        height: 200px;
      }
    }
    
    @media (max-width: 576px) {
      .navbar-brand {
        font-size: 1rem;
      }
      
      .page-header {
        padding: 30px 0;
      }
      
      .page-header h1 {
        font-size: 1.5rem;
      }
      
      .category-title {
        font-size: 1.1rem;
      }
      
      .gallery-item img {
        height: 180px;
      }
      
      .btn {
        font-size: 0.9rem;
        padding: 8px 15px;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg jb-navbar">
    <div class="container">
      <a class="navbar-brand" href="index.php">
        <i class="fas fa-graduation-cap"></i> বিদ্যা নিকেতন উচ্চ বিদ্যালয়
      </a>
      <div class="ms-auto d-flex gap-2">
        <a class="btn btn-outline-light" href="index.php">
          <i class="fas fa-home"></i> হোম
        </a>
        <a class="btn btn-primary" href="login.php">
          <i class="fas fa-sign-in-alt"></i> লগইন
        </a>
      </div>
    </div>
  </nav>

  <div class="page-header">
    <div class="container">
      <h1><i class="fas fa-images"></i> ফটো গ্যালারী</h1>
      <p class="mb-0">আমাদের প্রতিষ্ঠানের স্মৃতিময় মুহূর্তসমূহ</p>
    </div>
  </div>

  <div class="container mb-5">
    <?php if (empty($images)): ?>
      <div class="alert alert-info text-center">
        <i class="fas fa-info-circle"></i> গ্যালারীতে এখনও কোন ছবি যুক্ত করা হয়নি।
      </div>
    <?php else: ?>
      <?php foreach ($categories as $catName => $catImages): ?>
        <div class="mb-5">
          <h3 class="category-title">
            <i class="fas fa-folder-open"></i> <?php echo htmlspecialchars($catName); ?>
          </h3>
          <div class="row g-4">
            <?php foreach ($catImages as $img): ?>
              <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" 
                     data-image="<?php echo htmlspecialchars($img['image_path'] ?? ''); ?>"
                     data-title="<?php echo htmlspecialchars($img['title'] ?? 'ছবি'); ?>"
                     data-description="<?php echo htmlspecialchars($img['description'] ?? ''); ?>">
                  <img src="<?php echo htmlspecialchars($img['image_path'] ?? ''); ?>" 
                       alt="<?php echo htmlspecialchars($img['title'] ?? 'ছবি'); ?>">
                  <div class="gallery-overlay">
                    <h6 class="mb-1"><?php echo htmlspecialchars($img['title'] ?? 'ছবি'); ?></h6>
                    <?php if (isset($img['description']) && $img['description']): ?>
                      <p class="mb-0 small"><?php echo htmlspecialchars(mb_substr($img['description'], 0, 50, 'UTF-8')); ?>...</p>
                    <?php endif; ?>
                  </div>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      <?php endforeach; ?>
    <?php endif; ?>
  </div>

  <!-- Image Modal -->
  <div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h5 class="modal-title text-white" id="modalTitle"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <img src="" id="modalImage" alt="">
          <p class="text-white mt-3" id="modalDescription"></p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Lightbox functionality
    const imageModal = document.getElementById('imageModal');
    imageModal.addEventListener('show.bs.modal', function (event) {
      const button = event.relatedTarget;
      const imageSrc = button.getAttribute('data-image');
      const title = button.getAttribute('data-title');
      const description = button.getAttribute('data-description');
      
      document.getElementById('modalImage').src = imageSrc;
      document.getElementById('modalTitle').textContent = title;
      document.getElementById('modalDescription').textContent = description;
    });
  </script>
</body>
</html>
