@props([
    'data',
    'perPageOptions' => [10, 15, 25, 50],
    'emptyMessage' => 'Tidak ada data',
    'showInfo' => true,
])

@php
    $perPage = request('per_page', $perPageOptions[0] ?? 15);
@endphp

<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    {{-- Header slot --}}
    @if(isset($header))
    <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
        {{ $header }}
    </div>
    @endif

    {{-- Toolbar: Per Page Selector & Info --}}
    @if($data->hasPages() || $showInfo)
    <div class="flex flex-wrap items-center justify-between gap-4 border-b border-gray-200 px-5 py-3 dark:border-gray-800">
        {{-- Per Page Selector --}}
        <div class="flex items-center gap-2">
            <label class="text-sm text-gray-500 dark:text-gray-400">Tampilkan</label>
            <select 
                onchange="window.location.href = updateQueryParam(window.location.href, 'per_page', this.value)"
                class="h-9 rounded-lg border border-gray-300 bg-transparent px-3 text-sm text-gray-700 focus:border-brand-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300"
            >
                @foreach($perPageOptions as $option)
                    <option value="{{ $option }}" {{ $perPage == $option ? 'selected' : '' }}>{{ $option }}</option>
                @endforeach
            </select>
            <span class="text-sm text-gray-500 dark:text-gray-400">data</span>
        </div>

        {{-- Record Info --}}
        @if($showInfo && $data->total() > 0)
        <div class="text-sm text-gray-500 dark:text-gray-400">
            Menampilkan <span class="font-medium text-gray-700 dark:text-gray-300">{{ $data->firstItem() }}</span>
            - <span class="font-medium text-gray-700 dark:text-gray-300">{{ $data->lastItem() }}</span>
            dari <span class="font-medium text-gray-700 dark:text-gray-300">{{ number_format($data->total()) }}</span> data
        </div>
        @endif
    </div>
    @endif

    {{-- Table Content --}}
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50">
                    {{ $columns ?? '' }}
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                @if($data->count() > 0)
                    {{ $slot }}
                @else
                <tr>
                    <td colspan="100" class="px-5 py-12 text-center">
                        <div class="flex flex-col items-center">
                            <svg class="mb-3 h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $emptyMessage }}</p>
                        </div>
                    </td>
                </tr>
                @endif
            </tbody>
            @if(isset($footer) && $data->count() > 0)
            <tfoot class="border-t-2 border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50">
                {{ $footer }}
            </tfoot>
            @endif
        </table>
    </div>

    {{-- Pagination --}}
    @if($data->hasPages())
    <div class="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
        {{ $data->links() }}
    </div>
    @endif
</div>

@once
@push('scripts')
<script>
function updateQueryParam(url, param, value) {
    const urlObj = new URL(url);
    urlObj.searchParams.set(param, value);
    urlObj.searchParams.delete('page'); // Reset to first page when changing per_page
    return urlObj.toString();
}
</script>
@endpush
@endonce