dasdsa

document.addEventListener('DOMContentLoaded', () => {
    fetch('http://127.0.0.1:5000/getAll') // , headers
        .then(response => response.json())
        .then(data => loadHTMLTable(data['data']));

});

document.querySelector('table tbody').addEventListener('click', (event) => {
    // console.log(event.target);
    if (event.target.className === 'delete-row-btn') {
        deleteRowById(event.target.dataset.id);
    }
    if (event.target.className === 'edit-row-btn') {
        handleEditRow(event.target.dataset.id);
    }
});

const updateBtn = document.querySelector('#update-row-btn');

function deleteRowById(id) {
    fetch('http://127.0.0.1:5000/delete/' + id, {
        method: 'DELETE'
    })
        .then(response => response.json())
        .then(data => {
            if (data.success)
                location.reload();
        });
}

function handleEditRow(id) {
    const updateSection = document.querySelector('#update-row');
    updateSection.hidden = false;
  const updateIdName = document.querySelector('#update-row-btn').dataset.id = id;


updateBtn.onclick = () => {
    const updateNameInput = document.querySelector('#update-name-input');
    console.log(updateNameInput);

    fetch('http://127.0.0.1:5000/update', {
        method: 'PATCH',
        headers: {
            'Content-type': 'application/json'
        },
        body: JSON.stringify({
            id: updateNameInput.dataset.id,
            name: updateNameInput.value
        })
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        })
}
}
const addBtn = document.querySelector('#add-name-btn');

addBtn.onclick = () => {
    const nameInput = document.querySelector('#name-input');
    const name = nameInput.value;
    nameInput.value = '';

    fetch('http://127.0.0.1:5000/insert', {
        headers: {
            'Content-type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify({ name: name })
    })
        .then(response => response.json())
        .then(data => insertRowIntoTable(data['data']));

}

function insertRowIntoTable(data) {
    console.log(data);
    const table = document.querySelector('table tbody');
    const isTableData = table.querySelector('.no-data');

    let tableHtml = "<tr>";

    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            if (key === 'dateAdded') {
                data[key] = new Date(data[key]).toLocaleString();
                //data[key] = new Date(data[key].toLocaleString());
            }
            tableHtml += `<td>${data[key]}</td>`;
        }
    }


    tableHtml += `<td><button class="delete-row-btn" data-id=${data.id}>Delete</td>`;
    tableHtml += `<td><button class="edit-row-btn" data-id=${data.id}>Edit</td>`;

    tableHtml += "</tr>";

    if (isTableData) { // if its true
        table.innerHTML = tableHtml;
    } else {
        const newRow = table.insertRow();
        newRow.innerHTML = tableHtml;
    }
}

function loadHTMLTable(data) {
    const table = document.querySelector('table tbody');


    // console.log(data);

    if (data.length === 0) {
        table.innerHTML = '<tr><td class="no-data" colspan="5">No Data</td></tr>';
        return;
    }

    let tableHtml = '';

    data.forEach(({ id, name, dateAdded }) => { // site_title
        tableHtml += '<tr>';
        tableHtml += `<td>${id}</td>`;
        tableHtml += `<td>${name}</td>`;
        // tableHtml += `<td>${site_title}</td>`;
        tableHtml += `<td>${new Date(dateAdded).toLocaleString()}</td>`;  // tableHtml += `<td>${dateAdded}</td>`;
        tableHtml += `<td><button class="delete-row-btn" data-id=${id}>Delete</td>`;
        tableHtml += `<td><button class="edit-row-btn" data-id=${id}>Edit</td>`;
        tableHtml += '</tr>';
    });


    table.innerHTML = tableHtml;
}