script.js

document.addEventListener('DOMContentLoaded', function () {
    // Evento para enviar datos con Fetch
    document.getElementById('buttonFetch').addEventListener('click', function (event) {
        event.preventDefault();

        const name = document.getElementById('name').value.trim(); //<-- Se utilza Trim para evitar falsos positivos
        const lastName = document.getElementById('lastName').value.trim();
        const gender = document.getElementById('gender').value.trim();
        const date = document.getElementById('date').value.trim();

        // Validaciones de los campos
        if (name === '') {
            alert('El campo "Name" no puede estar vacío');
            return;
        }
        if (lastName === '') {
            alert('El campo "Last Name" no puede estar vacío');
            return;
        }
        if (gender === '' || gender === 'Choose...') {
            alert('Seleccione un género válido');
            return;
        }
        if (date === '') {
            alert('El campo "Date" no puede estar vacío');
            return;
        }

        const data = {
            name: name,
            lastName: lastName,
            gender: gender,
            date: date
        };

        fetch('conexion.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.text())
            .then(data => {
                console.log('Success:', data);
                alert('Datos enviados con éxito');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al enviar los datos');
            });
    });

    // Evento para enviar datos con AJAX
    document.getElementById('buttonAjax').addEventListener('click', function (event) {
        event.preventDefault();

        const name = document.getElementById('name').value.trim();
        const lastName = document.getElementById('lastName').value.trim();
        const gender = document.getElementById('gender').value.trim();
        const date = document.getElementById('date').value.trim();

        // Validaciones de los campos
        if (name === '') {
            alert('El campo "Name" no puede estar vacío');
            return;
        }
        if (lastName === '') {
            alert('El campo "Last Name" no puede estar vacío');
            return;
        }
        if (gender === '' || gender === 'Choose...') {
            alert('Seleccione un género válido');
            return;
        }
        if (date === '') {
            alert('El campo "Date" no puede estar vacío');
            return;
        }

        const data = {
            name: name,
            lastName: lastName,
            gender: gender,
            date: date
        };

        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'conexion.php', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log('Success:', xhr.responseText);
                alert('Datos enviados con AJAX');
            } else {
                console.error('Error:', xhr.statusText);
                alert('Error al enviar los datos con AJAX');
            }
        };
        xhr.send(JSON.stringify(data));
    });

    // Evento para eliminar datos con AJAX
    document.getElementById('btn-eliminar-ajax').addEventListener('click', function (event) {
        event.preventDefault();

        const id = document.getElementById('id-eliminar').value.trim();

        // Validación del campo ID
        if (id === '') {
            alert('Ingrese un ID válido para eliminar');
            return;
        }

        const xhr = new XMLHttpRequest();
        xhr.open('DELETE', `conexion.php?id=${id}`, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log('Registro eliminado:', xhr.responseText);
                alert('Registro eliminado con éxito');
            } else {
                console.error('Error:', xhr.statusText);
                alert('Error al eliminar el registro');
            }
        };
        xhr.send();
    });

    // Evento para eliminar datos con Fetch
    document.getElementById('btn-eliminar-php').addEventListener('click', function (event) {
        event.preventDefault();

        const id = document.getElementById('id-eliminar').value.trim();

        // Validación del campo ID
        if (id === '') {
            alert('Ingrese un ID válido para eliminar');
            return;
        }

        fetch(`conexion.php?id=${id}`, {
            method: 'DELETE'
        })
            .then(response => response.text())
            .then(data => {
                console.log('Registro eliminado:', data);
                alert('Registro eliminado con éxito');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al eliminar el registro');
            });
    });
});

//METODO ACTUALIZAR MEDIANTE FETCH
document.getElementById('btn-actualizar-php').addEventListener('click', function (event) {
    event.preventDefault();

    const id = document.getElementById('id-actualizar').value.trim();
    const newName = document.getElementById('nombre-actualizar').value.trim();

    if (id === '' || newName === '') {
        alert('Debe ingresar el ID y el nuevo nombre.');
        return;
    }

    const formData = new FormData();
    formData.append('id', id);
    formData.append('name', newName);

    fetch('conexion.php', {
        method: 'POST',
        body: formData
    })
        .then(response => response.text())
        .then(data => {
            console.log('Actualización con FETCH:', data);
            alert(data);
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al actualizar el registro con FETCH');
        });
});

//ACTUALIZAR DATOS CON AJAX
document.getElementById('btn-actualizar-ajax').addEventListener('click', function (event) {
    event.preventDefault();

    const id = document.getElementById('id-actualizar').value.trim();
    const newName = document.getElementById('nombre-actualizar').value.trim();

    if (id === '' || newName === '') {
        alert('Debe ingresar el ID y el nuevo nombre.');
        return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'conexion.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log('Actualización con AJAX:', xhr.responseText);
            alert(xhr.responseText);
        } else {
            console.error('Error:', xhr.statusText);
            alert('Error al actualizar el registro con AJAX');
        }
    };
    xhr.send('id=' + id + '&name=' + newName);
});

// Botón para imprimir datos con AJAX
document.getElementById('printAjax').addEventListener('click', function () {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'conexion.php', true); // Crear un nuevo endpoint en tu PHP para obtener los datos
    xhr.onload = function () {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            displayData(data); // Función para mostrar los datos en la sección
            console.log(data);
        } else {
            alert('Error al obtener los datos con AJAX');
        }
    };
    xhr.send();
});

document.getElementById('printFetch').addEventListener('click', function () {
    fetch('conexion.php') // Mismo endpoint para obtener los datos
        .then(response => response.json())
        .then(data => {
            displayData(data); // Función para mostrar los datos en la sección
            console.log(data);
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al obtener los datos con Fetch');
        });
});

// Función para mostrar los datos en la sección #print-section
function displayData(data) {
    const printSection = document.getElementById('print-section');
    printSection.innerHTML = ''; // Limpiar contenido previo

    if (data.length === 0) {
        printSection.innerHTML = '<p>No hay datos disponibles.</p>';
        return;
    }

    const table = document.createElement('table');
    table.classList.add('table', 'table-striped');
    const thead = document.createElement('thead');
    thead.innerHTML = `
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Género</th>
            <th>Fecha</th>
        </tr>`;
    table.appendChild(thead);

    const tbody = document.createElement('tbody');
    data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${row.id}</td>
            <td>${row.name}</td>
            <td>${row.lastName}</td>
            <td>${row.gender}</td>
            <td>${row.date}</td>`;
        tbody.appendChild(tr);
    });
    table.appendChild(tbody);

    printSection.appendChild(table);
}