(function () {
    const showFloating = document.querySelectorAll(".show-floating");
    const floatingLicense = document.querySelectorAll(".floating-license");
    const aboutLicense = document.querySelectorAll(".more-about-license");
    const knowMore = document.querySelectorAll(".know-more");
    const viewportWidth = window.innerWidth;
    const radios = document.querySelectorAll('input[type=radio][name="radio"]');
    const price = document.querySelectorAll(".price");
    const period = document.querySelectorAll(".period");
    const buttons = document.querySelectorAll(".table-button");
    const wrapper = document.querySelectorAll(".wrapper");

    for (let i = 0; i < showFloating.length; i++) {
        showFloating[i].onclick = () => {
            if (floatingLicense[i].offsetHeight === 0) {
                floatingLicense[i].classList.add("partially-opened")
            } else {
                floatingLicense[i].classList.remove("partially-opened")
                floatingLicense[i].classList.remove("fully-opened")
                if (i === 0) {
                    wrapper[1].classList.remove("is-open");
                } else {
                    wrapper[3].classList.remove("is-open");
                }
            }
        }
    }

    function showHide(i) {
        if (i % 2 === 0) {
            if (window.getComputedStyle(aboutLicense[i]).height === "0px") {
                wrapper[i].classList.add("is-open");
            } else {
                wrapper[i].classList.remove("is-open");
            }
        } else {
            if (window.getComputedStyle(aboutLicense[i]).height === "0px") {
                wrapper[i].classList.add("is-open");
                floatingLicense[(i - 1) / 2].classList.add("fully-opened");
            } else {
                wrapper[i].classList.remove("is-open");
                floatingLicense[(i - 1) / 2].classList.remove("fully-opened");
            }
        }
    }

    knowMore.forEach((button, j) => {
        button.onclick = () => showHide(j);
    });

    const prices = {
        'one-year': ['2005', '4037', '4037', '8102'],
        'lifetime': ['4944', '10024', '10024', '20186'],
        'three-month': ['742', '1511', '1895', '3021'],
    };

    const periods = {
        'one-year': [' / 1 yıl'],
        'lifetime': [' daima'],
        'three-month': [' / üç ay'],
    };

    const linkIds = {
        'one-year': ['94989', '94994', '94990', '94995'],
        'lifetime': ['94985', '94987', '94986', '94988'],
        'three-month': ['94992', '94996', '94993', '94997'],
    };
    
    function updatePricesAndLinks(radioId) {
        const priceValues = prices[radioId];
        const periodValue = periods[radioId][0];
        const linksValues = linkIds[radioId];
        const length = Math.min(priceValues.length, linksValues.length);
        for (let i = 0; i < length; i++) {
            price[i].innerHTML = `${priceValues[i]}`;
            period[i].innerHTML = `${periodValue}`;
            buttons[i].setAttribute('href', 'https://store.payproglobal.com/checkout?products[1][id]=' + linksValues[i] + '&_gl=1');
        }
    }

    radios.forEach((radio) => {
        const defaultValue = "one-year";
        if (radio.checked && radio.id === defaultValue) {
            updatePricesAndLinks(defaultValue);
        }
        radio.addEventListener('change', () => {
            if (radio.checked) {
                const radioId = radio.id;
                updatePricesAndLinks(radioId);
            }
        })
    })
}());