@php
$dtColumns = collect($columns)->map(function ($c) {
  return [
    'data' => $c['key'],
    'name' => $c['key'],
    'orderable' => $c['orderable'] ?? true,
    'searchable' => $c['searchable'] ?? true,
  ];
})->values();
@endphp
    <table id="{{ $id }}" class="table table-hover table-bordered w-100 align-middle my-3">
      <thead>
        <tr>
          @foreach($columns as $col)
            <th>{{ $col['label'] }}</th>
          @endforeach
        </tr>
    <tr>
      @foreach($columns as $col)
        <th>
          @if(($col['searchable'] ?? true))
            <input type="text" class="form-control form-control-sm column-search" placeholder="Search {{ $col['label'] }}"
              data-column="{{ $loop->index }}">
          @endif
        </th>
      @endforeach
    </tr>
    </thead>
    </table>
    @push('custom-scripts')
      <script>
        document.addEventListener('DOMContentLoaded', function () {
          $.fn.DataTable.ext.pager.numbers_length = 7;

          var table = $('#{{ $id }}').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ $ajax }}',
            columns: @json($dtColumns),
            orderCellsTop: true,
            fixedHeader: true,
            pagingType: 'full_numbers',
            language: { 
              searchPlaceholder: "Search records",
              search: "",
              lengthMenu: "_MENU_",
            },
            dom: "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
          "<'row mt-3 align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
            initComplete: function () {
              // Initialize select2 for length menu
              $('.dataTables_length select').select2({
                  minimumResultsForSearch: Infinity,
                  width: '60px'
              });

              // Apply the search
              this.api().columns().every(function () {
                var that = this;
                $('input', this.header()).on('keyup change clear', function () {
                  if (that.search() !== this.value) {
                    that
                      .search(this.value)
                      .draw();
                  }
                });
              });
            },
            drawCallback: function() {
                 if ($('.dataTables_length select').data('select2')) {
                     $('.dataTables_length select').select2('destroy');
                 }
                 $('.dataTables_length select').select2({
                     minimumResultsForSearch: Infinity,
                     width: '60px'
                 });
            }
          });

          // Prevent sorting when clicking on the input
          $('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
            e.stopPropagation();
          });

          // Custom search logic for the individual inputs
          $('#{{ $id }} .column-search').on('keyup change', function () {
            var columnIndex = $(this).data('column');
            table.column(columnIndex).search(this.value).draw();
          });
        });
      </script>
    @endpush