@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="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>
                <p class="text-sm text-gray-500 mt-1">
                    @auth('customer')
                    @else
                    <a href="{{ route('customer.login') }}" class="text-pink-600 hover:underline">লগইন করুন</a> আপনার উইশলিস্ট সেভ রাখতে।
                    @endauth
                </p>
            </div>

            @if($products->count() > 0)
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6">
                @foreach($products as $product)
                <div class="relative group">
                    @include('frontend.partials.product-card', ['product' => $product])
                    <button type="button" 
                            onclick="removeFromWishlist({{ $product->id }})"
                            class="absolute top-2 right-2 z-10 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>
                </div>
                @endforeach
            </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>

@push('scripts')
<script>
function removeFromWishlist(productId) {
    fetch('/wishlist/remove/' + productId, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('Error:', error));
}
</script>
@endpush
@endsection