@extends('layouts.frontend')

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

@section('content')
<div class="container py-5">
  <h2 class="text-uppercase mb-4">My Wishlist</h2>
  
  @if($wishlists->count() > 0)
    <div class="row">
      @foreach($wishlists as $wishlist)
        <div class="col-md-3 mb-4">
          <div class="card">
            <a href="{{ route('products.show', $wishlist->product->slug) }}">
              <img src="{{ \App\Helpers\ImageHelper::getProductImage($wishlist->product, 'https://via.placeholder.com/300x300?text=No+Image') }}" 
                   alt="{{ $wishlist->product->name }}" class="card-img-top" style="height: 300px; object-fit: cover;">
            </a>
            <div class="card-body">
              <h5 class="card-title"><a href="{{ route('products.show', $wishlist->product->slug) }}">{{ $wishlist->product->name }}</a></h5>
              <p class="card-text">${{ number_format($wishlist->product->price, 2) }}</p>
              <form action="{{ route('wishlist.destroy', $wishlist->id) }}" method="POST" class="d-inline">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-danger">Remove</button>
              </form>
              <a href="{{ route('products.show', $wishlist->product->slug) }}" class="btn btn-sm btn-primary">View Product</a>
            </div>
          </div>
        </div>
      @endforeach
    </div>
    <div class="mt-4">
      {{ $wishlists->links() }}
    </div>
  @else
    <div class="text-center py-5">
      <p class="fs-4">Your wishlist is empty</p>
      <p class="text-muted mb-3">Start adding your favorite stitched and unstitched garments from Rathore Collection to your wishlist.</p>
      <a href="{{ route('products.index') }}" class="btn btn-primary">Start Shopping</a>
    </div>
  @endif
</div>
@endsection