document.addEventListener('DOMContentLoaded', function () {
    function toggleBillingFields() {
        const selectedPaymentMethod = document.querySelector('input[name="payment_method"]:checked').value;
        const billingFields = document.querySelectorAll('#billing_postcode_field, #billing_country_field');

        billingFields.forEach(function (field) {
            if (selectedPaymentMethod === 'stripe_cc') {
                field.style.display = 'block'; // Show the fields
                field.querySelector('input, select').setAttribute('required', 'required'); // Add required attribute
            } else {
                field.style.display = 'none'; // Hide the fields
                field.querySelector('input, select').removeAttribute('required'); // Remove required attribute
            }
        });
    }

    // Initial check on page load
    toggleBillingFields();

    // Add event listener for changes in the payment method
    document.querySelectorAll('input[name="payment_method"]').forEach(function (input) {
        input.addEventListener('change', toggleBillingFields);
    });
});
