<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5.0, user-scalable=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Galeri  Foto</title>
  <link rel="shorcut icon" href="<?php echo base_url().'theme/images/icon.png'?>">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="<?php echo base_url().'theme/css/bootstrap.min.css'?>">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?php echo base_url().'theme/css/font-awesome.min.css'?>">
  <!-- Simple Line Font -->
  <link rel="stylesheet" href="<?php echo base_url().'theme/css/simple-line-icons.css'?>">
  <!-- Magnific Popup CSS -->
  <link rel="stylesheet" href="<?php echo base_url().'theme/css/magnific-popup.css'?>">
  <!-- Image Hover CSS -->
  <link rel="stylesheet" type="text/css" href="<?php echo base_url().'theme/css/normalize.css'?>" />
  <link rel="stylesheet" type="text/css" href="<?php echo base_url().'theme/css/set2.css'?>" />

  <!-- Masonry Gallery -->
  <link href="<?php echo base_url().'theme/css/animated-masonry-gallery.css'?>" rel="stylesheet" type="text/css" />
  <!-- Main CSS -->
  <link href="<?php echo base_url().'theme/css/style.css'?>" rel="stylesheet">
  <style>
  /* Lightbox galeri - foto tampil saat diklik + navigasi kiri/kanan */
  #galeri-lightbox { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); justify-content: center; align-items: center; }
  #galeri-lightbox.show { display: flex !important; }
  #galeri-lightbox .lightbox-close { position: absolute; right: 20px; top: 20px; color: #fff; font-size: 40px; cursor: pointer; z-index: 2; line-height: 1; }
  #galeri-lightbox .lightbox-close:hover { color: #FFD700; }
  #galeri-lightbox .lightbox-prev,
  #galeri-lightbox .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 2px solid #FFD700; background: rgba(139, 64, 73, 0.9); color: #FFD700; font-size: 24px; cursor: pointer; z-index: 2; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
  #galeri-lightbox .lightbox-prev:hover,
  #galeri-lightbox .lightbox-next:hover { background: #FFD700; color: #5a2d32; }
  #galeri-lightbox .lightbox-prev { left: 20px; }
  #galeri-lightbox .lightbox-next { right: 20px; }
  #galeri-lightbox #galeri-lightbox-img { max-width: 92%; max-height: 88vh; object-fit: contain; border: 3px solid #FFD700; border-radius: 8px; }
  #galeri-lightbox .lightbox-caption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.8); padding: 10px 20px; border-radius: 8px; max-width: 90%; text-align: center; }
  /* Galeri: area tengah terbatas, tidak melewati footer */
  .gallery-wrap {
    overflow: hidden;
    max-width: 100%;
  }
  .gallery-wrap .container {
    max-width: 100%;
  }
  #galeri-photo-view {
    margin-bottom: 2rem;
  }
  #galeri-photo-view .galeri-photo-wrap {
    width: 100%;
    max-width: 100%;
    padding: 1.25rem;
    background: rgba(139, 64, 73, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    overflow: hidden;
    box-sizing: border-box;
  }
  #galeri-photo-view #gallery,
  #galeri-photo-view #gallery-content {
    max-width: 100%;
    overflow: hidden;
  }
  #gallery-content-center {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .gallery-item-wrapper {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .gallery-tile {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #eee;
  }
  .gallery-tile img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    transition: opacity 0.2s ease;
  }
  .gallery-item-wrapper a:hover .gallery-tile img {
    opacity: 0.92;
  }
  .gallery-item-wrapper .gallery-caption { display: none; }
  @media (min-width: 576px) {
    #gallery-content-center { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .gallery-tile { padding-bottom: 75%; }
  }
  @media (min-width: 992px) {
    #gallery-content-center { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .gallery-tile { padding-bottom: 75%; }
  }
  /* Album & tombol */
  #galeri-album-view { display: block; }
  #galeri-photo-view { display: none; }
  #galeri-photo-view.show { display: block; }
  #galeri-album-view.hide { display: none !important; }
  .galeri-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
  .album-tile {
    display: block; text-decoration: none; color: inherit;
    background: rgba(139, 64, 73, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .album-tile:hover {
    background: rgba(139, 64, 73, 0.15);
    border-color: rgba(255, 215, 0, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.15);
  }
  .album-tile .album-tile-icon { font-size: 2.5rem; color: #FFD700; margin-bottom: 0.5rem; display: block; }
  .album-tile .album-tile-name { font-weight: 600; color: var(--maroon-text, #5a2d32); font-size: 0.95rem; line-height: 1.3; margin-bottom: 0.25rem; }
  .album-tile .album-tile-count { font-size: 0.8rem; color: #666; }
  .galeri-back-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--maroon-text, #5a2d32);
    border: 1px solid rgba(139, 64, 73, 0.4);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .galeri-back-btn:hover { background: rgba(139, 64, 73, 0.1); color: #8B4049; }
  </style>
</head>

<body>
  <!--============================= HEADER =============================-->
  <div class="header-topbar">
      <div class="container">
          <div class="row">
              <div class="col-xs-6 col-sm-8 col-md-9">
                  <div class="header-top_address">
                      <div class="header-top_list">
                          <span class="icon-phone"></span>0821-8565-1346
                      </div>
                      <div class="header-top_list">
                          <span class="icon-envelope-open"></span>khususirbs@gmail.com
                      </div>
                      <div class="header-top_list">
                          <span class="icon-location-pin"></span>Kotabumi, Lampung Utara
                      </div>
                      <div class="header-top_list">
                        <div class="header-top_list-icon">
                            <span class="icon-instagram"><a href="https://www.instagram.com/insanrobbaniboardingschool_/" target="_blank"><i class="fa fa-instagram fa-ig" aria-hidden="true"></i></a></span>
                            <span class="icon-whatsapp"><a href="https://api.whatsapp.com/send/?phone=%2B6282185651346&text&type=phone_number&app_absent=0" target="_blank"><i class="fa fa-whatsapp fa-wa" aria-hidden="true"></i></a></span>
                        </div>
                      </div>
                  </div>
                  <div class="header-top_login2">
                      <a href="<?php echo site_url('contact');?>">Hubungi Kami</a>
                  </div>
              </div>
              <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="header-top_login mr-sm-3">
                      <a href="<?php echo site_url('contact');?>">Hubungi Kami</a>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div data-toggle="affix" style="border-bottom:solid 1px #f2f2f2;">
      <div class="container nav-menu2">
          <div class="row">
              <div class="col-md-12">
                  <nav class="navbar navbar2 navbar-toggleable-md navbar-light bg-faded">
                      <button class="navbar-toggler navbar-toggler2 navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                          <span class="icon-menu"></span>
                      </button>
                      <a href="<?php echo site_url('');?>" class="navbar-brand nav-brand2"><img class="img img-responsive" width="200px;" src="<?php echo base_url().'theme/images/logo-dark.png'?>"></a>
                      <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
                          <ul class="navbar-nav">
                              <li class="nav-item">
                                  <a class="nav-link" href="<?php echo site_url('');?>">Beranda</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="<?php echo site_url('about');?>">Tentang</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="<?php echo site_url('guru');?>">Guru</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="<?php echo site_url('siswa');?>">Siswa</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="<?php echo site_url('pengumuman');?>">Pengumuman</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="https://forms.gle/2WwkAaY3YVDgegGa8" target="_blank">SPMB</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="<?php echo site_url('galeri');?>">Galeri</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="<?php echo site_url('contact');?>">Kontak</a>
                              </li>
                        </ul>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </div>
    <section>
</section>
<!--//END HEADER -->
  <!--============================= Gallery =============================-->
  <div class="gallery-wrap">
    <div class="container">
<!-- Style 2 -->
<div class="row">
  <div class="col-md-12">
    <h3 class="gallery-style">Galeri Foto</h3>
  </div>
</div>

<!-- Tampilan awal: tile album (ikon album), klik untuk lihat foto di album -->
<div id="galeri-album-view" class="row" style="margin-bottom: 30px;">
  <div class="col-md-12">
    <h4 style="color: var(--maroon-text); margin-bottom: 1rem; font-weight: 600;">
      <i class="fa fa-folder-open" style="margin-right: 8px; color: #FFD700;"></i>Pilih Album
    </h4>
    <p style="color: #666; margin-bottom: 1.25rem; font-size: 0.95rem;">Klik album untuk melihat semua foto.</p>
    <div class="galeri-album-grid">
      <?php if(isset($alb) && is_object($alb) && $alb->num_rows() > 0): ?>
        <?php foreach($alb->result() as $album_row): 
          $album_id = $album_row->album_id;
          $album_nama = htmlspecialchars($album_row->album_nama);
          $album_count = !empty($album_row->album_count) ? (int)$album_row->album_count : 0;
        ?>
        <a href="javascript:void(0)" class="album-tile" data-album-id="<?php echo $album_id;?>" data-album-name="<?php echo htmlspecialchars($album_nama);?>" title="Lihat <?php echo $album_nama;?>">
          <i class="fa fa-folder album-tile-icon" aria-hidden="true"></i>
          <span class="album-tile-name"><?php echo $album_nama;?></span>
          <span class="album-tile-count"><?php echo $album_count;?> foto</span>
        </a>
        <?php endforeach; ?>
      <?php else: ?>
        <p style="grid-column: 1/-1; color: #666;">Belum ada album.</p>
      <?php endif; ?>
    </div>
  </div>
</div>

<!-- Tampilan foto: muncul setelah album diklik -->
<div id="galeri-photo-view" class="row">
  <div class="col-md-12">
    <button type="button" class="galeri-back-btn" id="galeri-back-to-album" aria-label="Kembali ke daftar album">
      <i class="fa fa-arrow-left"></i> Kembali ke Album
    </button>
    <h4 id="galeri-photo-title" style="color: var(--maroon-text); margin-bottom: 1rem; font-weight: 600;"></h4>
    <div class="galeri-photo-wrap">
      <div id="gallery">
        <div id="gallery-content">
          <div id="gallery-content-center">
          <?php 
          // Cek apakah data galeri ada dan terdefinisi
          if(isset($all_galeri) && is_object($all_galeri) && method_exists($all_galeri, 'num_rows') && $all_galeri->num_rows() > 0) {
            $count = 0;
            foreach ($all_galeri->result() as $row) : 
              // Pastikan gambar tidak kosong dan valid
              if(!empty($row->galeri_gambar) && trim($row->galeri_gambar) != '') {
                $gambar_file = trim($row->galeri_gambar);
                $gambar_path = base_url() . 'assets/images/' . $gambar_file;
                $gambar_judul = !empty($row->galeri_judul) ? htmlspecialchars($row->galeri_judul) : 'Gallery Image';
                $blank_url = base_url() . 'assets/images/blank.png';
                $count++;
                $aid = isset($row->galeri_album_id) ? $row->galeri_album_id : (isset($row->album_id) ? $row->album_id : 0);
                $album_class = !empty($aid) ? 'album-'.$aid : 'album-0';
                $caption_parts = array($gambar_judul);
                if(!empty($row->tanggal)) $caption_parts[] = $row->tanggal;
                if(!empty($row->album_nama) && $row->album_nama != 'Uncategorized') $caption_parts[] = htmlspecialchars($row->album_nama);
                if(!empty($row->galeri_author)) $caption_parts[] = htmlspecialchars($row->galeri_author);
                $caption_text = implode(' • ', $caption_parts);
          ?>
            <div class="gallery-item-wrapper <?php echo $album_class;?> all">
              <a href="<?php echo $gambar_path;?>" class="galeri-lightbox-link" title="<?php echo $gambar_judul;?>" data-caption="<?php echo htmlspecialchars($caption_text, ENT_QUOTES, 'UTF-8');?>" onclick="openGaleriLightbox(this); return false;">
                <div class="gallery-tile">
                  <img src="<?php echo $gambar_path;?>" 
                       class="gallery-photo" 
                       alt="<?php echo $gambar_judul;?>" 
                       loading="eager"
                       onerror="this.onerror=null; this.src='<?php echo $blank_url;?>';" />
                </div>
              </a>
            </div>
          <?php 
              }
            endforeach;
            
            // Jika tidak ada gambar yang valid
            if($count == 0) {
          ?>
            <div class="col-md-12 text-center" style="padding: 80px 20px; clear: both;">
              <i class="fa fa-image" style="font-size: 64px; color: var(--maroon-accent); margin-bottom: 20px;"></i>
              <h4 style="color: var(--maroon-text); margin-bottom: 15px;">Belum Ada Foto Galeri</h4>
              <p style="color: var(--maroon-text); font-size: 16px;">Data galeri ada di database tapi tidak memiliki gambar. Silakan periksa data di admin panel.</p>
            </div>
          <?php 
            }
          } else {
          ?>
            <div class="col-md-12 text-center" style="padding: 80px 20px; clear: both;">
              <i class="fa fa-image" style="font-size: 64px; color: var(--maroon-accent); margin-bottom: 20px;"></i>
              <h4 style="color: var(--maroon-text); margin-bottom: 15px;">Belum Ada Foto Galeri</h4>
              <p style="color: var(--maroon-text); font-size: 16px;">Silakan tambahkan foto melalui admin panel.</p>
              <a href="<?php echo site_url('administrator');?>" class="btn btn-default" style="margin-top: 20px;">Login Admin</a>
            </div>
          <?php } ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--//End galeri-photo-view -->

<!--//End Style 2 -->

</div>
</div>
<!--//End Gallery -->
<!--============================= FOOTER =============================-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="foot-logo">
                    <a href="<?php echo site_url();?>">
                        <img src="<?php echo base_url().'theme/images/logo-white.png'?>" class="img-fluid" alt="footer_logo">
                    </a>
                    <p><?php echo date('Y');?> © copyright by SMP IT Insan Robbani Boarding School. <br>All rights reserved.</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="sitemap">
                        <h3>Menu Utama</h3>
                        <ul>
                            <li><a href="<?php echo site_url();?>">Beranda</a></li>
                            <li><a href="<?php echo site_url('about');?>">Tentang</a></li>
                            <li><a href="<?php echo site_url('galeri');?>">Galeri</a></li>
                            <li><a href="<?php echo site_url('contact');?>">Kontak</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                  <div class="sitemap">
                      <h3>Akademik</h3>
                      <ul>
                          <li><a href="<?php echo site_url('guru');?>">Guru</a></li>
                          <li><a href="<?php echo site_url('siswa');?>">Siswa </a></li>
                          <li><a href="<?php echo site_url('pengumuman');?>">Pengumuman</a></li>
                          <li><a href="https://forms.gle/2WwkAaY3YVDgegGa8" target="_blank">SPMB</a></li>
                      </ul>
                  </div>
                </div>
                <div class="col-md-3">
                    <div class="address">
                        <h3>Hubungi Kami</h3>
                        <p><span>Alamat: </span> Kotabumi, Lampung Utara</p>
                        <p>Email : khususirbs@gmail.com
                            <br> Phone : 0821-8565-1346</p>
                            <ul class="footer-social-icons">
                            
                                <li><a href="https://www.instagram.com/insanrobbaniboardingschool_/" target="_blank"><i class="fa fa-instagram fa-ig" aria-hidden="true"></i></a></li>
                                <li><a href="https://api.whatsapp.com/send/?phone=%2B6282185651346&text&type=phone_number&app_absent=0" target="_blank"><i class="fa fa-whatsapp fa-wa" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    <!--//END FOOTER -->

    <!-- Lightbox galeri: tampil foto + navigasi kiri/kanan -->
    <div id="galeri-lightbox" aria-hidden="true">
      <span class="lightbox-close" title="Tutup" onclick="closeGaleriLightbox()">&times;</span>
      <button type="button" class="lightbox-prev" id="galeri-lightbox-prev" title="Foto sebelumnya" aria-label="Foto sebelumnya">&#8592;</button>
      <img id="galeri-lightbox-img" src="" alt="">
      <button type="button" class="lightbox-next" id="galeri-lightbox-next" title="Foto berikutnya" aria-label="Foto berikutnya">&#8594;</button>
      <div class="lightbox-caption" id="galeri-lightbox-caption"></div>
    </div>

    <!-- jQuery, Bootstrap JS. -->
    <script src="<?php echo base_url().'theme/js/jquery.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/tether.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/bootstrap.min.js'?>"></script>
    <!-- Plugins -->
    <script src="<?php echo base_url().'theme/js/slick.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/waypoints.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/counterup.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/owl.carousel.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/validate.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/tweetie.min.js'?>"></script>
    <!-- Subscribe -->
    <script src="<?php echo base_url().'theme/js/subscribe.js'?>"></script>

    <script src="<?php echo base_url().'theme/js/jquery-ui-1.10.4.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/jquery.isotope.min.js'?>"></script>
    <script src="<?php echo base_url().'theme/js/animated-masonry-gallery.js'?>"></script>
    <!-- Magnific popup JS -->
    <script src="<?php echo base_url().'theme/js/jquery.magnific-popup.js'?>"></script>
    <!-- Script JS -->
    <script src="<?php echo base_url().'theme/js/script.js'?>"></script>
    
    <!-- Galeri: lightbox + navigasi kiri/kanan -->
    <script>
    var lightboxLinks = [];
    var lightboxIndex = 0;

    function showLightboxPhoto(index) {
        if (index < 0 || index >= lightboxLinks.length) return;
        lightboxIndex = index;
        var link = lightboxLinks[index];
        var href = link.getAttribute('href');
        var title = link.getAttribute('title') || 'Gallery Image';
        var caption = link.getAttribute('data-caption') || title;
        var lbImg = document.getElementById('galeri-lightbox-img');
        var lbCap = document.getElementById('galeri-lightbox-caption');
        var prevBtn = document.getElementById('galeri-lightbox-prev');
        var nextBtn = document.getElementById('galeri-lightbox-next');
        if (lbImg) { lbImg.src = href; lbImg.alt = title; }
        if (lbCap) { lbCap.textContent = caption; lbCap.style.display = caption ? 'block' : 'none'; }
        if (prevBtn) prevBtn.style.display = lightboxLinks.length > 1 ? 'flex' : 'none';
        if (nextBtn) nextBtn.style.display = lightboxLinks.length > 1 ? 'flex' : 'none';
        if (prevBtn) prevBtn.style.visibility = index > 0 ? 'visible' : 'hidden';
        if (nextBtn) nextBtn.style.visibility = index < lightboxLinks.length - 1 ? 'visible' : 'hidden';
    }

    function openGaleriLightbox(link) {
        var href = link.getAttribute('href');
        if (!href) return;
        lightboxLinks = [].slice.call(document.querySelectorAll('.galeri-lightbox-link')).filter(function(a) {
            var w = a.closest('.gallery-item-wrapper');
            return w && w.style.display !== 'none';
        });
        lightboxIndex = lightboxLinks.indexOf(link);
        if (lightboxIndex < 0) lightboxIndex = 0;
        var lb = document.getElementById('galeri-lightbox');
        if (lb) {
            lb.classList.add('show');
            lb.setAttribute('aria-hidden', 'false');
        }
        showLightboxPhoto(lightboxIndex);
    }

    function closeGaleriLightbox() {
        var lb = document.getElementById('galeri-lightbox');
        if (lb) { lb.classList.remove('show'); lb.setAttribute('aria-hidden', 'true'); }
    }

    function lightboxPrev() {
        if (lightboxIndex > 0) showLightboxPhoto(lightboxIndex - 1);
    }
    function lightboxNext() {
        if (lightboxIndex < lightboxLinks.length - 1) showLightboxPhoto(lightboxIndex + 1);
    }

    document.addEventListener('DOMContentLoaded', function() {
        var lb = document.getElementById('galeri-lightbox');
        if (lb) {
            lb.addEventListener('click', function(e) {
                if (e.target.classList.contains('lightbox-prev') || e.target.classList.contains('lightbox-next')) return;
                if (e.target.id === 'galeri-lightbox' || e.target.classList.contains('lightbox-close')) closeGaleriLightbox();
            });
            var lbImg = document.getElementById('galeri-lightbox-img');
            if (lbImg) lbImg.addEventListener('click', function(e) { e.stopPropagation(); });
        }
        document.getElementById('galeri-lightbox-prev').addEventListener('click', function(e) { e.stopPropagation(); lightboxPrev(); });
        document.getElementById('galeri-lightbox-next').addEventListener('click', function(e) { e.stopPropagation(); lightboxNext(); });
        document.addEventListener('keydown', function(e) {
            if (document.getElementById('galeri-lightbox').classList.contains('show')) {
                if (e.key === 'Escape') closeGaleriLightbox();
                if (e.key === 'ArrowLeft') lightboxPrev();
                if (e.key === 'ArrowRight') lightboxNext();
            }
        });

        document.querySelectorAll('.album-tile').forEach(function(tile) {
            tile.addEventListener('click', function() {
                var albumId = this.getAttribute('data-album-id');
                var albumName = this.getAttribute('data-album-name') || 'Album';
                document.getElementById('galeri-album-view').classList.add('hide');
                document.getElementById('galeri-photo-view').classList.add('show');
                var titleEl = document.getElementById('galeri-photo-title');
                if (titleEl) titleEl.textContent = albumName;
                var cls = 'album-' + albumId;
                document.querySelectorAll('.gallery-item-wrapper').forEach(function(el) {
                    el.style.display = el.classList.contains(cls) ? '' : 'none';
                });
            });
        });

        var backBtn = document.getElementById('galeri-back-to-album');
        if (backBtn) {
            backBtn.addEventListener('click', function() {
                document.getElementById('galeri-album-view').classList.remove('hide');
                document.getElementById('galeri-photo-view').classList.remove('show');
                document.querySelectorAll('.gallery-item-wrapper').forEach(function(el) { el.style.display = ''; });
            });
        }
    });
    </script>

  </body>

  </html>
