@props(['id' => 'data-table', 'columns' => [], 'source' => '', 'actions' => true, 'filters' => null, 'title' => ''])

<div class="card border shadow-sm">
    @if($title || $filters)
        <div class="card-header bg-body">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                @if($title)
                    <h6 class="card-title mb-0 fw-semibold">
                        <i class="bi bi-table me-2 text-primary"></i>{{ $title }}
                    </h6>
                @endif
                @if($filters)
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        {{ $filters }}
                    </div>
                @endif
            </div>
        </div>
    @endif
    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="{{ $id }}" class="table table-hover align-middle mb-0" style="width:100%">
                <thead class="bg-body-tertiary">
                    <tr>
                        @if($actions)
                            <th style="width:40px;" class="no-export"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="selectAll"></div></th>
                        @endif
                        @foreach($columns as $col)
                            <th class="{{ ($col['exportable'] ?? true) ? '' : 'no-export' }}" style="{{ isset($col['width']) ? 'width:' . $col['width'] . ';' : '' }}">{{ $col['label'] ?? '' }}</th>
                        @endforeach
                        @if($actions)
                            <th class="text-end no-export" style="width:100px;">Actions</th>
                        @endif
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    @if(isset($slot) && $slot)
        <div class="card-footer bg-body">
            {{ $slot }}
        </div>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableEl = document.getElementById('{{ $id }}');
    if (tableEl && typeof jQuery !== 'undefined') {
        const dt = jQuery('#{{ $id }}').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ $source }}',
            columns: [
                @if($actions)
                    { data: 'checkbox', orderable: false, searchable: false, className: 'no-export' },
                @endif
                @foreach($columns as $col)
                    { data: '{{ $col["key"] ?? $col["label"] ?? "" }}', name: '{{ $col["key"] ?? "" }}', className: '{{ ($col["className"] ?? "") }}' }{{ $loop->last ? '' : ',' }}
                @endforeach
                @if($actions)
                    { data: 'actions', orderable: false, searchable: false, className: 'text-end no-export' }
                @endif
            ],
            dom: '<"row"<"col-sm-6"l><"col-sm-6"f>>rt<"row"<"col-sm-5"i><"col-sm-7"p>>',
            buttons: [
                { extend: 'excel', className: 'btn btn-outline-success btn-sm', exportOptions: { columns: ':not(.no-export)' } },
                { extend: 'csv', className: 'btn btn-outline-info btn-sm', exportOptions: { columns: ':not(.no-export)' } },
                { extend: 'pdf', className: 'btn btn-outline-danger btn-sm', exportOptions: { columns: ':not(.no-export)' } },
                { extend: 'print', className: 'btn btn-outline-secondary btn-sm', exportOptions: { columns: ':not(.no-export)' } }
            ],
            order: [[{{ $actions ? 1 : 0 }}, 'desc']],
            language: {
                search: '<i class="bi bi-search"></i>',
                searchPlaceholder: 'Search...',
                lengthMenu: 'Show _MENU_ entries',
                info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                infoEmpty: 'No entries found',
                infoFiltered: '(filtered from _MAX_ total)',
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>'
            }
        });

        jQuery('#selectAll').on('change', function() {
            dt.rows({ search: 'applied' }).nodes().to$().find('.row-checkbox').prop('checked', this.checked);
        });
    }
});
</script>