@props([
    'id' => 'dataTable',
    'columns' => [],          // [['data' => 'name', 'title' => 'الاسم', 'orderable' => true], ...]
    'ajaxUrl' => null,
    'order' => '[[0, "desc"]]',
    'pageLength' => 25,
    'searchable' => true,
])

<div class="table-responsive">
    <table id="{{ $id }}" class="table table-vcenter table-hover" style="width: 100%;">
        <thead>
            <tr>
                @foreach($columns as $col)
                    <th @if(isset($col['width'])) style="width: {{ $col['width'] }}" @endif>
                        {{ $col['title'] ?? $col['data'] ?? '' }}
                    </th>
                @endforeach
            </tr>
        </thead>
    </table>
</div>

@once
    @push('head')
        <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css">
    @endpush
    @push('scripts')
        <script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>
    @endpush
@endonce

@push('scripts')
<script>
    $(function () {
        $('#{{ $id }}').DataTable({
            processing: true,
            serverSide: {{ $ajaxUrl ? 'true' : 'false' }},
            @if($ajaxUrl)
            ajax: {
                url: @json($ajaxUrl),
                data: function (d) {
                    if (typeof window['{{ $id }}Filters'] === 'function') {
                        Object.assign(d, window['{{ $id }}Filters']());
                    }
                },
            },
            @endif
            columns: @json($columns),
            order: {!! $order !!},
            pageLength: {{ $pageLength }},
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            searching: {{ $searchable ? 'true' : 'false' }},
            language: {
                processing: 'جارٍ التحميل...',
                search: 'بحث:',
                lengthMenu: 'عرض _MENU_ سجل',
                info: 'عرض _START_ إلى _END_ من _TOTAL_ سجل',
                infoEmpty: 'لا توجد سجلات',
                infoFiltered: '(تم تصفية _MAX_ سجل)',
                paginate: { first: 'الأول', previous: 'السابق', next: 'التالي', last: 'الأخير' },
                emptyTable: 'لا توجد بيانات للعرض',
                zeroRecords: 'لا توجد نتائج مطابقة',
            },
            dom: '<"row"<"col-sm-6"l><"col-sm-6"f>><"row"<"col-12"tr>><"row"<"col-sm-5"i><"col-sm-7"p>>',
        });
    });
</script>
@endpush