@php
    $hasItems = $paginator && $paginator->total() > 0;
@endphp
@if($paginator != null)
    <div class="flex items-center justify-between py-4 px-4 sm:px-6 bg-white dark:bg-zinc-950 border-t border-zinc-200 dark:border-zinc-800 rounded-b-xl w-full">
        <div class="flex flex-1 justify-between sm:hidden">
            <!-- Mobile Pagination -->
            @if(!$paginator->onFirstPage())
                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors">Previous</a>
            @else
                <span class="relative inline-flex items-center rounded-lg border border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-400 dark:text-zinc-500 cursor-not-allowed">Previous</span>
            @endif

            @if($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="relative ml-3 inline-flex items-center rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors">Next</a>
            @else
                <span class="relative ml-3 inline-flex items-center rounded-lg border border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-400 dark:text-zinc-500 cursor-not-allowed">Next</span>
            @endif
        </div>
        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-0">
                    @if($hasItems)
                        Showing <span class="font-semibold text-zinc-900 dark:text-white">{{ $paginator->firstItem() }}</span> to <span class="font-semibold text-zinc-900 dark:text-white">{{ $paginator->lastItem() }}</span> of <span class="font-semibold text-zinc-900 dark:text-white">{{ $paginator->total() }}</span> results
                    @else
                        Showing <span class="font-semibold text-zinc-900 dark:text-white">0</span> to <span class="font-semibold text-zinc-900 dark:text-white">0</span> of <span class="font-semibold text-zinc-900 dark:text-white">0</span> results
                    @endif
                </p>
            </div>

            @if($paginator->hasPages())
                <div>
                    <nav class="isolate inline-flex -space-x-px rounded-lg shadow-sm" aria-label="Pagination">
                        <!-- Previous Button -->
                        @if(!$paginator->onFirstPage())
                            <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center rounded-l-lg px-2.5 py-2 text-zinc-500 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:z-20 focus:outline-offset-0 transition-colors">
                                <span class="sr-only">Previous</span>
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /></svg>
                            </a>
                        @else
                            <span class="relative inline-flex items-center rounded-l-lg px-2.5 py-2 text-zinc-300 dark:text-zinc-600 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 bg-zinc-50 dark:bg-zinc-900/50 cursor-not-allowed">
                                <span class="sr-only">Previous</span>
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /></svg>
                            </span>
                        @endif

                        {{-- Pagination Links --}}
                        @php
                            $currentPage = $paginator->currentPage();
                            $lastPage = $paginator->lastPage();
                            $startPage = max(1, $currentPage - 2);
                            $endPage = min($lastPage, $currentPage + 2);

                            if ($currentPage <= 3) {
                                $endPage = min(5, $lastPage);
                            }

                            if ($currentPage >= $lastPage - 2) {
                                $startPage = max(1, $lastPage - 4);
                            }
                        @endphp

                        @if($startPage > 1)
                            <a href="{{ $paginator->url(1) }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold {{ 1 == $currentPage ? 'z-10 bg-emerald-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600' : 'text-zinc-700 dark:text-zinc-300 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors focus:z-20 focus:outline-offset-0' }}">1</a>
                            @if($startPage > 2)
                                <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-zinc-500 dark:text-zinc-500 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 focus:outline-offset-0">...</span>
                            @endif
                        @endif

                        @for ($page = $startPage; $page <= $endPage; $page++)
                            <a href="{{ $paginator->url($page) }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold {{ $page == $currentPage ? 'z-10 bg-emerald-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600' : 'text-zinc-700 dark:text-zinc-300 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors focus:z-20 focus:outline-offset-0' }}">{{ $page }}</a>
                        @endfor

                        @if($endPage < $lastPage)
                            @if($endPage < $lastPage - 1)
                                <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-zinc-500 dark:text-zinc-500 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 focus:outline-offset-0">...</span>
                            @endif
                            <a href="{{ $paginator->url($lastPage) }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold {{ $lastPage == $currentPage ? 'z-10 bg-emerald-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600' : 'text-zinc-700 dark:text-zinc-300 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors focus:z-20 focus:outline-offset-0' }}">{{ $lastPage }}</a>
                        @endif

                        <!-- Next Button -->
                        @if($paginator->hasMorePages())
                            <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center rounded-r-lg px-2.5 py-2 text-zinc-500 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors focus:z-20 focus:outline-offset-0">
                                <span class="sr-only">Next</span>
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /></svg>
                            </a>
                        @else
                            <span class="relative inline-flex items-center rounded-r-lg px-2.5 py-2 text-zinc-300 dark:text-zinc-600 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 bg-zinc-50 dark:bg-zinc-900/50 cursor-not-allowed">
                                <span class="sr-only">Next</span>
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /></svg>
                            </span>
                        @endif
                    </nav>
                </div>
            @endif
        </div>
    </div>
@endif