@extends('frontend.layouts.app')

@section('title', 'My Wishlist - ShopNow')

@section('content')
<div class="container py-5">
    <h2 class="fw-bold mb-4"><i class="bi bi-heart me-2"></i>My Wishlist</h2>

    @if($wishlists && $wishlists->count() > 0)
    <div class="row g-4">
        @foreach($wishlists as $wishlist)
        @php $product = $wishlist->product; @endphp
        @if($product)
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card product-card h-100 position-relative">
                <a href="{{ route('products.show', $product->id) }}">
                    <img src="{{ $product->image ? asset('storage/'.$product->image) : 'https://via.placeholder.com/300x200?text=No+Image' }}"
                         style="height:200px;object-fit:cover;width:100%;" alt="{{ $product->name }}">
                </a>
                <div class="card-body d-flex flex-column p-3">
                    <p class="fw-semibold mb-1 small">
                        <a href="{{ route('products.show', $product->id) }}" class="text-decoration-none text-dark">{{ $product->name }}</a>
                    </p>
                    <span class="text-primary fw-bold">Rs. {{ number_format($product->price, 2) }}</span>
                    <div class="d-flex gap-2 mt-auto pt-2">
                        <a href="{{ route('products.show', $product->id) }}" class="btn btn-sm btn-outline-primary flex-grow-1">View</a>
                        <form action="{{ route('wishlist.toggle') }}" method="POST">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endif
        @endforeach
    </div>
    @else
    <div class="text-center py-5">
        <i class="bi bi-heart fs-1 text-muted"></i>
        <h4 class="mt-3 text-muted">Your wishlist is empty</h4>
        <a href="{{ route('products.index') }}" class="btn btn-primary mt-3 px-5">Discover Products</a>
    </div>
    @endif
</div>
@endsection