@extends('layouts.customer')

@section('customer-content')
<h2 class="text-2xl font-bold mb-8">My Wishlist</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    @forelse($wishlist as $item)
        <div class="product-card group">
            <a href="{{ route('products.show', $item->product->slug) }}" class="block relative">
                <div class="product-image-wrapper">
                    @if($item->product->primaryImage)
                        <img src="{{ asset('storage/' . $item->product->primaryImage->path) }}" alt="{{ $item->product->name }}">
                    @else
                        <div class="w-full h-full flex items-center justify-center bg-gray-100">
                            <span class="text-5xl font-bold text-gray-300">{{ substr($item->product->name, 0, 1) }}</span>
                        </div>
                    @endif
                    <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 pt-12">
                        <h3 class="font-medium text-white mb-1 truncate">{{ $item->product->name }}</h3>
                        <p class="text-xs text-white/60 mb-2">{{ $item->product->vendor->name }}</p>
                        <span class="text-lg font-bold text-white mb-3 block">${{ number_format($item->product->price, 2) }}</span>
                        <div class="flex gap-2">
                            <a href="{{ route('products.show', $item->product->slug) }}" class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white text-xs font-medium rounded-lg transition-colors">View</a>
                            <form action="{{ route('cart.add') }}" method="POST" class="flex-1">
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $item->product->id }}">
                                <input type="hidden" name="quantity" value="1">
                                <button type="submit" class="w-full inline-flex items-center justify-center px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded-lg transition-colors">Add to Cart</button>
                            </form>
                        </div>
                    </div>
                </div>
            </a>
            <div class="absolute top-2 right-2 z-10">
                <form action="{{ route('wishlist.remove', $item->product->id) }}" method="POST">
                    @csrf @method('DELETE')
                    <button type="submit" class="p-1.5 bg-white/90 backdrop-blur-sm rounded-lg text-red-500 hover:bg-red-50 shadow-sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </form>
            </div>
        </div>
    @empty
        <div class="col-span-3 text-center py-12"><p class="text-gray-500">Your wishlist is empty</p></div>
    @endforelse
</div>

@if($wishlist->hasPages())<div class="mt-8">{{ $wishlist->links() }}</div>@endif
@endsection