<section class="container-xxl pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
    <div class="row">

        <!-- Categories list -->
        <div class="col-lg-3 col-xl-2 pb-2 pb-sm-3 pb-md-4 mb-5 mb-lg-0">
            <h2 class="h3 border-bottom pb-3 pb-md-4 mb-4">{{ __('home_popular_products.category') }}</h2>
            <div class="row nav g-3 g-sm-4">

                @foreach ($categories as $key => $value)
                    @if ($value->productCount() > 0)
                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
                            <div class="position-relative d-flex min-w-0 align-items-center">
                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
                                    style="width: 56px; height: 56px">
                                    <img src="{{ $value->image_url }}" width="40" alt="Image">
                                </div>
                                <div class="min-w-0 ps-3">
                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
                                        href="{{ route('product.index', ['filter[category]' => $value->id]) }}">
                                        <span class="animate-target text-truncate">{{ $value->name ?? '' }}</span>
                                    </a>
                                    <div class="fs-xs fw-normal text-body-secondary">{{ $value->productCount() }}
                                        products
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach


            </div>
        </div>

        <div class="col-lg-9 col-xl-10">
            <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4">
                <h2 class="h3 mb-0">{{ __('home_popular_products.title') }}</h2>
                <div class="nav ms-3">
                    <a class="nav-link animate-underline px-0 py-2" href="{{ route('product.index') }}">
                        <span class="animate-target">{{ __('home_popular_products.view_all') }}</span>
                        <i class="ci-chevron-right fs-base ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Products grid -->
            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-5 row-cols-xxl-6">

                @foreach ($products as $key => $value)
                    <!-- Item -->
                    <div class="col">
                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
                            <div class="position-relative z-2">
                                {{-- <button type="button"
                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
                                    aria-label="Add to Wishlist">
                                    <i class="ci-heart animate-target"></i>
                                </button> --}}
                                <a class="d-block" href="{{ route('product.detail', [$value->slug]) }}">
                                    <div class="ratio" style="--cz-aspect-ratio: calc(191 / 191 * 100%)">
                                        <img src="{{ $value->image_url }}" alt="Image" loading="lazy">
                                    </div>
                                </a>
                                {{-- <div class="position-absolute w-100 start-0 bottom-0">
                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
                                        <div
                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
                                            <button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
                                                aria-label="Decrement quantity">
                                                <i class="ci-minus fs-sm"></i>
                                            </button>
                                            <input type="number"
                                                class="form-control form-control-sm bg-primary text-white w-100"
                                                value="0" min="0" readonly>
                                            <button type="button"
                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
                                                data-increment aria-label="Increment quantity">
                                                <span data-count-input-value></span>
                                                <i class="ci-plus fs-sm"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                            <div class="card-body px-0 pt-2 pb-2">
                                <div class="h6 mb-2">{{ $value->display_price_currency }}</div>
                                <h3 class="fs-sm lh-base mb-0">
                                    <a class="hover-effect-underline fw-normal"
                                        href="{{ route('product.detail', [$value->slug]) }}">{{ $value->name }}</a>
                                </h3>
                            </div>
                            @if ($value->variants->count() > 1)
                                <div class="fs-xs text-body-secondary pb-2 pb-md-3">
                                    +{{ $value->variants->count() - 1 }} Varian</div>
                            @endif
                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </div>
</section>
