@php
    $totalProducts = $products instanceof Illuminate\Pagination\LengthAwarePaginator ? $products->total() : $products->count();
    $currentCount = $products->count();
@endphp

<div class="products-filter-bar">
    <div class="filter-options">
        <span class="filter-label">ترتيب حسب:</span>
        <select class="form-select form-select-sm sort-select"
                style="width: auto;"
                onchange="updateMerchantSort(this.value)">
            <option value="latest" {{ request('sort_by', 'latest') == 'latest' ? 'selected' : '' }}>الأحدث</option>
            <option value="best_selling" {{ request('sort_by') == 'best_selling' ? 'selected' : '' }}>الأكثر مبيعاً</option>
            <option value="top_rated" {{ request('sort_by') == 'top_rated' ? 'selected' : '' }}>الأعلى تقييماً</option>
            <option value="price_low" {{ request('sort_by') == 'price_low' ? 'selected' : '' }}>السعر: من الأقل للأعلى</option>
            <option value="price_high" {{ request('sort_by') == 'price_high' ? 'selected' : '' }}>السعر: من الأعلى للأقل</option>
        </select>
    </div>
    <div class="product-count">
        عرض {{ $currentCount }} منتج @if($totalProducts > $currentCount) من {{ $totalProducts }} @endif
    </div>
</div>

@if($products->count() > 0)
    <div class="collection-product-wrapper">
        <div class="product-wrapper-grid pt-3">
            @include('ecommerce::pages.partials.product-grid', compact('products'))
        </div>
    </div>

    @if($products instanceof Illuminate\Pagination\LengthAwarePaginator && $products->hasPages())
    <div class="row mt-5">
        <div class="col-12">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    <li class="page-item {{ $products->onFirstPage() ? 'disabled' : '' }}">
                        <a class="page-link"
                           href="{{ $products->previousPageUrl() }}&sort_by={{ request('sort_by', 'latest') }}&category={{ request('category', 'all') }}"
                           up-target=".products-main"
                           up-scroll="false">
                            السابق
                        </a>
                    </li>

                    @foreach($products->getUrlRange(1, $products->lastPage()) as $page => $url)
                        <li class="page-item {{ $page == $products->currentPage() ? 'active' : '' }}">
                            <a class="page-link"
                               href="{{ $url }}&sort_by={{ request('sort_by', 'latest') }}&category={{ request('category', 'all') }}"
                               up-target=".products-main"
                               up-scroll="false">
                                {{ $page }}
                            </a>
                        </li>
                    @endforeach

                    <li class="page-item {{ !$products->hasMorePages() ? 'disabled' : '' }}">
                        <a class="page-link"
                           href="{{ $products->nextPageUrl() }}&sort_by={{ request('sort_by', 'latest') }}&category={{ request('category', 'all') }}"
                           up-target=".products-main"
                           up-scroll="false">
                            التالي
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    @endif
@else
    <div class="col-12 text-center py-5">
        <div class="empty-state">
            <i class="fa fa-inbox fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">لا توجد منتجات</h4>
            <p class="text-muted">لم يتم العثور على منتجات في هذا التصنيف.</p>
        </div>
    </div>
@endif

<script>
function updateMerchantSort(sortBy) {
    console.log('🔧 updateMerchantSort called with:', sortBy);
    const loadingElement = document.getElementById('productsLoading');
    if (loadingElement) loadingElement.style.display = 'block';

    const url = new URL(window.location.href);
    url.searchParams.set('sort_by', sortBy);

    up.navigate(url.toString(), {
        target: '.products-main',
        scroll: false
    });
}
</script>