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

var table = $('#table-users').DataTable({
    "columnDefs": [
        { "orderable": false, "targets": [4, 5, 6] }  // Disable sorting on the first and fourth columns
    ],
    "ajax": {
        "url": "/api/dashboard/users/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 `${data}`;
            }
        },
        {
            "data": "username",
            "render": function(data, type, row) {
                return `${data}`;
            }
        },
        {
            "data": "email",
            "render": function(data, type, row) {
                return `${data}`;
            }
        },
        {
            "data": "phone",
            "render": function(data, type, row) {
                return `${data}`;
            }
        },
        {
            "data": "roles",
            "render": function(data, type, row) {
                var roles = ""
                for (let i = 0; i < data.length; i++) roles += `<span class="badge bg-primary m-1">${data[i].name}</span>`;
                return roles;
            }
        },
        {
            "data": "verification",
            "render": function(data, type, row) {
                var verification = ""
                for (let i = 0; i < data.length; i++) verification += `<span class="badge bg-${data[i].verified==0 ? 'danger' : 'success'} m-1"> <i class="fa fa-${data[i].verified==0 ? 'xmark' : 'check'}"></i> ${data[i].type}</span>`;
                return verification;
            }
        },
        {
            "data": null,
            "defaultContent": "",
            "render": function(data, type, row) {
                return "";
            }
        }
    ],
    "initComplete": function () {
        // Custom init logic if needed
    }
});