document.addEventListener('DOMContentLoaded', function(){
    form = document.getElementById('form');
    const contrasena = document.getElementById('contrasena');
    const contrasenaVerificacion = document.getElementById('contrasena_verificacion');
    const btnSubmit = document.getElementById('submit');

    const togglePassword = document.getElementById('togglePassword');
    togglePassword.addEventListener('click', function(e) {
            const type = contrasena.getAttribute('type') === 'password' ? 'text' : 'password';
            contrasena.setAttribute('type', type);
            const icon = togglePassword.querySelector('i');
            if (type === 'text') {
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            } else {
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }

        }
    );

    btnSubmit.addEventListener('click', function(event){
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        event.preventDefault();

        const c1 = contrasena.value;
        const c2 = contrasenaVerificacion.value;
        if (c1 === c2) {

            const usuario = document.getElementById('usuario').value;

            const regex = /^[a-zA-Z0-9]+$/;
            if (!regex.test(usuario)) {
                alert("Nombre de usuario no valido.");
                return;
            }

            const id = document.getElementById('id').value;
            const data = new FormData();
            data.append("id", id);
            data.append("usuario", usuario);
            data.append("contrasena", c1);

            fetch('../controllers/actualizarUsuario.php', {
                method: 'POST',
                body: data
            })
            .then(response => response.json())
            .then(data => {
                if (data.estado === "exitoso") {
                    alert(data.mensaje);
                } else if (data.estado === "error") {
                    alert("Error, intentelo más tarde.");
                    console.log(data.mensaje);
                } else {
                    alert("Error inesperado, intentelo más tarde.");
                    console.log(data);
                }
                window.location.href = "control-usuarios.php";
            })
        } else {
            alert("Las contraseñas no coinciden");
        }
    })
})