<title>AIC Health Ministries | Gallery</title>


<?php
include "static/header.php";
?>


  <style>
    body {
      background: #f5f5f5;
      margin: 0;
    }

    .filter-buttons {
      text-align: right;
      margin-bottom: 2em;
    }

    .filter-buttons button {
      padding: 0.6em 1.2em;
      margin: 0.3em;
      border: none;
      border-radius: 4px;
      background-color: #ddd;
      cursor: pointer;
    }

    .filter-buttons button.active {
      background-color: #2cb34a;
      color: white;
      font-weight: bold;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5em;
    }

    .media-item {
      display: block;
      background: white;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.2s;
      cursor: pointer;
    }

    .media-item img {
      width: 100%;
      display: block;
    }

    .caption {
      padding: 0.6em 1em;
      font-size: 0.9em;
      color: #444;
    }

    #loadMoreBtn {
      display: block;
      margin: 2em auto;
      padding: 0.8em 2em;
      font-size: 1em;
      background-color: #2cb34a;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

  

    /* Modals */
    #videoModal, #imageModal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.85);
      justify-content: center;
      align-items: center;
      z-index: 19998;
    }

    #videoModal iframe {
      width: 90%;
      max-width: 800px;
      height: 450px;
      border: none;
    }

    #videoModal button,
    #imageModal button {
      position: absolute;
      top: 20px;
      font-size: 2em;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
    }

    #videoModal button {
      right: 30px;
    }

    #imageModal {
      flex-direction: column;
    }

    #imageViewer {
      max-width: 90%;
      max-height: 90%;
      border: 4px solid white;
      border-radius: 8px;
    }

    #imageModal .nav-buttons {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }
  </style>



<main>

        <!--? Hero Start -->
        <div class="slider-area2">
            <div class="slider-height2 d-flex align-items-center">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="hero-cap hero-cap2 pt-70 text-center">
                                <h2 style="color: red; font-weight: bold;">Gallery</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Hero End -->


        <div class="container">

          <!-- Filter Buttons -->
          <div class="filter-buttons">
            <button class="filter-btn active" onclick="filterGallery('all')">All</button>
            <button class="filter-btn" onclick="filterGallery('events')">Events</button>
            <button class="filter-btn" onclick="filterGallery('workshops')">Workshops</button>
            <button class="filter-btn" onclick="filterGallery('campaigns')">Campaigns</button>
          </div>

          <!-- Gallery Items -->
          <div class="gallery mb-10" id="mediaGallery">

            <!-- Photos -->
            <a href="assets/img/blog/surgical.jpg" class="media-item events">
              <img src="assets/img/blog/surgical.jpg" alt="Community Fair">
              <div class="caption">Community Fair</div>
            </a>
            <a href="assets/img/blog/sorghum.png" class="media-item workshops">
              <img src="assets/img/blog/sorghum.png" alt="Workshop">
              <div class="caption">Workshop Training</div>
            </a>
            <a href="assets/img/blog/vip.jpg" class="media-item campaigns">
              <img src="assets/img/blog/vip.jpg" alt="Campaign">
              <div class="caption">Health Campaign</div>
            </a>
            <a href="assets/img/blog/nasinyono.jpg" class="media-item events">
              <img src="assets/img/blog/nasinyono.jpg" alt="Community Fair">
              <div class="caption">Community Fair</div>
            </a>
            <a href="assets/img/blog/certification.png" class="media-item workshops">
              <img src="assets/img/blog/certification.png" alt="Workshop">
              <div class="caption">Workshop Training</div>
            </a>
            <a href="assets/img/blog/healthtalk.jpg" class="media-item campaigns">
              <img src="assets/img/blog/healthtalk.jpg" alt="Campaign">
              <div class="caption">Health Campaign</div>
            </a>

            <!-- Videos (YouTube thumbnail links) -->
            <a href="https://www.youtube.com/embed/JGwWNGJdvx8" class="media-item events video">
              <img src="https://img.youtube.com/vi/JGwWNGJdvx8/hqdefault.jpg" alt="Event Video">
              <div class="caption">Event Highlights</div>
            </a>
            <a href="https://www.youtube.com/embed/IcrbM1l_BoI" class="media-item workshops video">
              <img src="https://img.youtube.com/vi/IcrbM1l_BoI/hqdefault.jpg" alt="Workshop Recap">
              <div class="caption">Workshop Recap</div>
            </a>
            <a href="https://www.youtube.com/embed/ktvTqknDobU" class="media-item campaigns video">
              <img src="https://img.youtube.com/vi/ktvTqknDobU/hqdefault.jpg" alt="Campaign Ad">
              <div class="caption">Campaign Awareness</div>
            </a><a href="https://www.youtube.com/embed/JGwWNGJdvx8" class="media-item events video">
              <img src="https://img.youtube.com/vi/JGwWNGJdvx8/hqdefault.jpg" alt="Event Video">
              <div class="caption">Event Highlights</div>
            </a>
            <a href="https://www.youtube.com/embed/IcrbM1l_BoI" class="media-item workshops video">
              <img src="https://img.youtube.com/vi/IcrbM1l_BoI/hqdefault.jpg" alt="Workshop Recap">
              <div class="caption">Workshop Recap</div>
            </a>
          
            <!-- Add more items here as needed -->
          </div></br>

          <button id="loadMoreBtn">Load More</button>
        </div>

        <!-- Video Modal -->
        <div id="videoModal">
          <iframe id="videoPlayer" allowfullscreen></iframe>
          <button onclick="closeVideoModal()">×</button>
        </div>

        <!-- Image Modal -->
        <div id="imageModal">
          <img id="imageViewer" />
          <div class="nav-buttons">
            <button id="prevImage">⟨</button>
            <button id="nextImage">⟩</button>
          </div>
          <button onclick="closeImageModal()">×</button>
        </div>

   


</main>



<script>
  const galleryItems = document.querySelectorAll('.media-item');
  const filterButtons = document.querySelectorAll('.filter-btn');
  const loadMoreBtn = document.getElementById('loadMoreBtn');
  let currentFilter = 'all';
  let visibleCount = 6;

  function filterGallery(category) {
    currentFilter = category;
    visibleCount = 6;
    updateFilterButtons();
    updateGalleryView();
  }

  function updateGalleryView() {
    let shown = 0;

    galleryItems.forEach(item => {
      const matches = currentFilter === 'all' || item.classList.contains(currentFilter);
      if (matches && shown < visibleCount) {
        item.style.display = 'block';
        shown++;
      } else {
        item.style.display = 'none';
      }
    });

    updateLoadMoreVisibility();
  }

  function updateLoadMoreVisibility() {
    const totalMatching = Array.from(galleryItems).filter(item =>
      currentFilter === 'all' || item.classList.contains(currentFilter)
    );
    loadMoreBtn.style.display = visibleCount >= totalMatching.length ? 'none' : 'block';
  }

  function updateFilterButtons() {
    filterButtons.forEach(btn => btn.classList.remove('active'));
    document.querySelector(`.filter-btn[onclick="filterGallery('${currentFilter}')"]`)?.classList.add('active');
  }

  loadMoreBtn.addEventListener('click', () => {
    visibleCount += 5;
    updateGalleryView();
  });

  // Video Modal
  const videoModal = document.getElementById('videoModal');
  const videoPlayer = document.getElementById('videoPlayer');

  document.querySelectorAll('.media-item.video').forEach(item => {
    item.addEventListener('click', function (e) {
      e.preventDefault();
      videoPlayer.src = this.href + "?autoplay=1";
      videoModal.style.display = 'flex';
    });
  });

  function closeVideoModal() {
    videoModal.style.display = 'none';
    videoPlayer.src = "";
  }

  // Image Modal with navigation
  const imageModal = document.getElementById('imageModal');
  const imageViewer = document.getElementById('imageViewer');
  const imageItems = Array.from(document.querySelectorAll('.media-item:not(.video)'));
  const prevBtn = document.getElementById('prevImage');
  const nextBtn = document.getElementById('nextImage');
  let currentIndex = -1;

  imageItems.forEach((item, index) => {
    item.addEventListener('click', function (e) {
      e.preventDefault();
      openImageModal(index);
    });
  });

  function openImageModal(index) {
    currentIndex = index;
    const img = imageItems[index].querySelector('img');
    if (img) {
      imageViewer.src = img.src.replace(/400x250/, '1200x800');
      imageModal.style.display = 'flex';
    }
  }

  function closeImageModal() {
    imageModal.style.display = 'none';
    imageViewer.src = "";
  }

  function showPrevImage() {
    if (currentIndex > 0) openImageModal(currentIndex - 1);
  }

  function showNextImage() {
    if (currentIndex < imageItems.length - 1) openImageModal(currentIndex + 1);
  }

  prevBtn.addEventListener('click', showPrevImage);
  nextBtn.addEventListener('click', showNextImage);

  document.addEventListener('keydown', function (e) {
    if (imageModal.style.display === 'flex') {
      if (e.key === 'ArrowLeft') showPrevImage();
      if (e.key === 'ArrowRight') showNextImage();
      if (e.key === 'Escape') closeImageModal();
    } else if (videoModal.style.display === 'flex' && e.key === 'Escape') {
      closeVideoModal();
    }
  });

  // Initialize gallery
  filterGallery('all');
</script>



<?php
include "static/footer.php";
?>




<!-- Scroll Up -->
<div id="back-top" >
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>