const openCity = (evt, cityName) =>{
let i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++)
{
  tabcontent[i].style.display = "none"
}
tablinks = document.getElementsByClassName("tablinks");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}document.getElementById(cityName).style.display = "block";evt.currentTarget.className += " active";
}

window.addEventListener('load', (e) => {
    let showball = document.querySelector('#showball');
    showball.addEventListener('click', function () {
        document.querySelector(".modal-content-custom").classList.add("modal-content-show");
        document.querySelector("#myForm").classList.add("modal-bg-show");
    })
    document.querySelector('#myForm').addEventListener('click', function () {
        document.querySelector(".modal-content-custom").classList.remove("modal-content-show");
        document.querySelector("#myForm").classList.remove("modal-bg-show");
    })
    if (document.querySelector('.bt-exit')) {
        document.querySelector('.bt-exit').addEventListener('click', function () {
            document.querySelector(".modal-content-custom").classList.remove("modal-content-show");
            document.querySelector("#myForm").classList.remove("modal-bg-show");
        })
    }
})

function myFunction(browser) {
    var checkboxes = document.getElementsByName("browser");
    var numberOfCheckedItems = 0;
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            numberOfCheckedItems++;
            if (numberOfCheckedItems == 1) document.getElementById("result1").value = checkboxes[i].value;
            if (numberOfCheckedItems == 2) document.getElementById("result2").value = checkboxes[i].value;
            if (numberOfCheckedItems == 3) document.getElementById("result3").value = checkboxes[i].value;

            if (numberOfCheckedItems == 1) console.log(checkboxes[i].value);
            if (numberOfCheckedItems == 2) console.log(checkboxes[i].value);
            if (numberOfCheckedItems == 3) console.log(checkboxes[i].value);
        }
    }
    if (numberOfCheckedItems > 3) {
        alert("คุณเลือกได้แค่ 3 ทีม");
        return false;
    }
}

function fncSubmit() { //ตรวจสอบฟิลว่าง
    let phoneno = /^0[0-9]{7,9}$/i;
    if (document.formdata.name.value == "") {
        alert('กรุณากรอกชื่อ');
        document.formdata.name.focus();
        return false;
    }
    if (document.formdata.usersbo.value == "") {
        alert('กรุณากรอกยูสเซอร์เนม SBOBET');
        document.formdata.usersbo.focus();
        return false;
    }
    if (document.formdata.tel.value.match(phoneno)) {
        document.formdata.tel.focus();
    } else {
        alert('กรุณากรอกเบอร์โทรศัพท์ให้ถูกต้อง');
        document.formdata.tel.focus();
        return false;
    }
    if (document.formdata.line.value == "") {
        alert('กรุณากรอกไอดีไลน์');
        document.formdata.line.focus();
        return false;
    }
    if (document.formdata.result1.value == "") {
        alert('กรุณาเลือกทีมให้ครบ');
        document.formdata.result1.focus();
        return false;
    }
    if (document.formdata.result2.value == "") {
        alert('กรุณาเลือกทีมให้ครบ');
        document.formdata.result2.focus();
        return false;
    }
    if (document.formdata.result3.value == "") {
        alert('กรุณาเลือกทีมให้ครบ');
        document.formdata.result3.focus();
        return false;
    }
    //console.log( document.formdata );
    sendResult() //ส่งผลการทายเข้า Storage
}

function resetdata() { //ล้างค่าทั้งหมด
    Array.from(document.querySelectorAll('input[name="browser"]'), input => input.checked = false);
    Array.from(document.querySelectorAll('input[type="text"]'), input => input.value = "");
}


const d = new Date();
const chkDate = d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getFullYear()

function sendResult() {
    /*Set data*/
    const objValue = {
        date: chkDate,
        data: []
    };
    document.querySelectorAll('#formdata input[type="text"]').forEach(el => {
        objValue.data.push(el.value);
    });
    localStorage.setItem("tyball_result", JSON.stringify(objValue));
}

//เช็คผลการทาย ครั้งแรก
if (localStorage.getItem("tyball_result") && chkDate == JSON.parse(localStorage.getItem("tyball_result")).date) {
    const getdata = JSON.parse(localStorage.getItem("tyball_result"));
    let show_html = `<div class="ty-result" style="margin-top:10px; margin-bottom:10px; padding: 10px;background-color: #ebebeb;font-size: 1rem;"> <h3 class="ppp">ข้อมูลการทายผลบอล</h3><p style="text-align: center;margin-bottom: 10px;">วันที่ ${getdata.date}</p><div style="margin-bottom: 20px;"> <h4 style="margin-bottom: 10px;">| ข้อมูลผู้เล่น</h4> <div>ชื่อ : <span class="result-play">${getdata.data[0]}</span></div> <div>ชื่อผู้ใช้ SBOBET : <span class="result-play">${getdata.data[1]}</span></div> <div>เบรอร์โทรศัพท์ : <span class="result-play">${getdata.data[2]}</span></div> <div>ID ไลน์ : <span class="result-play">${getdata.data[3]}</span></div> </div> <div style="margin-bottom: 20px;"> <h4 style="margin-bottom: 10px;">| ทีมที่เลือก</h4> <div>1. <span id="">${getdata.data[4]}</span></div> <div>2. <span class="result-play">${getdata.data[5]}</span></div> <div>3. <span class="result-play">${getdata.data[6]}</span></div>`;
    document.querySelector('.modal-content-custom').innerHTML = show_html;
    document.querySelector('.data-result').innerHTML = '<input type="button" name="button" id="showball" style="background: #ef8f21 !important;" value="ข้อมูลทายผล">';
}

fetch('https://www.sbotop.ai/wp-content/custom_codes/2600-php-default.php').then(res => res.text()).then(data => {
    document.querySelector('#gameball').innerHTML = data;
})