@extends('user::layouts.master')
@section('breadcrumb_title', trans('backend::translate.Wishlist'))

@push('styles')
    <style>
        .mb-25 {
            margin-bottom: 25px;
        }

        .tg-shop-product-thumb {
            border-radius: 15px;
            height: 280px;
            background: #80808014;
        }

        .tg-shop-product-thumb img {
            border-radius: 15px;
        }

        .tg-shop-product-title {
            font-size: 18px;
            text-transform: capitalize;
            color: #183354;
            margin-bottom: 5px;
        }

        .tg-shop-product-ratings {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .tg-shop-product-ratings ul {
            display: flex;
            padding-left: 0;
            margin-bottom: 0;
        }

        .tg-shop-ratting-wrapper i {
            color: #bbbbbb;
            font-size: 14px;
            margin-inline-end: 3px;
        }

        .tg-shop-ratting-wrapper i.active {
            color: #ff9901;
        }

        .tg-shop-product-ratings span {
            font-weight: 400;
            font-size: 14px;
            color: #353844;
            margin-left: 3px;
        }

        .display-price {
            font-size: 17px;
            font-weight: 500;
            color: #F4796C;
        }

        .display-price .line-through {
            text-decoration: line-through;
            color: gray;
            margin-inline-end: 7px;
        }

        .display-price span {
            font-size: 15px;
        }
    </style>
@endpush

@section('content')
    <div class="bg-white rounded-lg border border-border p-6 w-full">
        <!-- Header -->
        <div class="flex justify-between items-center mb-5">
            <div>
                <h2 class="text-2xl font-bold text-headline">{{ trans('backend::translate.Wishlist Products') }}</h2>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach ($wishlistProducts as $product)
                <div class="tg-shop-product-item mb-3">
                    <div class="tg-shop-product-thumb fix p-relative mb-3">
                        <a href="{{ route('product.detail', $product->slug) }}">
                            <img class="w-100 rounded-xl max-h-72" src="{{ $product->getFirstMediaUrl('featured') }}"
                                alt="{{ $product->title }}">
                        </a>
                    </div>
                    <div class="tg-shop-product-content">
                        <h3 class="tg-shop-product-title hover:text-[#F4796C]">
                            <a href="{{ route('product.detail', $product->slug) }}">
                                {{ $product->title }}
                            </a>
                        </h3>
                        <div class="tg-shop-product-ratings mb-4">
                            @include('frontend::components.avg-ratting', [
                                'rating' => $product->approved_reviews_avg_ratting,
                                'class' => 'd-flex list-unstyled',
                            ])
                            <span>( {{ __($product->approved_reviews_count) }}
                                {{ $product->approved_reviews_count > 1 ? 'Reviews' : 'Review' }}
                                )</span>
                        </div>
                        <div class="display-price">
                            {!! $product->getDisplayPrice() !!}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection