@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-4 gap-8">
            <div class="lg:col-span-1">
                @include('account.sidebar')
            </div>

            <div class="lg:col-span-3">
                <div class="bg-white rounded-2xl shadow-sm p-8">
                    <h1 class="text-2xl font-bold text-gray-900 mb-6">My Wishlist</h1>

                    @if($wishlists->count() > 0)
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($wishlists as $wishlist)
                            <div class="bg-white border rounded-2xl overflow-hidden group">
                                <div class="relative aspect-square bg-gray-100 overflow-hidden">
                                    <img src="{{ $wishlist->product->thumbnail_url }}" 
                                         alt="{{ $wishlist->product->name }}" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                                    
                                    <button type="button" 
                                            onclick="toggleWishlist({{ $wishlist->product_id }})"
                                            class="absolute top-3 right-3 w-8 h-8 bg-white rounded-full shadow-md flex items-center justify-center text-red-500 hover:bg-red-50 transition">
                                        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                            <path 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>
                                    </button>
                                </div>
                                
                                <div class="p-4">
                                    <a href="{{ route('product.show', $wishlist->product->slug) }}" 
                                       class="font-semibold text-gray-900 hover:text-blue-600 transition line-clamp-2">
                                        {{ $wishlist->product->name }}
                                    </a>
                                    
                                    <div class="flex items-center justify-between mt-3">
                                        <span class="font-bold text-gray-900">
                                            ৳{{ number_format($wishlist->product->current_price, 2) }}
                                        </span>
                                        
                                        <button type="button" 
                                                onclick="addToCart({{ $wishlist->product_id }}, 1)"
                                                class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition">
                                            Add to Cart
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-12">
                            <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Your wishlist is empty</h3>
                            <p class="text-gray-600 mb-4">Save items you love and come back to them anytime.</p>
                            <a href="{{ route('shop') }}" class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
                                Browse Products
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection