{{--
    共用分頁工具列：顯示總筆數、每頁筆數選擇器、分頁連結
    用法：@include('components.pagination-bar', ['paginator' => $questions])
    可選參數：
        'perPageOptions' => [10,20,50,100]  自訂每頁選項
        'showInfo' => true                   是否顯示總筆數
--}}
@php
    $perPageOptions = $perPageOptions ?? [10, 20, 50, 100];
    $showInfo = $showInfo ?? true;
    $currentPerPage = (int) request('per_page', $paginator->perPage());
@endphp

@if($paginator->total() > 0)
<div class="flex flex-col sm:flex-row items-center justify-between gap-3 text-sm">
    {{-- 左側：總筆數 + 每頁筆數 --}}
    <div class="flex items-center gap-3">
        @if($showInfo)
        <span class="text-gray-500 dark:text-gray-400">
            共 <strong class="text-gray-700 dark:text-gray-200">{{ number_format($paginator->total()) }}</strong> 筆，
            第 {{ $paginator->firstItem() }}-{{ $paginator->lastItem() }} 筆
        </span>
        @endif

        <form method="GET" class="flex items-center gap-1.5">
            {{-- 保留現有的 query string --}}
            @foreach(request()->except(['per_page', 'page']) as $key => $value)
                @if(is_array($value))
                    @foreach($value as $v)
                        <input type="hidden" name="{{ $key }}[]" value="{{ $v }}">
                    @endforeach
                @else
                    <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                @endif
            @endforeach

            <label class="text-gray-500 dark:text-gray-400">每頁</label>
            <select name="per_page" onchange="this.form.submit()"
                    class="px-2 py-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
                @foreach($perPageOptions as $opt)
                    <option value="{{ $opt }}" {{ $currentPerPage == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                @endforeach
            </select>
            <label class="text-gray-500 dark:text-gray-400">筆</label>
        </form>
    </div>

    {{-- 右側：分頁連結 --}}
    @if($paginator->hasPages())
    <div class="flex items-center gap-1">
        {{-- 上一頁 --}}
        @if($paginator->onFirstPage())
            <span class="px-3 py-1.5 rounded-lg text-gray-300 dark:text-gray-600 cursor-not-allowed text-sm">上一頁</span>
        @else
            <a href="{{ $paginator->previousPageUrl() }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-800 text-sm transition-colors">上一頁</a>
        @endif

        {{-- 頁碼 --}}
        @php
            $current = $paginator->currentPage();
            $last = $paginator->lastPage();
            $start = max(1, $current - 2);
            $end = min($last, $current + 2);
        @endphp

        @if($start > 1)
            <a href="{{ $paginator->url(1) }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-800 text-sm transition-colors">1</a>
            @if($start > 2)<span class="px-1 text-gray-400">...</span>@endif
        @endif

        @for($i = $start; $i <= $end; $i++)
            @if($i == $current)
                <span class="px-3 py-1.5 rounded-lg bg-blue-600 text-white text-sm font-medium">{{ $i }}</span>
            @else
                <a href="{{ $paginator->url($i) }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-800 text-sm transition-colors">{{ $i }}</a>
            @endif
        @endfor

        @if($end < $last)
            @if($end < $last - 1)<span class="px-1 text-gray-400">...</span>@endif
            <a href="{{ $paginator->url($last) }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-800 text-sm transition-colors">{{ $last }}</a>
        @endif

        {{-- 下一頁 --}}
        @if($paginator->hasMorePages())
            <a href="{{ $paginator->nextPageUrl() }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-800 text-sm transition-colors">下一頁</a>
        @else
            <span class="px-3 py-1.5 rounded-lg text-gray-300 dark:text-gray-600 cursor-not-allowed text-sm">下一頁</span>
        @endif
    </div>
    @endif
</div>
@endif