@if($data->hasPages())
    <div class="mt-8">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

            {{-- Info halaman --}}
            <div class="text-sm text-center text-gray-600 sm:text-left">
                Halaman {{ $data->currentPage() }} dari {{ $data->lastPage() }}
            </div>

            {{-- Pagination --}}
            <div class="flex justify-center gap-1 overflow-x-auto">

                {{-- Previous --}}
                @if($data->onFirstPage())
                    <span class="px-3 py-2 text-gray-400 bg-gray-100 rounded-lg cursor-not-allowed">
                        ‹
                    </span>
                @else
                    <a href="{{ $data->previousPageUrl() }}&{{ http_build_query(request()->except('page')) }}"
                       class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        ‹
                    </a>
                @endif

                {{-- Page numbers (DESKTOP SAJA) --}}
                <div class="hidden gap-1 sm:flex">
                    @foreach($data->getUrlRange(
                        max(1, $data->currentPage() - 2),
                        min($data->lastPage(), $data->currentPage() + 2)
                    ) as $page => $url)

                        @if($page == $data->currentPage())
                            <span class="px-3 py-2 text-white bg-blue-600 rounded-lg">
                                {{ $page }}
                            </span>
                        @else
                            <a href="{{ $url }}&{{ http_build_query(request()->except('page')) }}"
                               class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                                {{ $page }}
                            </a>
                        @endif
                    @endforeach
                </div>

                {{-- Next --}}
                @if($data->hasMorePages())
                    <a href="{{ $data->nextPageUrl() }}&{{ http_build_query(request()->except('page')) }}"
                       class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        ›
                    </a>
                @else
                    <span class="px-3 py-2 text-gray-400 bg-gray-100 rounded-lg cursor-not-allowed">
                        ›
                    </span>
                @endif

            </div>
        </div>
    </div>
@endif