const btn1 = document.querySelector('#btnNombre');
btn1.addEventListener('click', () => {
    //variable de la petición de datos
    let search_criteria_1 = '-1';
    let search_criteria_2 = 'nombre_completo';
        
    MostrarDatos(search_criteria_1, search_criteria_2,'#nombre');    

})

async function MostrarDatos(id, q, div) {
    console.log('cargando nombre...');

    const div_nombre = document.querySelector(div);
    div_nombre.innerHTML = "";
    console.log(div_nombre);

    //div_nombre.innerHTML = 'Miguel';


    // enviar petición al servidor usando fetch
    const searchData = async () => {
        let searchData = new FormData()
        searchData.append('valor', id)
        searchData.append('query', q)
        try {
            const response = await fetch('./php/consulta.php', {
                method: 'POST',
                body: searchData
            })

            return response.json()

        } catch (error) {
            alert(`${'Hubo un error. Solicitud no procesada. Razones: '}${error.message}`)
            console.log(error)
        }
    }

    // funcion para mostrar los datos
    const showResults = async () => {
        searchData()
            .then(dataResults => {
                console.log(dataResults);
                if (dataResults.no_record === true) {
                    div_nombre.innerHTML = "No encuentra registros"                    
                } else {
                    for (const author of dataResults) {
                        div_nombre.innerHTML = div_nombre.innerHTML + `<p>${author.first_name} ${author.last_name}</p>`                        
                    }                    
                }
                //return dataResults;

                //div_nombre.innerHTML = `${dataResults[0].first_name}`
            })
    }

    showResults();    
}