@extends('layouts.app')

@section('title', 'My Wishlist - ' . ($shopSettings['shop_name'] ?? 'Orange Groceries'))
@section('meta_robots', 'noindex, nofollow')
@section('canonical', route('wishlist.index'))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight mb-6">My Wishlist</h1>

    @if($wishlists->count() > 0)
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 sm:gap-6">
            @foreach($wishlists as $item)
                @if($item->product)
                    <div class="bg-white rounded-3xl p-4 border border-slate-200/80 shadow-sm flex flex-col justify-between relative group">
                        <form action="{{ route('wishlist.toggle', $item->product->id) }}" method="POST" class="absolute top-3 right-3 z-10">
                            @csrf
                            <button type="submit" class="w-8 h-8 rounded-full bg-rose-50 text-rose-600 flex items-center justify-center shadow-sm">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </form>

                        <a href="{{ route('products.show', $item->product->slug) }}" class="block overflow-hidden rounded-2xl mb-3 h-36 bg-slate-50 flex items-center justify-center p-2">
                            <img src="{{ $item->product->image }}" alt="{{ $item->product->name }}" class="max-h-full max-w-full object-contain">
                        </a>

                        <div>
                            <div class="font-extrabold text-slate-800 text-sm line-clamp-1 mb-1">{{ $item->product->name }}</div>
                            <div class="text-base font-black text-brand-700 mb-3">₹{{ number_format($item->product->effective_price, 2) }}</div>

                            <form action="{{ route('wishlist.move', $item->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs py-2.5 rounded-xl shadow transition flex items-center justify-center gap-1.5">
                                    <i class="fa-solid fa-cart-plus"></i> Move To Cart
                                </button>
                            </form>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    @else
        <div class="bg-white rounded-3xl p-12 text-center border border-slate-200 shadow-sm max-w-md mx-auto">
            <div class="w-16 h-16 bg-rose-50 text-rose-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa-solid fa-heart-crack text-2xl"></i>
            </div>
            <h2 class="text-lg font-extrabold text-slate-900">Your Wishlist is Empty</h2>
            <p class="text-xs text-slate-500 mt-1 mb-6">Explore products and tap the heart icon to save them for later.</p>
            <a href="{{ route('products.index') }}" class="px-6 py-3 bg-brand-600 text-white font-bold text-xs rounded-xl shadow">Shop Products</a>
        </div>
    @endif
</div>
@endsection