const radios = document.querySelectorAll('input[name="mail_mode"]');
const smtpFields = document.getElementById("smtp-fields");
const ewsFields = document.getElementById("ews-fields");
const outlookInfo = document.getElementById("outlook-info");

function toggleFields() {
    const selected = document.querySelector('input[name="mail_mode"]:checked');
    if (!selected) return;
    const mode = selected.value;
    smtpFields.style.display = mode === "smtp" ? "block" : "none";
    ewsFields.style.display = mode === "ews" ? "block" : "none";
    outlookInfo.style.display = mode === "outlook" ? "block" : "none";

    document.querySelectorAll("#smtp-fields input, #ews-fields input").forEach(input => {
        input.disabled = mode === "outlook"
            || (input.closest("#smtp-fields") && mode !== "smtp")
            || (input.closest("#ews-fields") && mode !== "ews");
    });
    document.querySelectorAll("#common-fields input").forEach(input => {
        input.disabled = mode === "outlook";
    });
}

radios.forEach(radio => radio.addEventListener("change", toggleFields));
toggleFields();