@extends('layouts.app')

@section('title', 'Danh sách yêu thích - XING NEW')

@section('content')
<div class="bg-slate-50 py-12 min-h-[60vh]">
    <div class="container mx-auto px-4">
        <div class="flex items-center gap-3 mb-8">
            <h1 class="text-3xl font-bold text-slate-900">Danh sách yêu thích</h1>
            <span class="bg-white px-3 py-1 rounded-full text-sm font-bold text-slate-500 shadow-sm border border-slate-100">
                {{ $products->count() }} sản phẩm
            </span>
        </div>

        @if($products->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($products as $product)
                    <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all border border-slate-100 overflow-hidden group" data-id="{{ $product->id }}">
                        <div class="relative aspect-square">
                            <a href="{{ route('products.show', $product->slug) }}">
                                @if($product->image)
                                    <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full bg-slate-100 flex items-center justify-center">
                                        <svg class="w-12 h-12 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                    </div>
                                @endif
                            </a>
                            <button class="absolute top-3 right-3 bg-white text-red-500 p-2 rounded-full shadow-md hover:bg-red-50 transition-colors toggle-wishlist" data-id="{{ $product->id }}">
                                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                            </button>
                        </div>
                        <div class="p-4">
                            <h3 class="font-bold text-slate-800 mb-2 truncate group-hover:text-blue-600">
                                <a href="{{ route('products.show', $product->slug) }}">{{ $product->name }}</a>
                            </h3>
                            <div class="flex items-center justify-between">
                                <span class="text-blue-600 font-bold">{{ number_format($product->price, 0, ',', '.') }}đ</span>
                                <a href="{{ route('products.show', $product->slug) }}" class="text-xs bg-slate-900 text-white px-3 py-1.5 rounded-lg hover:bg-slate-800 transition-colors">Xem chi tiết</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="bg-white rounded-3xl p-12 text-center border border-slate-100">
                <div class="w-20 h-20 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-10 h-10" 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>
                </div>
                <h3 class="text-xl font-bold text-slate-900 mb-2">Chưa có sản phẩm yêu thích</h3>
                <p class="text-slate-500 mb-8 max-w-sm mx-auto">Hãy khám phá các sản phẩm của chúng tôi và nhấn vào icon trái tim để lưu lại những gì bạn thích nhé!</p>
                <a href="{{ route('products.index') }}" class="inline-block bg-blue-600 text-white font-bold px-8 py-3 rounded-xl shadow-lg shadow-blue-500/30 hover:-translate-y-1 transition-all">Khám phá ngay</a>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    // Wishlist page specific logic if any (global script handles the toggle)
</script>
@endpush
@endsection