var testURL = window.location.href;
var testURL2 = document.URL;
var isUAT = false
var URLAddress = 'https://www.luckyspin.win/';
var TokenID = '';
var EventID = '';
var MerchantID = '';
var IconURL = 'https://www.luckyspin.win/Img/';
var IsPreLogin = false;
var PopContentData = {};
var _websiteCountry = 'BD';
var getLang = 'en';
var marketingarm = {};

var IsSend = false;


document.cookie = `previousUrl=${encodeURIComponent(window.location.href)}; path=/`;
function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
}

const previousUrl = getCookie("previousUrl");

if (testURL.includes("jeetbuzz")) {
    URLAddress = "https://jb.luckyspin.win/";
} else if (testURL.includes("baji")) {
    URLAddress = "https://bj.luckyspin.win/";
} else if (testURL.includes("six6s")) {
    URLAddress = "https://six6s.luckyspin.win/";
};
function createPopup() {

    var popup = document.createElement('div');
    popup.setAttribute('id', 'popupGrab');
    popup.style.display = 'none';  // Hidden by default
    popup.style.position = 'none';
    popup.style.left = '50%';
    if (mobileCheck()) {
        popup.style.top = '20%';
        popup.style.width = '90%';
    } else {
        popup.style.top = '50%';
        popup.style.width = '600px';
    }
    popup.style.transform = 'translate(-50%, -50%)';
 popup.style.backgroundColor = "black";
    popup.style.padding = '20px';
    popup.style.border = '1px solid #888';
    popup.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
    popup.style.zIndex = '1000';
   
    popup.style.textAlign = 'center';

    popup.style.backgroundSize = 'cover';  // Ensures the image covers the entire background
    popup.style.backgroundPosition = 'center'
   popup.style.position = 'absolute'



    // Create overlay
    var overlay = document.createElement('div');
    overlay.setAttribute('id', 'popupOverlayGrab');
    overlay.style.display = 'none';  // Hidden by default
    overlay.style.position = 'fixed';
    overlay.style.left = '0';
    overlay.style.top = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    overlay.style.zIndex = '500';

    // Create content inside popup
    var popupContent = document.createElement('div');
    popupContent.setAttribute('id', 'popupContentGrab');
    //popupContent.innerHTML = `
    //            <h2>Popup Title</h2>
    //            <p>This is a dynamically created popup div with inline styles.</p>
    //        `;
             

    //var closeBtn = document.createElement('span');
    //closeBtn.innerHTML = '&times;';  // "X" symbol
    //closeBtn.style.position = 'absolute';
    //closeBtn.style.top = '10px';
    //closeBtn.style.right = '15px';
    //closeBtn.style.cursor = 'pointer';
    //closeBtn.style.fontSize = '24px';
    //closeBtn.style.color = '#f44336';

    // Append content to the popup
/*    popup.appendChild(closeBtn);*/
    popup.appendChild(popupContent);

    // Append the popup and overlay to the body
    document.body.appendChild(popup);
    document.body.appendChild(overlay);

    //closeBtn.onclick = function () {
    //    popup.style.display = 'none';
    //    overlay.style.display = 'none';
    //};

    // Add click event to close the popup when clicking outside
    overlay.onclick = function () {
        popup.style.display = 'none';
        overlay.style.display = 'none';
    };
}
function loadScript(url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = () => resolve();
        script.onerror = () => reject(new Error(`Script load error: ${url}`));
        document.head.appendChild(script);
    });
}
async function initializeSignalR() {
    try {
        var urlC = window.location.hostname;
        await loadScript(URLAddress + '/Scripts/signalR.js')
        const connection = new signalR.HubConnectionBuilder().withUrl(signalRUrl + "/luckyspinhub?userId=" + gConfig.UserID + "&merchantId=" + gConfig.MerchantID).build();
      

        await connection.start();
        connection.on('ReceiveNotification', function (message) {
            console.log("Received message from server: " + message.TokenID);
            //create ticket
            rebuildLuckySpin(message);
        });

    } catch (error) {
        console.error("Error during SignalR initialization: ", error);
    }
}

function rebuildLuckySpin(data) {
   
    if (data.TokenID != '' && data.TokenID != null) {
    
        var iconCss = CheckThemeIcon(data); //theme build
        /* var iconCss = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;background-image: url(' + IconURL + 'icon2.Png);';*/
        var textCss = 'white-space: pre-line;text-align: left;padding-top: 10px;color: black;'
        /*var wrapperStyle = 'display:flex;cursor:pointer;';*/
        var ticketcount = 0;


        if (data.Tickets != undefined) {
            /* $('#lsTicketWrapper').empty();*/
            document.querySelector('#lsTicketWrapper').innerText = "";
            let lsTicketWrapperChild = document.createElement('div');
            lsTicketWrapperChild.style = "background: #c87c0e;border-radius: 1rem; padding-left: 0.5rem;margin-bottom: 0.4rem; padding-top: 0.5rem; padding-bottom: 0.3rem; padding-right: 0.5rem; "
            lsTicketWrapperChild.id = "lsTicketWrapperChild";
            let lsTicketWrapper2 = document.querySelector('#lsTicketWrapper');
            lsTicketWrapper2.appendChild(lsTicketWrapperChild);

            let EventCountInc = 0;
            /* $.each(data.Tickets, function (i, v) {*/
            for (let i in data.Tickets) {
                var wrapperStyle = 'display:flex;cursor:pointer;';
                EventCountInc += 1;
                let v = data.Tickets[i];
                var eventId = i.split('|')[0];
                var eventName = i.split('|')[1];

                var CountElem = '<span id="lsTicketcountInner"style="border-radius: 50rem!important;--bs-bg-opacity: 1;background-color: #d51212;transform: translate(-40%,-185%)!important;left: 24%!important;position: absolute!important;display: inline-block;padding: 0.35em 0.65em;font-size: .75em;font-weight: 700;line-height: 1;color: #fff;text-align: center;' +
                    'white-space: nowrap;vertical-align: baseline;border-radius: 0.25rem;">' + v.length + '</span>';
                if (v.length == 0) {
                    CountElem = '';
                }
                ticketcount += v.length;
                var template = document.createElement('div');
                if (EventCountInc < Object.keys(data.Tickets).length) {
                    wrapperStyle += 'border-bottom:1px solid #00000042;';
                }
                var wrapper = '<div id="' + eventId + '" data-id="SpinEvent" data-eventid="' + eventId + '" data-tokenid="' + data.TokenID + '" style="' + wrapperStyle + '">';
                var spanIcon = '<span style="' + iconCss + '">' + CountElem + '</span>';
                var spanText = '<span style="' + textCss + '">' + eventName + '</span>';

                wrapper += spanIcon + spanText + '</div>';
                template.innerHTML = wrapper;
                let lsTicketWrapper1 = document.querySelector('#lsTicketWrapperChild');
                lsTicketWrapper1.appendChild(template);

                document.getElementById(eventId).addEventListener("click", SpinEventF);
            };


            //let template1 = document.createElement('div');
            //let iconCss1 = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;';

            //let ClsBtncss = 'background: linear-gradient(rgb(255, 26, 37), rgb(129, 13, 21));display: inline-block;font-weight: bolder;    line-height: 1.5;    text-align: center;    text-decoration: none;    vertical-align: middle;    cursor: pointer;    -moz-user-select: none;    user-select: none;    padding: 0.375rem 0.75rem;    font-size: 0.7rem;    color: white;    width: 100%;    border-radius: 1rem;    border-color: transparent;    border-top: none;    border-bottom: none;'
            //let wrapper1 = '<div id="lsCloseBtn"' + ' style="' + ClsBtncss + '">';
            //let spanIcon1 = '<span style="' + iconCss1 + '"></span>';
            //let spanText1 = '<span style="' + textCss + '">' + "Close" + '</span>';
            //wrapper1 += spanIcon1 + spanText1 + '</div>';
            //template1.innerHTML = wrapper1;

            let lsTicketWrapper1 = document.querySelector('#lsTicketWrapper');
            let closebtn1 = document.createElement("button");
            closebtn1.style = 'background: linear-gradient(rgb(255, 26, 37), rgb(129, 13, 21));display: inline-block;font-weight: bolder;    line-height: 1.5;    text-align: center;    text-decoration: none;    vertical-align: middle;    cursor: pointer;    -moz-user-select: none;    user-select: none;    padding: 0.375rem 0.75rem;    font-size: 0.7em;    color: white;    width: 100%;    border-radius: 1rem;    border-color: transparent;    border-top: none;    border-bottom: none;'
            closebtn1.innerHTML = "Close All";
            closebtn1.id = "lsCloseBtn";
            lsTicketWrapper1.appendChild(closebtn1);

            document.getElementById("lsCloseBtn").addEventListener("click", AddListenerCloseBtn);
        }

        var ticketcount = (data.EventCount != undefined ? data.EventCount : 0);
        document.querySelector('#lsTicketcount').style.display = 'block';

        if (ticketcount == 0) {
            document.querySelector('#btnLuckyspin').style.display = 'none';
        } else {
            document.querySelector('#btnLuckyspin').style.display = 'block';
        }

        document.querySelector('#lsTicketcount').innerText = ticketcount;

        TokenID = data.TokenID;
        EventID = data.EventID;
        IsPreLogin = data.IsPreLogin;
        MerchantID = data.MerchantID;
        InitButtonClickFunction();

    }
}


var mobileCheck = function () {
    let check = false;
    (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
    return check;
};

var InitiVariables = function () {
    if (typeof (PageConfig) !== 'undefined') {
        if (typeof (PageConfig.country) !== 'undefined') {
            _websiteCountry = PageConfig.country;
        }
    }
}

function AddListenerLuckySpin() {
    if (parseInt(document.querySelector('#lsTicketcount').textContent) > 0) {
        if (document.querySelector("#lsTicketWrapper").style.display == 'none') {
            document.querySelector('#lsTicketWrapper').style.display = 'block';
        } else {
            document.querySelector('#lsTicketWrapper').style.display = 'none';
        }
    } else {
        alert('No on-going events')
    }
}

function AddListenerCloseBtn() {
    document.querySelector('#btnLuckyspin').style.display = 'none';
}

var InitButtonClickFunction = function () {

    document.getElementById("btnLuckyspin").addEventListener("click", AddListenerLuckySpin, false);

    document.body.addEventListener("click", function (e) {
        var lsTicketDiv = e.target.closest('#lsTicketWrapper');
        if (e.target.getAttribute("id") != 'btnLuckyspin' && lsTicketDiv == null) {
            document.querySelector('#lsTicketWrapper').style.display = 'none';
        }
    });
}

function BuildLuckySpinBtn() {

    let positionCss = "bottom: 125px; right: 20px;";
    var template = document.createElement('div');
    //var ticketCountElem = '<span id="lsTicketcount"style="border-radius: 50rem!important;--bs-bg-opacity: 1;background-color: #d51212;transform: translate(-50%,-50%)!important;left: 80%!important;top: 10px!important;position: absolute!important;display: inline-block;padding: 0.35em 0.65em;font-size: .75em;font-weight: 700;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: 0.25rem;display:none;"></span>';
    var ticketCountElem = '<span id="lsTicketcount" style="--bs-bg-opacity: 1;background-color: rgb(213, 18, 18);padding: 0.35em 0.65em;font-size: 0.75em;font-weight: 700;line-height: 1;color: rgb(255, 255, 255);text-align: center;white-space: nowrap;vertical-align: baseline;display: block;border-radius: 50rem!important; transform: translate(-50%, -50%)!important;left: 80% !important; top: 10px!important;position: absolute!important;display:none;"> </span>'
    template.innerHTML = ticketCountElem;
    //template.innerHTML += '<div id="lsTicketWrapper"style="cursor: default;background-color: #df7f1eba;transform: translate(-30%,-25%)!important;right: 0%;bottom: 0;position: absolute!important;display: inline-block;padding: 0.35em 0.65em;font-size: .75em;font-weight: 700;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;width: 214px;border-radius: 2.25rem;display:none;"></div>';
    template.innerHTML += '<div id="lsTicketWrapper"style="cursor: default;background-color: #df7f1eba;transform: translate(-26%,-8%)!important;right: 0%;bottom: 0;position: absolute!important;display: inline-block;padding:0.7em 0.6em;font-size: .75em;font-weight: 700;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;width: 214px;border-radius: 1rem;display:none;"></div>';

    if (mobileCheck() || window.matchMedia("(max-width: 767px)").matches) {
        positionCss = "bottom: calc(30.333333vw + 5px) !important;right: 5px!important;"; //right: 25px!important;
    }
    //template.style = "z-index: 100000000;background-repeat: no-repeat;background-size: cover;background-position: center;display:none;" +
    //    "background-image: url(" + IconURL + "icon1.gif);" +
    //    "position: fixed; " + positionCss + "  padding: 30px; margin: 5px; cursor: pointer;  "

    template.style = "z-index: 100000000;\
    background-repeat: no-repeat;\
    background-size: cover;\
    background-position: center center;\
    display: block;\
    background-image: url(" + IconURL + "icon1.gif);" + positionCss + "display:none;" +
        "position: fixed;\
    padding: 30px;\
    margin: 5px;\
    cursor: pointer;"

    template.id = "btnLuckyspin";
    document.body.appendChild(template);
}

function CheckThemeIcon(data) {
    if (data.MerchantID == "SIX6S") {
        document.getElementById("btnLuckyspin").style.backgroundImage = "url(" + IconURL + "6s/iconsix.gif)";
        let iconCss = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;background-image: url(' + IconURL + '6s/icon26s.Png);';
        return iconCss;
    }
    if (data.MerchantID == "BJ88") {
        document.getElementById("btnLuckyspin").style.backgroundImage = "url(" + IconURL + "bj88/icon.gif)";
        let iconCss = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;background-image: url(' + IconURL + 'icon2.Png);';
        return iconCss;
    }
    if (data.MerchantID == "CITI") {
   
        document.getElementById("btnLuckyspin").style.backgroundImage = "url(" + IconURL + "citi/icon.gif)";
        let iconCss = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;background-image: url(' + IconURL + 'citi/icon2.Png);';
        return iconCss;
    }
    console.log(data.MerchantID)
    if (data.MerchantID == "BAJI" || data.MerchantID == "BAJIUAT") {
        document.getElementById("btnLuckyspin").style.backgroundImage = "url(" + IconURL + "baji/icon.gif)";
        let iconCss = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;background-image: url(' + IconURL + 'baji/icon2.png);';
        return iconCss;
    }
    else {
        let iconCss = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;background-image: url(' + IconURL + 'icon2.Png);';
        return iconCss;
    }
}

function CheckGrabLink() {
    /*    IsContain = window.location.href.includes("grabticket");*/
    /*    let ge = localStorage.getItem('ge');*/

    if (!IsSend) {
        IsSend = true;
        IsContain = false;
               let eParam = "";
        if (mobileCheck()) {
            IsContain = testURL.includes("grabticket");
            const url = new URL(testURL);
            const params = new URLSearchParams(url.search);
            eParam = params.get('e');
        } else {
            IsContain= document.referrer.includes("grabticket");
            if (IsContain) {
         const url = new URL(document.referrer);
         const params = new URLSearchParams(url.search);
         eParam = params.get('e');
     } else {
         IsContain = getCookie("previousUrl").includes("grabticket");
         const url = new URL(getCookie("previousUrl"));
         const params = new URLSearchParams(url.search);
         eParam = params.get('e');
     }
         
        }

        if (IsContain) {
            var urlC =  window.location.hostname
            var formDataitem = new FormData();
            formDataitem.append("Url", urlC);
            formDataitem.append("UserName", gConfig.UserID);
            formDataitem.append("Eventid", eParam);
	
            var postPopUrl = URLAddress + 'LuckySpin/LuckySpinApi/SendGrabTicketEvent'
            let SendData = {
                method: 'POST',
                body: formDataitem,
            };
              fetch(postPopUrl, SendData)
                .then(Result => Result.json()).then(data => {

                    if (data.message !== '') {

                        /*     alert(data.message);*/
                        var popupContent = document.getElementById('popupContentGrab');
                        var newText = document.createElement('p');
                        newText.innerHTML = data.message;
                        newText.style.color = 'white';
                        popupContent.appendChild(newText);
                        var popupOverlayGrab = document.getElementById('popupOverlayGrab');
                        var popupGrab = document.getElementById('popupGrab');
                        popupOverlayGrab.style.display = 'block';
                        popupGrab.style.display = 'block';

                        popupGrab.style.backgroundImage = 'url(' + data.bgimg + ')';
                    }
                });
        }
    }
}

var InitLuckySpinElem = function () {


    var luckyspinBtn = document.getElementById("btnLuckyspin");
    if (luckyspinBtn != null) {
        luckyspinBtn.remove();
    }

    BuildLuckySpinBtn(); //theme build
    var GetVariabletimer = setInterval(function () {
	
         if (gConfig.UserID != '' && gConfig.UserID != null) {
           createPopup();
           CheckGrabLink();
       }
        if (gConfig.MerchantID != null && (gConfig.MerchantID != null && gConfig.UserID != '') && (gConfig.Hash != null && gConfig.Hash != '') &&
            (gConfig.Language != null && gConfig.Language != '')) {
            clearInterval(GetVariabletimer);

  

	
            gConfig.Language = (gConfig.Language == undefined ? 'en' : gConfig.Language);
            var formDataitem = new FormData();
            formDataitem.append("MerchantID", gConfig.MerchantID);
            formDataitem.append("UserName", gConfig.UserID);
            formDataitem.append("Language", gConfig.Language);
            formDataitem.append("Hash", gConfig.Hash);
;
            var postPopUrl = URLAddress + 'LuckySpin/Api/GetTicketCountAndAuthentication'
            let SendData = {
                method: 'POST',
                body: formDataitem,
            };
            fetch(postPopUrl, SendData)
                .then(Result => Result.json())
                .then(data => {

                    if (data.EventID == '' || data.TokenID == '') {

                    } else {
                        var iconCss = CheckThemeIcon(data); //theme build
                        /* var iconCss = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;background-image: url(' + IconURL + 'icon2.Png);';*/
                        var textCss = 'white-space: pre-line;text-align: left;padding-top: 10px;color: black;'
                        /*var wrapperStyle = 'display:flex;cursor:pointer;';*/
                        var ticketcount = 0;


                        if (data.Tickets != undefined) {
                            /* $('#lsTicketWrapper').empty();*/
                            document.querySelector('#lsTicketWrapper').innerText = "";
                            let lsTicketWrapperChild = document.createElement('div');
                            lsTicketWrapperChild.style = "background: #c87c0e;border-radius: 1rem; padding-left: 0.5rem;margin-bottom: 0.4rem; padding-top: 0.5rem; padding-bottom: 0.3rem; padding-right: 0.5rem; "
                            lsTicketWrapperChild.id = "lsTicketWrapperChild";
                            let lsTicketWrapper2 = document.querySelector('#lsTicketWrapper');
                            lsTicketWrapper2.appendChild(lsTicketWrapperChild);

                            let EventCountInc = 0;
                            /* $.each(data.Tickets, function (i, v) {*/
                            for (let i in data.Tickets) {
                                var wrapperStyle = 'display:flex;cursor:pointer;';
                                EventCountInc += 1;
                                let v = data.Tickets[i];
                                var eventId = i.split('|')[0];
                                var eventName = i.split('|')[1];
                             
                                var CountElem = '<span id="lsTicketcountInner"style="border-radius: 50rem!important;--bs-bg-opacity: 1;background-color: #d51212;transform: translate(-40%,-185%)!important;left: 24%!important;position: absolute!important;display: inline-block;padding: 0.35em 0.65em;font-size: .75em;font-weight: 700;line-height: 1;color: #fff;text-align: center;' +
                                    'white-space: nowrap;vertical-align: baseline;border-radius: 0.25rem;">' + v.length + '</span>';
                                if (v.length == 0) {
                                    CountElem = '';
                                }
                                ticketcount += v.length;
                                var template = document.createElement('div');
                                if (EventCountInc < Object.keys(data.Tickets).length) {
                                    wrapperStyle += 'border-bottom:1px solid #00000042;';
                                }
                                var wrapper = '<div id="' + eventId + '" data-id="SpinEvent" data-eventid="' + eventId + '" data-tokenid="' + data.TokenID + '" style="' + wrapperStyle + '">';
                                var spanIcon = '<span style="' + iconCss + '">' + CountElem + '</span>';
                                var spanText = '<span style="' + textCss + '">' + eventName + '</span>';

                                wrapper += spanIcon + spanText + '</div>';
                                template.innerHTML = wrapper;
                                let lsTicketWrapper1 = document.querySelector('#lsTicketWrapperChild');
                                lsTicketWrapper1.appendChild(template);

                                document.getElementById(eventId).addEventListener("click", SpinEventF);
                            };


                            //let template1 = document.createElement('div');
                            //let iconCss1 = 'height: 50px;width: 50px;background-repeat: no-repeat;background-size: cover;background-position: center center;padding: 25px;';

                            //let ClsBtncss = 'background: linear-gradient(rgb(255, 26, 37), rgb(129, 13, 21));display: inline-block;font-weight: bolder;    line-height: 1.5;    text-align: center;    text-decoration: none;    vertical-align: middle;    cursor: pointer;    -moz-user-select: none;    user-select: none;    padding: 0.375rem 0.75rem;    font-size: 0.7rem;    color: white;    width: 100%;    border-radius: 1rem;    border-color: transparent;    border-top: none;    border-bottom: none;'
                            //let wrapper1 = '<div id="lsCloseBtn"' + ' style="' + ClsBtncss + '">';
                            //let spanIcon1 = '<span style="' + iconCss1 + '"></span>';
                            //let spanText1 = '<span style="' + textCss + '">' + "Close" + '</span>';
                            //wrapper1 += spanIcon1 + spanText1 + '</div>';
                            //template1.innerHTML = wrapper1;

                            let lsTicketWrapper1 = document.querySelector('#lsTicketWrapper');
                            let closebtn1 = document.createElement("button");
                            closebtn1.style = 'background: linear-gradient(rgb(255, 26, 37), rgb(129, 13, 21));display: inline-block;font-weight: bolder;    line-height: 1.5;    text-align: center;    text-decoration: none;    vertical-align: middle;    cursor: pointer;    -moz-user-select: none;    user-select: none;    padding: 0.375rem 0.75rem;    font-size: 0.7em;    color: white;    width: 100%;    border-radius: 1rem;    border-color: transparent;    border-top: none;    border-bottom: none;'
                            closebtn1.innerHTML = "Close All";
                            closebtn1.id = "lsCloseBtn";
                            lsTicketWrapper1.appendChild(closebtn1);

                            document.getElementById("lsCloseBtn").addEventListener("click", AddListenerCloseBtn);
                        }

                        var ticketcount = (data.EventCount != undefined ? data.EventCount : 0);
                        document.querySelector('#lsTicketcount').style.display = 'block';

                        if (ticketcount == 0) {
                            document.querySelector('#btnLuckyspin').style.display = 'none';
                        } else {
                            document.querySelector('#btnLuckyspin').style.display = 'block';
                        }

                        document.querySelector('#lsTicketcount').innerText = ticketcount;

                        TokenID = data.TokenID;
                        EventID = data.EventID;
                        IsPreLogin = data.IsPreLogin;
                        MerchantID = data.MerchantID;
                        InitButtonClickFunction();

                    }
                });
            
          
          
        }
    }, 500);

};

var InitPopContentElem = function (data) {

    if (document.getElementById("PopContentWrapper") != null) {
        document.getElementById("PopContentWrapper").remove();
    }

    var imageURL = URLAddress + 'FileLibrary/' + data.ImageURL;//"/FileLibrary/mention_me_to_Artboard_1.jpg";
    var ReferralCodePos = 'top: 275px; left: 25px;width:360px'
    var URLCodePos = 'top: 370px; left: 25px;width:360px'
    var btnClosePos = 'left: 350px;top: 10px;'
    var rowCss = '--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;display: flex;flex-wrap: wrap;margin-top: calc(-1 * var(--bs-gutter-y));margin-right: calc(-.5 * var(--bs-gutter-x));margin-left: calc(-.5 * var(--bs-gutter-x));';
    if (mobileCheck() || window.matchMedia("(max-width: 767px)").matches) {
        imageURL = URLAddress + 'FileLibrary/' + data.MobileImageURL;//"/FileLibrary/mention_me_to_mobile.jpg";

        ReferralCodePos = 'top: 235px;left:-160px;width:340px'
        URLCodePos = 'top: 350px;left:-160px;width:340px'
        btnClosePos = 'left: 165px;top: 10px;'
    }
    imageURL = imageURL.replace(/ /g, '%20');
    imageURL = imageURL.replace(/\(/g, '%28');
    imageURL = imageURL.replace(/\)/g, '%29');
    var shouldShow = (PopContentData.ImageURL != undefined ? '' : 'display:none');
    var template = document.createElement('div');
    template.setAttribute('id', "PopContentWrapper");
    template.setAttribute('style', "background-color:#544d4d70;position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 99999;" + shouldShow);
    var divRow = '<div class="row rowWidth" style="' + rowCss + 'flex-direction: column; height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 0px;">';
    var divOffSet = ' <div class="" style="position:relative">'
    var mentionmeDetails = '<div id="PopContentDetails"  style="background-position: center;background-size: contain;height:500px;width:1920px;background-repeat: no-repeat;background-image: url(' + imageURL + ');"></div>';
    var btnClose = '<div class="" style="cursor:pointer;background-color:transparent;height: 50px;width: 50px;position: absolute;' + btnClosePos + '" id="btnClosePopContent"></div>';
    var rowContainer = '<div class="row" style="' + rowCss + 'text-align: center;background-color: #ffffff00;position: absolute;top: 0;left: 0;height: 500px;width: 100%;padding-right: calc(var(--bs-gutter-x) * .5);padding-left: calc(var(--bs-gutter-x) * .5);">';
    var rowContent = '<div class="col" style="flex: 1 0 0%;"></div>' +
        ' <div class="col" style="position:relative;flex: 1 0 0%;">' +
        ' <span  style="position: absolute; ' + ReferralCodePos + ' ">' + data.ReferralCode + '</span>' +
        '  <span id="URLCode" style="position: absolute; ' + URLCodePos + ' ">' + data.URL + '?refcode=' + data.ReferralCode + '</span>' +
        btnClose +
        ' </div>'

    template.innerHTML = divRow + divOffSet + mentionmeDetails + rowContainer + rowContent + '</div>' + btnClose + "</div>" + "</div>";
    document.body.appendChild(template);
    document.getElementById("btnClosePopContent").addEventListener("click", btnClosePopContentF);

    let rowWidth = getWidth(".rowWidth", 24);
    document.getElementById("PopContentDetails").style.width = rowWidth + "px";;

    if (mobileCheck() || window.matchMedia("(max-width: 767px)").matches) {
        var popContentWidth = document.getElementById("PopContentDetails").style.width
        if (popContentWidth >= 412) {
            document.getElementById("URLCode").style.top = "100px";
        } else if (popContentWidth >= 360 && popContentWidth < 390) {
            document.getElementById("URLCode").style.top = "350px";
        } else if (popContentWidth >= 320 && popContentWidth < 360) {
            document.getElementById("URLCode").style.top = "332px";
        } else if (popContentWidth >= 390 && popContentWidth < 412) {
            document.getElementById("URLCode").style.top = "355px";
        }

        if (popContentWidth == 360) {
            document.getElementById("URLCode").style.top = "345px";
        }
    }

    function getWidth(popElement, minusPx) {
        elementItem = document.querySelector(popElement);
        var computedStyle = getComputedStyle(elementItem);
        elementWidth = elementItem.clientWidth;   // width with padding
        elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

        return elementWidth - minusPx;
    }

    function btnClosePopContentF() {
        document.querySelector('#btnClosePopContent').style.display = 'none';
        PopContentData = {};
    }

}

//add new here windowlocation
function SpinEventF(e) {
    var _tokenID = e.target.closest("div").dataset.tokenid;
    var _eventID = e.target.closest("div").dataset.eventid;
    var PreviousLocation = document.referrer;
    var CurrentLocation = window.location.origin + '/' //window.location.href;
    var URLobj = {
        TokenID: _tokenID,
        EventID: _eventID,
        IsPreLogin: IsPreLogin,
        SignUPURL: CurrentLocation,
        WindowLocation: window.location.href,
        LicenseKey: gConfig.LicenseKey,
        MerchantID: MerchantID,
     Language: gConfig.Language

    }
    var data = btoa(JSON.stringify(URLobj));
    window.open(URLAddress + 'LuckySpin/LuckySpinApi/Index?data=' + data);
}

window.onload = function () {
    addEventListener('resize', (event) => { });
    InitLuckySpinElem();
    InitPopContentElem(PopContentData);
createPopup();
    onresize = (event) => {

        InitLuckySpinElem();
        InitPopContentElem(PopContentData);
    };



};