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

@section('body')

@php
    $viewMode = request('view') === 'list' ? 'list' : 'grid';
@endphp

<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') }}</p>
        </div>
        <div class="flex items-center gap-3">
            {{-- View toggle --}}
            <div class="bg-white rounded-full shadow-card p-1 flex items-center">
                <a href="{{ url()->current() }}?view=grid" class="w-9 h-9 grid place-items-center rounded-full {{ $viewMode === 'grid' ? 'bg-brand-500 text-white' : 'text-slate-500 hover:bg-slate-100' }}" title="{{ __('Grid view') }}">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                </a>
                <a href="{{ url()->current() }}?view=list" class="w-9 h-9 grid place-items-center rounded-full {{ $viewMode === 'list' ? 'bg-brand-500 text-white' : 'text-slate-500 hover:bg-slate-100' }}" title="{{ __('List view') }}">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3" cy="6" r="1"/><circle cx="3" cy="12" r="1"/><circle cx="3" cy="18" r="1"/></svg>
                </a>
            </div>
            <a href="{{ url('shop') }}" class="text-brand-600 hover:underline text-[14px] font-semibold">← {{ __('Continue shopping') }}</a>
        </div>
    </div>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 pb-12">
    @if(count($data) > 0)
        @if($viewMode === 'list')
            <div class="space-y-3">
                @foreach($data as $p)
                    @if($p->variant && $p->variant->products && $p->variant->products->status == 1)
                        @php
                            $variant = $p->variant;
                            $product = $variant->products;
                            $imgPath = isset($variant->variantimages) ? url('variantimages/thumbnails/' . $variant->variantimages['main_image']) : url('images/no-image.png');
                            $proUrl = method_exists($variant, 'getURL') ? $variant->getURL() : (class_exists('App\Helpers\ProductUrl') ? App\Helpers\ProductUrl::getUrl($variant->id) : '#');
                            $priceData = ProductPrice::getprice($product, $variant)->getData();
                            $mp = (float) ($priceData->mainprice ?? 0);
                            $op = (float) ($priceData->offerprice ?? 0);
                            $price   = ($op > 0 && $op < $mp) ? $op : $mp;
                            $compare = ($op > 0 && $op < $mp) ? $mp : null;
                        @endphp
                        <article id="orivar{{ $variant->id }}" class="bg-white rounded-2xl shadow-card p-3 lg:p-4 grid grid-cols-[100px_1fr] sm:grid-cols-[140px_1fr_auto] gap-4 items-center">
                            <a href="{{ $proUrl }}" class="aspect-square bg-slate-50 rounded-xl overflow-hidden block">
                                <img src="{{ $imgPath }}" alt="{{ $product->name }}" loading="lazy" class="w-full h-full object-cover">
                            </a>
                            <div class="min-w-0">
                                <h3 class="font-semibold text-[15px] leading-snug">
                                    <a href="{{ $proUrl }}" class="hover:text-brand-600">{{ $product->name }}</a>
                                </h3>
                                @if(function_exists('variantname'))
                                    <div class="text-[12px] text-slate-500 mt-1">{{ variantname($variant) }}</div>
                                @endif
                                <div class="flex items-baseline gap-2 mt-2">
                                    <span class="font-display font-extrabold text-[18px] tabular text-deep">{!! price_format($price * $conversion_rate) !!}</span>
                                    @if($compare)
                                        <span class="text-slate-400 line-through text-[13px] tabular">{!! price_format($compare * $conversion_rate) !!}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-span-2 sm:col-span-1 flex sm:flex-col gap-2 sm:items-end">
                                <form method="POST" action="{{ route('add.cart', ['id' => $product->id, 'variantid' => $variant->id, 'varprice' => $compare ?: $price, 'varofferprice' => $compare ? $price : 0, 'qty' => $variant->min_order_qty ?? 1]) }}" class="addVariantProCard{{ $variant->id }}">
                                    @csrf
                                    <input name="qty" type="hidden" value="{{ $variant->min_order_qty ?? 1 }}">
                                    <button type="button" onclick="addVariantProCard({{ $variant->id }})" class="bg-deep hover:bg-saffron hover:text-deep text-white text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap">{{ __('Add to cart') }}</button>
                                </form>
                                <button type="button" onclick="removeFromWish({{ $variant->id }})" class="bg-rose-50 hover:bg-rose-100 text-rose-500 text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors flex items-center gap-1.5 whitespace-nowrap">
                                    <svg width="13" height="13" 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>{{ __('Remove') }}
                                </button>
                            </div>
                        </article>
                    @elseif($p->simple_product)
                        @php
                            $sp = $p->simple_product;
                            $sImg = ($sp->thumbnail && file_exists(public_path('images/simple_products/' . $sp->thumbnail))) ? url('images/simple_products/' . $sp->thumbnail) : url('images/no-image.png');
                            $sUrl = route('show.product', ['id' => $sp->id, 'slug' => $sp->slug]);
                            $sPrice = ($sp->offer_price != 0) ? $sp->offer_price : $sp->price;
                            $sCompare = ($sp->offer_price != 0) ? $sp->price : null;
                        @endphp
                        <article id="orisimple{{ $sp->id }}" class="bg-white rounded-2xl shadow-card p-3 lg:p-4 grid grid-cols-[100px_1fr] sm:grid-cols-[140px_1fr_auto] gap-4 items-center">
                            <a href="{{ $sUrl }}" class="aspect-square bg-slate-50 rounded-xl overflow-hidden block">
                                <img src="{{ $sImg }}" alt="{{ $sp->product_name }}" loading="lazy" class="w-full h-full object-cover">
                            </a>
                            <div class="min-w-0">
                                <h3 class="font-semibold text-[15px] leading-snug">
                                    <a href="{{ $sUrl }}" 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-[18px] tabular text-deep">{!! price_format($sPrice * $conversion_rate) !!}</span>
                                    @if($sCompare)
                                        <span class="text-slate-400 line-through text-[13px] tabular">{!! price_format($sCompare * $conversion_rate) !!}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-span-2 sm:col-span-1 flex sm:flex-col gap-2 sm:items-end">
                                <form method="POST" action="{{ route('add.cart.simple', ['pro_id' => $sp->id, 'price' => $sp->price, 'offerprice' => $sp->offer_price]) }}">
                                    @csrf
                                    <input name="qty" type="hidden" value="{{ $sp->min_order_qty ?? 1 }}">
                                    <button type="submit" class="bg-deep hover:bg-saffron hover:text-deep text-white text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap">{{ __('Add to cart') }}</button>
                                </form>
                                <button type="button" onclick="removeFromWishSimple({{ $sp->id }})" class="bg-rose-50 hover:bg-rose-100 text-rose-500 text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors flex items-center gap-1.5 whitespace-nowrap">
                                    <svg width="13" height="13" 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>{{ __('Remove') }}
                                </button>
                            </div>
                        </article>
                    @endif
                @endforeach
            </div>
        @else
            <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 $p)
                    @if($p->variant && $p->variant->products && $p->variant->products->status == 1)
                        @php
                            $variant = $p->variant;
                            $product = $variant->products;
                            $imgPath = isset($variant->variantimages) ? url('variantimages/thumbnails/' . $variant->variantimages['main_image']) : url('images/no-image.png');
                            $proUrl = method_exists($variant, 'getURL') ? $variant->getURL() : (class_exists('App\Helpers\ProductUrl') ? App\Helpers\ProductUrl::getUrl($variant->id) : '#');
                            $priceData = ProductPrice::getprice($product, $variant)->getData();
                            $mp = (float) ($priceData->mainprice ?? 0);
                            $op = (float) ($priceData->offerprice ?? 0);
                            $price   = ($op > 0 && $op < $mp) ? $op : $mp;
                            $compare = ($op > 0 && $op < $mp) ? $mp : null;
                        @endphp
                        <article id="orivar{{ $variant->id }}" 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="removeFromWish({{ $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-500 hover:text-white transition-colors duration-200" aria-label="{{ __('Remove from wishlist') }}" title="{{ __('Remove from wishlist') }}">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></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>
                                @if(function_exists('variantname'))
                                    <div class="text-[11px] text-slate-500 mt-1">{{ variantname($variant) }}</div>
                                @endif
                                <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' => $compare ?: $price, 'varofferprice' => $compare ? $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 transition-colors">{{ __('Add to cart') }}</button>
                                </form>
                                <button type="button" onclick="removeFromWish({{ $variant->id }})" class="w-full mt-2 border border-rose-200 text-rose-500 hover:bg-rose-50 hover:border-rose-300 text-[12px] py-2 rounded-lg font-semibold transition-colors flex items-center justify-center gap-1.5">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>{{ __('Remove') }}
                                </button>
                            </div>
                        </article>
                    @elseif($p->simple_product)
                        @php
                            $sp = $p->simple_product;
                            $sImg = ($sp->thumbnail && file_exists(public_path('images/simple_products/' . $sp->thumbnail))) ? url('images/simple_products/' . $sp->thumbnail) : url('images/no-image.png');
                            $sUrl = route('show.product', ['id' => $sp->id, 'slug' => $sp->slug]);
                            $sPrice = ($sp->offer_price != 0) ? $sp->offer_price : $sp->price;
                            $sCompare = ($sp->offer_price != 0) ? $sp->price : null;
                        @endphp
                        <article id="orisimple{{ $sp->id }}" class="pcard bg-white rounded-2xl shadow-card overflow-hidden relative group">
                            <a href="{{ $sUrl }}" class="block aspect-square bg-slate-50 relative overflow-hidden">
                                <img src="{{ $sImg }}" alt="{{ $sp->product_name }}" loading="lazy" class="absolute inset-0 w-full h-full object-cover">
                            </a>
                            <button type="button" onclick="removeFromWishSimple({{ $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-500 hover:text-white transition-colors duration-200" aria-label="{{ __('Remove from wishlist') }}" title="{{ __('Remove from wishlist') }}">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
                            </button>
                            <div class="p-3">
                                <h3 class="font-semibold text-[13px] leading-snug line-clamp-2 min-h-[34px]">
                                    <a href="{{ $sUrl }}" 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($sPrice * $conversion_rate) !!}</span>
                                    @if($sCompare)
                                        <span class="text-slate-400 line-through text-[12px] tabular">{!! price_format($sCompare * $conversion_rate) !!}</span>
                                    @endif
                                </div>
                                <form method="POST" action="{{ route('add.cart.simple', ['pro_id' => $sp->id, 'price' => $sp->price, 'offerprice' => $sp->offer_price]) }}" class="mt-3">
                                    @csrf
                                    <input name="qty" type="hidden" value="{{ $sp->min_order_qty ?? 1 }}">
                                    <button type="submit" class="w-full bg-deep hover:bg-saffron hover:text-deep text-white text-[12px] py-2 rounded-lg font-semibold transition-colors">{{ __('Add to cart') }}</button>
                                </form>
                                <button type="button" onclick="removeFromWishSimple({{ $sp->id }})" class="w-full mt-2 border border-rose-200 text-rose-500 hover:bg-rose-50 hover:border-rose-300 text-[12px] py-2 rounded-lg font-semibold transition-colors flex items-center justify-center gap-1.5">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>{{ __('Remove') }}
                                </button>
                            </div>
                        </article>
                    @endif
                @endforeach
            </div>
        @endif
    @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 transition-colors">
                {{ __('Start Shopping') }}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
        </div>
    @endif
</section>

@endsection

@section('script')
<script>
function wishItemsLeft(){ return $('article[id^="orivar"], article[id^="orisimple"]').length; }

function removeFromWish(varid){
    $.ajax({
        url: baseUrl + '/removeWishList/' + varid,
        method: 'GET',
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(res){
            $('#orivar' + varid).fadeOut(300, function(){
                $(this).remove();
                if (wishItemsLeft() === 0) location.reload();
            });
            toastr.success((res && res.msg) || 'Removed from wishlist');
            if (res && res.wishlist_count !== undefined) $('.wishlist_count, .wishtitle').text(res.wishlist_count);
        },
        error: function(xhr){
            var r = (xhr && xhr.responseJSON) || {};
            toastr.error(r.msg || 'Could not remove');
        }
    });
}

function removeFromWishSimple(id){
    $.ajax({
        url: baseUrl + '/removesimplesWishList/' + id,
        method: 'GET',
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(){
            $('#orisimple' + id).fadeOut(300, function(){
                $(this).remove();
                if (wishItemsLeft() === 0) location.reload();
            });
            toastr.success('Removed from wishlist');
            var n = parseInt($('.wishtitle').first().text(), 10);
            if (!isNaN(n) && n > 0) $('.wishlist_count, .wishtitle').text(n - 1);
        },
        error: function(){ toastr.error('Could not remove'); }
    });
}
</script>
@endsection