@php $canOrder = $wsMember->canOrder(); @endphp
<x-layouts.wholesale :seo="$seo" title="Order lists" subtitle="Saved baskets for the orders you place again and again">
@if($canOrder)
  <section class="wd-card-ink wd-reveal flex flex-wrap items-center justify-between gap-5 p-6">
    <div class="max-w-lg">
      <p class="wd-eyebrow">Save time on repeat orders</p>
      <h2 class="mt-2 text-xl font-semibold">Turn your current order into a reusable list</h2>
      <p class="mt-1 text-sm text-white/55">
        @if($wsCartUnits > 0)
          Your open order has {{ number_format($wsCartUnits) }} units. Name it — "Monthly restock", "Spring event kit" — and load it in one click next time.
        @else
          Build an order in Quick order first, then save it here for next time.
        @endif
      </p>
    </div>
    @if($wsCartUnits > 0)
      <form method="post" action="{{ route('wholesale.lists.store') }}" class="flex w-full gap-2 sm:w-auto">@csrf
        <input name="name" required maxlength="80" class="wd-input min-w-0 flex-1 border-white/15 bg-white/10 text-white placeholder:text-white/40 sm:w-64" placeholder="List name" value="{{ old('name') }}">
        <button class="wd-btn wd-btn-gold"><i data-lucide="bookmark-plus" class="h-4 w-4"></i> Save</button>
      </form>
    @else
      <a href="{{ route('wholesale.order-pad') }}" class="wd-btn wd-btn-gold">Open quick order <i data-lucide="arrow-right" class="h-4 w-4"></i></a>
    @endif
  </section>
@endif

<section class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
  @forelse($lists as $i => $list)
    @php $lines = collect($list->lines ?? []); @endphp
    <article class="wd-card wd-reveal flex flex-col p-5" style="--i:{{ min($i + 1, 10) }}">
      <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
          <h3 class="truncate font-semibold">{{ $list->name }}</h3>
          <p class="mt-0.5 text-xs text-black/45">{{ number_format($list->unitCount()) }} units · {{ $lines->count() }} {{ str('line')->plural($lines->count()) }} · by {{ $list->creator?->name ?: $list->creator?->email ?: 'team' }}</p>
        </div>
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[var(--color-gold)]/15 text-[var(--color-gold-dark)]"><i data-lucide="list-checks" class="h-4 w-4"></i></span>
      </div>
      <ul class="mt-4 flex-1 space-y-1.5 text-sm">
        @foreach($lines->take(4) as $line)
          @php $variant = $variants[$line['variant_id']] ?? null; @endphp
          <li class="flex justify-between gap-3">
            <span class="truncate text-black/70">{{ $variant?->product?->title ?? 'Unavailable item' }} <span class="text-black/40">{{ $variant ? trim(implode(' / ', array_filter([$variant->option1, $variant->option2, $variant->option3]))) : '' }}</span></span>
            <span class="shrink-0 font-medium tabular-nums">×{{ number_format($line['quantity']) }}</span>
          </li>
        @endforeach
        @if($lines->count() > 4)
          <li class="text-xs text-black/40">+ {{ $lines->count() - 4 }} more</li>
        @endif
      </ul>
      <div class="mt-5 flex items-center justify-between gap-2 border-t border-black/5 pt-4">
        <span class="text-xs text-black/40">{{ $list->last_used_at ? 'Used '.$list->last_used_at->diffForHumans() : 'Never used' }}</span>
        @if($canOrder)
          <div class="flex gap-1.5">
            <form method="post" action="{{ route('wholesale.lists.destroy', $list) }}" data-wd-confirm="Delete “{{ $list->name }}”?">@csrf @method('DELETE')
              <button class="wd-icon-btn" aria-label="Delete list"><i data-lucide="trash-2" class="h-4 w-4"></i></button>
            </form>
            <form method="post" action="{{ route('wholesale.lists.load', $list) }}">@csrf
              <button class="wd-btn wd-btn-primary py-2"><i data-lucide="shopping-bag" class="h-4 w-4"></i> Add to order</button>
            </form>
          </div>
        @endif
      </div>
    </article>
  @empty
    <div class="wd-card p-12 text-center md:col-span-2 xl:col-span-3">
      <i data-lucide="bookmark" class="mx-auto h-10 w-10 text-black/20"></i>
      <p class="mt-3 font-medium">No saved lists yet</p>
      <p class="mt-1 text-sm text-black/50">Lists are shared with everyone on your team.</p>
    </div>
  @endforelse
</section>
</x-layouts.wholesale>