{{-- resources/views/front/partial/products-grid.blade.php --}}
<div id="products-wrapper">
    <div class="grid grid-cols-12 gap-6 pb-12">
        @forelse($products as $product)
            @include('front.partial.product-cart', ['product' => $product])
        @empty
            <div class="col-span-12 flex flex-col items-center justify-center py-20 text-center">
                <div class="mb-6 bg-gray-50 p-8 rounded-full">
                    <i class="hgi hgi-stroke hgi-search-list text-6xl text-gray-300"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">No Products Found</h3>
                <p class="text-gray-500 mb-8 max-w-xs">
                    We couldn't find any products matching your current filters. Try adjusting them!
                </p>
                <button onclick="resetFilters()"
                        class="btn btn-primary rounded-full px-10 py-3 shadow-lg hover:shadow-primary/30 transition-all">
                    <span>Clear All Filters</span>
                </button>
            </div>
        @endforelse
    </div>

    @if($products->hasPages())
        <div class="flex items-center justify-center md:justify-between">
            <p class="hidden md:block text-gray-600">
                Showing <span class="font-medium">{{ $products->firstItem() }}</span>–<span
                    class="font-medium">{{ $products->lastItem() }}</span> of <span
                    class="font-medium">{{ $products->total() }}</span> results
            </p>
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <ul class="flex items-center justify-center gap-x-1.5 blog-pagination">
                        <li class="group blog-pagination-item">
                            @if($products->onFirstPage())
                                <span class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] bg-gray-50 border border-gray-200 opacity-50 cursor-not-allowed">
                                    <i class="hgi hgi-stroke hgi-arrow-left-01 text-[20px] text-gray-400"></i>
                                </span>
                            @else
                                <button data-page="{{ $products->currentPage() - 1 }}"
                                        class="ajax-page inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] bg-white border border-gray-300 hover:border-primary hover:bg-[rgba(0,171,85,0.08)] transition-all duration-300">
                                    <i class="hgi hgi-stroke hgi-arrow-left-01 text-[20px] text-light-primary-text group-hover:text-primary"></i>
                                </button>
                            @endif
                        </li>

                        @foreach($products->getUrlRange(max(1, $products->currentPage()-2), min($products->lastPage(), $products->currentPage()+2)) as $page => $url)
                            <li class="blog-pagination-item">
                                <button data-page="{{ $page }}"
                                        class="ajax-page inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] border transition-all duration-300
                                   {{ $page == $products->currentPage()
                                      ? 'bg-primary border-primary text-white font-semibold'
                                      : 'bg-white border-gray-200 text-gray-600 hover:border-primary hover:text-primary' }}">
                                    {{ $page }}
                                </button>
                            </li>
                        @endforeach

                        @if($products->lastPage() > $products->currentPage() + 2)
                            <li class="blog-pagination-item">
                                <span class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] bg-white text-gray-400">
                                    <i class="hgi hgi-stroke hgi-more-horizontal text-[20px]"></i>
                                </span>
                            </li>
                        @endif

                        <li class="group blog-pagination-item">
                            @if($products->hasMorePages())
                                <button data-page="{{ $products->currentPage() + 1 }}"
                                        class="ajax-page inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] bg-white border border-gray-300 hover:border-primary hover:bg-[rgba(0,171,85,0.08)] transition-all duration-300">
                                    <i class="hgi hgi-stroke hgi-arrow-right-01 text-[20px] text-light-primary-text group-hover:text-primary"></i>
                                </button>
                            @else
                                <span class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] bg-gray-50 border border-gray-200 opacity-50 cursor-not-allowed">
                                    <i class="hgi hgi-stroke hgi-arrow-right-01 text-[20px] text-gray-400"></i>
                                </span>
                            @endif
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    @endif
</div>