$(document).ready(function () {
    var flyerData = []; 

    $.ajax({
        type: "GET",
        url: "https://admin.thesmarttestprep.com/api/getflyers", 
        success: function (data) {
            if (data && data.data && data.data.length > 0) {
                flyerData = data.data; 
                
                updatePopupContent(flyerData[0]);

                $('#openPopup').on('click', function (e) {
                    e.preventDefault();
                    if (flyerData.length > 0) {
                        updatePopupContent(flyerData[0]);
                        $('#popup').show();
                    } else {
                        $('#popup').remove();
                        $('#openPopup').remove();
                    }
                });
            } else {
                console.log("No flyers data available.");
            }
        },
    });

    function updatePopupContent(flyer) {
        var popupContent = '<div class="popup-content">';
        popupContent += '<span class="close-btn" id="closeBtn">&times;</span>';
        popupContent += '<img src="' + flyer.image + '" class="popup-img" style="width: 900px; height: 450px;">';
        popupContent += '<div class="popup-buttons" style="text-align:center; margin-top:20px;">';
        popupContent += '<a href="' + flyer.redirect_link + '" target="_blank" class="banner-btn">' + flyer.redirect_button_name + '</a>';
        popupContent += '</div></div>';
        $('#popup').html(popupContent);
    }
});

window.addEventListener('load', function() {
    $.ajax({
        type: "GET",
        url: "https://admin.thesmarttestprep.com/api/getflyers", 
        success: function (data) {
            if (data && data.data && data.data.length > 0) {
                const popup = document.getElementById('popup');
                popup.style.display = 'block';
            } else {
                $('#popup').remove();
                $('#openPopup').remove(); 
                console.log("No flyers to display on page load.");
            }
        },
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const openPopupBtn = document.getElementById('openPopup');
    const popup = document.getElementById('popup');

    openPopupBtn.addEventListener('click', function() {
        if (popup.innerHTML !== "") { 
            popup.style.display = 'block';
        }
    });
    
    document.addEventListener('click', function(event) {
        if (!popup.contains(event.target) && event.target.id !== 'openPopup') {
            popup.style.display = 'none';
        }
    });

    document.addEventListener('click', function(event) {
        if (event.target.id === 'closeBtn') {
            popup.style.display = 'none';
        }
    });

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            popup.style.display = 'none';
        }
    });
});