function buttonAct(id) {
    return `<button onclick="buttonEdit(${id})">Update</button> <button onclick="buttonRemove(${id})">Delete</button>`
}

var table = $('#table-list').DataTable({
    "ajax": {
        "url": "http://localhost:11000/api/read",
        "type": "POST",
        "dataSrc": "data",
        "contentType": "application/json",
        "data": function(d) {
            // Customize the data payload sent in the POST request
            return JSON.stringify({});
        },
        "error": function (xhr, error, thrown) {
            console.error('Error fetching data:', thrown);
            console.error('Response:', xhr.responseText);
        }
    },
    "columns": [
        {
            "data": "id",
            "render": function(data, type, row) {
                return data;
            }
        },
        {
            "data": "name",
            "render": function(data, type, row) {
                return `<input id="form-edit-name-${row.id}" type="text" value="${data}">`;
            }
        },
        {
            "data": "phone",
            "render": function(data, type, row) {
                return `<input id="form-edit-phone-${row.id}" type="text" value="${data}">`;
            }
        },
        {
            "data": null,
            "render": function(data, type, row) {
                return buttonAct(row.id);
            }
        },
    ],
})

function buttonAdd() {
    var name 	= document.getElementById("form-add-name"	).value;
    var phone 	= document.getElementById("form-add-phone"	).value;
    var url		= "http://localhost:11000/api/create";
    var payload	= {
        "name"	: name,
        "phone"	: phone
    };
    sendHttpRequest(url, "POST", payload, function (error, response) {
        if (error) console.error("Error:", error);
        else {
            table.ajax.reload(null, false); // false means keep the current page
            console.log("JSON Response:", response);
        }
    }, "application/json");
}

function buttonEdit(key){
    var name 	= document.getElementById(`form-edit-name-${key}`	).value;
    var phone 	= document.getElementById(`form-edit-phone-${key}`	).value;
    var url		= "http://localhost:11000/api/update";
    var payload	= {
        "key"	: key,
        "name"	: name,
        "phone"	: phone
    };
    sendHttpRequest(url, "POST", payload, function (error, response) {
        if (error) console.error("Error:", error);
        else {
            table.ajax.reload(null, false); // false means keep the current page
            console.log("JSON Response:", response);
        }
    }, "application/json");
    alert("Data telah di Update");
}

function buttonRemove(key){
    var url		= "http://localhost:11000/api/delete";
    var payload	= {
        "key"	: key
    };
    sendHttpRequest(url, "POST", payload, function (error, response) {
        if (error) console.error("Error:", error);
        else {
            table.ajax.reload(null, false); // false means keep the current page
            console.log("JSON Response:", response);
        }
    }, "application/json");
    alert("Data telah di Hapus Selamanya");
}