@include('front.partials.catalog-card-styles')

@if($products->isNotEmpty())

    @php
        $translator = app(\App\Services\TranslationService::class);
        $locale = app()->getLocale();
    @endphp

    @foreach($products as $product)
        @if($product instanceof \App\Models\RestaurantMenuItem)
            {{-- Carte « plat » (Viki Restaurant). --}}
            @php
                $dishThumb = $product->firstPhotoPath();
                $dishName = $translator->translate($product->name, $locale);
                $resto = $product->restaurateur;
                $restoName = $resto ? ($resto->company ?: $resto->name) : null;
                $dishInWishlist = in_array($product->id, $wishlistDishIds ?? []);
            @endphp

            <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('dish.show', $product->id) }}" class="thumbnail-preview">
                            <div class="badge card-label-badge">
                                <span>{{ __('restaurant.menu_label') }}</span>
                            </div>

                            @if($dishThumb)
                                <img src="{{ asset('storage/' . $dishThumb) }}" alt="{{ $dishName }}" loading="lazy" width="300" height="300">
                            @else
                                <img src="{{ asset('front/images/default.png') }}" alt="no image">
                            @endif
                        </a>
                    </div>

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

                        <span
                            class="single-action openuptip message-show-action wishlist-toggle card-wishlist-btn"
                            data-flow="up"
                            data-item-type="dish"
                            data-item-id="{{ $product->id }}"
                            style="cursor:pointer;"
                        >
                            <i class="{{ $dishInWishlist ? 'fa-solid' : 'fa-light' }} fa-heart wishlist-icon"></i>
                        </span>

                        @include('front.partials.card-rating', [
                            'avg' => $product->reviews_avg_rating,
                            'count' => $product->reviews_count ?? null,
                            'ratingStyle' => 'margin: 6px 0;',
                        ])

                        @include('front.partials.card-distance', ['item' => $product])

                        @if($restoName)
                            {{-- La pastille tient sur une ligne et tronque : le nom
                                 complet reste accessible en infobulle. --}}
                            <span class="availability translate" title="{{ $restoName }}{{ $resto->city ? ' · ' . $resto->city : '' }}">
                                <i class="fa-solid fa-utensils"></i>
                                {{ $restoName }}{{ $resto->city ? ' · ' . $resto->city : '' }}
                            </span>
                        @endif

                        <div class="price-area">
                            <span class="current">{{ display_price($product->price, $product->currency) }}</span>
                        </div>

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

                            <input type="hidden" name="item_type" value="dish">
                            <input type="hidden" name="item_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="999"
                                    >

                                    <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>
            @continue
        @endif

        @if($product instanceof \App\Models\Maison)
            {{-- Carte « maison » (Viki Location de Logements) --}}
            <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('maison.show', $product->id) }}" class="thumbnail-preview">
                            @php $maisonHasDiscount = $product->reducted_price > 0 && $product->reducted_price < $product->price; @endphp

                            @if($maisonHasDiscount)
                                <div class="badge">
                                    <span>-{{ round((($product->price - $product->reducted_price) / $product->price) * 100) }}%</span>
                                    <i class="fa-solid fa-bookmark"></i>
                                </div>
                            @endif

                            <div class="badge card-label-badge {{ $maisonHasDiscount ? 'is-right' : '' }}">
                                <span>{{ __('messages.rentals_category') }}</span>
                            </div>

                            @php $maisonImage = $product->firstImage; @endphp

                            @if($maisonImage && file_exists(public_path('cache/maisons/thumb_' . $maisonImage->id . '.webp')))
                                <img src="{{ asset('cache/maisons/thumb_' . $maisonImage->id . '.webp') }}" alt="{{ $product->title }}" loading="lazy" width="300" height="300">
                            @elseif($maisonImage)
                                <img src="{{ route('maison.thumbnail.show', $maisonImage->id) }}" alt="{{ $product->title }}" loading="lazy" width="300" height="300">
                            @else
                                <img src="{{ asset('front/images/default.png') }}" alt="no image">
                            @endif
                        </a>
                    </div>

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

                        <span
                            class="single-action openuptip message-show-action wishlist-toggle card-wishlist-btn"
                            data-flow="up"
                            data-item-type="maison"
                            data-item-id="{{ $product->id }}"
                            style="cursor:pointer;"
                        >
                            <i class="{{ in_array($product->id, $wishlistMaisonIds ?? []) ? 'fa-solid' : 'fa-light' }} fa-heart wishlist-icon"></i>
                        </span>

                        @include('front.partials.card-rating', [
                            'avg' => $product->reviews_avg_rating,
                            'count' => $product->reviews_count ?? null,
                            'ratingStyle' => 'margin: 6px 0;',
                        ])

                        @include('front.partials.card-distance', ['item' => $product])

                        <span class="availability translate" title="{{ $product->city }}{{ $product->country ? ', ' . $product->country : '' }}">
                            <i class="fa-solid fa-location-dot"></i>
                            {{ $product->city }}{{ $product->country ? ', ' . $product->country : '' }}
                        </span>

                        <div class="price-area">
                            @if($product->reducted_price > 0 && $product->reducted_price < $product->price)
                                <span class="current">{{ display_price($product->reducted_price, $product->currency) }}</span>
                                <div class="previous">{{ display_price($product->price, $product->currency) }}</div>
                            @else
                                <span class="current">{{ display_price($product->price, $product->currency) }}</span>
                            @endif
                        </div>

                        <div class="cart-counter-action">
                            <a href="{{ route('maison.show', $product->id) }}" class="rts-btn btn-primary radious-sm with-icon" style="width:100%;">
                                <div class="btn-text">{{ __('viki.card_see_house') }}</div>
                                <div class="arrow-icon"><i class="fa-solid fa-house"></i></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @continue
        @endif

        @if($product->is_custom)
            {{-- Carte « création sur mesure » : on renvoie vers le configurateur,
                 le client ne peut pas l'ajouter au panier sans l'avoir personnalisée. --}}
            @php
                $creationImage = $product->firstImage;
                $creationName = $translator->translate($product->product_name, $locale);
            @endphp

            <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('sur-mesure.creation', $product->id) }}" class="thumbnail-preview">
                            <div class="badge card-label-badge">
                                <span>{{ __('surmesure.menu_label') }}</span>
                            </div>

                            @if($creationImage && file_exists(public_path('cache/products/thumb_' . $creationImage->id . '.webp')))
                                <img src="{{ asset('cache/products/thumb_' . $creationImage->id . '.webp') }}" alt="{{ $creationName }}" loading="lazy" width="300" height="300">
                            @elseif($creationImage)
                                <img src="{{ route('vendor.products.thumbnail.show', $creationImage->id) }}" alt="{{ $creationName }}" loading="lazy" width="300" height="300">
                            @else
                                <img src="{{ asset('front/images/default.png') }}" alt="no image">
                            @endif
                        </a>
                    </div>

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

                        {{-- Une création sur mesure est un Product : même bascule que le catalogue. --}}
                        <span
                            class="single-action openuptip message-show-action wishlist-toggle card-wishlist-btn"
                            data-flow="up"
                            data-product-id="{{ $product->id }}"
                            style="cursor:pointer;"
                        >
                            <i class="{{ in_array($product->id, $wishlistProductIds ?? []) ? 'fa-solid' : 'fa-light' }} fa-heart wishlist-icon"></i>
                        </span>

                        @include('front.partials.card-rating', [
                            'avg' => $product->reviews_avg_rating,
                            'count' => $product->reviews_count ?? null,
                            'ratingStyle' => 'margin: 6px 0;',
                        ])

                        @include('front.partials.card-distance', ['item' => $product])

                        <span class="availability translate">
                            @if($product->production_delay_days)
                                <i class="fa-regular fa-clock"></i>
                                {{ $product->production_delay_days }} {{ __('surmesure.days') }}
                            @else
                                {{ __('surmesure.pricing_' . $product->pricing_mode) }}
                            @endif
                        </span>

                        <div class="price-area">
                            @if($product->pricing_mode === 'quote')
                                <span class="current">{{ __('surmesure.from') }} {{ display_price($product->final_price, $product->currency) }}</span>
                            @else
                                <span class="current">{{ display_price($product->final_price, $product->currency) }}</span>
                            @endif
                        </div>

                        @if($product->free_shipping)
                            @include('front.partials.free-shipping-badge', ['style' => 'margin:4px 0 8px; font-size:12px;'])
                        @endif

                        <div class="cart-counter-action">
                            <a href="{{ route('sur-mesure.creation', $product->id) }}" class="rts-btn btn-primary radious-sm with-icon" style="width:100%;">
                                <div class="btn-text">{{ __('surmesure.customise') }}</div>
                                <div class="arrow-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @continue
        @endif

        <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->firstImage;
                            $translatedName = $translator->translate($product->product_name, $locale);
                        @endphp

                        @if($firstImage && file_exists(public_path('cache/products/thumb_' . $firstImage->id . '.webp')))
                            <img 
                                src="{{ asset('cache/products/thumb_' . $firstImage->id . '.webp') }}"
                                alt="{{ $translatedName }}"
                                loading="lazy"
                                width="300"
                                height="300"
                            >
                        @elseif($firstImage)
                            <img 
                                src="{{ route('vendor.products.thumbnail.show', $firstImage->id) }}"
                                alt="{{ $translatedName }}"
                                loading="lazy"
                                width="300"
                                height="300"
                            >
                        @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) }}">
                        <div>
                            <h4 class="product-title">
                                {{ $translatedName }}
                            </h4>
                        </div>
                    </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 card-wishlist-btn"
                        data-flow="up"
                        data-product-id="{{ $product->id }}"
                        style="cursor:pointer;"
                    >
                        <i class="{{ $isInWishlist ? 'fa-solid' : 'fa-light' }} fa-heart wishlist-icon"></i>
                    </span>

                    <div class="product-rating" style="margin: 6px 0;">
                        @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>

                    @include('front.partials.card-distance', ['item' => $product])

                    <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">
                                {{ display_price($product->reducted_price, $product->currency) }}
                            </span>
                            <div class="previous">
                                {{ display_price($product->product_price, $product->currency) }}
                            </div>
                        @else
                            <span class="current">
                                {{ display_price($product->product_price, $product->currency) }}
                            </span>
                        @endif
                    </div>

                    @if($product->free_shipping)
                        @include('front.partials.free-shipping-badge', ['style' => 'margin:4px 0 8px; font-size:12px;'])
                    @endif

                    {{-- Une déclinaison à choisir ne se résout pas depuis un listing :
                         la carte garde le même bouton que les autres produits, mais
                         emmène le client sur la fiche avec la quantité déjà saisie. --}}
                    @if($product->requiresVariantChoice())
                        <form action="{{ route('product.show', $product->id) }}" method="GET" class="choose-variant-form">
                    @else
                        <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">
                    @endif

                            <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">
        @if($visitorLocationLabel ?? null)
            @include('front.partials.location-empty')
        @else
            <p>{{ __('messages.no_product_available') }}</p>
        @endif
    </div>
@endif