@extends('layouts.frontend')

@section('title', 'উইশলিস্ট - ' . \App\Models\Setting::get('site_name', config('app.name')))

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            @include('frontend.customer.partials.sidebar')

            <div class="lg:col-span-3">
                <div class="bg-white rounded-2xl shadow-sm">
                    <div class="p-6 border-b border-gray-200">
                        <h1 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                            <svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path></svg>
                            আমার উইশলিস্ট
                        </h1>
                    </div>

                    @if($wishlist->count() > 0)
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 p-6">
                        @foreach($wishlist as $item)
                        @if($item->product)
                        <div class="relative group">
                            @include('frontend.partials.product-card', ['product' => $item->product])
                            <form action="{{ route('customer.wishlist.remove', $item->id) }}" method="POST" class="absolute top-2 right-2 z-10">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 bg-white rounded-full shadow-lg hover:bg-red-50 text-red-500 transition">
                                    <svg class="w-5 h-5" 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"></path></svg>
                                </button>
                            </form>
                        </div>
                        @endif
                        @endforeach
                    </div>

                    <div class="p-6 border-t border-gray-200">
                        {{ $wishlist->links() }}
                    </div>
                    @else
                    <div class="p-12 text-center">
                        <div class="w-20 h-20 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10 text-pink-400" 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"></path></svg>
                        </div>
                        <h3 class="text-lg font-bold text-gray-900 mb-2">আপনার উইশলিস্ট খালি!</h3>
                        <p class="text-gray-500 mb-6">পছন্দের পণ্যগুলো উইশলিস্টে সেভ করুন।</p>
                        <a href="{{ route('products.index') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-pink-600 text-white rounded-xl font-medium hover:bg-pink-700 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                            পণ্য দেখুন
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection