@extends('layouts.app')

@section('content')
    <style>
        .is-loading {
            display: none !important;
        }
        .fade-out {
            opacity: 0;
            transition: opacity 0.5s ease;
        }
    </style>
    <div class="container py-4">
        <h2 class="mb-4">My Wishlist</h2>
        <div class="row g-4" id="wishlist-container">
            @forelse ($wishlist->items as $item)
                <div class="col-md-3" id="wishlist-row-{{ $item->product_id }}">
                    <div class="card h-100 shadow-sm border-0">
                        {{-- <img src="{{ asset('storage/' . $item->product->thumbnail) }}" 
                         class="card-img-top" style="height:200px; object-fit:cover;"> --}}
                        <img src="{{ asset('storage/uploads/' . $item->product->thumbnail) }}"
                            class="card-img-top rounded-top" alt="{{ $item->product->name }}"
                            style="height:auto; object-fit:cover;">

                        <div class="card-body">
                            <h6 class="text-truncate">{{ $item->product->name }}</h6>
                            <p class="text-primary fw-bold">₹{{ number_format($item->product->price) }}</p>

                            <button
                                onclick="this.classList.add('is-loading'); toggleWishlist({{ $item->product_id }}, this)"
                                class="btn btn-danger btn-sm w-100">
                                <i class="bi bi-trash"></i> Remove
                            </button>


                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <h4>Your wishlist is empty</h4>
                    <a href="{{ url('/products') }}" class="btn btn-primary mt-3">Continue Shopping</a>
                </div>
            @endforelse
        </div>
    </div>
@endsection