@props(['headers', 'data'])

@push('css')
    <style>
        .dataTables_processing {
            color: #394448 !important;
        }

        .paginate_button .active {
            color: #394448 !important;
        }

        .pagination {
            --bs-pagination-color: #394448 !important;
            --bs-pagination-active-bg: #394448 !important;
            --bs-pagination-active-border-color: #394448 !important;
            --bs-pagination-hover-color: #394448 !important;
            --bs-pagination-focus-color: #394448 !important;
            --bs-pagination-disabled-color: #39444873 !important;
            --bs-pagination-focus-box-shadow: 0 0 0 0.25rem #39444844 !important;
        }

        .dropdown-menu {
            --bs-dropdown-link-active-bg: #394448 !important;
        }

        .form-control:focus {
            border-color: #394448;
            box-shadow: 0 0 0 0.2rem rgba(31, 36, 32, 0.25);
        }

        .table-group-divider {
            border-bottom: 2px solid currentcolor;
        }

        tr.odd {
            background-color: #ffffd7fa !important;
        }
    </style>
@endpush

<div class="table-responsive p-2">
    <table id="{{ $data }}" class="table table-sm table-striped table-hover dataTable">
        <thead class="table-group-divider">
            <tr>
                @foreach ($headers as $header)
                <th scope="col text-capitalize">{{ $header }}</th>                    
                @endforeach                
            </tr>
        </thead>
        
         <tbody>
           {{-- @forelse ($data as $key => $appointment)
                <tr>
                    <th scope="row">{{ $key + 1 }}</th>
                    <td>{{ $appointment->user->name }}</td>
                    <td>{{ $appointment->appointment_date }}</td>
                    <td>{{ $appointment->appointment_status->name }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="{{ count($headers) }}">No data available</td>
                </tr>
            @endforelse--}}
        </tbody> 
    </table>
</div>

{{-- {{ $data->links() }} --}}