@php
  $canOrder = $wsMember->canOrder();
  $cartQty = collect($cartLines)->pluck('quantity', 'variant_id')->map(fn ($qty) => (int) $qty);
  $money = fn (int $cents) => 'AUD '.number_format($cents / 100, 2);
  $variantCount = collect($catalog)->sum(fn ($product) => count($product['variants']));
@endphp
<x-layouts.wholesale :seo="$seo" title="Quick order" subtitle="Live trade pricing — every change is saved and re-priced instantly">
<div data-wd-orderpad data-update-url="{{ route('wholesale.cart.update') }}" @unless($canOrder) data-readonly="1" @endunless>
  <script type="application/json" data-wd-orderpad-state>{!! json_encode(['lines' => $cartLines, 'quote' => $quote], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) !!}</script>

  @unless($canOrder)
    <div class="mb-5 flex items-center gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
      <i data-lucide="eye" class="h-4 w-4"></i> You have view-only access. Browse your pricing here; ask an account owner to place orders.
    </div>
  @endunless

  <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_400px]">
    {{-- Catalogue --}}
    <section class="min-w-0">
      <div class="wd-card wd-reveal flex flex-wrap items-center gap-3 p-3">
        <label class="relative min-w-[220px] flex-1">
          <i data-lucide="filter" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-black/35"></i>
          <input type="search" class="wd-input pl-9" placeholder="Filter {{ count($catalog) }} products, {{ $variantCount }} variants by name, size or SKU…" data-wd-filter aria-label="Filter products">
        </label>
        @if($wsSettings['price_sheet_enabled'])
          <a href="{{ route('wholesale.catalog.price-sheet') }}" class="wd-btn"><i data-lucide="download" class="h-4 w-4"></i><span class="hidden sm:inline">Price sheet</span></a>
        @endif
        @if($canOrder && $quote['units'] > 0)
          <form method="post" action="{{ route('wholesale.cart.clear') }}" data-wd-confirm="Clear every line from this order?">@csrf @method('DELETE')
            <button class="wd-btn"><i data-lucide="eraser" class="h-4 w-4"></i><span class="hidden sm:inline">Clear</span></button>
          </form>
        @endif
      </div>

      @if($canOrder)
        <details class="wd-card wd-reveal mt-4 overflow-hidden" data-wd-paste id="paste" style="--i:1">
          <summary class="flex cursor-pointer list-none items-center gap-3 px-5 py-4">
            <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-[var(--color-gold)]/15 text-[var(--color-gold-dark)]"><i data-lucide="clipboard-paste" class="h-4 w-4"></i></span>
            <span class="flex-1">
              <span class="block text-sm font-semibold">Paste from a spreadsheet</span>
              <span class="block text-xs text-black/50">Drop in SKU and quantity per line — straight from Excel, your POS or an email.</span>
            </span>
            <i data-lucide="chevron-down" class="h-4 w-4 text-black/40"></i>
          </summary>
          <form method="post" action="{{ route('wholesale.cart.paste') }}" class="border-t border-black/5 p-5">@csrf
            <textarea name="skus" rows="5" class="wd-input font-mono text-sm" placeholder="TRA-CP-16  24&#10;TRA-CP-18, 12&#10;TRA-GL-L	6">{{ old('skus') }}</textarea>
            <div class="mt-3 flex flex-wrap items-center justify-between gap-3">
              <p class="text-xs text-black/45">Separators: space, comma, semicolon or tab. Missing quantity = 1. Duplicates are combined.</p>
              <button class="wd-btn wd-btn-primary"><i data-lucide="list-plus" class="h-4 w-4"></i> Add to order</button>
            </div>
          </form>
        </details>
      @endif

      <div class="mt-4 space-y-3">
        @forelse($catalog as $i => $product)
          @php
            $inOrder = collect($product['variants'])->sum(fn ($variant) => $cartQty[$variant['id']] ?? 0);
            $fromCents = collect($product['variants'])->min('from_cents');
            $search = mb_strtolower($product['title'].' '.$product['grade'].' '.collect($product['variants'])->map(fn ($v) => $v['label'].' '.$v['sku'])->implode(' '));
          @endphp
          <details class="wd-product wd-reveal" data-wd-product data-search="{{ $search }}" style="--i:{{ min($i + 2, 10) }}" @if($inOrder > 0 || ($i === 0 && $quote['units'] === 0)) open @endif>
            <summary class="flex items-center gap-4 p-4">
              <span class="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-black/[0.04]">
                @if($product['image'])
                  <img src="{{ $product['image'] }}" alt="" class="h-full w-full object-cover" loading="lazy">
                @else
                  <span class="flex h-full w-full items-center justify-center text-black/25"><i data-lucide="package" class="h-6 w-6"></i></span>
                @endif
              </span>
              <span class="min-w-0 flex-1">
                <span class="block truncate font-semibold">{{ $product['title'] }}</span>
                <span class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-black/50">
                  <span>{{ count($product['variants']) }} {{ str('variant')->plural(count($product['variants'])) }}</span>
                  @if($product['grade'])<span>{{ $product['grade'] }}</span>@endif
                  @if($product['lead_days'])<span class="inline-flex items-center gap-1"><i data-lucide="clock" class="h-3 w-3"></i>{{ $product['lead_days'] }}-day lead</span>@endif
                  @if($product['breaks'])<span class="wd-pill wd-pill-gold"><i data-lucide="badge-percent" class="h-3 w-3"></i>Volume breaks</span>@endif
                </span>
              </span>
              <span class="hidden text-right sm:block">
                <span class="block text-[10px] uppercase tracking-[0.16em] text-black/40">Your price from</span>
                <span class="block font-semibold tabular-nums">{{ $money((int) $fromCents) }}</span>
              </span>
              <span class="wd-pill wd-pill-gold {{ $inOrder ? '' : 'hidden' }}" data-wd-product-count>{{ number_format($inOrder) }} in order</span>
              <i data-lucide="chevron-right" class="wd-product-chevron h-4 w-4 shrink-0 text-black/35 transition-transform"></i>
            </summary>

            @if($product['breaks'] || $canOrder)
              <div class="flex flex-wrap items-center gap-2 border-t border-black/5 bg-black/[0.015] px-4 py-2.5">
                @foreach($product['breaks'] as $break)
                  <span class="wd-pill wd-pill-gold">{{ $break['label'] }} → {{ $break['discount'] }}</span>
                @endforeach
                @if($canOrder)
                  <span class="ml-auto flex items-center gap-1.5 text-xs text-black/45">
                    Fill every size:
                    @foreach([1, 5, 10] as $fill)
                      <button type="button" class="wd-pill hover:bg-black/10" data-wd-fill="{{ $fill }}">+{{ $fill }}</button>
                    @endforeach
                    <button type="button" class="wd-pill hover:bg-black/10" data-wd-fill="0" aria-label="Clear this product"><i data-lucide="x" class="h-3 w-3"></i></button>
                  </span>
                @endif
              </div>
            @endif

            <div>
              @foreach($product['variants'] as $variant)
                @php $qty = $cartQty[$variant['id']] ?? 0; @endphp
                <div class="wd-variant-row {{ $qty ? 'has-qty' : '' }}" data-wd-variant="{{ $variant['id'] }}">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-medium">{{ $variant['label'] }}</p>
                    <p class="truncate font-mono text-[11px] text-black/40">{{ $variant['sku'] ?: '—' }}@unless($variant['available']) · <span class="text-amber-700">made to order</span>@endunless</p>
                  </div>
                  <div class="hidden text-sm sm:block">
                    <span class="font-semibold tabular-nums">{{ $money($variant['contract_cents']) }}</span>
                    @if($variant['retail_cents'] > $variant['contract_cents'])
                      <span class="ml-1 text-xs text-black/35 line-through tabular-nums">{{ $money($variant['retail_cents']) }}</span>
                    @endif
                    <span class="block text-[11px] text-black/45" data-wd-line-total></span>
                  </div>
                  @if($canOrder)
                    <div class="wd-stepper">
                      <button type="button" data-wd-step="-1" aria-label="Decrease {{ $variant['label'] }}" title="Shift-click for −10"><i data-lucide="minus" class="h-3.5 w-3.5"></i></button>
                      <input type="number" inputmode="numeric" min="0" max="10000" value="{{ $qty ?: '' }}" placeholder="0" data-wd-qty aria-label="Quantity for {{ $product['title'] }} {{ $variant['label'] }}">
                      <button type="button" data-wd-step="1" aria-label="Increase {{ $variant['label'] }}" title="Shift-click for +10"><i data-lucide="plus" class="h-3.5 w-3.5"></i></button>
                    </div>
                  @else
                    <span class="text-sm font-semibold tabular-nums">{{ $money($variant['from_cents']) }}</span>
                  @endif
                </div>
              @endforeach
            </div>
          </details>
        @empty
          <div class="wd-card p-12 text-center">
            <i data-lucide="package-open" class="mx-auto h-10 w-10 text-black/20"></i>
            <p class="mt-3 font-medium">The trade catalogue is being updated</p>
            <p class="mt-1 text-sm text-black/50">Check back shortly, or request a custom quote.</p>
          </div>
        @endforelse
      </div>
      <p class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-black/40">
        <span><kbd class="wd-kbd">/</kbd> search &amp; add anything</span>
        <span><kbd class="wd-kbd">Shift</kbd> + click ± to step by 10</span>
        <span><kbd class="wd-kbd">↵</kbd> confirm a quantity</span>
      </p>
    </section>

    {{-- Live summary --}}
    <aside class="xl:sticky xl:top-24 xl:self-start">
      <div class="wd-card overflow-hidden wd-reveal" style="--i:2">
        <div class="wd-card-ink rounded-none p-6">
          <div class="flex items-center justify-between">
            <p class="wd-eyebrow">Your order</p>
            <span class="flex items-center gap-1.5 text-[11px] text-white/45"><span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span><span data-wd-status>Priced live</span></span>
          </div>
          <p class="mt-3 text-4xl wd-kpi" data-wd-sum="net">{{ $money($quote['net_cents']) }}</p>
          <p class="mt-1 text-sm text-white/55"><span data-wd-sum="units">{{ number_format($quote['units']) }}</span> units · freight quoted at dispatch</p>
          <div class="mt-5 grid grid-cols-3 gap-2 text-center">
            <div class="rounded-xl bg-white/[0.06] px-2 py-2.5">
              <p class="text-[10px] uppercase tracking-[0.16em] text-white/40">Tier</p>
              <p class="mt-0.5 font-semibold" data-wd-sum="tier-rate">—</p>
            </div>
            <div class="rounded-xl bg-white/[0.06] px-2 py-2.5">
              <p class="text-[10px] uppercase tracking-[0.16em] text-white/40">Volume</p>
              <p class="mt-0.5 font-semibold" data-wd-sum="volume-rate">—</p>
            </div>
            <div class="rounded-xl bg-[var(--color-gold)]/20 px-2 py-2.5">
              <p class="text-[10px] uppercase tracking-[0.16em] text-[var(--color-gold)]">Total</p>
              <p class="mt-0.5 font-semibold text-[var(--color-gold)]" data-wd-sum="rate">—</p>
            </div>
          </div>
        </div>

        <div class="space-y-3 p-5">
          <div data-wd-nudges class="space-y-2"></div>

          <div data-wd-min class="hidden rounded-xl border border-amber-200 bg-amber-50 p-3">
            <p class="text-xs font-semibold text-amber-900" data-wd-min-label></p>
            <div class="wd-progress mt-2"><span data-wd-min-bar style="width:0"></span></div>
          </div>

          <div class="space-y-1.5 border-b border-black/5 pb-3">
            <div class="wd-summary-line text-black/45"><span>Retail value</span><span class="tabular-nums line-through" data-wd-sum="retail"></span></div>
            <div class="wd-summary-line"><span class="text-black/60">Contract subtotal</span><span class="tabular-nums" data-wd-sum="subtotal"></span></div>
            <div class="wd-summary-line"><span class="text-black/60">Trade discount</span><span class="tabular-nums text-[var(--color-gold-dark)]" data-wd-sum="discount"></span></div>
            <div class="wd-summary-line font-semibold"><span>You save vs retail</span><span class="tabular-nums text-emerald-700" data-wd-sum="savings"></span></div>
          </div>

          <ul class="max-h-[34vh] divide-y divide-black/5 overflow-y-auto pr-1" data-wd-lines></ul>

          @if($canOrder)
            <a href="{{ route('wholesale.checkout') }}" class="wd-btn wd-btn-gold w-full justify-center py-3 text-base" data-wd-checkout>
              Review &amp; place order <i data-lucide="arrow-right" class="h-4 w-4"></i>
            </a>
            <p class="text-center text-[11px] text-black/40">Your order is saved automatically — pick it up on any device.</p>
          @endif
        </div>
      </div>

      @if($quote['ladder'])
        <div class="wd-card wd-reveal mt-4 p-5" style="--i:3">
          <p class="wd-eyebrow">Volume ladder</p>
          <div class="wd-ladder mt-3" data-wd-ladder></div>
        </div>
      @endif
    </aside>
  </div>
</div>
</x-layouts.wholesale>