@await Html.PartialAsync("Section/_Hero", "Galeri Kegiatan")

@section Style {
    <link rel="stylesheet" href="~/css/Galeri.css" asp-append-version="true" />
}

<div class="container my-5">
    <div class="row g-4" id="galeri-list"></div>
</div>

<div id="lightbox" class="lightbox">
    <span class="close">&times;</span>

    <img class="lightbox-content" id="lightbox-img">

    <div class="lightbox-text">
        <h5 id="lightbox-title"></h5>
        <p id="lightbox-description"></p>
    </div>
</div>
@*<div class="container my-5">

        <div class="row g-4" id="galeri-list"></div>

    </div>
    <div id="lightbox" class="lightbox">
        <span class="close">&times;</span>
        <img class="lightbox-content" id="lightbox-img">
        <p id="lightbox-description"></p>
    </div>*@

<script>
    //function loadGaleri() {

    //    fetch('/Galeri/GetAll')
    //        .then(res => res.json())
    //        .then(data => {

    //            let html = "";

    //            data.forEach(item => {
    //                html += `
    //                    <div class="col-md-4">

    //                        <div class="galeri-card">
    //                            <img src="${item.gambar}" alt="${item.judul}" class="galeri-img">
    //                        </div>

    //                    </div>
    //                `;
    //            });

    //            document.getElementById("galeri-list").innerHTML = html;

    //            document.querySelectorAll(".galeri-img").forEach(img => {
    //                img.addEventListener("click", function () {
    //                    document.getElementById("lightbox").style.display = "block";
    //                    document.getElementById("lightbox-img").src = this.src;
    //                    document.getElementById("lightbox-description").innerText = this.alt;
    //                });
    //            });

    //        });

    //    document.querySelector(".lightbox .close").onclick = function () {
    //        document.getElementById("lightbox").style.display = "none";
    //    };


    //    document.getElementById("lightbox").onclick = function (e) {
    //        if (e.target.id === "lightbox") {
    //            this.style.display = "none";
    //        }
    //    };
    //}

    //document.addEventListener("DOMContentLoaded", loadGaleri);

    function loadGaleri() {

        fetch('/Galeri/GetAll')
            .then(res => res.json())
            .then(data => {

                let html = "";

                data.forEach(item => {
                    html += `
                    <div class="col-md-4">
                        <div class="galeri-card">
                            <img src="${item.gambar}" 
                                 alt="${item.judul}" 
                                 class="galeri-img"
                                 data-judul="${item.judul}"
                                 data-deskripsi="${item.deskripsi}">
                        </div>
                    </div>
                `;
                });

                document.getElementById("galeri-list").innerHTML = html;

                document.querySelectorAll(".galeri-img").forEach(img => {
                    img.addEventListener("click", function () {

                        document.getElementById("lightbox").style.display = "block";
                        document.getElementById("lightbox-img").src = this.src;

                        document.getElementById("lightbox-title").innerText = this.dataset.judul;
                        document.getElementById("lightbox-description").innerText = this.dataset.deskripsi;
                    });
                });

            });

        document.querySelector(".lightbox .close").onclick = function () {
            document.getElementById("lightbox").style.display = "none";
        };

        document.getElementById("lightbox").onclick = function (e) {
            if (e.target.id === "lightbox") {
                this.style.display = "none";
            }
        };
    }

    document.addEventListener("DOMContentLoaded", loadGaleri);
</script>