@extends('storefront.layout')

@section('title', 'Wishlist — ' . ($settings->company_name ?? 'Shop'))

@section('content')

    <div class="max-w-3xl mx-auto">

        {{-- Nav tabs --}}
        <div class="flex gap-6 border-b mb-8">
            <a href="{{ route('account.profile') }}"
               class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700">
                Profile
            </a>
            <a href="{{ route('account.orders') }}"
               class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700">
                Order History
            </a>
            <a href="{{ route('wishlist.index') }}"
               class="pb-3 text-sm font-medium border-b-2 border-blue-600 text-blue-600">
                Wishlist
            </a>
        </div>

        {{-- Empty state: rendered when the wishlist is empty, and also revealed by JS
             below when the last item is removed in-place (so no reload is needed). --}}
        <div id="wishlist-empty"
             class="bg-white rounded-xl shadow-sm p-12 text-center {{ $wishlists->isEmpty() ? '' : 'hidden' }}">
            <svg class="w-12 h-12 text-gray-300 mx-auto mb-4" 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"/>
            </svg>
            <p class="text-gray-500 text-sm mb-4">Your wishlist is empty.</p>
            <a href="{{ route('storefront.index') }}"
               class="inline-block bg-blue-600 text-white px-5 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition">
                Browse Products
            </a>
        </div>

        @if(! $wishlists->isEmpty())
            <div id="wishlist-grid" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                @foreach($wishlists as $entry)
                    @php $product = $entry->product; @endphp
                    @if($product)
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden flex flex-col" data-wishlist-card="{{ $product->id }}">
                            @php
                                $images = $product->images ?? [];
                                $thumb  = count($images) ? $images[0] : null;
                            @endphp
                            <a href="{{ route('storefront.product', $product->slug) }}" class="block bg-gray-50">
                                @if($thumb)
                                    <img src="/storage/{{ $thumb }}" alt="{{ $product->name }}"
                                         class="w-full h-40 object-contain">
                                @else
                                    <div class="w-full h-40 flex items-center justify-center text-gray-300">
                                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                  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"/>
                                        </svg>
                                    </div>
                                @endif
                            </a>
                            <div class="p-4 flex flex-col flex-1">
                                <a href="{{ route('storefront.product', $product->slug) }}"
                                   class="text-sm font-semibold text-gray-900 hover:text-blue-600 leading-snug mb-1">
                                    {{ $product->name }}
                                </a>
                                @if($product->category)
                                    <p class="text-xs text-gray-400 mb-2">{{ $product->category->name }}</p>
                                @endif
                                <p class="text-sm font-bold text-gray-900 mt-auto">
                                    {{ $settings->currency ?? '$' }}{{ number_format($product->price, 2) }}
                                </p>
                                <div class="flex items-center justify-between mt-3">
                                    <a href="{{ route('storefront.product', $product->slug) }}"
                                       class="text-xs bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 transition font-medium">
                                        View Product
                                    </a>
                                    <livewire:wishlist-toggle :product-id="$product->id" :key="'wishlist-'.$product->id" />
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        @endif
    </div>

    <script>
        window.addEventListener('wishlist-removed', e => {
            const card = document.querySelector('[data-wishlist-card="' + e.detail.productId + '"]');
            if (card) card.remove();

            // When the last card is removed, hide the grid and reveal the empty state
            // so the customer sees the friendly empty message without a page reload.
            const grid = document.getElementById('wishlist-grid');
            if (grid && grid.querySelectorAll('[data-wishlist-card]').length === 0) {
                grid.classList.add('hidden');
                const empty = document.getElementById('wishlist-empty');
                if (empty) empty.classList.remove('hidden');
            }
        });
    </script>

@endsection