@if ($paginator->hasPages())
    @php
        $extraParams = http_build_query(request()->except(['page']));
    @endphp
    <div class="d-flex justify-content-between align-items-center mt-3">
        {{-- Page Size Selector --}}
        <div class="d-flex align-items-center">
            <label for="per-page-selector" class="mr-2 text-muted">{{ __('Show') }}:</label>
            <select id="per-page-selector" class="form-control form-control-sm" style="width: auto;">
                <option value="10" {{ request('per_page', 30) == 10 ? 'selected' : '' }}>10</option>
                <option value="15" {{ request('per_page', 30) == 15 ? 'selected' : '' }}>15</option>
                <option value="25" {{ request('per_page', 30) == 25 ? 'selected' : '' }}>25</option>
                <option value="30" {{ request('per_page', 30) == 30 ? 'selected' : '' }}>30</option>
                <option value="50" {{ request('per_page', 30) == 50 ? 'selected' : '' }}>50</option>
                <option value="100" {{ request('per_page', 30) == 100 ? 'selected' : '' }}>100</option>
            </select>
            <span class="ml-2 text-muted">{{ __('entries') }}</span>
        </div>

        {{-- Pagination Info --}}
        <div class="text-muted">
            {{ __('Showing') }} {{ $paginator->firstItem() ?? 0 }} {{ __('to') }} {{ $paginator->lastItem() ?? 0 }} {{ __('of') }} {{ $paginator->total() }} {{ __('results') }}
        </div>

        {{-- Jump to Page --}}
        <div class="d-flex align-items-center">
            <label for="jump-to-page" class="mr-2 text-muted">{{ __('Go to page') }}:</label>
            <input type="number" id="jump-to-page" class="form-control form-control-sm" style="width: 60px;"
                   min="1" max="{{ $paginator->lastPage() }}" value="{{ $paginator->currentPage() }}">
            <button type="button" id="jump-btn" class="btn btn-sm btn-outline-primary ml-2">{{ __('Go') }}</button>
        </div>
    </div>

    {{-- Pagination Navigation --}}
    <nav aria-label="Page navigation" class="mt-3">
        <ul class="pagination justify-content-center">
            {{-- First Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled">
                    <span class="page-link" aria-disabled="true">
                        <i class="fa fa-angle-double-left"></i>
                    </span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->url(1) }}{{ $extraParams ? '&'.$extraParams : '' }}" aria-label="@lang('pagination.first')">
                        <i class="fa fa-angle-double-left"></i>
                    </a>
                </li>
            @endif

            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled">
                    <span class="page-link" aria-disabled="true">
                        <i class="fa fa-angle-left"></i>
                    </span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}{{ $extraParams ? '&'.$extraParams : '' }}" rel="prev">
                        <i class="fa fa-angle-left"></i>
                    </a>
                </li>
            @endif

            {{-- Pagination Elements --}}
            @php
                $currentPage = $paginator->currentPage();
                $lastPage = $paginator->lastPage();

                // Show a window of 2 pages on each side of current page
                $start = max(1, $currentPage - 2);
                $end   = min($lastPage, $currentPage + 2);
            @endphp

            {{-- Show first page + ellipsis if range doesn't start at 1 --}}
            @if ($start > 1)
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->url(1) }}{{ $extraParams ? '&'.$extraParams : '' }}">1</a>
                </li>
                @if ($start > 2)
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                @endif
            @endif

            {{-- Show page numbers in the limited window --}}
            @for ($page = $start; $page <= $end; $page++)
                @if ($page == $currentPage)
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">{{ $page }}</span>
                    </li>
                @else
                    <li class="page-item">
                        <a class="page-link" href="{{ $paginator->url($page) }}{{ $extraParams ? '&'.$extraParams : '' }}">{{ $page }}</a>
                    </li>
                @endif
            @endfor

            {{-- Show ellipsis + last page if range doesn't end at lastPage --}}
            @if ($end < $lastPage)
                @if ($end < $lastPage - 1)
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                @endif
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->url($lastPage) }}{{ $extraParams ? '&'.$extraParams : '' }}">{{ $lastPage }}</a>
                </li>
            @endif

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}{{ $extraParams ? '&'.$extraParams : '' }}" rel="next">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </li>
            @else
                <li class="page-item disabled">
                    <span class="page-link" aria-disabled="true">
                        <i class="fa fa-angle-right"></i>
                    </span>
                </li>
            @endif

            {{-- Last Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}{{ $extraParams ? '&'.$extraParams : '' }}" aria-label="@lang('pagination.last')">
                        <i class="fa fa-angle-double-right"></i>
                    </a>
                </li>
            @else
                <li class="page-item disabled">
                    <span class="page-link" aria-disabled="true">
                        <i class="fa fa-angle-double-right"></i>
                    </span>
                </li>
            @endif
        </ul>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Page size selector
            const perPageSelector = document.getElementById('per-page-selector');
            if (perPageSelector) {
                perPageSelector.addEventListener('change', function() {
                    const url = new URL(window.location);
                    url.searchParams.set('per_page', this.value);
                    url.searchParams.set('page', '1'); // Reset to first page
                    window.location.href = url.toString();
                });
            }

            // Jump to page
            const jumpToPage = document.getElementById('jump-to-page');
            const jumpBtn = document.getElementById('jump-btn');

            if (jumpToPage && jumpBtn) {
                jumpBtn.addEventListener('click', function() {
                    const page = parseInt(jumpToPage.value);
                    if (page >= 1 && page <= {{ $paginator->lastPage() }}) {
                        const url = new URL(window.location);
                        url.searchParams.set('page', page);
                        window.location.href = url.toString();
                    }
                });

                jumpToPage.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        jumpBtn.click();
                    }
                });
            }
        });
    </script>
@endif