var assetsBaseUrl = "https://admin.signafrica.com/";
// Function to parse query parameters from the script tag URL
function getQueryParam(bannerId) {
    const urlParams = new URLSearchParams(window.location.search);
    const myParam = urlParams.get(bannerId);
    // Check param is passed or not
    if (!urlParams) {
        return null;
    }else { // Parse params
        if ( myParam ) {
            return myParam;
        } else {
            return null;
        }
    }
}
// external-slider-script.js
(function () { // iif to exicute automatically when page is render
    // Get and log the values of the extra parameters
    const queryData = getQueryParam('bid');

    if (queryData) { // Check element is exist or not
        // Fetch slider content from the Express.js server
        fetch(`${assetsBaseUrl}slider-images/${queryData}`).then(response => response.json()).then(data => {
            // Get given elment to add data
            const sliderContainer = document.getElementById("image-slider");
            if (sliderContainer) {
                const images = data.images,
                    effect = data.banner.transition_effect,
                    timing = data.banner.transition_time * 1000;
                let effectClass = '', rippleClass = '';

                if (effect == "Fade") {
                    effectClass = "carousel-fade";
                }
                if (effect == "Ripple") {
                    rippleClass = "ripple-img";
                }

                let imgDivHTML = "";
                images.forEach(idata => {
                    let urlTarget = idata.image_url ? 'blank' : '';
                    if (imgDivHTML == "") {
                        imgDivHTML = `${imgDivHTML} <div class="item active">
                            <a href="${idata.image_url}" target="${urlTarget}">
                                <img class="d-block max-width ${rippleClass}" src="${idata.bimage}" style="height:${data.banner.banner_heigth}px" onclick="countMe('${queryData}');" alt="slide">
                            </a>
                        </div>`;
                    }else {
                        imgDivHTML = `${imgDivHTML} <div class="item">
                            <a href="${idata.image_url}" target="${urlTarget}">
                                <img class="d-block max-width ${rippleClass}" src="${idata.bimage}" style="height:${data.banner.banner_heigth}px" onclick="countMe('${queryData}');" alt="slide">
                            </a>
                        </div>`;
                    }
                });

                const crosalDivHTML = `<div id="carouselExampleIndicators" class="carousel slide ${effectClass}" data-interval="${timing}" data-ride="carousel">
                    <div class="carousel-inner">
                        ${imgDivHTML}
                    </div>
                </div>`;

                sliderContainer.innerHTML = crosalDivHTML;

                fetch(`${assetsBaseUrl}count-views/${queryData}/1`).then(response => response.json()).then(data => {
                }).catch(error => console.error('Error fetching:', error));
            } else{
                console.error("Given element is not found!");
            }
        }).catch(error => console.error('Error to fetching script:', error));
    }else {
        console.error("Required parameters not found!");
    }
})();