jQuery(document).ready(function($) {
    $('select').change(function() {
        setTimeout(function() {
            var variation_id = $('input[name="variation_id"]').val();

            if (variation_id && variation_id !== "0") {
                $.ajax({
                    url: frontendajax.ajaxurl,
                    method: 'POST',
                    data: {
                        action: 'fetch_custom_meta',
                        variation_id: variation_id
                    },
                    success: function(response) {
                        // Assuming the response is a JSON object with the meta data
                        let metaData = JSON.parse(response);
                        const [w_dollars, w_cents] = metaData.weekly_rate.split('.');
                        const [m_dollars, m_cents] = metaData.monthly_rate.split('.');

                        // Update the DOM with the new meta data
                        $("#Weekly h2 span.price-dollar").text(w_dollars);
                        $("#Weekly h2 span.price-cents").text("." + w_cents);
                        $("#Weekly .weekly-cash-price").text("$" + metaData.cash_price);
                        $("#Weekly .weekly-terms").text(metaData.term + " weeks");
                        $("#Weekly .weekly-rate").text("$" + metaData.weekly_rate + " + tax");
                        $("#Weekly .weekly-total-cost").text("$" + metaData.weekly_total_cost + "*");
                        $("#Weekly .weekly-lease-cost").text("$" + metaData.weekly_lease_cost);

                        $("#Monthly h2 span.price-dollar").text(m_dollars);
                        $("#Monthly h2 span.price-cents").text("." + (m_cents));
                        $("#Monthly .monthly-cash-price").text("$" + metaData.cash_price);
                        $("#Monthly .monthly-terms").text(metaData.term_monthly + " months");
                        $("#Monthly .monthly-rate").text("$" + metaData.monthly_rate + " + tax");
                        $("#Monthly .monthly-total-cost").text("$" + metaData.monthly_total_cost + "*");
                        $("#Monthly .monthly-lease-cost").text("$" + metaData.monthly_lease_cost);

                        $("#custom-meta-data div.price").text("$" + metaData.initial_payment + "*");
                        $("#custom-meta-data div.price-due-today-container div.paymentinfo-data-right span.price-dollar").text("$" + metaData.initial_payment + " due today*");
                    }
                });
            }
        }, 20);
    });
});


function openTab(tabName, elmnt) {
    var i, tabcontent, tablinks;

    // pill slider animate
    if (tabName == 'Monthly') {
        var pill = document.getElementById("paymentinfosection-slider");
        pill.classList.remove('active-weekly');
        pill.classList.add('active-monthly');
    }
    else {
        var pill = document.getElementById("paymentinfosection-slider");
        pill.classList.remove('active-monthly');
        pill.classList.add('active-weekly');
    }

    // Hide all tab contents
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Remove 'active' class from all tabs
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove('active');
    }

    // Show the clicked tab's content and set the tab to active
    document.getElementById(tabName).style.display = "block";
    elmnt.classList.add('active');
}

// Set the default tab to be displayed on page load
jQuery(document).ready(function($) {
    openTab('Weekly', $('.tablink')[0]);
});