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

<head>
    <?php include("include/meta.php");?>
    <?php include("include/css.php");?>
</head>
<style>
.video-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.video-item:hover {
    transform: translateY(-5px);
}

.video-thumb {
    position: relative;
}

.video-thumb img {
    width: 100%;
    border-radius: 12px 12px 0 0;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    padding: 15px;
    transition: 0.3s;
}

.play-btn:hover {
    background: #f25f00;
}

.video-info {
    padding: 15px;
    text-align: center;
}
</style>

<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">Video 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="video-area pt-120">
            <div class="container">
                <div class="row mb-4">
                    <div class="col-lg-6 mx-auto text-center">
                        <div class="site-heading">
                            <span class="site-title-tagline"><i class="far fa-video"></i> Video Gallery</span>
                            <h2 class="site-title">Our <span>Latest</span> Videos</h2>
                        </div>
                    </div>
                </div>
                <div class="row g-4" id="video-gallery">
                    <!-- Videos load here -->
                </div>
                <div id="video-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 videoPage = 1;
    let videoLoading = false;
    let noMoreVideos = false;
    let currentPlayer = null; // track the current playing iframe

    function loadVideos() {
        if (videoLoading || noMoreVideos) return;
        videoLoading = true;
        document.getElementById("video-loading").style.display = "block";

        fetch("v-gallery.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: "page=" + videoPage
            })
            .then(res => res.text())
            .then(data => {
                if (data.trim() === "no_more") {
                    noMoreVideos = true;
                    window.removeEventListener("scroll", videoScrollHandler);

                    // Show "No more videos" message
                    document.getElementById("video-gallery")
                        .insertAdjacentHTML("beforeend",
                            `<div class="col-12 text-center">
                        <p style="margin:30px 0; font-weight:bold; color:#555;">No more videos</p>
                    </div>`);
                } else {
                    document.getElementById("video-gallery")
                        .insertAdjacentHTML("beforeend", data);
                    videoPage++;
                }
                videoLoading = false;
                document.getElementById("video-loading").style.display = "none";
            })
            .catch(() => {
                videoLoading = false;
            });
    }

    function videoScrollHandler() {
        let gallery = document.getElementById("video-gallery");
        let rect = gallery.getBoundingClientRect();
        if (rect.bottom <= window.innerHeight + 100) {
            loadVideos();
        }
    }

    // 🎬 Inline video play with single-player control
    document.addEventListener("click", function(e) {
        if (e.target.closest(".play-btn")) {
            let thumb = e.target.closest(".video-thumb");
            let videoId = thumb.getAttribute("data-videoid");

            // Stop currently playing video
            if (currentPlayer) {
                currentPlayer.innerHTML =
                    `<img src="https://img.youtube.com/vi/${currentPlayer.dataset.videoid}/hqdefault.jpg" alt="Video">
                 <a href="javascript:void(0);" class="play-btn"><i class="fas fa-play"></i></a>`;
                currentPlayer = null;
            }

            // Replace with iframe
            thumb.innerHTML = `
            <iframe width="100%" height="250" 
                src="https://www.youtube.com/embed/${videoId}?autoplay=1" 
                frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
            </iframe>`;
            thumb.dataset.videoid = videoId;
            currentPlayer = thumb;
        }
    });

    // Initial load
    loadVideos();
    window.addEventListener("scroll", videoScrollHandler);
    </script>


</body>

</html>