@extends('layouts.app')

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

@section('content')
<div class="max-w-5xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">My Wishlist ({{ $wishlists->count() }} items)</h1>

    @if($wishlists->count() > 0)
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        @foreach($wishlists as $wishlist)
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <a href="{{ route('shop.product', $wishlist->product->slug) }}">
                <img src="{{ $wishlist->product->thumbnail_url }}" class="w-full h-40 object-cover">
            </a>
            <div class="p-3">
                <a href="{{ route('shop.product', $wishlist->product->slug) }}" class="text-sm font-medium hover:text-red-600 line-clamp-2">{{ $wishlist->product->name }}</a>
                <p class="text-red-600 font-bold mt-1">${{ number_format($wishlist->product->current_price, 2) }}</p>
                <div class="flex gap-2 mt-2">
                    <form action="{{ route('cart.add') }}" method="POST" class="flex-1">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $wishlist->product->id }}">
                        <input type="hidden" name="quantity" value="1">
                        <button class="w-full bg-red-600 text-white text-xs py-1.5 rounded hover:bg-red-700">Add to Cart</button>
                    </form>
                    <form action="{{ route('wishlist.toggle') }}" method="POST">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $wishlist->product->id }}">
                        <button class="bg-gray-100 text-gray-600 text-xs px-2 py-1.5 rounded hover:bg-gray-200">✕</button>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="text-center py-16 bg-white rounded-xl shadow-sm">
        <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
        <p class="text-xl font-medium text-gray-600">Your wishlist is empty</p>
        <a href="{{ route('shop.index') }}" class="mt-4 inline-block bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700">Browse Products</a>
    </div>
    @endif
</div>
@endsection