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

        <!-- Banner -->
        <div class="col-sm-5 col-md-4 col-lg-3 col-xl-2 mb-5 mb-sm-0">
            <div class="pe-lg-2 pe-xl-4">
                <div class="rounded-4 overflow-hidden" style="background-color: #000000" data-bs-theme="light">
                    <div class="pt-3 px-3 mt-3 mx-3">
                        <h4 class="mb-2 mb-xl-3 text-white">Find your ways</h4>
                        <div class="nav">
                            <a class="nav-link animate-underline stretched-link px-0 text-white" href="#!">
                                <span class="animate-target">Shop now</span>
                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ratio mt-n2" style="--cz-aspect-ratio: calc(282 / 282 * 100%)">
                        <img src="{{ asset('img/thumbnail_demo.png') }}" alt="Banner">
                    </div>
                </div>
            </div>
        </div>

        <!-- Special products carousel -->
        <div class="col-sm-7 col-md-8 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">{{ __('special_product.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 text-nowrap">{{ __('special_product.view_all') }}</span>
                        <i class="ci-chevron-right fs-base ms-1"></i>
                    </a>
                </div>
            </div>
            <div class="swiper"
                data-swiper='{
              "slidesPerView": 2,
              "spaceBetween": 24,
              "pagination": {
                "el": ".swiper-pagination",
                "clickable": true
              },
              "breakpoints": {
                "840": {
                  "slidesPerView": 3
                },
                "992": {
                  "slidesPerView": 4
                },
                "1200": {
                  "slidesPerView": 5
                },
                "1400": {
                  "slidesPerView": 6
                }


              }
            }'>
                <div class="swiper-wrapper">

                    @foreach ($products as $key => $value)
                        <div class="swiper-slide h-auto swiper-slide-active" role="group" aria-label="1 / 4"
                            style="width: 171.75px; margin-right: 24px;">
                            <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">
                                        </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" disabled="">
                                                    <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-3 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>

            <!-- Slider pagination (Bullets) -->
            <div class="swiper-pagination position-static mt-3 mt-sm-4"></div>
        </div>
    </div>
    </div>
</section>
