// change password :
const btnChangePassword = document.getElementById("btnChangePassword");
const formPassword = document.getElementById("formPassword");
const oldPassword = document.getElementById("oldPassword");
const newPassword = document.getElementById("newPassword");
const errorMessage1 = document.getElementById("errorMessage1");
const errorMessage2 = document.getElementById("errorMessage2");
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');

let validChangePassword = false;
formPassword.addEventListener('submit', function (eventForm) {
    if ( div1.classList.contains("success") === true && div2.classList.contains("success") === true) {
        validChangePassword = true;
    }

    if (validChangePassword  === false) {
        eventForm.preventDefault();
    }
});

btnChangePassword.addEventListener("click", function(){
    let oldPasswordValue = oldPassword.value.trim();
    if (oldPasswordValue.length === 0) {

        div1.classList.remove("success");
        errorMessage1.classList.add("show-error-message");

    } else if (oldPasswordValue.length < 8) {

        div1.classList.remove("success");
        errorMessage1.classList.add("show-error-message");

    } else if (oldPasswordValue.length >= 8 ) {
        div1.classList.add("success");
        errorMessage1.classList.remove("show-error-message");
    }

    let newPasswordValue = newPassword.value.trim();
    if (newPasswordValue.length === 0) {

        div2.classList.remove("success");
        errorMessage2.classList.add("show-error-message");

    } else if (newPasswordValue.length < 8) {

        div2.classList.remove("success");
        errorMessage2.classList.add("show-error-message");

    } else if (newPasswordValue.length >= 8) {
        div2.classList.add("success");
        errorMessage2.classList.remove("show-error-message");
    }

});

oldPassword.addEventListener("input", function() {
    let oldPasswordValue = oldPassword.value.trim();
    if (oldPasswordValue.length === 0) {

        div1.classList.remove("success");
        errorMessage1.classList.add("show-error-message");

    } else if (oldPasswordValue.length < 8) {

        div1.classList.remove("success");
        errorMessage1.classList.add("show-error-message");

    } else if (oldPasswordValue.length >= 8 ) {
        div1.classList.add("success");
        errorMessage1.classList.remove("show-error-message");
    }
});

newPassword.addEventListener("input", function() {
    let newPasswordValue = newPassword.value.trim();
    if (newPasswordValue.length === 0) {

        div2.classList.remove("success");
        errorMessage2.classList.add("show-error-message");

    } else if (newPasswordValue.length < 8) {

        div2.classList.remove("success");
        errorMessage2.classList.add("show-error-message");

    } else if (newPasswordValue.length >= 8) {
        div2.classList.add("success");
        errorMessage2.classList.remove("show-error-message");
    }
});

// change username :
const btnChangeUsername = document.getElementById("btnChangeUsername");
const formUsername = document.getElementById("formUsername");
const oldUsername = document.getElementById("oldUsername");
const newUsername = document.getElementById("newUsername");
const errorMessage3 = document.getElementById("errorMessage3");
const errorMessage4 = document.getElementById("errorMessage4");
const div3 = document.getElementById('div3');
const div4 = document.getElementById('div4');

let validChangeUsername= false;
formUsername.addEventListener('submit', function (eventForm) {
    if ( div3.classList.contains("success") === true && div4.classList.contains("success") === true) {
        validChangeUsername = true;
    }

    if (validChangeUsername  === false) {
        eventForm.preventDefault();
    }
});

btnChangeUsername.addEventListener("click", function(){
    let oldUsernameValue = oldUsername.value.trim();
    if (oldUsernameValue.length === 0) {

        div3.classList.remove("success");
        errorMessage3.classList.add("show-error-message");

    } else if (oldUsernameValue.length < 5) {

        div3.classList.remove("success");
        errorMessage3.classList.add("show-error-message");

    } else if (oldUsernameValue.length >= 5) {
        div3.classList.add("success");
        errorMessage3.classList.remove("show-error-message");
    }

    let newUsernameValue = newUsername.value.trim();
    if (newUsernameValue.length === 0) {

        div4.classList.remove("success");
        errorMessage4.classList.add("show-error-message");

    } else if (newUsernameValue.length < 5) {

        div4.classList.remove("success");
        errorMessage4.classList.add("show-error-message");

    } else if (newUsernameValue.length >= 5) {
        div4.classList.add("success");
        errorMessage4.classList.remove("show-error-message");
    }

});

oldUsername.addEventListener("input", function() {
    let oldUsernameValue = oldUsername.value.trim();
    if (oldUsernameValue.length === 0) {

        div3.classList.remove("success");
        errorMessage3.classList.add("show-error-message");

    } else if (oldUsernameValue.length < 5) {

        div3.classList.remove("success");
        errorMessage3.classList.add("show-error-message");

    } else if (oldUsernameValue.length >= 5) {
        div3.classList.add("success");
        errorMessage3.classList.remove("show-error-message");
    }
});

newUsername.addEventListener("input", function() {
    let newUsernameValue = newUsername.value.trim();
    if (newUsernameValue.length === 0) {

        div4.classList.remove("success");
        errorMessage4.classList.add("show-error-message");

    } else if (newUsernameValue.length < 5) {

        div4.classList.remove("success");
        errorMessage4.classList.add("show-error-message");

    } else if (newUsernameValue.length >= 5) {
        div4.classList.add("success");
        errorMessage4.classList.remove("show-error-message");
    }
});

// change Recaptcha :
const btnSetUpRecaptcha = document.getElementById("btnSetUpRecaptcha");
const formRecaptcha = document.getElementById("formRecaptcha");
const modeRecaptcha = document.getElementById("modeRecaptcha");
const typeRecaptcha = document.getElementById("typeRecaptcha");
const errorMessage5 = document.getElementById("errorMessage5");
const errorMessage6 = document.getElementById("errorMessage6");
const div5 = document.getElementById('div5');
const div6 = document.getElementById('div6');

let validSetUpRecaptcha = false;
formRecaptcha.addEventListener('submit', function (eventForm) {
    if ( div5.classList.contains("success") === true && div6.classList.contains("success") === true) {
        validSetUpRecaptcha = true;
    }

    if (validSetUpRecaptcha  === false) {
        eventForm.preventDefault();
    }
});

btnSetUpRecaptcha.addEventListener("click", function(){
    let modeRecaptchaValue = modeRecaptcha.value;
    if(modeRecaptchaValue !== "0") {
        div5.classList.add("success");
        errorMessage5.classList.remove("show-error-message");
    } 
    if (modeRecaptchaValue === "0") {
        div5.classList.remove("success");
        errorMessage5.classList.add("show-error-message");
    } 

    let typeRecaptchaValue = typeRecaptcha.value;
    if(typeRecaptchaValue !== "0") {
        div6.classList.add("success");
        errorMessage6.classList.remove("show-error-message");
    } 
    if (typeRecaptchaValue === "0") {
        div6.classList.remove("success");
        errorMessage6.classList.add("show-error-message");
    } 
 
});

modeRecaptcha.addEventListener("input", function() {
    let modeRecaptchaValue = modeRecaptcha.value;
    if(modeRecaptchaValue !== "0") {
        div5.classList.add("success");
        errorMessage5.classList.remove("show-error-message");
    } 
    if (modeRecaptchaValue === "0") {
        div5.classList.remove("success");
        errorMessage5.classList.add("show-error-message");
    } 

});

typeRecaptcha.addEventListener("input", function() {
    let typeRecaptchaValue = typeRecaptcha.value;
    if(typeRecaptchaValue !== "0") {
        div6.classList.add("success");
        errorMessage6.classList.remove("show-error-message");
    } 
    if (typeRecaptchaValue === "0") {
        div6.classList.remove("success");
        errorMessage6.classList.add("show-error-message");
    } 
});

// change Recaptcha :
const btnSetUpDevices = document.getElementById("btnSetUpDevices");
const formDevices = document.getElementById("formDevices");
const modeDevices = document.getElementById("modeDevices");
const errorMessage7 = document.getElementById("errorMessage7");
const div7 = document.getElementById('div7');

let validSetUpDevices = false;
formDevices.addEventListener('submit', function (eventForm) {
    if (div7.classList.contains("success") === true ) {
        validSetUpDevices = true;
    }

    if (validSetUpDevices  === false) {
        eventForm.preventDefault();
    }
});

btnSetUpDevices.addEventListener("click", function(){
    let modeDevicesValue = modeDevices.value;
    if(modeDevicesValue !== "0") {
        div7.classList.add("success");
        errorMessage7.classList.remove("show-error-message");
    } 
    if (modeDevicesValue === "0") {
        div7.classList.remove("success");
        errorMessage7.classList.add("show-error-message");
    } 
 
});

modeDevices.addEventListener("input", function() {
    let modeDevicesValue = modeDevices.value;
    if(modeDevicesValue !== "0") {
        div7.classList.add("success");
        errorMessage7.classList.remove("show-error-message");
    } 
    if (modeDevicesValue === "0") {
        div7.classList.remove("success");
        errorMessage7.classList.add("show-error-message");
    } 

});


// Change Allowed Countries :
const btnAllowedCountries = document.getElementById("btnAllowedCountries");
const formAllowedCountries = document.getElementById("formAllowedCountries");
const allowedCountries = document.getElementById("allowedCountries");
const errorMessage8 = document.getElementById("errorMessage8");
const div8 = document.getElementById('div8');

let validAllowedCountries = false;
formAllowedCountries.addEventListener('submit', function (eventForm) {
    if (div8.classList.contains("success") === true) {
        validAllowedCountries = true;
    }

    if (validAllowedCountries  === false) {
        eventForm.preventDefault();
    }
});

btnAllowedCountries.addEventListener("click", function(){
    let allowedCountriesValue = allowedCountries.value.trim();
    if (allowedCountriesValue.length === 0) {

        div8.classList.remove("success");
        errorMessage8.classList.add("show-error-message");

    } else if (allowedCountriesValue.length < 2) {

        div8.classList.remove("success");
        errorMessage8.classList.add("show-error-message");

    } else if (allowedCountriesValue.length >= 2) {
        div8.classList.add("success");
        errorMessage8.classList.remove("show-error-message");
    }
});

allowedCountries.addEventListener("input", function() {
    let allowedCountriesValue = allowedCountries.value.trim();
    if (allowedCountriesValue.length === 0) {

        div8.classList.remove("success");
        errorMessage8.classList.add("show-error-message");

    } else if (allowedCountriesValue.length < 2) {

        div8.classList.remove("success");
        errorMessage8.classList.add("show-error-message");

    } else if (allowedCountriesValue.length >= 2) {
        div8.classList.add("success");
        errorMessage8.classList.remove("show-error-message");
    }
});

const menu=document.getElementById("menu"),buttonMenu=document.getElementById("buttonMenu"),buttonIcon=document.getElementById("buttonIcon");buttonMenu.addEventListener("click",()=>{menu.classList.toggle("show-menu"),!0===menu.classList.contains("show-menu")?buttonIcon.className="fa-solid fa-circle-xmark":buttonIcon.className="fa-solid fa-bars"});
const updatePage=document.getElementById("updatePage");updatePage.addEventListener("click",()=>{location.reload()});