@extends("front.layout.master")
@section('title', __('staticwords.YourWishlist') . ' (' . $wishcount . ') | ')

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.Wishlist') }}</span>
    </nav>

    <div class="flex items-end justify-between mt-4 mb-6 flex-wrap gap-3">
        <div>
            <h1 class="font-display font-extrabold text-3xl flex items-center gap-3">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" class="text-rose-500"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
                {{ __('staticwords.Wishlist') }}
            </h1>
            <p class="text-slate-500 text-[14px] mt-1"><span class="wishtitle">{{ $wishcount }}</span> {{ __('items saved') }} · <span class="text-amber-600 font-semibold">{{ __('Saved as guest — login to keep across devices') }}</span></p>
        </div>
        <a href="{{ url('shop') }}" class="text-brand-600 hover:underline text-[14px] font-semibold">← {{ __('Continue shopping') }}</a>
    </div>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 pb-12">
    @if($wishcount > 0)
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 lg:gap-4">
            @foreach($data as $row)
                @if($row->type === 'simple')
                    @php
                        $sp = $row->simple;
                        $imgPath = $sp->thumbnail ? url('images/simple_products/' . $sp->thumbnail) : url('images/no-image.png');
                        $price = $sp->offer_price > 0 ? $sp->offer_price : $sp->price;
                        $compare = $sp->offer_price > 0 ? $sp->price : null;
                        $proUrl = route('show.product', ['id' => $sp->id, 'slug' => $sp->slug]);
                        $key = 'simple:' . $sp->id;
                    @endphp
                    <article id="wishrow_{{ $sp->id }}_simple" class="pcard bg-white rounded-2xl shadow-card overflow-hidden relative group">
                        <a href="{{ $proUrl }}" class="block aspect-square bg-slate-50 relative overflow-hidden">
                            <img src="{{ $imgPath }}" alt="{{ $sp->product_name }}" loading="lazy" class="absolute inset-0 w-full h-full object-cover">
                        </a>
                        <button type="button" onclick="guestWishRemove('simple', {{ $sp->id }})" class="absolute top-2 right-2 w-9 h-9 rounded-full bg-white shadow-card grid place-items-center text-rose-500 hover:bg-rose-50" aria-label="Remove">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
                        </button>
                        <div class="p-3">
                            <h3 class="font-semibold text-[13px] leading-snug line-clamp-2 min-h-[34px]"><a href="{{ $proUrl }}" class="hover:text-brand-600">{{ $sp->product_name }}</a></h3>
                            <div class="flex items-baseline gap-2 mt-2">
                                <span class="font-display font-extrabold text-[16px] tabular text-deep">{!! price_format($price * $conversion_rate) !!}</span>
                                @if($compare)<span class="text-slate-400 line-through text-[12px] tabular">{!! price_format($compare * $conversion_rate) !!}</span>@endif
                            </div>
                            <form method="POST" action="{{ route('add.cart.simple', ['pro_id' => $sp->id, 'price' => $sp->price, 'offerprice' => $sp->offer_price ?? 0]) }}" class="addSimpleCardFrom{{ $sp->id }} mt-3">
                                @csrf
                                <input name="qty" type="hidden" value="1">
                                <button type="button" onclick="addSimpleProCard({{ $sp->id }})" class="w-full bg-deep hover:bg-saffron hover:text-deep text-white text-[12px] py-2 rounded-lg font-semibold">{{ __('Add to cart') }}</button>
                            </form>
                        </div>
                    </article>
                @else
                    @php
                        $variant = $row->variant;
                        $product = $variant->products;
                        $imgPath = isset($variant->variantimages) ? url('variantimages/thumbnails/' . $variant->variantimages['main_image']) : url('images/no-image.png');
                        $proUrl = url('details/' . \Illuminate\Support\Str::slug($product->name, '-') . '/' . $product->id);
                        $price = $variant->offer_price > 0 ? $variant->offer_price : $variant->price;
                        $compare = $variant->offer_price > 0 ? $variant->price : null;
                    @endphp
                    <article id="wishrow_{{ $variant->id }}_variant" class="pcard bg-white rounded-2xl shadow-card overflow-hidden relative group">
                        <a href="{{ $proUrl }}" class="block aspect-square bg-slate-50 relative overflow-hidden">
                            <img src="{{ $imgPath }}" alt="{{ $product->name }}" loading="lazy" class="absolute inset-0 w-full h-full object-cover">
                        </a>
                        <button type="button" onclick="guestWishRemove('variant', {{ $variant->id }})" class="absolute top-2 right-2 w-9 h-9 rounded-full bg-white shadow-card grid place-items-center text-rose-500 hover:bg-rose-50" aria-label="Remove">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
                        </button>
                        <div class="p-3">
                            <h3 class="font-semibold text-[13px] leading-snug line-clamp-2 min-h-[34px]"><a href="{{ $proUrl }}" class="hover:text-brand-600">{{ $product->name }}</a></h3>
                            <div class="flex items-baseline gap-2 mt-2">
                                <span class="font-display font-extrabold text-[16px] tabular text-deep">{!! price_format($price * $conversion_rate) !!}</span>
                                @if($compare)<span class="text-slate-400 line-through text-[12px] tabular">{!! price_format($compare * $conversion_rate) !!}</span>@endif
                            </div>
                            <form method="POST" action="{{ route('add.cart', ['id' => $product->id, 'variantid' => $variant->id, 'varprice' => $variant->price, 'varofferprice' => $variant->offer_price ?? 0, 'qty' => $variant->min_order_qty ?? 1]) }}" class="addVariantProCard{{ $variant->id }} mt-3">
                                @csrf
                                <input name="qty" type="hidden" value="{{ $variant->min_order_qty ?? 1 }}">
                                <button type="button" onclick="addVariantProCard({{ $variant->id }})" class="w-full bg-deep hover:bg-saffron hover:text-deep text-white text-[12px] py-2 rounded-lg font-semibold">{{ __('Add to cart') }}</button>
                            </form>
                        </div>
                    </article>
                @endif
            @endforeach
        </div>
    @else
        <div class="bg-white rounded-2xl shadow-card p-12 text-center max-w-2xl mx-auto">
            <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
            <h2 class="font-display font-extrabold text-3xl mt-5">{{ __('Your wishlist is empty') }}</h2>
            <p class="text-slate-500 mt-2">{{ __('Save items you love so you can revisit them later.') }}</p>
            <a href="{{ url('shop') }}" class="inline-flex items-center gap-2 mt-6 bg-brand-500 hover:bg-brand-600 text-white px-6 py-3 rounded-full font-semibold">{{ __('Start Shopping') }} →</a>
        </div>
    @endif
</section>

@endsection

@section('script')
<script>
function guestWishRemove(type, id){
    $.ajax({ url: baseUrl + '/guest/wishlist/toggle/' + type + '/' + id, method: 'GET',
        success: function(res){
            $('#wishrow_' + id + '_' + type).fadeOut(250, function(){ $(this).remove(); });
            if (res && res.wishlist_count !== undefined) {
                $('.wishlist_count, .wishtitle').text(res.wishlist_count);
            }
            toastr.success(res.msg || 'Removed');
        }
    });
}
</script>
@endsection