var token   = document.getElementById("form-token"      ).value;

var table = $('#table-roles').DataTable({
    "orderCellsTop": true,   // move sorting to top header
    "columnDefs": [
        { "orderable": false, "targets": [3] }  // Disable sorting on the first and fourth columns
    ],
    "ajax": {
        "url": "/api/dashboard/roles/list",
        "type": "POST", // Use POST method
        "dataSrc": "data",
        "contentType": "application/json",
        "data": function(d) {
            // Customize the data payload sent in the POST request
            return JSON.stringify({
                "token": token
            });
        },
        "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 `<span class="d-none">${data}</span><input ${data==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="ID" id="form-edit-id-${data}" value="${data}">`;
            }
        },
        {
            "data": "name",
            "render": function(data, type, row) {
                return `<span class="d-none">${data}</span><input ${row.id==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="Name" id="form-edit-name-${row.id}" value="${data}">`;
            }
        },
        {
            "data": "count",
            "render": function(data, type, row) {
                return `<span class="badge bg-${data==0 ? 'secondary' : 'success'}">${data} User(s)</span>`;
            }
        },
        {
            "data": null,
            "defaultContent": "",
            "render": function(data, type, row) {
                if (row.id==1) return "";
                else return `<button ${row.id==1 ? 'disabled' : ''} class="btn btn-success btn-sm" type="button" onclick="submitEdit(${row.id})">
                            <span class="fa fa-save"></span> Save
                        </button>
                        <button ${row.id==1 ? 'disabled' : ''} class="btn btn-danger btn-sm" type="button" onclick="if(confirm('Are you sure you want to delete this?')) { submitRemove(${row.id}); }">
                            <span class="fa fa-trash-alt"></span> Delete
                        </button>`;
            }
        }
    ],
    "initComplete": function () {
        // Custom init logic if needed
    }
});

function submitAdd() {

    var id      = document.getElementById("form-add-id"     ).value;
    var name    = document.getElementById("form-add-name"   ).value;
    var url     = "/api/dashboard/roles/add";
    var payload = {
        "token" : token,
        "id"    : id,
        "name"  : name
    };

    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 submitEdit(key) {
    var id      = document.getElementById(`form-edit-id-${key}`     ).value;
    var name    = document.getElementById(`form-edit-name-${key}`   ).value;
    var url     = "/api/dashboard/roles/edit";
    var payload = {
        "token" : token,
        "key"   : key,
        "id"    : id,
        "name"  : name
    };

    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 submitRemove(key) {
    var url     = "/api/dashboard/roles/remove";
    var payload = {
        "token" : token,
        "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");

}