<div class="container mt-4">
    <div class="card modern-card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">

            <div class="d-flex justify-content-between mb-3">
                <h5>Activity Log</h5>
                <button class="btn btn-secondary btn-sm" id="btnReload">
                    Refresh
                </button>
            </div>

            <div class="table-responsive">
                <table id="tableActivity" class="table modern-table align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th>Waktu</th>
                            <th>User</th>
                            <th>Module</th>
                            <th>Action</th>
                            <th>Deskripsi</th>
                            <th>Status</th>
                            <th>IP</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
</div>

<script>
$(function () {

    let table = $('#tableActivity').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "<?= base_url('dashboard/get_activity_datatable'); ?>",
            type: "POST"
        },
        order: [[0, 'desc']],
        columns: [
            { data: 'created_at' },
            { data: 'nama' },
            { data: 'module' },
            { data: 'action' },
            { data: 'description' },
            { data: 'status' },
            { data: 'ip_address' }
        ],

        columnDefs: [


            // ================= MODULE =================
            {
                targets: 2,
                render: function (data) {
                    return `<span class="badge bg-light text-dark border">${data ?? '-'}</span>`;
                }
            },

            // ================= ACTION =================
            {
                targets: 3,
                render: function (data) {
                    return `<span class="text-muted">${data ?? '-'}</span>`;
                }
            },

            // ================= STATUS =================
            {
                targets: 5,
                render: function (data) {

                    let cls = "text-muted";

                    if (data === "success") cls = "text-success";
                    if (data === "error") cls = "text-danger";
                    if (data === "warning") cls = "text-warning";

                    return `<span class="${cls}">${data ?? '-'}</span>`;
                }
            },

            // ================= IP =================
            {
                targets: 6,
                render: function (data) {
                    return `<small class="text-muted">${data ?? '-'}</small>`;
                }
            }
        ]
    });

    $('#btnReload').click(function () {
        table.ajax.reload(null, false);
    });

});
</script>