@include('layouts.header')
@include('layouts.tostMessage')
<div class="container m-t-80 p-b-140">
    <h2>Your Wishlist</h2>
    @if ($wishlists->isEmpty())
        <p>No products in your wishlist.</p>
    @else
        <div class="row">
            @foreach ($wishlists as $wishlist)
                <div class="product-item col-sm-6 col-md-4 col-lg-3 p-b-35">
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="{{ asset('product/' . explode(',', $wishlist->product->images)[0]) }}" alt="IMG-PRODUCT" loading="lazy" />
                            <div class="block2-btns">
                                <a href="{{ route('product.details', $wishlist->product) }}" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04">
                                    Quick View
                                </a>
                            </div>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l">
                                <b>{{ $wishlist->product->color }}</b>
                                <a href="{{ route('product.details', $wishlist->product) }}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    {{ $wishlist->product->name }}
                                </a>
                                <span class="stext-105 cl3">${{ $wishlist->product->price }}</span>
                            </div>
                            <div class="block2-txt-child2 flex-r p-t-3">
                                <form action="{{ route('wishlist.remove', $wishlist->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-remove-product text-danger">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

@include('layouts.footer')