<!DOCTYPE html>
<html lang="en">

<head>
    <?php include("include/meta.php");?>
    <?php include("include/css.php");?>
</head>

<body>

    <!-- header area -->
    <?php include("include/header.php");?>
    <!-- header area end -->


    <main class="main">

        <!-- breadcrumb -->
        <?php
            $banner_sql = "SELECT * FROM data_table WHERE up_by = $x && page_type = 'slider' && recycle = '1' ORDER BY id DESC";
            $banner_run = mysqli_query($con, $banner_sql);
            if ($banner_row = mysqli_fetch_assoc($banner_run)) {
            ?>
        <div class="site-breadcrumb" style="background: url(./login/upload/<?php echo $banner_row['image_one']?>)">
            <div class="container">
                <h2 class="breadcrumb-title">Image Gallery</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="index.php">Home</a></li>
                    <li class="active">Gallery</li>
                </ul>
            </div>
        </div>
        <?php }?>
        <!-- breadcrumb end -->


        <!-- gallery-area -->
        <div class="gallery-area py-120">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mx-auto">
                        <div class="site-heading text-center">
                            <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Gallery</span>
                            <h2 class="site-title">Our Photo <span>Gallery</span></h2>
                        </div>
                    </div>
                </div>
                <div class="row popup-gallery" id="gallery-container">
                    <!-- First 12 items will be loaded here via AJAX -->
                </div>
                <div id="loading" style="display:none; text-align:center; margin:20px;">
                    <p>Loading...</p>
                </div>
            </div>
        </div>
        <!-- gallery-area end -->

    </main>



    <!-- footer area -->
    <?php include("include/footer.php");?>
    <!-- footer area end -->

    <!-- js -->
    <?php include("include/js.php");?>
    <script>
    let page = 1;
    let loading = false;

    function loadGallery() {
        if (loading) return;
        loading = true;
        document.getElementById("loading").style.display = "block";

        fetch("gallery.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: "page=" + page
            })
            .then(res => res.text())
            .then(data => {
                if (data.trim() === "no_more") {
                    // stop further loading
                    window.removeEventListener("scroll", scrollHandler);
                } else {
                    document.getElementById("gallery-container").insertAdjacentHTML("beforeend", data);
                    page++;
                }
                loading = false;
                document.getElementById("loading").style.display = "none";
            })
            .catch(() => {
                loading = false;
            });
    }

    function scrollHandler() {
        let gallery = document.getElementById("gallery-container");
        let rect = gallery.getBoundingClientRect();
        if (rect.bottom <= window.innerHeight + 100) {
            loadGallery();
        }
    }

    // Initial load
    loadGallery();
    window.addEventListener("scroll", scrollHandler);
    </script>


</body>

</html>