$(document).ready(function () {
    let userTable = $("#user_module").DataTable({
        dom:
            "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        oLanguage: {
            oPaginate: {
                sPrevious:
                    '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                sNext: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>',
            },
            sSearch:
                '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            sSearchPlaceholder: "Search...",
            sLengthMenu: "Results :  _MENU_",
        },
        stripeClasses: [],
        lengthMenu: [
            [10, 20, 30, 40, 50],
            [10, 20, 30, 40, 50],
        ],
        pageLength: 10,
        processing: true,
        serverSide: true,
        ajax: {
            type: "POST",
            url: getData,
            data: {
                _token: $("meta[name='csrf-token']").attr("content"), // Add CSRF token for security
            },
        },
        columns: [
            { data: "name", name: "name", orderable: true },
            { data: "email", name: "email", orderable: false },
            {
                data: "profile_picture",
                name: "profile_picture",
                orderable: false,
                render: function (data, type, row) {
                    return `<img src="${
                        data ? data : "../assets/img/default-image.png"
                    }" alt="Profile Picture" class="img-fluid" width="50" height="50">`;
                },
            },
            {
                data: "address",
                name: "address",
                orderable: false,
                searchable: true,
            },
            {
                data: "is_active",
                name: "status",
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    let checked = data == 1 ? "checked" : "";
                    return `
                        <label class="switch s-coffee-medium-light ml-3 mr-3 mb-0">
                            <input type="checkbox" class="toggle-status" data-id="${row.id}" ${checked}>
                            <span class="slider round"></span>
                        </label>`;
                },
            },
        ],
        order: [[1, "asc"]],
    });

    // Handle toggle switch change
    $(document).on("change", ".toggle-status", function () {
        let userId = $(this).data("id");
        let newStatus = $(this).is(":checked") ? 1 : 0;
        let updateUserStatusUrl = "update-user-status";

        $.ajax({
            type: "POST",
            url: updateUserStatusUrl,
            data: {
                id: userId,
                is_active: newStatus,
                _token: $("meta[name='csrf-token']").attr("content"),
            },
            success: function (response) {
                alert(response.message);
                userTable.ajax.reload(); // Reload DataTable after status change
            },
            error: function (error) {
                alert("Error updating user status");
                console.log(error);
            },
        });
    });
});