@props(['id', 'columns', 'ajax', 'bulkDeleteUrl' => null])

@php
$dtColumns = collect($columns)->map(function ($c) {
  return [
    'data' => $c['key'],
    'name' => $c['key'],
    'orderable' => $c['orderable'] ?? true,
    'searchable' => $c['searchable'] ?? true,
    'className' => $c['className'] ?? '',
  ];
})->values();
@endphp
@if($bulkDeleteUrl)
  <div class="d-flex justify-content-start mb-3 align-items-center" id="{{ $id }}-bulk-actions"
    style="display: none !important;">
    <div class="bg-danger-subtle text-danger px-4 py-2 rounded-3 d-flex align-items-center gap-3">
      <div class="d-flex align-items-center gap-2">
        <i data-lucide="alert-circle" width="16" height="16"></i>
        <span class="fw-medium"><span id="{{ $id }}-selected-count">0</span> items selected</span>
      </div>
      <div class="vr bg-danger opacity-25"></div>
      <x-button-c-r-m type="button" variant="danger" size="sm" icon="trash-2" id="{{ $id }}-bulk-delete-opener-btn"
        class="shadow-sm">
        Delete Selected
      </x-button-c-r-m>
    </div>
  </div>

  {{-- Bulk Delete Confirmation Modal (Bootstrap 5) --}}
  <div class="modal fade" id="{{ $id }}-bulk-delete-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title h5" id="{{ $id }}-bulk-delete-modal-title">
            Confirm Bulk Delete
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete <span id="{{ $id }}-bulk-delete-count-display" class="fw-bold"></span>
            selected items?</p>
          <p class="text-danger mt-2 mb-0">This action cannot be undone.</p>
        </div>
        <div class="modal-footer">
          <x-button-c-r-m type="button" variant="danger" id="{{ $id }}-confirm-bulk-delete-btn">
            Delete
          </x-button-c-r-m>

          <x-button-c-r-m type="button" variant="secondary" data-bs-dismiss="modal">
            Cancel
          </x-button-c-r-m>
        </div>
      </div>
    </div>
  </div>
@endif
<div class="data-table-wrapper rounded-3 overflow-hidden border border-light position-relative">
  {{-- Loading Process Indicator --}}
  <div class="loading-process" id="{{ $id }}-loading" style="display: none;">
    <div class="loading-bar"></div>
    <div class="loading-overlay"></div>
  </div>

  <table id="{{ $id }}" class="table table-hover align-middle mb-0 bg-white"
    style="width:100%; border-collapse: separate; border-spacing: 0;">
    <thead class="bg-light">
      <tr>
        @foreach($columns as $col)
          <th
            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3 py-3 border-bottom position-relative"
            style="font-size: 0.75rem; letter-spacing: 0.5px;">
            <div
              class="d-flex align-items-center {{ $col['key'] === 'checkbox' ? 'justify-content-center' : 'justify-content-between' }}">
              <span>
                @if($col['key'] === 'checkbox')
                  {!! $col['label'] !!}
                @else
                  {{ $col['label'] }}
                @endif
                </span>
                @if($col['key'] !== 'checkbox' && ($col['orderable'] ?? true))
                  <div class="sort-icons d-flex flex-column ms-2">
                    <i data-lucide="arrow-up" class="sort-icon-asc" width="10" height="10"></i>
                    <i data-lucide="arrow-down" class="sort-icon-desc" width="10" height="10" style="margin-top: -2px;"></i>
                  </div>
                @endif
                </div>
          </th>
        @endforeach
          </tr>
            <tr class="filter-row bg-light">
              @foreach($columns as $col)
                <th class="p-2 border-bottom">
                  @if(($col['searchable'] ?? true))
                    <div class="input-group input-group-sm">
                      <span class="input-group-text bg-white border-end-0 ps-2 pe-2 text-muted border-light">
                        <i data-lucide="search" style="font-size: 0.75rem;"></i>
                      </span>
                      <input type="text"
                        class="form-control form-control-sm border-start-0 ps-0 column-search shadow-none border-light bg-white"
                        placeholder="Filter..." data-column="{{ $loop->index }}" style="font-size: 0.8125rem;">
                    </div>
                  @endif
                </th>
              @endforeach
            </tr>
            </thead>
            <tbody>
              {{-- DataTables will populate this --}}
            </tbody>
            </table>
            </div>
            @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: false,
                    stateSave: true,
                    pagingType: 'full_numbers',
                    language: {
                      loadingRecords: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="spinner-border text-primary mb-3" role="status"></div><h6 class="text-secondary fw-medium">Đang tải dữ liệu...</h6></div>',
                      searchPlaceholder: "Tìm kiếm...",
                      search: "",
                      lengthMenu: "_MENU_",
                      info: "Showing <span class='fw-bold'>_START_</span> to <span class='fw-bold'>_END_</span> of <span class='fw-bold'>_TOTAL_</span> entries",
                      paginate: {
                        first: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-left" width="16" height="16"></i></span>',
                        last: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-right" width="16" height="16"></i></span>',
                        next: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-right" width="16" height="16"></i></span>',
                        previous: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-left" width="16" height="16"></i></span>'
                      },
                      zeroRecords: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No matching records found</h6></div>',
                      emptyTable: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No data available</h6></div>'
                    },
                    dom: "<'row p-3'<'col-sm-12'tr>>" +
                      "<'row px-3 pb-3 pt-1 align-items-center'<'col-sm-12 col-md-5 text-muted small'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
                    initComplete: function () {
                      // Initialize select2 with custom styling
                      $('.dataTables_length select').select2({
                        minimumResultsForSearch: Infinity,
                        width: '80px',
                        dropdownCssClass: 'small-select-dropdown',
                        selectionCssClass: 'small-select-selection'
                      });

                      // Debounced search for column inputs (ERP Standard: Reduce server load)
                      let searchTimeouts = {};
                      this.api().columns().every(function () {
                        var that = this;
                        $('input', this.header()).on('keyup change clear', function () {
                          const colIdx = that.index();
                          const value = this.value;

                          clearTimeout(searchTimeouts[colIdx]);
                          searchTimeouts[colIdx] = setTimeout(function () {
                            if (that.search() !== value) {
                              that.search(value).draw();
                            }
                          }, 400); // 400ms delay
                        });
                      });
                    },
                    drawCallback: function () {
                      // Re-initialize Select2 on draw (if lost)
                      if ($('.dataTables_length select').data('select2')) {
                        $('.dataTables_length select').select2('destroy');
                      }
                      $('.dataTables_length select').select2({
                        minimumResultsForSearch: Infinity,
                        width: '80px'
                      });

                      // Re-initialize icons with slight delay to ensuring DOM is ready
                      setTimeout(function () {
                        if (window.lucide) {
                          lucide.createIcons();
                        }
                      }, 50);
                    }
                  });

                  // ERP Standard: Double click row to edit
                  $('#{{ $id }} tbody').on('dblclick', 'tr', function () {
                    // Try to find an edit link in the row
                    const editLink = $(this).find('a.btn-outline-primary, a[href*="edit"]').first();
                    if (editLink.length && editLink.attr('href')) {
                      window.location.href = editLink.attr('href');
                    }
                  });

                  // Custom Loading Process Logic
                  table.on('processing.dt', function (e, settings, processing) {
                    const loadingEl = $('#{{ $id }}-loading');
                    if (processing) {
                      loadingEl.fadeIn(100);
                    } else {
                      loadingEl.fadeOut(200);
                    }
                  });

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

                  // External trigger for column search (redundant but kept for manual binding if needed)
                  $('#{{ $id }} .column-search').on('keyup change', function () {
                    var columnIndex = $(this).data('column');
                    table.column(columnIndex).search(this.value).draw();
                  });
                });

                @if($bulkDeleteUrl)
                  document.addEventListener('DOMContentLoaded', function () {
                    const tableId = '#{{ $id }}';
                    const bulkActions = $('#{{ $id }}-bulk-actions');
                    const deleteBtn = $('#{{ $id }}-bulk-delete-btn');
                    const selectedCount = $('#{{ $id }}-selected-count');
                    const masterCheckbox = $('#dt-master-checkbox');
                    let selectedIds = [];

                    // Handle Master Checkbox
                    $(document).on('change', '#dt-master-checkbox', function () {
                      const isChecked = $(this).is(':checked');
                      $('.dt-checkbox').prop('checked', isChecked).trigger('change');
                    });

                    // Handle Individual Checkbox
                    $(document).on('change', '.dt-checkbox', function () {
                      const id = $(this).val();
                      if ($(this).is(':checked')) {
                        if (!selectedIds.includes(id)) selectedIds.push(id);
                      } else {
                        selectedIds = selectedIds.filter(item => item !== id);
                      }

                      // Update UI
                      selectedCount.text(selectedIds.length);
                      if (selectedIds.length > 0) {
                        bulkActions.show();
                        bulkActions.removeClass('d-none').addClass('d-flex');
                        bulkActions.attr('style', ''); // Clear inline style
                      } else {
                        bulkActions.hide();
                      }

                      // Update Master Checkbox state
                      const allCheckboxes = $('.dt-checkbox').length;
                      const checkedCheckboxes = $('.dt-checkbox:checked').length;

                      if (allCheckboxes > 0 && allCheckboxes === checkedCheckboxes) {
                        masterCheckbox.prop('checked', true);
                        masterCheckbox.prop('indeterminate', false);
                      } else if (checkedCheckboxes > 0) {
                        masterCheckbox.prop('checked', false);
                        masterCheckbox.prop('indeterminate', true);
                      } else {
                        masterCheckbox.prop('checked', false);
                        masterCheckbox.prop('indeterminate', false);
                      }
                    });

                    // Reset selection on table draw
                    $('#{{ $id }}').on('draw.dt', function () {
                      selectedIds = [];
                      bulkActions.hide();
                      masterCheckbox.prop('checked', false);
                      masterCheckbox.prop('indeterminate', false);
                    });

                    // Handle Bulk Delete Opener
                    const modalId = '{{ $id }}-bulk-delete-modal';
                    const modalEl = document.getElementById(modalId);
                    const openerBtn = $('#{{ $id }}-bulk-delete-opener-btn');
                    const confirmBtn = $('#{{ $id }}-confirm-bulk-delete-btn');
                    const countDisplay = $('#{{ $id }}-bulk-delete-count-display');
                    let bsModal = null;

                    openerBtn.on('click', function () {
                      if (selectedIds.length === 0) return;
                      countDisplay.text(selectedIds.length);

                      if (!bsModal) {
                        bsModal = new bootstrap.Modal(modalEl);
                      }
                      bsModal.show();
                    });

                    // Handle Confirm Delete
                    confirmBtn.on('click', function () {
                      $.ajax({
                        url: '{{ $bulkDeleteUrl }}',
                        type: 'DELETE',
                        data: {
                          ids: selectedIds,
                          _token: '{{ csrf_token() }}'
                        },
                        beforeSend: function () {
                          confirmBtn.prop('disabled', true).text('Deleting...');
                        },
                        success: function (response) {
                          if (bsModal) bsModal.hide();
                          $('#{{ $id }}').DataTable().ajax.reload();
                          selectedIds = [];
                          bulkActions.hide();

                          // Show success toast
                          if (typeof FuiToast !== 'undefined') {
                            FuiToast.success(response.message || 'Selected items have been deleted successfully.');
                          }

                          // Re-render icons after reload
                          if (window.lucide) lucide.createIcons();
                        },
                        error: function (xhr) {
                          const message = xhr.responseJSON?.message || 'Something went wrong.';
                          if (typeof FuiToast !== 'undefined') {
                            FuiToast.error(message);
                          } else {
                            alert(message);
                          }
                          if (bsModal) bsModal.hide();
                        },
                        complete: function () {
                          confirmBtn.prop('disabled', false).text('Delete');
                        }
                      });
                    });
                  });
                @endif
              </script>

                  <style>
                    /* Custom SAAS DataTable Styles */
                    .data-table-wrapper {
                      background: #fff;
                      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                      overflow-y: auto;
                      position: relative;
                    }

                    .pagination button.page-link {
                      height: 100%;
                    }

                    .data-table-wrapper .table thead th {
                      border-color: #f1f5f9 !important;
                      font-family: 'Inter', sans-serif;
                      vertical-align: middle;
                      position: sticky;
                      top: 0;
                      z-index: 10;
                      background-color: #f8f9fa;
                      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                    }

                    /* Sticky Action Column (ERP Standard for wide tables) */
                    .table thead th:last-child,
                    .table tbody td:last-child {
                      position: sticky;
                      right: 0;
                      background: #fff;
                      z-index: 5;
                      border-left: 1px solid #f1f5f9;
                      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.02);
                    }

                    .table thead th:last-child {
                      background: #f8f9fa;
                      z-index: 11;
                    }

                    /* Sticky Checkbox Column */
                    .table thead th:first-child,
                    .table tbody td:first-child {
                      position: sticky;
                      left: 0;
                      background: #fff;
                      z-index: 5;
                      border-right: 1px solid #f1f5f9;
                      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.02);
                    }

                    .table thead th:first-child {
                      background: #f8f9fa;
                      z-index: 11;
                    }

                    .table tbody tr:hover td {
                      background-color: #f8fafc !important;
                      cursor: pointer;
                    }

                    .data-table-wrapper .table td:not(:last-child) {
                      border-right: 1px solid #f1f5f9;
                    }

                    /* Sticky for second row (filter inputs) if present */
                    .data-table-wrapper .table thead tr:nth-child(2) th {
                      top: 45px;
                      /* Adjust based on typical header height */
                      z-index: 4;
                    }

                    .data-table-wrapper .input-group-text {
                      color: #94a3b8;
                      /* Slate 400 */
                    }

                    .data-table-wrapper .form-control::placeholder {
                      color: #cbd5e1;
                      /* Slate 300 */
                    }

                    .dataTables_wrapper .pagination .page-item .page-link {
                      border: 1px solid transparent;
                      border-radius: 6px;
                      margin: 0 2px;
                      color: #64748b;
                      padding: 0;
                      font-size: 0.875rem;
                      transition: all 0.2s ease;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      height: 38px;
                      min-width: 38px;
                    }

                    .dataTables_wrapper .pagination .page-item.active .page-link {
                      background-color: #0f172a;
                      /* Slate 900 or Primary Color */
                      color: white;
                      font-weight: 500;
                      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                      border-color: #0f172a;
                    }

                    .dataTables_wrapper .pagination .page-item.disabled .page-link {
                      color: #cbd5e1;
                      background-color: transparent;
                    }

                    .dataTables_wrapper .pagination .page-item:not(.active) .page-link:hover {
                      background-color: #f8fafc;
                      color: #0f172a;
                      border-color: #e2e8f0;
                    }

                    /* Select2 Customization for Table Length */
                    .dataTables_length {
                      margin-right: 1rem;
                    }

                    .select2-container--default .select2-selection--single {
                      border: 1px solid #e2e8f0;
                      border-radius: 6px;
                      height: 32px;
                      display: flex;
                      align-items: center;
                      outline: none;
                    }

                    .select2-container--default .select2-selection--single:focus {
                      border-color: #94a3b8;
                    }

                    .select2-container--default .select2-selection--single .select2-selection__arrow {
                      height: 30px;
                    }

                    .select2-container--default .select2-selection--single .select2-selection__rendered {
                      color: #475569;
                      font-size: 0.8125rem;
                      padding-left: 10px;
                      line-height: normal;
                    }

                    /* Loading Process Styles */
                    .loading-process {
                      position: absolute;
                      top: 0;
                      left: 0;
                      right: 0;
                      bottom: 0;
                      z-index: 1000;
                      pointer-events: none;
                    }

                    .loading-bar {
                      position: absolute;
                      top: 0;
                      left: 0;
                      height: 3px;
                      width: 100%;
                      background: #f1f5f9;
                      overflow: hidden;
                      z-index: 1001;
                    }

                    .loading-bar::after {
                      content: '';
                      position: absolute;
                      top: 0;
                      left: 0;
                      height: 100%;
                      width: 50%;
                      background: linear-gradient(90deg, transparent, #0f172a, transparent);
                      animation: loading-process-info 1.5s infinite linear;
                    }

                    .loading-overlay {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      background: rgba(255, 255, 255, 0.5);
                      backdrop-filter: blur(1px);
                    }

                    @keyframes loading-process-info {
                      0% {
                        transform: translateX(-100%);
                      }

                      100% {
                        transform: translateX(200%);
                      }
                    }

                    /* Custom Sort Icons Styles */
                    .sort-icons {
                      opacity: 0.15;
                      transition: opacity 0.2s;
                    }

                    th:hover .sort-icons {
                      opacity: 0.5;
                    }

                    th.sorting_asc .sort-icons {
                      opacity: 1;
                    }
                    th.sorting_asc .sort-icon-desc {
                      display: none !important;
                    }

                    th.sorting_desc .sort-icons {
                      opacity: 1;
                    }
                    th.sorting_desc .sort-icon-asc {
                      display: none !important;
                    }

                    /* Hide default DataTables icons */
                    table.dataTable thead .sorting:before,
                    table.dataTable thead .sorting:after,
                    table.dataTable thead .sorting_asc:before,
                    table.dataTable thead .sorting_asc:after,
                    table.dataTable thead .sorting_desc:before,
                    table.dataTable thead .sorting_desc:after {
                      display: none !important;
                    }

                    /* Processing Indicator with improved look - Centered */
                    div.dataTables_processing {
                      display: none !important;
                      /* Hide default processing */
                    }
                  </style>
            @endpush