//Trazabilidad para ver si el JS está ejecutándose correctamente.
//console.log("Cargando formularioUsuario.js");
function cargarNuevoFormularioUsuario() {
    //alert("Formulario de usuario cargado.");






    //Se crea la nueva TABLA
    tablaFormulario = document.createElement("table");

    //Se añaden las clases pertinentes para utilizar adecuadamente BOOTSTRAP.
    listaClases = tablaFormulario.classList;
    listaClases.add("table");
    listaClases.add("table-responsive");
    listaClases.add("border-primary");
    listaClases.add("table-bordered");

    //
    thead = document.createElement("thead");
    filaCabecera = document.createElement("tr");
    titulos = ["ID", "Nombre", "Apellido1", "Apellido2", "Sexo", "Fecha Alta", "Mail", "Móvil", "Login", , "Contraseña", "Activo", "", ""]
    titulos.forEach(e => {
        elemento = document.createElement("th");
        elemento.textContent = e;
        filaCabecera.append(elemento);
    });

    thead.append(filaCabecera);

    tablaFormulario.append(thead);

    fila = document.createElement("tr");

    //
    formulario = document.createElement("form"); //Crear el elemento

    //¿Cómo se crea un elemento en HTML mediante JS?
    //1. Creo el elemento document.createElement("")
    //2. Dar los atributos setAttribute("clave","valor")
    //3. Añadir a un elemento el nuevo elemento'


    //Inserción de atributos al FORMULARIO.
    formulario.method = "POST";
    //PENDIENTE DAR ACCION

    //- Input id
    inputId = document.createElement("input");
    inputId.setAttribute("type", "number");
    inputId.setAttribute("disabled", "");
    inputId.setAttribute("name", "id");



    //- Input Nombre
    inputNombre = document.createElement("input");
    inputNombre.setAttribute("type", "text");
    inputNombre.setAttribute("name", "nombre");
    inputNombre.setAttribute("required", "");

    //- Input Apellido1
    inputApellido1 = document.createElement("input");
    inputApellido1.setAttribute("type", "text");
    inputApellido1.setAttribute("name", "apellido1");

    //- Input Apellido2
    inputApellido2 = document.createElement("input");
    inputApellido2.setAttribute("type", "text");
    inputApellido2.setAttribute("name", "apellido2");

    //SEXO
    selectSexo = document.createElement("select");
    selectSexo.setAttribute("name", "sexo");

    //Creamos los OPTIONS
    option1 = document.createElement("option");
    option1.value = "H"
    option1.textContent = "Hombre";

    option2 = document.createElement("option");
    option2.value = "M"
    option2.textContent = "Mujer";

    selectSexo.append(option1);
    selectSexo.append(option2);

    //- Input FechaAlta
    inputFAlta = document.createElement("input");
    inputFAlta.setAttribute("type", "date");
    inputFAlta.setAttribute("name", "FAlta");

    //- Input Email
    inputEmail = document.createElement("input");
    inputEmail.setAttribute("type", "email");
    inputEmail.setAttribute("name", "email");
    inputEmail.setAttribute("required", "");

    //- Input Email
    inputMovil = document.createElement("input");
    inputMovil.setAttribute("type", "number");
    inputMovil.setAttribute("name", "movil");
    inputMovil.setAttribute("required", "");


    //- Input Email
    inputLogin = document.createElement("input");
    inputLogin.setAttribute("type", "text");
    inputLogin.setAttribute("name", "login");
    inputLogin.setAttribute("required", "");


    //- Input Pass
    inputPass = document.createElement("input");
    inputPass.setAttribute("type", "password");
    inputPass.setAttribute("name", "pass");
    inputPass.setAttribute, ("required", "");


    //ACTIVO
    selectActivo = document.createElement("select");
    selectActivo.setAttribute("name", "activo");

    //Creamos los OPTIONS
    option1 = document.createElement("option");
    option1.value = "S"
    option1.textContent = "SI";

    option2 = document.createElement("option");
    option2.value = "N"
    option2.textContent = "NO";

    selectActivo.append(option1);
    selectActivo.append(option2);

    // BOTÓN CONFIRMAR

    inputConfirmar = document.createElement("input");
    inputConfirmar.setAttribute("type", "submit");
    inputConfirmar.setAttribute("name", "Confirmar");
    inputConfirmar.setAttribute("value", "Confirmar");

    //BOTÓN CANCELAR
    inputCancelar = document.createElement("input");
    inputCancelar.setAttribute("type", "submit");
    inputCancelar.setAttribute("name", "Cancelar");
    inputCancelar.setAttribute("value", "Cancelar");

    //Ejemplo en: https://www.w3schools.com/tags/tag_select.asp
    // <select name="cars" id="cars">
    //     <option value="volvo">Volvo</option>
    //     <option value="saab">Saab</option>
    //     <option value="mercedes">Mercedes</option>
    //     <option value="audi">Audi</option>
    // </select>

    // formulario.append(inputId);
    // formulario.append(inputNombre);
    // formulario.append(inputApellido1);
    // formulario.append(inputApellido2);
    // formulario.append(selectSexo);
    // formulario.append(inputFAlta);
    // formulario.append(inputEmail);
    // formulario.append(inputMovil);
    // formulario.append(inputLogin);
    // formulario.append(selectActivo);

    //Celda id
    tdId = document.createElement("td");
    tdId.append(inputId);
    fila.append(tdId);

    //Celda Nombre
    tdNombre = document.createElement("td");
    tdNombre.append(inputNombre);
    fila.append(tdNombre);


    //Celda Apellido1
    tdApellido1 = document.createElement("td");
    tdApellido1.append(inputApellido1);
    fila.append(tdApellido1);

    //Celda Apellido2
    tdApellido2 = document.createElement("td");
    tdApellido2.append(inputApellido2);
    fila.append(tdApellido2);

    //Celda Sexo
    tdSexo = document.createElement("td");
    tdSexo.append(selectSexo);
    fila.append(tdSexo);

    //Celda FAlta
    tdFAlta = document.createElement("td");
    tdFAlta.append(inputFAlta);
    fila.append(tdFAlta);

    //Celda Email
    tdEmail = document.createElement("td");
    tdEmail.append(inputEmail);
    fila.append(tdEmail);

    //Celda Movil
    tdMovil = document.createElement("td");
    tdMovil.append(inputMovil);
    fila.append(tdMovil);

    //Celda Login
    tdLogin = document.createElement("td");
    tdLogin.append(inputLogin);
    fila.append(tdLogin);

    //Celda Pass
    tdPass = document.createElement("td");
    tdPass.append(inputPass);
    fila.append(tdPass);

    //Celda Activo
    tdActivo = document.createElement("td");
    tdActivo.append(selectActivo);
    fila.append(tdActivo);

    tdConfirmar = document.createElement("td");
    // tdConfirmar.textContent = "CONFIRMAR";
    tdConfirmar.append(inputConfirmar);
    fila.append(tdConfirmar);

    tdCancelar = document.createElement("td");
    // tdCancelar.textContent = "CANCELAR";
    tdCancelar.append(inputCancelar);
    fila.append(tdCancelar);




    //tablaFormulario.append(fila);
    bodyTabla = tablaFormulario.children[0]
    bodyTabla.append(fila);

    formulario.append(tablaFormulario);


    //Obtener el div donde se va a cargar la nueva información (FORMULARIO).
    divPrincipal = document.getElementById("formulario");
    divContainer = document.getElementById("container");

    if (!divPrincipal && !divContainer) {
        divPrincipal = document.createElement("div");
        divPrincipal.id = "formulario";
        divPrincipal.setAttribute("class", "my-3");

        divContainer = document.createElement("div");
        divContainer.id = "container";

        divContainer.setAttribute("class", "container");

        divPrincipal.prepend(formulario);
        divContainer.append(divPrincipal);
        document.body.append(divContainer);

    } else {
        divPrincipal.prepend(formulario);

    }



}
function cargarFormularioUsuario(id) {

    //ELIMINA SI HAY TABLAS ANTERIORES
    tabla = document.getElementById("nuevaTabla");
    if (tabla) {
        tabla.remove();
    }


    //OBTENER MÉTODOS
    console.log("El id obtenido es: " + id);

    tablaBuscar = document.getElementById("tablaMostrar");
    tbodyTablaBuscar = tablaBuscar.children[0];
    console.log(tbodyTablaBuscar);
    filaSeleccionada = null;


    //Quiero recorrer todos los hijos del tbody (Filas)
    filas = tbodyTablaBuscar.children
    for (let i = 0; i < filas.length; i++) {
        //tr
        //Quiero obtener el primer hijo del tr, que será el td, que almacenará el id.
        celdaId = filas[i].children[0];
        if (celdaId.textContent == id) {
            filaSeleccionada = filas[i];
        }

    }
    celdas = filaSeleccionada.children




    //Se crea la nueva TABLA
    tablaFormulario = document.createElement("table");
    tablaFormulario.id = "nuevaTabla";

    //Se añaden las clases pertinentes para utilizar adecuadamente BOOTSTRAP.
    listaClases = tablaFormulario.classList;
    listaClases.add("table");
    listaClases.add("table-responsive");
    listaClases.add("border-primary");
    listaClases.add("table-bordered");

    //Se crea el THEAD
    thead = document.createElement("thead");

    //Se crean las fila cabecera.
    filaCabecera = document.createElement("tr");
    titulos = ["ID", "Nombre", "Apellido1", "Apellido2", "Sexo", "Fecha Alta", "Mail", "Móvil", "Login", , "Contraseña", "Activo", "", ""]
    titulos.forEach(e => {
        elemento = document.createElement("th");
        elemento.textContent = e;
        filaCabecera.append(elemento);
    });

    thead.append(filaCabecera);

    tablaFormulario.append(thead);

    //Creación de filas de formulario.
    fila = document.createElement("tr");

    //
    formulario = document.createElement("form"); //Crear el elemento
    formulario.id = "formularioEdicion";

    //¿Cómo se crea un elemento en HTML mediante JS?
    //1. Creo el elemento document.createElement("")
    //2. Dar los atributos setAttribute("clave","valor")
    //3. Añadir a un elemento el nuevo elemento'


    //Inserción de atributos al FORMULARIO.
    formulario.method = "POST";
    //PENDIENTE DAR ACCION

    //- Input id
    inputId = document.createElement("input");
    inputId.value = celdas[0].textContent;
    inputId.setAttribute("type", "number");
    inputId.setAttribute("readonly", "");
    inputId.setAttribute("name", "id");



    //- Input Nombre
    inputNombre = document.createElement("input");
    inputNombre.value = celdas[1].textContent;
    inputNombre.setAttribute("type", "text");
    inputNombre.setAttribute("name", "nombre");
    inputNombre.setAttribute("required", "");


    //- Input Apellido1
    inputApellido1 = document.createElement("input");
    inputApellido1.value = celdas[2].textContent;

    inputApellido1.setAttribute("type", "text");
    inputApellido1.setAttribute("name", "apellido1");

    //- Input Apellido2
    inputApellido2 = document.createElement("input");
    inputApellido2.value = celdas[3].textContent;

    inputApellido2.setAttribute("type", "text");
    inputApellido2.setAttribute("name", "apellido2");

    //SEXO (*)
    selectSexo = document.createElement("select");

    selectSexo.setAttribute("name", "sexo");

    //Creamos los OPTIONS
    option1 = document.createElement("option");
    option1.value = "H"
    option1.textContent = "Hombre";

    option2 = document.createElement("option");
    option2.value = "M"


    option2.textContent = "Mujer";

    selectSexo.append(option1);
    selectSexo.append(option2);
    selectSexo.value = celdas[4].textContent;


    //- Input FechaAlta
    inputFAlta = document.createElement("input");
    inputFAlta.value = celdas[5].textContent;

    inputFAlta.setAttribute("type", "date");
    inputFAlta.setAttribute("name", "FAlta");

    //- Input Email
    inputEmail = document.createElement("input");
    inputEmail.value = celdas[6].textContent;

    inputEmail.setAttribute("type", "text");
    inputEmail.setAttribute("name", "email");
    inputEmail.setAttribute("required", "");

    //- Input Movil
    inputMovil = document.createElement("input");
    inputMovil.value = celdas[7].textContent;

    inputMovil.setAttribute("type", "number");
    inputMovil.setAttribute("name", "movil");
    inputMovil.setAttribute("required", "");

    //- Input Login
    inputLogin = document.createElement("input");
    inputLogin.value = celdas[8].textContent;

    inputLogin.setAttribute("type", "text");
    inputLogin.setAttribute("name", "login");
    inputLogin.setAttribute("required", "");

    //- Input Pass
    inputPass = document.createElement("input");
    inputPass.setAttribute("type", "password");
    inputPass.setAttribute("name", "pass");
    inputPass.setAttribute("required", "");

    //ACTIVO (*)
    selectActivo = document.createElement("select");
    selectActivo.setAttribute("name", "activo");


    //Creamos los OPTIONS
    option1 = document.createElement("option");
    option1.value = "S"

    option1.textContent = "SI";

    option2 = document.createElement("option");
    option2.value = "N"
    option2.textContent = "NO";

    selectActivo.append(option1);
    selectActivo.append(option2);
    selectActivo.value = celdas[9].textContent;

    // BOTÓN EDICIÓN
    inputConfirmar = document.createElement("input");
    inputConfirmar.setAttribute("type", "submit");
    inputConfirmar.setAttribute("name", "Editar");
    inputConfirmar.setAttribute("value", "Editar");

    //BOTÓN CANCELAR
    inputCancelar = document.createElement("input");
    inputCancelar.setAttribute("type", "submit");
    inputCancelar.setAttribute("name", "Cancelar");
    inputCancelar.setAttribute("value", "Cancelar");

    
    //Celda id
    tdId = document.createElement("td");
    tdId.append(inputId);
    fila.append(tdId);

    //Celda Nombre
    tdNombre = document.createElement("td");
    tdNombre.append(inputNombre);
    fila.append(tdNombre);


    //Celda Apellido1
    tdApellido1 = document.createElement("td");
    tdApellido1.append(inputApellido1);
    fila.append(tdApellido1);

    //Celda Apellido2
    tdApellido2 = document.createElement("td");
    tdApellido2.append(inputApellido2);
    fila.append(tdApellido2);

    //Celda Sexo
    tdSexo = document.createElement("td");
    tdSexo.append(selectSexo);
    fila.append(tdSexo);

    //Celda FAlta
    tdFAlta = document.createElement("td");
    tdFAlta.append(inputFAlta);
    fila.append(tdFAlta);

    //Celda Email
    tdEmail = document.createElement("td");
    tdEmail.append(inputEmail);
    fila.append(tdEmail);

    //Celda Movil
    tdMovil = document.createElement("td");
    tdMovil.append(inputMovil);
    fila.append(tdMovil);

    //Celda Login
    tdLogin = document.createElement("td");
    tdLogin.append(inputLogin);
    fila.append(tdLogin);

    //Celda Pass
    tdPass = document.createElement("td");
    tdPass.append(inputPass);
    fila.append(tdPass);

    //Celda Activo
    tdActivo = document.createElement("td");
    tdActivo.append(selectActivo);
    fila.append(tdActivo);

    tdConfirmar = document.createElement("td");
    // tdConfirmar.textContent = "CONFIRMAR";
    tdConfirmar.append(inputConfirmar);
    fila.append(tdConfirmar);

    tdCancelar = document.createElement("td");
    // tdCancelar.textContent = "CANCELAR";
    tdCancelar.append(inputCancelar);
    fila.append(tdCancelar);


    //tablaFormulario.append(fila);
    bodyTabla = tablaFormulario.children[0]
    bodyTabla.append(fila);

    formulario.append(tablaFormulario);

    //Se crea un elemento informativo
    divError = document.createElement("div");
    divError.style = "border: 1px solid gray; background-color: lightcoral; color: white; padding: 2%; border-radius: 7.5px";
    divError.style.display = "none";

    divExito = document.createElement("div");
    divExito.style = "border: 1px solid gray; background-color: lightgreen; color: black; padding: 2%; border-radius: 7.5px";
    divExito.style.display = "none";

    formulario.append(divError);
    formulario.append(divExito);


    //Obtener el div donde se va a cargar la nueva información (FORMULARIO).
    divPrincipal = document.getElementById("formulario");
    divContainer = document.getElementById("container");

    if (!divPrincipal && !divContainer) {
        divPrincipal = document.createElement("div");
        divPrincipal.id = "formulario";
        divPrincipal.setAttribute("class", "my-3");

        divContainer = document.createElement("div");
        divContainer.id = "container";

        divContainer.setAttribute("class", "container");

        divPrincipal.prepend(formulario);
        divContainer.append(divPrincipal);
        document.body.append(divContainer);

    } else {
        divPrincipal.prepend(formulario);

    }

    formulario.onsubmit = async function () {
        event.preventDefault();


        console.log(inputLogin.value);

        const url = 'comprobarLogin.php';
        try {
            const respuesta = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ login: inputLogin.value, id: inputId.value })
            });
            if (!respuesta.ok) {
                const errorData = await respuesta.json();
                throw new Error(`Error del servidor: ${respuesta.status} - ${errorData.message}`);
            }

            const resultado = await respuesta.json();
            if (resultado.status == "OK") {
                //MÁS VALIDACIONES
                if (validarEmail(inputEmail.value)) {
                    editarUsuario();
                } else {
                    divError.textContent = "ERROR! El email introducido no es correcto.";
                    divError.style.display = "block";


                }
            }
            if (resultado.status == "!OK") {
                //MÁS VALIDACIONES
                divError.textContent = resultado.message;
                divError.style.display = "block";

            }
        } catch (error) {

            div.textContent = "ERROR! No pasa la validación";
        }
    };
}
function validarEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}
async function editarUsuario() {
    const url = 'editarUsuario.php';

    try {
        const respuesta = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id: inputId.value, nombre: inputNombre.value,
                apellido1: inputApellido1.value,
                apellido2: inputApellido2.value, sexo: selectSexo.value, FAlta: inputFAlta.value,
                email: inputEmail.value, movil: inputMovil.value, login: inputLogin.value,
                pass: inputPass.value, activo: selectActivo.value, Editar: 'editar'
            })
        });
        if (!respuesta.ok) {
            const errorData = await respuesta.json();
            throw new Error(`Error del servidor: ${respuesta.status} - ${errorData.message}`);
        }

        const resultado = await respuesta.json();
        if (resultado.status == "!OK") {

            console.log(resultado.message);
        } else {
            divExito.textContent = "Éxito. Usuario editado correctamente.";
            divExito.style.display = "block";

            //Actualización de valores
            //1. Encontrar la fila de la que se trata
            filas = tablaBuscar.children[0].children;
            //console.log(filas);
            for (const fila of filas) {
                if (fila.children[0].textContent == inputId.value) {
                    console.log(fila);

                    fila.children[1].textContent = inputNombre.value;
                    fila.children[2].textContent = inputApellido1.value;
                    fila.children[3].textContent = inputApellido2.value;
                    fila.children[4].textContent = selectSexo.value;
                    fila.children[5].textContent = inputFAlta.value;
                    fila.children[6].textContent = inputEmail.value;
                    fila.children[7].textContent = inputMovil.value;
                    fila.children[8].textContent = inputLogin.value;
                    fila.children[9].textContent = selectActivo.value;






                    fila.children[0].style = "background-color: lightblue";
                    fila.children[1].style = "background-color: lightblue";
                    fila.children[2].style = "background-color: lightblue";
                    fila.children[3].style = "background-color: lightblue";
                    fila.children[4].style = "background-color: lightblue";
                    fila.children[5].style = "background-color: lightblue";
                    fila.children[6].style = "background-color: lightblue";
                    fila.children[7].style = "background-color: lightblue";
                    fila.children[8].style = "background-color: lightblue";
                    fila.children[9].style = "background-color: lightblue";
                    fila.children[10].style = "background-color: lightblue";
                    fila.children[11].style = "background-color: lightblue";

                }
            }

        }


    } catch (error) {

        console.error("Error en la aplicación");
    }
}


function ejemploH5() {
    //alert("Formulario de usuario cargado.");

    //Obtener el div donde se va a cargar la nueva información (FORMULARIO).
    divPrincipal = document.getElementById("formulario");
    var h5 = document.createElement("h5");//<h5></h5>
    h5.textContent = "PEPITO"; //<h5>PEPITO</h5>
    divPrincipal.append(h5); //Confirmación de que el nuevo elemento se añade debajo del divPrincipal 
}

