@if ($products->isNotEmpty() )
<section class="container py-10">
    <div class="mb-6 flex items-center justify-between gap-x-6 text-nowrap">
        <h4 class="font-semiBold lg:text-xl">{{ $title }}</h4>
        <div class="h-[0.25px] w-full bg-secondary"></div>
        <a href="{{ $link }}">
            <div class="flex cursor-pointer items-center gap-x-2 text-sm text-primary duration-200 hover:text-primary/80 lg:text-base">
                <p>
                    {{ __('see all') }}
                </p>
                <i class="i-carbon-chevron-left"></i>
            </div>
        </a>
    </div>

    <div>
        <div class="swiper product-slider !px-px pt-4">
            <div class="swiper-wrapper py-px">
                @foreach($products as $product)
                <div class="swiper-slide">
                    <div class="border-gradient relative rounded-[var(--product-card-radius)] p-px [--product-card-radius:theme(borderRadius.2xl)] before:absolute before:-inset-px before:h-[calc(100%+2px)] before:w-[calc(100%+2px)] before:rounded-[var(--product-card-radius)] before:content-['']">
                        <a href="{{ route('product.details' ,$product->slug) }}" class="relative block overflow-hidden rounded-[calc(var(--product-card-radius)-1px)] bg-muted">
                            <div class="mb-4 bg-secondary p-2 lg:p-4">
                                <img src="{{ $product->brand_img }}" alt="{{ $product->title }}" class="aspect-[1/1] w-full rounded-xl object-cover" />
                            </div>

                            <div class="mb-1 px-2 lg:px-4">
                                <p class="line-clamp-2 h-10 text-sm xs:h-12 xs:text-base">
                                    {{ $product->title }}
                                </p>

                                <div class="gap-x-1 text-end font-bold text-primary">
                                    @if ($product->discount_price != 0 && $product->discount_price != null)
                                    <div class="h-5 text-end text-sm text-text/50 xs:text-base">
                                        <del>
                                            {{ number_format($product->price) }} {{ getCurrency() }}
                                        </del>
                                    </div>
                                    <span class="text-sm xs:text-base">{{ number_format($product->discount_price) }}</span>
                                    <span class="text-sm font-light">{{ getCurrency() }}</span>
                                    @else
                                    <div class="h-5 text-end text-sm text-text/50 xs:text-base">

                                    </div>

                                    @if ($product->price != 0)
                                    <span class="text-sm xs:text-base">{{ number_format($product->price) }}</span>
                                    <span class="text-sm font-light">{{ getCurrency() }}</span>
                                    @else
                                    <span class="text-sm xs:text-base">{{ $product->display_price }}</span>
                                    @endif

                                    @endif
                                </div>
                            </div>
                            <div class="h-8 px-2 lg:px-4"></div>
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif