// Function to open video in modal and autoplay
function openVideo(src, title, description) {
    const videoPlayer = document.getElementById("videoPlayer");
    videoPlayer.src = src;
    videoPlayer.autoplay = true; // Enable autoplay
    videoPlayer.loop = true; // Enable looping
    videoPlayer.play(); // Start playing

    document.getElementById("videoModalTitle").innerText = title;
    document.getElementById("videoModalDescription").innerHTML = description;
}

// Stop video when modal is closed
document.getElementById("videoModal").addEventListener("hidden.bs.modal", function () {
    const videoPlayer = document.getElementById("videoPlayer");
    videoPlayer.pause(); // Stop playback
    videoPlayer.currentTime = 0; // Reset to beginning
});

// Function to dynamically generate video cards
function generateVideoCards(videos) {
    const videoContainer = document.getElementById("video-container");

    videos.forEach(video => {
        const col = document.createElement("div");
        col.classList.add("col-md-4", "mb-4");

        col.innerHTML = `
            <div class="card video-card" data-bs-toggle="modal" data-bs-target="#videoModal" 
                 onclick="openVideo('${video.src}', '${video.title}', '${video.description}')">
                <video class="card-img-top" autoplay loop muted>
                    <source src="${video.src}" type="video/mp4">
                </video>
                <div class="card-body">
                    <h5 class="card-title">${video.title}</h5>
                    <p class="card-text">${video.description}</p>
                </div>
            </div>
        `;
        videoContainer.appendChild(col);
    });
}