<?php include "config/koneksi.php"; ?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Galeri</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- JS Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #667eea, #764ba2);
            min-height: 100vh;
        }

        h2 {
            color: #fff;
        }

        .gallery {
            column-count: 4;
            column-gap: 15px;
        }

        .gallery-item {
            position: relative;
            margin-bottom: 15px;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
        }

        .gallery-item img {
            width: 100%;
            border-radius: 15px;
            transition: 0.4s;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .overlay {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            opacity: 0;
            transition: 0.4s;
            display: flex;
            align-items: flex-end;
            padding: 15px;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        .overlay-text {
            color: #fff;
            font-size: 14px;
        }

        /* Modal */
        .modal-content {
            background: transparent;
            border: none;
        }

        .modal-img {
            width: 100%;
            border-radius: 15px;
        }

        .caption {
            color: #fff;
            text-align: center;
            margin-top: 10px;
        }

        @media(max-width: 992px){
            .gallery { column-count: 3; }
        }

        @media(max-width: 768px){
            .gallery { column-count: 2; }
        }

        @media(max-width: 576px){
            .gallery { column-count: 1; }
        }
    </style>
</head>
<body>

<div class="container py-5">
    <h2 class="text-center fw-bold mb-4">📸 Galeri Kegiatan</h2>

    <div class="gallery">

    <?php
    $data = mysqli_query($conn, "SELECT * FROM galeri ORDER BY id DESC");
    while($d = mysqli_fetch_array($data)){
    ?>

        <div class="gallery-item"
             data-bs-toggle="modal"
             data-bs-target="#lightboxModal"
             onclick="showImage('assets/galeri/<?= $d['nama_file'] ?>','<?= $d['keterangan'] ?>')">

            <img src="assets/galeri/<?= $d['nama_file'] ?>">

            <div class="overlay">
                <div class="overlay-text">
                    <?= $d['keterangan'] ?>
                </div>
            </div>
        </div>

    <?php } ?>

    </div>
</div>

<!-- MODAL LIGHTBOX -->
<div class="modal fade" id="lightboxModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content text-center">

        <img id="modalImage" class="modal-img">
        <div id="modalCaption" class="caption"></div>

    </div>
  </div>
</div>

<script>
function showImage(src, caption){
    document.getElementById("modalImage").src = src;
    document.getElementById("modalCaption").innerText = caption;
}
</script>

</body>
</html>