@props([
    'tableId' => 'supportTicketsTable',
    'ticketCol' => 0,
    'statusCol' => 2,
    'submittedCol' => 3,
    'actionsCol' => 4,
])

@include('partials.index-datatable-scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof window.PmsIndexDataTable === 'undefined' || !document.querySelector(@json('#'.$tableId))) {
        return;
    }

    var table = PmsIndexDataTable.init(@json('#'.$tableId), {
        order: [[{{ $submittedCol }}, 'desc']],
        columnDefs: [
            { orderable: false, targets: [{{ $actionsCol }}], className: 'no-colvis text-right' }
        ],
        language: {
            search: '',
            searchPlaceholder: 'Search all columns…'
        }
    });

    var ticketInput = document.getElementById(@json($tableId.'FilterTicket'));
    var statusSelect = document.getElementById(@json($tableId.'FilterStatus'));

    if (ticketInput) {
        ticketInput.addEventListener('input', function () {
            table.column({{ $ticketCol }}).search(this.value).draw();
        });
    }

    if (statusSelect) {
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            if (settings.nTable.id !== @json($tableId)) {
                return true;
            }
            var selected = statusSelect.value;
            if (selected === '') {
                return true;
            }
            var api = new $.fn.dataTable.Api(settings);
            var row = api.row(dataIndex).node();

            return row && row.getAttribute('data-status') === selected;
        });

        statusSelect.addEventListener('change', function () {
            table.draw();
        });
    }
});
</script>