{{--
    Server-side DataTable for an admin list page. Include after partials/crud-table-js.
    Params: $tableId, $url, $columns (DataTables column defs), $order (optional), $pageLength (optional).
    Filters: any [data-filter="name"] input/select inside the same .card is sent as `name` and reloads
    the table on change; an input[data-table-search] (or #tableSearch) in the card drives the search.
--}}
@php
    $tableConfig = [
        'id' => $tableId,
        'url' => $url,
        'columns' => $columns,
        'order' => $order ?? [[0, 'desc']],
        'pageLength' => $pageLength ?? 25,
    ];
@endphp
<script>
    $(function () {
        var config = @json($tableConfig);
        var $table = $('#' + config.id);
        var $card = $table.closest('.card');

        var datatable = $table.DataTable({
            processing: true,
            serverSide: true,
            dom: "<'table-responsive'tr><'row align-items-center mt-5'<'col-sm-12 col-md-5 d-flex align-items-center gap-3'li><'col-sm-12 col-md-7 d-flex justify-content-end'p>>",
            ajax: {
                url: config.url,
                data: function (d) {
                    $card.find('[data-filter]').each(function () { d[this.dataset.filter] = $(this).val(); });
                }
            },
            columns: config.columns,
            order: config.order,
            pageLength: config.pageLength,
            language: {lengthMenu: '_MENU_'}
        });

        var searchTimer;
        $card.find('[data-table-search], #tableSearch').on('keyup', function () {
            clearTimeout(searchTimer);
            var value = this.value;
            searchTimer = setTimeout(function () { datatable.search(value).draw(); }, 300);
        });
        $card.on('change', '[data-filter]', function () { datatable.ajax.reload(); });

        CrudTable.bind($table, datatable);
        window.ServerTables = window.ServerTables || {};
        window.ServerTables[config.id] = datatable;
    });
</script>