@extends('storefront.layout')

@section('title', 'Your cart')

@section('content')
<section class="max-w-6xl mx-auto px-6 lg:px-8 py-12">
    <div class="flex flex-wrap items-end justify-between gap-5">
        <div>
            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">Wholesale order</p>
            <h1 class="mt-2 text-4xl font-semibold tracking-tight text-stone-950">Your cart</h1>
            @if (isset($minimumOrderMet) && $minimumOrderMet)
                <p class="mt-3 max-w-2xl text-sm leading-6 text-stone-600">
                    You're all set&mdash;you've reached the ${{ number_format($minimumOrder, 0) }} minimum. Continue to checkout to complete payment.
                </p>
                <p class="mt-2 text-sm font-semibold text-emerald-700">Free Shipping Across the U.S.</p>
            @else
                <p class="mt-3 max-w-2xl text-sm leading-6 text-stone-600">
                    Review quantities, add any missing products, and move to checkout when the order is complete.
                </p>
            @endif
        </div>

        @if (! $cart->items->isEmpty())
            <div class="rounded-2xl border border-stone-200 bg-white px-5 py-4 text-right shadow-sm">
                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-stone-400">Current subtotal</p>
                <p class="mt-1 text-2xl font-semibold text-stone-950">${{ number_format($cart->subtotal(), 2) }}</p>
            </div>
        @endif
    </div>

    @if (isset($minimumOrderMet) && ! $minimumOrderMet)
        @php
            $minimumProgress = $minimumOrder > 0
                ? min(100, round(($cart->subtotal() / $minimumOrder) * 100))
                : 100;
        @endphp
        <div class="mt-6 overflow-hidden rounded-xl border border-amber-200 bg-amber-50 text-amber-950">
            <div class="flex items-start gap-3 px-4 py-3.5">
                <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-700 ring-1 ring-amber-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
                    </svg>
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-semibold">Minimum order: ${{ number_format($minimumOrder, 2) }}</p>
                    <p class="mt-1 text-xs leading-5 text-amber-800">
                        Add <strong>${{ number_format($minimumOrderRemaining, 2) }}</strong> more to proceed to checkout.
                    </p>
                </div>
            </div>
            <div class="h-1.5 bg-amber-100" aria-hidden="true">
                <div class="h-full bg-amber-500 transition-all" style="width: {{ $minimumProgress }}%"></div>
            </div>
        </div>
    @endif

    @if (session('cart_success'))
        <div class="mt-4 rounded-md bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-800">{{ session('cart_success') }}</div>
    @endif
    @if (session('cart_error'))
        <div class="mt-4 rounded-md bg-rose-50 border border-rose-200 px-4 py-3 text-sm text-rose-800">{{ session('cart_error') }}</div>
    @endif
    @foreach ($notices as $n)
        <div class="mt-4 rounded-md bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-800">{{ $n }}</div>
    @endforeach

    @if ($cart->items->isEmpty())
        <div class="mt-10 rounded-2xl border border-dashed border-emerald-300 bg-white p-12 text-center text-stone-600 shadow-sm">
            <div class="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl border border-emerald-200 bg-emerald-50 text-emerald-700 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5 18.625 18.882A2.25 2.25 0 0 1 16.398 20.8H7.602A2.25 2.25 0 0 1 5.375 18.882L3.75 7.5m16.5 0h-16.5m16.5 0A2.25 2.25 0 0 0 18 5.25h-1.629a2.25 2.25 0 0 1-1.591-.659l-.652-.652a2.25 2.25 0 0 0-1.591-.659h-1.074a2.25 2.25 0 0 0-1.591.659l-.652.652a2.25 2.25 0 0 1-1.591.659H6A2.25 2.25 0 0 0 3.75 7.5m5.25 4.5h6"/>
                </svg>
            </div>
            <p class="text-xl font-semibold text-stone-950">Your cart is empty.</p>
            <p class="mt-2 text-sm text-stone-500">Start from the catalog and build your retail order by category.</p>
            <div class="mt-4">
                <a href="{{ route('storefront.catalog') }}" class="inline-flex items-center gap-2 rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-900/20 transition hover:-translate-y-0.5 hover:bg-emerald-800">
                    Browse the catalog
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
                    </svg>
                </a>
            </div>
        </div>
    @else
        <div class="mt-8 overflow-x-auto rounded-2xl border border-stone-200 bg-white shadow-[0_18px_50px_rgba(28,25,23,0.08)]">
            <table class="min-w-full divide-y divide-stone-200 text-sm">
                <thead class="bg-stone-950 text-xs uppercase tracking-[0.16em] text-stone-300">
                    <tr>
                        <th class="px-5 py-4 text-left">Product</th>
                        <th class="px-5 py-4 text-left">SKU</th>
                        <th class="px-5 py-4 text-right">Unit price</th>
                        <th class="px-5 py-4 text-center">Qty</th>
                        <th class="px-5 py-4 text-right">Line total</th>
                        <th class="px-5 py-4"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-stone-100">
                    @foreach ($cart->items as $item)
                        <tr class="transition hover:bg-emerald-50/35">
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="h-16 w-16 shrink-0 overflow-hidden rounded-xl border border-stone-200 bg-stone-50 shadow-sm">
                                        @if ($item->product?->image_url)
                                            <img src="{{ $item->product->image_url }}" alt="{{ $item->product->title }}"
                                                 data-preview="{{ $item->product->image_url }}"
                                                 class="product-thumb h-full w-full object-cover cursor-zoom-in">
                                        @else
                                            <div class="h-full w-full flex items-center justify-center text-stone-300 text-xs">—</div>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="font-semibold text-stone-950">{{ $item->product?->title }}</div>
                                        @if ($item->variant?->title && $item->variant->title !== 'Default Title')
                                            <div class="text-xs text-stone-500">{{ $item->variant->title }}</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 font-mono text-xs text-stone-600">{{ $item->variant?->sku }}</td>
                            <td class="px-5 py-4 text-right font-medium text-stone-700">${{ number_format((float) $item->unit_price, 2) }}</td>
                            <td class="px-5 py-4">
                                <form method="POST"
                                      action="{{ route('storefront.cart.update', $item->id) }}"
                                      class="cart-qty-form"
                                      data-cart-item-id="{{ $item->id }}">
                                    @csrf
                                    @method('PATCH')
                                    <div class="inline-flex items-center overflow-hidden rounded-xl border border-stone-300 bg-white shadow-sm">
                                        <button type="submit"
                                                name="adjustment"
                                                value="-1"
                                                class="w-10 h-10 flex items-center justify-center text-stone-500 hover:bg-stone-100 active:bg-stone-200 transition-colors text-xl leading-none select-none"
                                                aria-label="Decrease quantity for {{ $item->product?->title ?? 'item' }}">−</button>
                                        <input type="number" name="quantity" min="0" max="9999" value="{{ $item->quantity }}"
                                               aria-label="Quantity for {{ $item->product?->title ?? 'item' }}"
                                               class="vm-form-compact w-12 h-10 text-center text-sm font-semibold border-x border-stone-200 bg-transparent focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
                                        <button type="submit"
                                                name="adjustment"
                                                value="1"
                                                class="w-10 h-10 flex items-center justify-center text-stone-500 hover:bg-stone-100 active:bg-stone-200 transition-colors text-xl leading-none select-none"
                                                aria-label="Increase quantity for {{ $item->product?->title ?? 'item' }}">+</button>
                                    </div>
                                </form>
                            </td>
                            <td class="px-5 py-4 text-right text-base font-semibold text-stone-950 whitespace-nowrap">${{ number_format($item->lineTotal(), 2) }}</td>
                            <td class="px-5 py-4 text-right">
                                <form method="POST" action="{{ route('storefront.cart.destroy', $item->id) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-md text-stone-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" aria-label="Remove item">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                        </svg>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    <tr>
                        <td colspan="6" class="bg-gradient-to-r from-emerald-700 via-emerald-700 to-stone-900 px-5 py-5 text-white">
                            <a href="{{ route('storefront.catalog') }}" class="group flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                <span>
                                    <span class="block text-xs font-semibold uppercase tracking-[0.22em] text-emerald-100">Need more for this order?</span>
                                    <span class="mt-1 block text-lg font-semibold">Return to the catalog and add more products to your cart.</span>
                                </span>
                                <span class="inline-flex items-center gap-2 rounded-xl bg-[#ffd400] px-4 py-2.5 text-sm font-semibold text-emerald-900 shadow-sm transition group-hover:-translate-y-0.5 group-hover:bg-yellow-300">
                                    Add more items
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
                                    </svg>
                                </span>
                            </a>
                        </td>
                    </tr>
                </tbody>
                <tfoot class="bg-stone-50">
                    <tr>
                        <td colspan="4" class="px-5 py-5 text-right text-sm font-medium text-stone-600">Subtotal</td>
                        <td class="px-5 py-5 text-right text-2xl font-semibold text-stone-950">${{ number_format($cart->subtotal(), 2) }}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="mt-6 flex flex-col gap-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
            <div x-data="{ clearCartOpen: false }" @keydown.escape.window="clearCartOpen = false">
                <button type="button"
                        @click="clearCartOpen = true"
                        class="inline-flex items-center gap-2 rounded-xl border border-stone-200 px-4 py-2.5 text-sm font-semibold text-stone-500 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75V4H3.75a.75.75 0 0 0 0 1.5h.32l.77 10.01A2.75 2.75 0 0 0 7.58 18h4.84a2.75 2.75 0 0 0 2.74-2.49l.77-10.01h.32a.75.75 0 0 0 0-1.5H14v-.25A2.75 2.75 0 0 0 11.25 1h-2.5ZM7.5 4v-.25c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25V4h-5Zm2 4.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5Zm2.5 0a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5Z" clip-rule="evenodd"/>
                    </svg>
                    Clear cart
                </button>

                <div x-show="clearCartOpen"
                     x-transition.opacity
                     class="fixed inset-0 z-50 flex items-center justify-center bg-stone-950/70 px-5 py-8"
                     style="display:none"
                     role="dialog"
                     aria-modal="true"
                     aria-labelledby="clear-cart-title">
                    <div @click.outside="clearCartOpen = false"
                         x-transition.scale.origin.center
                         class="max-h-[calc(100dvh-3rem)] w-full max-w-md overflow-y-auto rounded-2xl bg-white shadow-2xl ring-1 ring-black/10">
                        <div class="border-b border-stone-100 px-6 py-5">
                            <div class="flex items-start gap-4">
                                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-rose-50 text-rose-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75V4H3.75a.75.75 0 0 0 0 1.5h.32l.77 10.01A2.75 2.75 0 0 0 7.58 18h4.84a2.75 2.75 0 0 0 2.74-2.49l.77-10.01h.32a.75.75 0 0 0 0-1.5H14v-.25A2.75 2.75 0 0 0 11.25 1h-2.5ZM7.5 4v-.25c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25V4h-5Zm2 4.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5Zm2.5 0a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5Z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div>
                                    <h2 id="clear-cart-title" class="text-xl font-semibold tracking-tight text-stone-950">Clear this cart?</h2>
                                    <p class="mt-2 text-sm leading-6 text-stone-600">
                                        This will remove every item from the current order. You can always add products again from the catalog.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col-reverse gap-3 bg-stone-50 px-6 py-4 sm:flex-row sm:justify-end">
                            <button type="button"
                                    @click="clearCartOpen = false"
                                    class="inline-flex items-center justify-center rounded-xl border border-stone-300 bg-white px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:bg-stone-100">
                                Keep items
                            </button>
                            <form method="POST" action="{{ route('storefront.cart.clear') }}">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-900/20 transition hover:-translate-y-0.5 hover:bg-rose-700 sm:w-auto">
                                    Clear cart
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                <a href="{{ route('storefront.catalog') }}" class="inline-flex items-center justify-center rounded-xl border border-stone-300 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:bg-stone-50 hover:text-stone-950">Continue shopping</a>
                @if (! isset($minimumOrderMet) || $minimumOrderMet)
                    <a href="{{ route('storefront.checkout') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-700 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-900/20 transition hover:-translate-y-0.5 hover:bg-emerald-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
                        </svg>
                        Proceed to checkout
                    </a>
                @else
                    <span
                        class="inline-flex cursor-not-allowed items-center justify-center gap-2 rounded-xl bg-stone-200 px-6 py-3 text-sm font-semibold text-stone-500"
                        aria-disabled="true"
                        title="Add ${{ number_format($minimumOrderRemaining, 2) }} more to meet the minimum order.">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75m-.75 10.5h10.5A2.25 2.25 0 0 0 19.5 18.75v-6A2.25 2.25 0 0 0 17.25 10.5H6.75A2.25 2.25 0 0 0 4.5 12.75v6A2.25 2.25 0 0 0 6.75 21Z"/>
                        </svg>
                        Proceed to checkout
                    </span>
                @endif
            </div>
        </div>
    @endif
</section>

<script>
document.querySelectorAll('.cart-qty-form').forEach(function (form) {
    const input = form.querySelector('input[name="quantity"]');
    let debounce;

    input.addEventListener('change', function () {
        clearTimeout(debounce);
        debounce = setTimeout(function () { form.requestSubmit(); }, 600);
    });
});
</script>

<div id="img-preview" style="display:none;position:fixed;z-index:9999;pointer-events:none;">
    <img id="img-preview-src" src="" alt="" style="width:192px;height:192px;object-fit:cover;border-radius:12px;border:1px solid #e7e5e4;box-shadow:0 10px 25px rgba(0,0,0,.15);">
</div>

<script>
(function () {
    var preview = document.getElementById('img-preview');
    var previewImg = document.getElementById('img-preview-src');

    document.querySelectorAll('.product-thumb').forEach(function (thumb) {
        thumb.addEventListener('mouseenter', function () {
            previewImg.src = thumb.dataset.preview;
            preview.style.display = 'block';
        });
        thumb.addEventListener('mousemove', function (e) {
            var x = e.clientX + 16;
            var y = e.clientY + 16;
            if (x + 200 > window.innerWidth)  x = e.clientX - 208;
            if (y + 200 > window.innerHeight) y = e.clientY - 208;
            preview.style.left = x + 'px';
            preview.style.top  = y + 'px';
        });
        thumb.addEventListener('mouseleave', function () {
            preview.style.display = 'none';
        });
    });
}());
</script>
@endsection