@extends('layouts.app')

@section('title', 'My Wishlist - Saba Remedies')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">My Wishlist</h1>
        <p class="text-xs text-emerald-200 mt-1">Saved products and favorite formulations</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if($wishlistItems->count() > 0)
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                <table class="w-full text-left border-collapse text-xs">
                    <thead>
                        <tr class="bg-slate-100 text-slate-700 font-bold uppercase tracking-wider text-[11px] border-b border-slate-200">
                            <th class="py-4 px-4">Product Formulation</th>
                            <th class="py-4 px-4 w-32">Price</th>
                            <th class="py-4 px-4 w-40 text-center">Action</th>
                            <th class="py-4 px-4 w-20 text-center">Remove</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                        @foreach($wishlistItems as $item)
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="py-4 px-4">
                                    <div class="font-bold text-slate-900 text-sm">
                                        <a href="{{ route('products.show', ['id' => $item->prod_id]) }}" class="hover:text-emerald-700">
                                            {{ $item->prod_name }}
                                        </a>
                                    </div>
                                </td>
                                <td class="py-4 px-4 font-bold text-slate-900">
                                    ₹{{ $item->price }}
                                </td>
                                <td class="py-4 px-4 text-center">
                                    <a href="{{ route('wishlist.move', ['id' => $item->id]) }}" class="inline-flex items-center gap-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-4 py-2 rounded-xl text-xs transition-colors shadow-xs">
                                        <i class="fa-solid fa-cart-plus"></i> Move to Cart
                                    </a>
                                </td>
                                <td class="py-4 px-4 text-center">
                                    <a href="{{ route('wishlist.delete', ['id' => $item->id]) }}" class="text-red-500 hover:text-red-700 p-2 inline-block transition-colors" title="Remove">
                                        <i class="fa-regular fa-trash-can text-sm"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="bg-white rounded-3xl p-16 text-center border border-slate-200 max-w-md mx-auto shadow-xs">
                <div class="w-16 h-16 rounded-full bg-red-50 text-red-500 flex items-center justify-center text-3xl mx-auto mb-4">
                    <i class="fa-regular fa-heart"></i>
                </div>
                <h2 class="text-xl font-bold text-slate-800">Your Wishlist is Empty</h2>
                <p class="text-xs text-slate-500 mt-2 mb-6">You haven't added any products to your wishlist yet.</p>
                <a href="{{ route('products.classic') }}" class="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-8 py-3 rounded-full shadow transition-all">
                    Explore Medicines
                </a>
            </div>
        @endif

    </div>
</section>
@endsection