@if($products->count())

    <div class="section-title-row">
        <div class="section-title">
            <i class="fa-solid {{ $icon }}"></i>
            <span>{{ $title }}</span>
        </div>

        <a href="{{ $seeAllRoute }}" class="section-link">
            সব দেখুন
        </a>
    </div>

    <div class="new-product-scroll">

        @foreach($products as $product)

            <div class="product-card new-product-card">

                <button type="button" class="fav-btn">
                    <i class="fa-regular fa-heart"></i>
                </button>

                <a href="{{ route('user.product.details', $product->slug) }}" class="product-link">

                    <div class="product-img-wrap">

                        <img
                            src="{{ $product->images->first() ? $product->images->first()->image_url : asset('images/default-product.png') }}"
                            class="product-img"
                            alt="{{ $product->name }}"
                        >

                        @if($product->display_price['has_discount'])
                            <div class="discount-badge">
                                {{ rtrim(rtrim($product->display_price['discount_percent'], '0'), '.') }}% ছাড়
                            </div>
                        @endif

                    </div>

                    <div class="product-info">

                        <div class="product-name">
                            {{ $product->name }}
                        </div>

                        <div class="price-line">
                            <span class="price">
                                ৳{{ number_format($product->display_price['final'], 0) }}
                            </span>

                            @if($product->display_price['has_discount'])
                                <span class="old-price">
                                    ৳{{ number_format($product->display_price['base'], 0) }}
                                </span>
                            @endif
                        </div>

                    </div>

                </a>

            </div>

        @endforeach

    </div>

@endif