@if($products->isNotEmpty())
    @foreach($products as $product)
        <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6">
            <div class="single-shopping-card-one">
                <div class="image-and-action-area-wrapper">
                    <a href="{{ route('product.show', $product->id) }}" class="thumbnail-preview">
                        @if($product->reducted_price > 0 && $product->reducted_price < $product->product_price)
                            <div class="badge">
                                <span>
                                    -{{ round((($product->product_price - $product->reducted_price) / $product->product_price) * 100) }}%
                                </span>
                                <i class="fa-solid fa-bookmark"></i>
                            </div>
                        @endif

                        @php
                            $firstImage = $product->images->first();
                        @endphp

                        @if($firstImage)
                            <img src="{{ route('vendor.products.image.show', $firstImage->id) }}" alt="{{ $product->product_name }}">
                        @else
                            <img src="{{ asset('front/images/default.png') }}" alt="no image">
                        @endif
                    </a>
                </div>

                <div class="body-content">
                    <a href="{{ route('product.show', $product->id) }}">
                        <h4 class="title">{{ $product->product_name }}</h4>
                    </a>

                    @php
                        $isInWishlist = in_array($product->id, $wishlistProductIds ?? []);
                        $avgRating = round($product->reviews_avg_rating ?? 0, 1);
                        $fullStars = floor($avgRating);
                        $hasHalfStar = ($avgRating - $fullStars) >= 0.5;
                    @endphp

                    <span
                        class="single-action openuptip message-show-action wishlist-toggle"
                        data-flow="up"
                        data-product-id="{{ $product->id }}"
                        style="cursor:pointer;"
                        id="home-wishlit-product-grid"
                    >
                        <i class="{{ $isInWishlist ? 'fa-solid' : 'fa-light' }} fa-heart wishlist-icon"
                           id="home-wishlit-product-grid-heart"></i>
                    </span>
                    <br>

                    <div class="product-rating" style="margin: 6px 0;margin-top:-18px;">
                        @for($i = 1; $i <= 5; $i++)
                            @if($i <= $fullStars)
                                <i class="fa-solid fa-star" style="color:#f5b301;"></i>
                            @elseif($i == $fullStars + 1 && $hasHalfStar)
                                <i class="fa-solid fa-star-half-stroke" style="color:#f5b301;"></i>
                            @else
                                <i class="fa-regular fa-star" style="color:#f5b301;"></i>
                            @endif
                        @endfor

                        <span style="font-size: 13px; margin-left: 6px;">
                            {{ $avgRating }}/5
                        </span>

                        @if($product->reviews_count ?? false)
                            <span style="font-size: 13px; color: #777;">
                                ({{ $product->reviews_count }})
                            </span>
                        @endif
                    </div>

                    <span class="availability">{{ __('messages.' . $product->etatProduit) }}</span>

                    <div class="price-area">
                        @if($product->reducted_price > 0 && $product->reducted_price < $product->product_price)
                            <span class="current">{{ number_format($product->reducted_price, 2, ',', ' ') }}€</span>
                            <div class="previous">{{ number_format($product->product_price, 2, ',', ' ') }}€</div>
                        @else
                            <span class="current">{{ number_format($product->product_price, 2, ',', ' ') }}€</span>
                        @endif
                    </div>

                    <form action="{{ route('cart.add') }}" method="POST">
                        @csrf

                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="remove_from_wishlist" value="1">

                        <div class="cart-counter-action">
                            <div class="quantity-edit">
                                <input 
                                    type="text"
                                    name="quantity"
                                    class="input quantity-input"
                                    value="1"
                                    data-stock="{{ $product->product_stock }}"
                                >

                                <div class="button-wrapper-action">
                                    <button class="button" type="button">
                                        <i class="fa-regular fa-chevron-down"></i>
                                    </button>
                                    <button class="button plus" type="button">
                                        +<i class="fa-regular fa-chevron-up"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit" class="rts-btn btn-primary radious-sm with-icon">
                                <div class="btn-text">
                                    {{ __('messages.add') }}
                                </div>
                                <div class="arrow-icon">
                                    <i class="fa-solid fa-cart-shopping"></i>
                                </div>
                                <div class="arrow-icon">
                                    <i class="fa-solid fa-cart-shopping"></i>
                                </div>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
@else
    <div class="col-12">
        <p>{{ __('messages.no_product_available') }}</p>
    </div>
@endif