@props([
    'paginator',
    'perPage' => 15,
    'perPageOptions' => [10, 15, 25, 50, 100],
])

@php
    // Window halaman utk navigasi (dengan elipsis)
    $current = $paginator->currentPage();
    $last = $paginator->lastPage();
    $pages = [];
    if ($last <= 7) {
        $pages = range(1, $last);
    } else {
        $pages = [1];
        if ($current > 3) $pages[] = '...';
        foreach (range(max(2, $current - 1), min($last - 1, $current + 1)) as $p) {
            if ($p > 1 && $p < $last) $pages[] = $p;
        }
        if ($current < $last - 2) $pages[] = '...';
        $pages[] = $last;
        $pages = array_values(array_unique($pages));
    }
@endphp

<div class="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
    {{-- Info baris --}}
    <p class="text-xs text-slate-500">
        Menampilkan <span class="font-semibold text-slate-700">{{ $paginator->firstItem() ?? 0 }}–{{ $paginator->lastItem() ?? 0 }}</span>
        dari <span class="font-semibold text-slate-700">{{ number_format($paginator->total()) }}</span> data
    </p>

    <div class="flex items-center gap-4">
        {{-- Per-page --}}
        <label class="flex items-center gap-2 text-xs text-slate-500">
            Baris
            <select
                wire:model.live="perPage"
                class="rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs outline-none focus:border-brand-500"
            >
                @foreach ($perPageOptions as $opt)
                    <option value="{{ $opt }}">{{ $opt }}</option>
                @endforeach
            </select>
        </label>

        {{-- Navigasi halaman --}}
        @if ($paginator->hasPages())
            <nav class="flex items-center gap-1">
                <button
                    wire:click="previousPage"
                    wire:loading.attr="disabled"
                    @if ($paginator->onFirstPage()) disabled @endif
                    class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-40"
                    aria-label="Halaman sebelumnya"
                >
                    ‹
                </button>

                @foreach ($pages as $page)
                    @if ($page === '...')
                        <span class="px-1 text-xs text-slate-400">…</span>
                    @else
                        <button
                            wire:click="gotoPage({{ $page }})"
                            wire:loading.attr="disabled"
                            class="flex h-8 min-w-8 items-center justify-center rounded-lg px-2 text-sm font-medium transition {{ $page === $current ? 'bg-brand-600 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50' }}"
                        >
                            {{ $page }}
                        </button>
                    @endif
                @endforeach

                <button
                    wire:click="nextPage"
                    wire:loading.attr="disabled"
                    @if ($paginator->hasMorePages() === false) disabled @endif
                    class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-40"
                    aria-label="Halaman berikutnya"
                >
                    ›
                </button>
            </nav>
        @endif
    </div>
</div>