const barStatus = true;
            const btnPlayTextPOP = "GIRE AGORA";
            const btnUseTextPOP = "CONTINUAR COMPRANDO";
        const hideCode = false;
let htmlpopupSales= `
<div class="popup" style="display:none;">

<a href="#" class="closePopUpBtn"></a>
<div class="desktopPopSection" style="display: block;">
    <div class="row" style="height:100%; width: 100%;margin:0; display: flex; justify-content: center;">
        <div class="col-6" style="display: flex; justify-content: center; align-items: flex-end;flex-direction:column; min-height: 500px; min-width: 410px;">
            <div class="gg-modal">
                <div class="gg-modal__overlay"></div>
                <div class="gg-modal__content">
                    <div class="gg-modal__column">
                        <div class="gg-wheel">
                            <div class="gg-wheel__center"></div>
                            <div class="arrow-wrapper"><div class="arrow-down"></div></div>
                            <ul class="gg-list"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6" style="display: flex; justify-content: center; align-items: flex-start; flex-direction:column; min-width: 410px;">
            <div id="intro_section" class="intro_section_desktop" style="display: block;">
                <div class="text-section">
                    <p class="titleIntroDesktop">SPIN NOW ✨</p>
                    <button class="spin_button" style="width:100%;" id="buttonIntro" onclick="">PLAY NOW</button>
                    <p class="introFullPrice" style="padding-top: 15px">LUCKY TIME ✨</p>
                </div>
            </div>
            <div id="game_section" class="game_section_desktop" style="display: none;">
                <div class="text-section">
                    <p id="titleDesktop">DIGITE SEU E-MAIL</p>
                    <p id="subtitleDesktop">PARA GANHAR SEU CUPOM</p>
                    <input type="text" class="form-control spin_input spinTitle m-1"
                        placeholder="Escreva seu nome completo" name="playerName" id="playerName"
                        style="display: none;">
                    <input type="email" class="form-control spin_input spinTitle m-1 .animateInput"
                        placeholder="Coloque seu e-mail" name="playerEmail" id="playerEmail" style="display: block;">
                    <input type="text" class="form-control spin_input spinTitle m-1" placeholder="Digite seu telefone"
                        name="playerPhone" id="playerPhone" style="display: none;">
                    <p class="text-danger email_unique_desktop" style="display:none; color: red !important;">Este e-mail já foi usado</p>
                    <button class="spin_button" style="width:100%;" id="buttonSpin" onclick="playGame('desktop')">GIRE AGORA</button>
                    <p class="mt-3 disclaimer_text" id="disclaimer_text_value">* Você pode girar a roda apenas uma vez.
* Se você ganhar, seu cupom será válido por 5 dias.
* O cupom só pode ser usado uma vez.</p>
                </div>
            </div>
            <div id="won_section" style="display: none;">
                <div class="text-section" style="display: flex; flex-direction:column; align-items:center">
                    <p class="won_title text-center">PARABÉNS!</p>
                    <p class="won_subtitle text-center">VOCÊ DESBLOQUEOU</p>
                    <p class="won_price text-center" id="prize">25% OFF</p>
                    <p class="won_text">SEU CUPOM DE DESCONTO É:</p>
                    <input type="text" class="form-control won_coupon spin_input" disabled value="ASD-ASD">
                    <button id="useCouponButton" class="spin_button mb-3" style="width:100%;">CONTINUAR COMPRANDO</button>
                    <p class="disclaimer_text text-center" id="won_disclaimer_text_value">Para utilizar este desconto, adicione-o ao campo correspondente no processo de finalização da compra.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mobilePopSection" style="display: none;">
    <div class="row" style="margin:0; display: flex; justify-content: center; flex-direction: column; align-items: center;">
        <div class="col-6" style="display: flex; justify-content: center; align-items: center;flex-direction:column; min-height: 400px;">
            <div class="gg-modal_mobile">
                <div class="gg-modal__overlay"></div>
                <div class="gg-modal__content">
                    <div class="gg-modal__column">
                        <div class="gg-wheel_mobile">
                            <div class="gg-wheel__center_mobile">
                                <div class="game_section_mobile" style="display: flex;">
                                    <img class="mobileImg" src="https://popup-tiendanube.s3.sa-east-1.amazonaws.com/logos/mobile/3bM8ONb7JGQfKIGsKa2EUVv3xJu4PbnY3wSAymg4.png" alt="">
                                    <p class="titleMobile defaultViewTitle" style="display: none">DIGITE SEU E-MAIL</p>
                                    <p class="subTitleMobile defaultViewSubtitle" style="display: none">PARA GANHAR SEU CUPOM</p>
                                    <p class="titleMobile introTitle" style="display: block">SPIN NOW ✨</p>
                                    <p class="subTitleMobile introSubtitle" style="display: block">DESCONTO EXCLUSIVO</p>
                                </div>
                                <div class="won_section_mobile" style="display: none;">
                                    <img class="mobileImg wonMobileImg" src="https://popup-tiendanube.s3.sa-east-1.amazonaws.com/logos/mobile/3bM8ONb7JGQfKIGsKa2EUVv3xJu4PbnY3wSAymg4.png" alt="">
                                    <p class="won_title_mobile">PARABÉNS!</p>
                                    <p style="line-height: 35px; text-align: center; margin: 0;">
                                        <span class="won_subtitle_mobile">VOCÊ DESBLOQUEOU</span>
                                        <br>
                                        <span class="won_price_mobile">25% OFF</span>
                                    </p>
                                    <p class="won_text_mobile">SEU CUPOM DE DESCONTO É:</p>
                                    <p class="won_spin_code">EXAMPLE_CODE</p>
                                    <p class="hidde_code_message_mobile" style="display: none; color: red;">Tu código fue enviado por email<p>
                                </div>
                            </div>
                            <ul class="gg-list_mobile"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6" style="display:flex;justify-content:center;flex-direction:column;align-items:center;">
            <div id="intro_section" class="intro_section_mobile" style="display: block;">
                <div class="text-section_mobile">
                    <button class="spin_button_mobile" id="buttonIntro" onclick="">PLAY NOW</button>
                </div>
            </div>
            <div class="wonButtonSection" style="display: none; max-width:80%;">
                <button id="useCouponButtonMobile" class="spin_button_mobile" style="width:100%; display: block;">CONTINUAR COMPRANDO</button>
                <p class="disclaimer_text_mobile text-center" id="won_disclaimer_text_value" style="display: block;">Para utilizar este desconto, adicione-o ao campo correspondente no processo de finalização da compra.</p>
            </div>
            <div class="text-section default_gameSection" style="display: none;">
                <input type="text" class="form-control spin_input spinTitle m-1"
                    placeholder="Escreva seu nome completo" name="playerNameMobile" id="playerNameMobile"
                    style="display: none;">
                <input type="email" class="form-control spin_input spinTitle m-1"
                    placeholder="Coloque seu e-mail" name="playerEmail" id="playerEmailMobile" style="display: block;">
                <input type="text" class="form-control spin_input spinTitle m-1" placeholder="Digite seu telefone"
                    name="playerPhone" id="playerPhoneMobile" style="display: none;">
                <p class="text-danger email_unique_mobile" style="display:none; color: red !important;">Este e-mail já foi usado</p>
                <button class="spin_button" style="width:100%;" id="buttonSpinMobile" onclick="playGame('mobile')">GIRE AGORA</button>
                <p class="mt-3 disclaimer_text_mobile" id="disclaimer_text_value">* Você pode girar a roda apenas uma vez.
* Se você ganhar, seu cupom será válido por 5 dias.
* O cupom só pode ser usado uma vez.</p>
            </div>
        </div>
    </div>
</div>
</div>

<div id="bar" class="col-lg-12 bar" style="display: none; justify-content: center; align-items:center;">
    <span id="barText1">Seu</span>
    <span id="barText2">código de desconto</span>
    <span style="padding: 5px"><strong class="barCouponCode">{CÓDIGO DEL CUPÓN}</strong></span>
    <span id="barText3">está</span>
    <span id="barText4"> reservado por</span> <strong class="d-flex"><span id="barCounterValue">15</span></strong>
    <button id="barText5" class="discount_btn">USAR CUPOM</button>
    <a href="javascript:void(0);" class="close_bar_btn"></a>
</div>
<div id="barMobile" class="col-lg-12 barMobile" style="display: none;">
    <p style="text-align: center;">
        <span id="barText1">Seu</span>
        <span id="barText2">código de desconto</span>
        <span class="won_coupon_mobile"><strong class="barCouponCodeMobile">{CÓDIGO DEL CUPÓN}</strong></span>
        <br>
        <span id="barText3">está</span>
        <span id="barText4"> reservado por</span> <strong><span id="barCounterValueMobile">15</span></strong>
    </p>
    <a href="javascript:void(0);" class="close_bar_btn_mobile"></a>
    <button id="barText5" class="discount_btn_mobile">USAR CUPOM</button>
</div>

<div onclick=(displayPopUp(true)) class="trigger_simple" style="display: none; z-index: 99990">GIRE A RODA!</div>`;

// Your JavaScript
let winCode;
let winPrize;
let displayedTimes = 0;
    
const sendRouletteMetric = (type) => {
    let url = "https://popupsales.app/send-metrics";
    let data = { roulette_id: 11887, store_id: 1498657, customer_id: null, type: type };
    fetch(url, {
        method: "POST", // or 'PUT'
        body: JSON.stringify(data), // data can be `string` or {object}!
        headers: {
            "Content-Type": "application/json",
        },
    })
        .catch((error) => console.error("Error:", error))
        // .then((response) => console.log("Success:", response));
};



async function  playGame(device){
    document.querySelector('#buttonSpin').disabled = true;
    document.querySelector('#buttonSpinMobile').disabled = true;
    let prizes = [
        {
            'discount': '20% OFF',
            'value': '29949'
        },
        {
            'discount': '12% OFF',
            'value': '29950'
        },
        {
            'discount': '10% OFF',
            'value': '29951'
        },
        {
            'discount': '15% OFF',
            'value': '29952'
        },
        {
            'discount': '12% OFF',
            'value': '29953'
        },
        {
            'discount': '25% OFF',
            'value': '29954'
        },
    ]
    let randomNumber = getRandom();
    if(randomNumber == 1){
        PUSDiscountPrize = prizes[0];
    }else if(randomNumber == 2){
        PUSDiscountPrize = prizes[1];
    }else if(randomNumber == 3){
        PUSDiscountPrize = prizes[2];
    }else if(randomNumber == 4){
        PUSDiscountPrize = prizes[3];
    }else if(randomNumber == 5){
        PUSDiscountPrize = prizes[4];
    }else if(randomNumber == 6){
        PUSDiscountPrize = prizes[5];
    }

    let url = "https://popupsales.app/player-participated";
    let email =
        document.querySelector('#playerEmail').value ||
        document.querySelector('#playerEmailMobile').value;
    let name =
        document.querySelector('#playerName').value ||
        document.querySelector('#playerNameMobile').value ||
        '';
    let phone =
        document.querySelector('#playerPhone').value ||
        document.querySelector('#playerPhoneMobile').value ||
        '';
    
        let data = { roulette_id: 11887, store_id: 1498657, customer_id: null, email: email, coupon_id: PUSDiscountPrize.value, name: name, phone: phone, metric_type: 'hasPlayed' };
        
    if(isAnEmailValidation(email)){
        document.querySelectorAll('.spin_button').forEach(btn => {
            btn.innerHTML = "<i class='fa fa-spinner fa-spin'></i>"
        });
        try {
            let res = await fetch(url, {
                method: "POST", // or 'PUT'
                body: JSON.stringify(data), // data can be `string` or {object}!
                headers: {
                    "Content-Type": "application/json",
                },
            })
                .then(response => response.json())
                .then((data)=> {
                    const PUSDiscountValue = data.code;
                    if(data.exists == true){
                        document.querySelectorAll('.spin_button').forEach(btn => {
                            btn.innerHTML = btnPlayTextPOP;
                        });
                        if(device == "desktop"){
                            document.querySelector('.email_unique_desktop').style.display = 'block';
                        }else{
                            document.querySelector('.email_unique_mobile').style.display = 'block';
                        }
                        document.querySelector('#buttonSpin').disabled = false;
                        document.querySelector('#buttonSpinMobile').disabled = false;
                    }else{
                        document.querySelectorAll('.spin_button').forEach(btn => {
                            btn.innerHTML = btnUseTextPOP;
                        });
                        if(device == "desktop"){
                            spinRoulette(hideCode, randomNumber, PUSDiscountValue);
                            document.querySelector('.email_unique_desktop').style.display = 'none';
                        }else{
                            spinRouletteMobile(hideCode, randomNumber, PUSDiscountValue)
                            document.querySelector('.email_unique_mobile').style.display = 'none';
                        }
                    }
                    
                })
                .catch((error) => {
                    console.log(error);
                });
            } catch (error) {
        }
    }else{
        document.querySelector('#buttonSpin').disabled = false;
        document.querySelector('#buttonSpinMobile').disabled = false;
        animateInputEmail();
    }
};


let weights;
weights = [0.14, 0.25, 0, 0.36, 0.25, 0];
var PUSresults = [1, 2, 3, 4, 5, 6];
function getRandom () {
    var num = Math.random(),
        s = 0,
        lastIndex = weights.length - 1;
    for (var i = 0; i < lastIndex; ++i) {
        s += weights[i];
        if (num < s) {
            return PUSresults[i];
        }
    }
    return PUSresults[lastIndex];
};

element = document.createElement('div');
element.innerHTML = htmlpopupSales;
document.body.appendChild(element);

if (window.innerWidth < 960) {
    // Si es mobile
    document.querySelector('.desktopPopSection').style.display = 'none';
    document.querySelector('.mobilePopSection').style.display = 'block';
}
else {
    // Si es desktop
    document.querySelector('.desktopPopSection').style.display = 'block';
    document.querySelector('.mobilePopSection').style.display = 'none';
    document.querySelector('.popup').style.overflow = 'hidden';
}

let headPOPUP  = document.getElementsByTagName('head')[0];
//agregamos custom css
let linkCustomCss  = document.createElement('link');
linkCustomCss.rel  = 'stylesheet';
linkCustomCss.type = 'text/css';
linkCustomCss.href = 'https://popup-tiendanube.s3.sa-east-1.amazonaws.com/css/roulettes-style.css';
linkCustomCss.media = 'all';
headPOPUP.appendChild(linkCustomCss);

let rouletteCustomCss  = document.createElement('link');
rouletteCustomCss.rel  = 'stylesheet';
rouletteCustomCss.type = 'text/css';
rouletteCustomCss.href = 'https://popup-tiendanube.s3.sa-east-1.amazonaws.com/css/1498657-roulette-11887.css';
rouletteCustomCss.media = 'all';
headPOPUP.appendChild(rouletteCustomCss);

let rouletteLoaderCss = document.createElement('link');
rouletteLoaderCss.rel = 'stylesheet';
rouletteLoaderCss.type = 'text/css';
rouletteLoaderCss.href =
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
rouletteLoaderCss.media = 'all';
headPOPUP.appendChild(rouletteLoaderCss);

const ggListMobile = document.querySelector('.gg-list_mobile');
const drawMobileRouletteWheel = () => {
    let prizes = [
        {
            'discount': '20% OFF',
            'value': '29949'
        },
        {
            'discount': '12% OFF',
            'value': '29950'
        },
        {
            'discount': '10% OFF',
            'value': '29951'
        },
        {
            'discount': '15% OFF',
            'value': '29952'
        },
        {
            'discount': '12% OFF',
            'value': '29953'
        },
        {
            'discount': '25% OFF',
            'value': '29954'
        },
    ]
    prizes.forEach(prize => {
        let newLi = document.createElement('li');
        let strong = document.createElement('strong');
        strong.classList.add('gg-list__content_mobile');
        ggListMobile.appendChild(newLi);
        newLi.appendChild(strong);
        strong.textContent = prize.discount;
    });
}
drawMobileRouletteWheel();    
const ggList = document.querySelector('.gg-list');
const drawRouletteWheel = () => {
    let prizes = [
        {
            'discount': '20% OFF',
            'value': '29949'
        },
        {
            'discount': '12% OFF',
            'value': '29950'
        },
        {
            'discount': '10% OFF',
            'value': '29951'
        },
        {
            'discount': '15% OFF',
            'value': '29952'
        },
        {
            'discount': '12% OFF',
            'value': '29953'
        },
        {
            'discount': '25% OFF',
            'value': '29954'
        },
    ]
    prizes.forEach(prize => {
        let newLi = document.createElement('li');
        let strong = document.createElement('strong');
        strong.classList.add('gg-list__content');
        ggList.appendChild(newLi);
        newLi.appendChild(strong);
        strong.textContent = prize.discount;
    });
}
drawRouletteWheel();

const spinRoulette = (hideCode, randomNumber, PUSDiscountValue) => {
    let prizes = [
        {
            'discount': '20% OFF',
            'value': '29949'
        },
        {
            'discount': '12% OFF',
            'value': '29950'
        },
        {
            'discount': '10% OFF',
            'value': '29951'
        },
        {
            'discount': '15% OFF',
            'value': '29952'
        },
        {
            'discount': '12% OFF',
            'value': '29953'
        },
        {
            'discount': '25% OFF',
            'value': '29954'
        },
    ]
    userHasPlayed = true;
    let playerEmail = document.querySelector('#playerEmail').value;
    window.Perfit && Perfit('identify', {email: playerEmail});
    if(isAnEmailValidation(playerEmail)){
        setCookie('userHasPlayed', true, 365);
        localStorage.setItem('userHasPlayed', true);
        localStorage.setItem('playedDate', new Date);
        const spinButton = document.querySelector('#buttonSpin');
        let degree;
        if(randomNumber == 1){ 
            winCode = PUSDiscountValue
            const rndInt1 = 1440;
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt1;
            document.querySelector('#prize').textContent = prizes[0].discount;
            winPrize = prizes[0].discount
            if(hideCode){
                document.querySelector('.won_coupon').value = "Tu código fue enviado por email";
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = "Tu código fue enviado por email";
                }
            }else{
                document.querySelector('.won_coupon').value = PUSDiscountValue;
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 6){ 
            winCode = PUSDiscountValue
            const rndInt2 = 1140;
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt2;
            document.querySelector('#prize').textContent = prizes[5].discount;
            winPrize = prizes[5].discount
            if(hideCode){
                document.querySelector('.won_coupon').value = "Tu código fue enviado por email";
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = "Tu código fue enviado por email";
                }
            }else{
                document.querySelector('.won_coupon').value = PUSDiscountValue;
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = PUSDiscountValue;
                }
            }
        
        }else if(randomNumber == 5){ 
            winCode = PUSDiscountValue
            const rndInt3 = 1200;
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt3;
            document.querySelector('#prize').textContent = prizes[4].discount;
            winPrize = prizes[4].discount
            if(hideCode){
                document.querySelector('.won_coupon').value = "Tu código fue enviado por email";
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = "Tu código fue enviado por email";
                }
            }else{
                document.querySelector('.won_coupon').value = PUSDiscountValue;
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 4){ 
            winCode = PUSDiscountValue
            const rndInt4 = 1260;
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt4;
            document.querySelector('#prize').textContent = prizes[3].discount;
            winPrize = prizes[3].discount
            if(hideCode){
                document.querySelector('.won_coupon').value = "Tu código fue enviado por email";
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = "Tu código fue enviado por email";
                }
            }else{
                document.querySelector('.won_coupon').value = PUSDiscountValue;
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 3){ 
            winCode = PUSDiscountValue
            const rndInt5 = 1320;
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt5;
            document.querySelector('#prize').textContent = prizes[2].discount;
            winPrize = prizes[2].discount
            if(hideCode){
                document.querySelector('.won_coupon').value = "Tu código fue enviado por email";
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = "Tu código fue enviado por email";
                }
            }else{
                document.querySelector('.won_coupon').value = PUSDiscountValue;
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 2){ 
            winCode = PUSDiscountValue
            const rndInt6 = 1380;
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt6;
            document.querySelector('#prize').textContent = prizes[1].discount;
            winPrize = prizes[1].discount
            if(hideCode){
                document.querySelector('.won_coupon').value = "Tu código fue enviado por email";
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = "Tu código fue enviado por email";
                }
            }else{
                document.querySelector('.won_coupon').value = PUSDiscountValue;
                if(document.querySelector('.barCouponCode')){
                    document.querySelector('.barCouponCode').textContent = PUSDiscountValue;
                }
            }
        }
        ggList.style.transform = 'rotate('+degree+'deg)';
        ggList.style.transitionDuration = '5s'
        spinButton.disabled = true;
        
        setTimeout(function () {
            const gameSection = document.querySelector('#game_section');
            const wonSection = document.querySelector('#won_section');
            gameSection.style.display = 'none';
            wonSection.style.display = 'block';
            document.querySelector('#won_disclaimer_text_value').style.display = 'block';
            ggList.style.transitionDuration = '0s'  
            spinButton.disabled = false;
            if(document.querySelector('.barCouponCode')){
                startTimer();
            }
        }, 5000);
    }else{
        animateInputEmail();
    }
}
const spinRouletteMobile = (hideCode, randomNumber, PUSDiscountValue) => {
    let prizes = [
        {
            'discount': '20% OFF',
            'value': '29949'
        },
        {
            'discount': '12% OFF',
            'value': '29950'
        },
        {
            'discount': '10% OFF',
            'value': '29951'
        },
        {
            'discount': '15% OFF',
            'value': '29952'
        },
        {
            'discount': '12% OFF',
            'value': '29953'
        },
        {
            'discount': '25% OFF',
            'value': '29954'
        },
    ]
    userHasPlayed = true;
    let playerEmail = document.querySelector('#playerEmailMobile').value;
    window.Perfit && Perfit('identify', {email: playerEmail});
    if(isAnEmailValidation(playerEmail)){
        setCookie('userHasPlayed', true, 365);
        localStorage.setItem('userHasPlayed', true);
        const spinButton = document.querySelector('#buttonSpinMobile');
        let degree;
        if(randomNumber == 1){ 
            winCode = PUSDiscountValue
            const rndInt1 = 1440;
            localStorage.setItem('playedDate', new Date);
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt1;
            winPrize = prizes[0].discount
            document.querySelector('.won_price_mobile').textContent = prizes[0].discount;
            if(hideCode){
                document.querySelector('.won_spin_code').textContent = '-';
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = '';
                }
            }else{
                document.querySelector('.won_spin_code').textContent = PUSDiscountValue;
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 6){ 
            winCode = PUSDiscountValue
            const rndInt2 = 1140;
            localStorage.setItem('playedDate', new Date);
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt2;
            winPrize = prizes[5].discount
            document.querySelector('.won_price_mobile').textContent = prizes[5].discount;
            if(hideCode){
                document.querySelector('.won_spin_code').textContent = '-';
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = '';
                }
            }else{
                document.querySelector('.won_spin_code').textContent = PUSDiscountValue;
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 5){ 
            winCode = PUSDiscountValue
            const rndInt3 = 1200;
            localStorage.setItem('playedDate', new Date);
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt3;
            winPrize = prizes[4].discount
            document.querySelector('.won_price_mobile').textContent = prizes[4].discount;
            if(hideCode){
                document.querySelector('.won_spin_code').textContent = '-';
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = '';
                }
            }else{
                document.querySelector('.won_spin_code').textContent = PUSDiscountValue;
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 4){ 
            winCode = PUSDiscountValue
            const rndInt4 = 1260;
            localStorage.setItem('playedDate', new Date);
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt4;
            document.querySelector('.won_price_mobile').textContent = prizes[3].discount;
            winPrize = prizes[3].discount
            if(hideCode){
                document.querySelector('.won_spin_code').textContent = '-';
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = '';
                }
            }else{
                document.querySelector('.won_spin_code').textContent = PUSDiscountValue;
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 3){ 
            winCode = PUSDiscountValue
            const rndInt5 = 1320;
            localStorage.setItem('playedDate', new Date);
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt5;
            document.querySelector('.won_price_mobile').textContent = prizes[2].discount;
            winPrize = prizes[2].discount
            if(hideCode){
                document.querySelector('.won_spin_code').textContent = '-';
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = '';
                }
            }else{
                document.querySelector('.won_spin_code').textContent = PUSDiscountValue;
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = PUSDiscountValue;
                }
            }
        }else if(randomNumber == 2){ 
            winCode = PUSDiscountValue
            const rndInt6 = 1380;
            localStorage.setItem('playedDate', new Date);
            localStorage.setItem('playedPrize', PUSDiscountValue);
            degree = rndInt6;
            document.querySelector('.won_price_mobile').textContent = prizes[1].discount;
            winPrize = prizes[1].discount
            if(hideCode){
                document.querySelector('.won_spin_code').textContent = '-';
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = '';
                }
            }else{
                document.querySelector('.won_spin_code').textContent = PUSDiscountValue;
                if(document.querySelector('.barCouponCodeMobile')){
                    document.querySelector('.barCouponCodeMobile').textContent = PUSDiscountValue;
                }
            }
        }
        ggListMobile.style.transitionDuration = '5s'
        ggListMobile.style.transform = 'rotate('+degree+'deg)';
        spinButton.disabled = true;
        
        setTimeout(function () {
            document.querySelector('.gg-wheel__center_mobile').style.width = '300px';
            document.querySelector('.gg-wheel__center_mobile').style.height = '300px';
            document.querySelector('.game_section_mobile').style.display = 'none';
            document.querySelector('.won_section_mobile').style.display = 'flex';
            document.querySelector('#buttonSpin').style.display = 'none';
            document.querySelector('#useCouponButtonMobile').style.display = 'block';
            document.querySelector('#playerName').style.display = 'none';
            document.querySelector('#playerEmail').style.display = 'none';
            document.querySelector('#playerPhone').style.display = 'none';
            document.querySelector('#disclaimer_text_value').style.display = 'none';
            document.querySelector('#won_disclaimer_text_value').style.display = 'block';
            document.querySelector('.gg-modal_mobile').style.paddingTop = '85px';
            // document.querySelector('#useCouponButtonMobile').parentElement.style.paddingTop = '55px';
            document.querySelector('.wonButtonSection').style.display = 'flex';
            document.querySelector('.default_gameSection').style.display = 'none';
            ggListMobile.style.transitionDuration = '0s'
            spinButton.disabled = false;
            document.querySelector('.wonMobileImg').style.display = 'block';
            document.querySelector('.gg-list_mobile').querySelectorAll('li').forEach(element => {
                element.style.display = 'none';
            });
            if(hideCode){
                document.querySelector('.hidde_code_message_mobile').style.display = 'block';
            }
            if(document.querySelector('.barCouponCodeMobile')){
                startTimerMobile();
            }
        }, 5000);
    }else{
        animateInputEmail();
    }
}
triggerType = 'simple_text'; // borrar esto xq viene de roulettes
let rouleteTriggerStatus;
if(1 == 1){
    rouleteTriggerStatus = true;
}else{
    rouleteTriggerStatus = false;
}
let userHasPlayed = false;

const displayBar = () => {
    if (window.innerWidth < 960) {
        // Si es mobile
        if(document.querySelector('#barMobile')){
            document.querySelector('#barMobile').style.display = 'flex';
        }
    }
    else {
        // Si es desktop
        if(document.querySelector('#bar')){
            document.querySelector('#bar').style.display = 'flex';
        }
    }
}
// if(getCookie('CouponPrize')){
// if(localStorage.getItem('playedPrize')){
//     // document.querySelector('.barCouponCode').textContent = getCookie('CouponPrize');
//     // document.querySelector('.barCouponCodeMobile').textContent = getCookie('CouponPrize');
//     document.querySelector('.barCouponCode').textContent = localStorage.getItem('playedPrize');
//     document.querySelector('.barCouponCodeMobile').textContent = localStorage.getItem('playedPrize');
//     //asginamos los minsdel counter
    
//     if(document.getElementById('trigger_counter_timer_mins')){
//         document.getElementById('trigger_counter_timer_mins').innerHTML =
//         30 + ":" + 00;
//     }
//     displayBar();
// }
if (localStorage.getItem("playedPrize")) {
    //calculamos el tiempo restante de la barra
    let playedTime = localStorage.getItem("playedDate")
    playedTime = new Date(playedTime);
    const barTime = 15;
    // const barExpirationDate = new Date(playedTime.getTime() + barTime*60000);
    let barExpirationDate = new Date ( playedTime );
    barExpirationDate.setMinutes ( playedTime.getMinutes() + barTime );

    if(new Date < barExpirationDate){
        
        let seconds = Math.floor((barExpirationDate - new Date)/1000);
        let minutes = Math.floor(seconds/60);
        let hours = Math.floor(minutes/60);
        let days = Math.floor(hours/24);
        
        hours = hours-(days*24);
        minutes = minutes-(days*24*60)-(hours*60);
        seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);

        if(barStatus){
            document.getElementById('barCounterValueMobile').innerHTML =
            minutes + ":" + seconds;
            document.getElementById('barCounterValue').innerHTML =
            minutes + ":" + seconds;
        }

        startTimer();
        startTimerMobile();
        // document.querySelector('.barCouponCode').textContent = getCookie('CouponPrize');
        // document.querySelector('.barCouponCodeMobile').textContent = getCookie('CouponPrize');
        document.querySelector(".barCouponCode").textContent =
            localStorage.getItem("playedPrize");
    
        document.querySelector(".barCouponCodeMobile").textContent =
            localStorage.getItem("playedPrize");
    
        //asginamos los minsdel counter
        if (document.getElementById("trigger_counter_timer_mins")) {
            document.getElementById("trigger_counter_timer_mins").innerHTML =
                30 + ":" + 00;
        }
        displayBar();
    }else{
        localStorage.removeItem("playedPrize");
        localStorage.removeItem("playedDate");
    }
}
const closePopup = (withBar, withTrigger) => {
    document.querySelector('.popup').style.display = 'none';
    document.body.style.overflow = 'inherit';
    if(withBar){
        displayBar();
    }else{
        if(!userHasPlayed){
            if(rouleteTriggerStatus){ // si trigger esta activo
                switch (triggerType) {
                    case 'simple_text':
                        document.querySelector('.trigger_simple').style.display = 'block';
                        break;
                    case 'icon':
                        document.querySelector('.trigger_icon').style.display = 'block';
                        break;
                    case 'counter':
                        document.querySelector('.trigger_counter').style.display = 'block';
                        break;
                }
            }
        }
    }
    if(withTrigger){
        if(triggerType === 'counter'){
            startTimerCounterTrigger();
        }
    }
}
const popUpCloseBtn = document.querySelector('.closePopUpBtn');
popUpCloseBtn.addEventListener("mouseover", () => {
    popUpCloseBtn.style.transitionDuration = '0.5s'
    popUpCloseBtn.style.transform = 'rotate(180deg)';
    setTimeout(function() {
        popUpCloseBtn.style.transform = 'rotate(0deg)';
    }, 500);
}, false);
popUpCloseBtn.addEventListener('click', () => {
    closePopup(false, true);
})
let rouletteDisplay = getCookie('rouletteDisplay') || localStorage.getItem('rouletteDisplay');
if(!rouletteDisplay){
    rouletteDisplay = false
}
let rouletteDisplayTimes = parseInt(getCookie('rouletteDisplayTimes')) || parseInt(localStorage.getItem('rouletteDisplayTimes')) || 0;


    const stopByImpression = true;
    const checkDisplayHowManyTimes = () => {
        if(stopByImpression){
            const maxdisplayedTimes = 1;
            if(localStorage.getItem('rouletteDisplayTimes')){
                displayedTimes = parseInt(localStorage.getItem('rouletteDisplayTimes'));
            }
            if(!displayedTimes){
                return true;
            }
            if (displayedTimes < maxdisplayedTimes) {
                return true;
            } else {
                return false;
            }
        }else{
            return true;
        }
    }
    

const displayPopUp = (isFromTrigger) => {
    
    if(isFromTrigger){
        //asginamos los minsdel bardesktop
        if(barStatus){
            document.getElementById('barCounterValue').innerHTML =
                15 + ":" + 00;
            document.getElementById('barCounterValueMobile').innerHTML =
                15 + ":" + 00;
        }

        document.body.style.overflow = 'hidden';
        document.querySelector('.popup').style.display = 'flex';
        if(triggerType == 'simple_text'){
            document.querySelector('.trigger_simple').style.display = 'none';
        }
        if(triggerType == 'counter'){
            document.querySelector('.trigger_counter').style.display = 'none';
        }
        if(triggerType == 'icon'){
            document.querySelector('.trigger_icon').style.display = 'none';
        }
        
    }else{
        // if(!getCookie('CouponPrize')){
        if(!localStorage.getItem("playedPrize")){
            if(checkDisplayHowManyTimes('')){
                //asginamos los minsdel bardesktop
                if(barStatus){
                    document.getElementById('barCounterValue').innerHTML =
                        15 + ":" + 00;
                    document.getElementById('barCounterValueMobile').innerHTML =
                        15 + ":" + 00;
                }
                
        if(rouletteDisplayTimes < 1 && !getCookie('userHasPlayed') || !localStorage.getItem('userHasPlayed')){
            document.body.style.overflow = 'hidden';
            document.querySelector('.popup').style.display = 'flex';
            displayedTimes = displayedTimes + 1;
            sendRouletteMetric('impression');
            if(triggerType == 'simple_text'){
                document.querySelector('.trigger_simple').style.display = 'none';
            }
            if(triggerType == 'counter'){
                document.querySelector('.trigger_counter').style.display = 'none';
            }
            if(triggerType == 'icon'){
                document.querySelector('.trigger_icon').style.display = 'none';
            }
            setCookie('rouletteDisplay', true, 365);
            localStorage.setItem('rouletteDisplay', true);
            localStorage.setItem('rouletteDisplayDate', new Date());

            rouletteDisplayTimes += 1;
            setCookie('rouletteDisplayTimes', rouletteDisplayTimes, 365);
            localStorage.setItem('rouletteDisplayTimes', rouletteDisplayTimes);
            
        }
        
            }
        }
    }
}

// función para cerrar el popup cuando hacen click en el botón usar mi descuento
useCouponBtn = document.querySelector('#useCouponButton');
useCouponBtnMobile = document.querySelector('#useCouponButtonMobile');
useCouponBtn.addEventListener('click', closePopup.bind(null, true, false));
useCouponBtnMobile.addEventListener('click', closePopup.bind(null, true, false));


const closeBar = () => {
    localStorage.removeItem("playedPrize");
    localStorage.removeItem("playedDate");
    document.querySelector('#barMobile').style.display = 'none';
    document.querySelector('#bar').style.display = 'none';
    // document.querySelector('#barMobile').remove();
    // document.querySelector('#bar').remove();
}

//Bar Timer Desktop
//asginamos los minsdel bardesktop
function checkSecond(sec) {
    if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
    if (sec < 0) {sec = "59"};
    return sec;
    }

function startTimer() {
    var presentTime = document.getElementById('barCounterValue').innerHTML;
    var timeArray = presentTime.split(/[:]+/);
    var m = timeArray[0];
    var s = checkSecond((timeArray[1] - 1));
    if(s==59){m=m-1}
    if(m<0){
    document.querySelector('#bar').style.display = 'none';
    return
    }
    
    document.getElementById('barCounterValue').innerHTML =
    m + ":" + s;
    setTimeout(startTimer, 1000);
}

function checkSecondMobile(sec) {
    if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
    if (sec < 0) {sec = "59"};
    return sec;
    }

function startTimerMobile() {
    var presentTime = document.getElementById('barCounterValueMobile').innerHTML;
    var timeArray = presentTime.split(/[:]+/);
    var m = timeArray[0];
    var s = checkSecondMobile((timeArray[1] - 1));
    if(s==59){m=m-1}
    if(m<0){
    document.querySelector('#barMobile').style.display = 'none';
    return
    }
    
    document.getElementById('barCounterValueMobile').innerHTML =
    m + ":" + s;
    setTimeout(startTimerMobile, 1000);
}
document.querySelector('.close_bar_btn').addEventListener('click', closeBar);
document.querySelector('.close_bar_btn_mobile').addEventListener('click', closeBar);;

function checkSecondCounterTrigger(sec) {
    if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
    if (sec < 0) {sec = "59"};
    return sec;
    }

function startTimerCounterTrigger() {
    var presentTime = document.getElementById('trigger_counter_timer_mins').innerHTML;
    var timeArray = presentTime.split(/[:]+/);
    var m = timeArray[0];
    var s = checkSecondCounterTrigger((timeArray[1] - 1));
    if(s==59){m=m-1}
    if(m<0){
        document.querySelector('.trigger_counter').style.display = 'none';
    return
    }
    
    document.getElementById('trigger_counter_timer_mins').innerHTML =
    m + ":" + s;
    setTimeout(startTimerCounterTrigger, 1000);
}
//asginamos los minsdel counter
if(document.getElementById('trigger_counter_timer_mins')){
    document.getElementById('trigger_counter_timer_mins').innerHTML =
    30 + ":" + 00;
}

const animateInputEmail = () => {
    document.querySelector('#playerEmail').style.animation = 'shake 0.5s';
    document.querySelector('#playerEmailMobile').style.animation = 'shake 0.5s';
    setTimeout(() => {
        document.querySelector('#playerEmail').style.animation = '';
        document.querySelector('#playerEmailMobile').style.animation = '';
    }, 500)
    return false;
}



const isAnEmailValidation = (email) => {
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
}

if(window.innerWidth > 1024){
    displayPopUp();
}
if(window.innerWidth > 758 && window.innerWidth <= 1024){
    displayPopUp();
}
if(window.innerWidth < 600 && window.innerWidth <= 758){
    displayPopUp();
}

function getCookie(cName) {
    const name = cName + "=";
    const cDecoded = decodeURIComponent(document.cookie); //to be careful
    const cArr = cDecoded .split('; ');
    let res;
    cArr.forEach(val => {
        if (val.indexOf(name) === 0) res = val.substring(name.length);
    })
    return res;
}
function setCookie(cName, cValue, expDays) {
    let date = new Date();
    date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
}
function setCookieMinutes(name,value,minutes) {
    if (minutes) {
        var date = new Date();
        date.setTime(date.getTime()+(minutes*60*1000));
        var expires = "; expires="+date.toGMTString();
    } else {
        var expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}
const spinButton = document.querySelector(".spin_button")
const spinButtonMobile = document.querySelector(".spin_button_mobile");
const switchIntroScreen = () => {
    document.querySelector(".intro_section_desktop").style.display = "none";
    document.querySelector(".intro_section_mobile").style.display = "none";
    document.querySelector(".default_gameSection").style.display = "block";
    document.querySelector(".game_section_desktop").style.display = "flex";
    
}
spinButton.addEventListener("click", switchIntroScreen)
spinButtonMobile.addEventListener("click", switchIntroScreen)
const discountBtn = document.querySelector('.discount_btn');
const barCouponCode = document.querySelector('.barCouponCode');
if(discountBtn){
    discountBtn.addEventListener('click', () => {
        navigator.clipboard.writeText(barCouponCode.textContent);
        let text = discountBtn.textContent;
        discountBtn.textContent = 'Copiado';
        setTimeout(function() {
            discountBtn.textContent = text;
        }, 3000);
    })
}

const discountBtnMobile = document.querySelector('.discount_btn_mobile');
const barCouponCodeMobile = document.querySelector('.barCouponCodeMobile');
if(discountBtnMobile){
    discountBtnMobile.addEventListener('click', () => {
        navigator.clipboard.writeText(barCouponCodeMobile.textContent);
        let text = discountBtnMobile.textContent;
        discountBtnMobile.textContent = 'Copiado';
        setTimeout(function() {
            discountBtnMobile.textContent = text;
        }, 3000);
    })
}
const resizePopupScreen = () => {
    const desktopPopSection = document.querySelector('.desktopPopSection');
    const mobilePopSection = document.querySelector('.mobilePopSection');
    if(window.innerWidth < 800){
        desktopPopSection.style.display = 'none';
        mobilePopSection.style.display = 'block';
        if(userHasPlayed){
            if(document.querySelector('#barMobile').style.display == 'flex' || document.querySelector('#bar').style.display == 'flex'){
                document.querySelector('#bar').style.display = 'none';
                document.querySelector('#barMobile').style.display = 'flex';
            }
        }
    }else{
        desktopPopSection.style.display = 'block';
        mobilePopSection.style.display = 'none';
        if(userHasPlayed){
            if(document.querySelector('#barMobile').style.display == 'flex' || document.querySelector('#bar').style.display == 'flex'){
                if(barStatus){
                    document.querySelector('#barMobile').style.display = 'none';
                    document.querySelector('#bar').style.display = 'flex';
                }
            }
        }
    }
}
window.addEventListener('resize', resizePopupScreen);