@extends('layouts.app')

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

@section('content')
<section class="bg-gradient-to-br from-rose-500 via-pink-500 to-rose-600 text-white relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
    <div class="absolute top-0 right-0 w-80 h-80 bg-white/5 rounded-full -translate-y-40 translate-x-40"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold">My Wishlist</h1>
                <p class="text-white/80 mt-1">{{ $wishlist->total() }} items saved</p>
            </div>
            @if($wishlist->total() > 0)
            <a href="{{ route('products.index') }}" class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm text-white px-5 py-2.5 rounded-xl font-medium hover:bg-white/30 transition-all text-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="M12 4v16m8-8H4"/></svg>
                Browse More Products
            </a>
            @endif
        </div>
    </div>
</section>

<section class="py-12 bg-gray-50 min-h-[400px]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        @forelse($wishlist as $item)
        <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 mb-4">
            <div class="flex flex-col sm:flex-row">
                <a href="{{ route('products.show', $item->product->slug) }}" class="sm:w-48 md:w-56 flex-shrink-0 relative overflow-hidden bg-gray-100">
                    @if($item->product->primaryImage)
                        <img src="{{ asset('storage/' . $item->product->primaryImage->path) }}" alt="{{ $item->product->name }}" class="w-full h-48 sm:h-full object-cover hover:scale-105 transition-transform duration-500">
                    @else
                        <div class="w-full h-48 sm: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
                    @if($item->product->getDiscountPercentage() > 0)
                        <span class="absolute top-3 left-3 bg-rose-500 text-white px-2.5 py-1 rounded-lg text-xs font-bold shadow-lg">-{{ $item->product->getDiscountPercentage() }}%</span>
                    @endif
                </a>
                <div class="flex-1 p-5">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1">
                            <a href="{{ route('products.show', $item->product->slug) }}" class="text-lg font-semibold text-gray-900 hover:text-indigo-600 transition-colors">{{ $item->product->name }}</a>
                            @if($item->product->vendor)
                                <a href="{{ route('vendors.show', $item->product->vendor->slug) }}" class="text-sm text-gray-500 hover:text-indigo-600 transition-colors mt-1 block">{{ $item->product->vendor->name }}</a>
                            @endif
                            <div class="flex items-center gap-2 mt-3">
                                <span class="text-xl font-bold text-gray-900">{{ price($item->product->price) }}</span>
                                @if($item->product->compare_price)
                                    <span class="text-sm text-gray-400 line-through">{{ price($item->product->compare_price) }}</span>
                                    <span class="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Save {{ price($item->product->compare_price - $item->product->price) }}</span>
                                @endif
                            </div>
                        </div>
                        <form action="{{ route('wishlist.remove', $item->product->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all" title="Remove from wishlist">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"/></svg>
                            </button>
                        </form>
                    </div>
                    <div class="mt-4 flex flex-wrap gap-3">
                        <a href="{{ route('products.show', $item->product->slug) }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-xl transition-colors">
                            View Details
                        </a>
                        <form action="{{ route('cart.add') }}" method="POST">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $item->product->id }}">
                            <input type="hidden" name="quantity" value="1">
                            <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-xl transition-colors">
                                <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="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
                                Add to Cart
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="text-center py-20">
            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Your wishlist is empty</h3>
            <p class="text-gray-500 mb-8">Start adding products you love</p>
            <a href="{{ route('products.index') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-xl transition-colors">
                <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                Explore Products
            </a>
        </div>
        @endforelse

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