var roleDataTable;
var jsonObj;
$(document).ready(function () {
    var loader = $('#overlay, #loader');
    // Function to authenticate the user
    function authenticateUser() {
        $.ajax({
            url: '/Account/CheckCredential', 
            type: 'GET',
            success: function (response) {
                if (response.success) {
                    // User is authenticated, initialize DataTables
                    $('#roleDataTable').show();
                    $('#overlay').show();

                    initializeDataTables();
                } else {
                    // User is not authenticated, redirect to Logout
                    window.location.href = '/Home/Logout';
                }
            },
            error: function (xhr, error, thrown) {
                console.log('Authentication error:', error);
                console.log('Details:', thrown);
                window.location.href = '/Home/Logout';
            }
        });
    }

    // Function to initialize DataTables
    function initializeDataTables() {
        roleDataTable = $('#roleDataTable').DataTable({
            ajax: {
                url: '/Account/GetAllRoles', // Replace with your API endpoint
                type: 'GET',

                beforeSend: function () {
                    // Show the loader before making the AJAX request
                    loader.show();
                },
                complete: function () {
                    // Hide the loader after the AJAX request is complete (success or error)
                    loader.hide();
                }
            },

            // Check for the "No Data" response and display the message
            initComplete: function () {
                var api = this.api();
                var data = api.ajax.json();

                if (data && data.data === "No Data") {
                    // Display the "No record available" message
                    $('.dataTables_empty').html("No record available");
                }
            },
            columns: [            
                { data: 'name' },
                { data: 'normalizedName' },
                {
                    data: null,
                    render: function (data, type, row) {
                        var jsonData = JSON.stringify(data).replace(/"/g, """);
                        return '<button onclick="showUpdateUserRole(' + jsonData + ')" class="btn btn-default">' +
                            '<i class="fa fa-pencil fa-md" aria-hidden="true"></i>' +
                            '</button>';
                    }
                },
                { data: 'id' },
            ],
            columnDefs: [
                {
                    targets: [3], // 0 is the index of the 'id' column, 11 is 'lockoutEnabled', 12 is 'profilePicture'
                    visible: false,
                }
            ],
            responsive: true,
            language: {
                emptyTable: "No record available"
            },
            error: function (xhr, error, thrown) {
                console.log('DataTables error:', error);
                console.log('Status:', Status);
                console.log('Details:', xhr.responseText);
                window.location.href = '/Home/Logout';
            }
        });
    }
    // Call the authentication function
    authenticateUser();
});
function ShowModal() {
    document.getElementById("Name").value = "";
    showHideLabel(1);
    $('#createUpdateRole').modal('show');
}
function showUpdateUserRole(jsonData) {
    jsonObj = jsonData;
    $("#Id").val(jsonData.id); 
    $("#Name").val(jsonData.name);
    showHideLabel(2);
    $('#createUpdateRole').modal('show');
}
function showHideLabel(isNewOrUpdate) {
    if (isNewOrUpdate == 1) {
        let labelHeaderUpdate = document.getElementById('headerUpdate');
        labelHeaderUpdate.style.display = 'none';

        let labelHeaderAddNew = document.getElementById('headerNew');
        labelHeaderAddNew.style.display = 'block';
    } else {
        let labelHeaderAddNew = document.getElementById('headerNew');
        labelHeaderAddNew.style.display = 'none';

        let labelHeaderUpdate = document.getElementById('headerUpdate');
        labelHeaderUpdate.style.display = 'block';
    }
}
function createUpdateRole() {
    var loader = $('#overlay, #loader');

    var formData = $("#userRoleForm").serialize(); // Serialize the form data

    $.ajax({
        url: '/Account/CreateUpdateRole',
        type: 'POST',
        data: formData, // Send the form data
        success: function (response) {
            if (response.success) {
               // console.log('success: ', response.success);
                $('#createUpdateRole').modal('hide');
                alert('User role updated successfully!');
                roleDataTable.ajax.reload();

            } else {
                // User creation was not successful, display the error message
                console.log('createNewRole creation failed:', response.response);
                $('#createUpdateRole').modal('hide');
                alert('User creation failed: ' + response.response);
            }
        },

        beforeSend: function () {
            // Show the loader before making the AJAX request
            loader.show();
        },
        complete: function () {
            // Hide the loader after the AJAX request is complete (success or error)
            loader.hide();
        }
    });
}