@php
  $canceled = $order->status === 'canceled';
  $address = $order->shipping_address ?? [];
  $shipment = $order->fulfillments->sortByDesc('fulfilled_at')->first();
  $steps = [
      ['Placed', 'clipboard-check', true, $order->created_at->format('d M, H:i')],
      [$order->payment_due_at && $order->payment_status !== 'paid' && $order->payment_due_at->isFuture() ? 'On account' : 'Payment', 'landmark', $order->payment_status === 'paid' || ($order->payment_due_at?->isFuture() ?? false), $order->payment_status === 'paid' ? 'Received' : ($order->payment_due_at ? 'Due '.$order->payment_due_at->format('d M') : 'Pending')],
      ['In production', 'factory', true, null],
      ['Dispatched', 'truck', $order->fulfillment_status === 'fulfilled', $shipment?->fulfilled_at?->format('d M') ?? ($order->fulfillment_status === 'partially_fulfilled' ? 'Partly' : null)],
  ];
@endphp
<x-layouts.wholesale :seo="$seo" :title="'Order '.$order->number" :subtitle="'Placed '.$order->created_at->format('j F Y').' by '.($order->customer?->name ?: $order->email)">
<div class="wd-reveal flex flex-wrap items-center justify-between gap-3">
  <a href="{{ route('wholesale.orders.index') }}" class="inline-flex items-center gap-1.5 text-sm text-black/55 hover:text-black"><i data-lucide="arrow-left" class="h-4 w-4"></i> All orders</a>
  <div class="flex flex-wrap gap-2">
    <a href="{{ route('wholesale.orders.invoice', $order) }}" target="_blank" class="wd-btn"><i data-lucide="printer" class="h-4 w-4"></i> {{ $order->payment_status === 'paid' ? 'Tax invoice' : 'Invoice' }}</a>
    @if($wsMember->canOrder())
      <form method="post" action="{{ route('wholesale.orders.reorder', $order) }}">@csrf
        <button class="wd-btn wd-btn-gold"><i data-lucide="repeat-2" class="h-4 w-4"></i> Reorder all</button>
      </form>
    @endif
  </div>
</div>

{{-- Tracker --}}
<section class="wd-card wd-reveal mt-5 p-6" style="--i:1">
  @if($canceled)
    <p class="flex items-center gap-2 font-semibold text-red-700"><i data-lucide="circle-x" class="h-5 w-5"></i> This order was canceled{{ $order->canceled_at ? ' on '.$order->canceled_at->format('d M Y') : '' }}.</p>
  @else
    <ol class="grid grid-cols-2 gap-4 sm:grid-cols-4">
      @foreach($steps as $index => [$label, $icon, $done, $meta])
        <li class="relative">
          @if($index < count($steps) - 1)
            <span class="absolute left-10 right-0 top-5 hidden h-0.5 sm:block {{ $steps[$index + 1][2] ? 'bg-[var(--color-gold)]' : 'bg-black/10' }}"></span>
          @endif
          <span class="relative flex h-10 w-10 items-center justify-center rounded-full {{ $done ? 'bg-[var(--color-gold)] text-black shadow-[0_0_0_6px_rgba(218,175,55,.15)]' : 'bg-black/[0.05] text-black/35' }}">
            <i data-lucide="{{ $icon }}" class="h-4 w-4"></i>
          </span>
          <p class="mt-3 text-sm font-semibold {{ $done ? '' : 'text-black/45' }}">{{ $label }}</p>
          <p class="text-xs text-black/45">{{ $meta ?? '—' }}</p>
        </li>
      @endforeach
    </ol>
    @if($order->isOverdue())
      <p class="mt-5 flex items-center gap-2 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-800"><i data-lucide="triangle-alert" class="h-4 w-4"></i> Payment was due {{ $order->payment_due_at->format('d M Y') }}. Please settle to keep your credit line open.</p>
    @endif
  @endif
</section>

<div class="mt-5 grid gap-5 lg:grid-cols-[minmax(0,1fr)_340px]">
  <section class="wd-card wd-reveal overflow-hidden" style="--i:2">
    <div class="overflow-x-auto">
      <table class="wd-table">
        <thead><tr><th>Item</th><th class="text-right">Qty</th><th class="text-right">Unit</th><th class="text-right">Total</th></tr></thead>
        <tbody>
          @foreach($order->lines as $line)
            <tr>
              <td><p class="font-medium">{{ $line->title }}</p><p class="text-xs text-black/45">{{ $line->variant_title ?: '—' }} · <span class="font-mono">{{ $line->sku }}</span></p></td>
              <td class="text-right tabular-nums">{{ number_format($line->quantity) }}</td>
              <td class="text-right tabular-nums">{{ $order->moneyFromCents((int) $line->unit_price_cents) }}</td>
              <td class="text-right font-semibold tabular-nums">{{ $order->moneyFromCents((int) $line->total_cents) }}</td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    <div class="ml-auto max-w-sm space-y-2 p-6 text-sm">
      <div class="wd-summary-line"><span class="text-black/55">Subtotal</span><span class="tabular-nums">{{ $order->money('subtotal_cents') }}</span></div>
      <div class="wd-summary-line"><span class="text-black/55">Trade discount</span><span class="tabular-nums text-[var(--color-gold-dark)]">−{{ $order->money('discount_cents') }}</span></div>
      <div class="wd-summary-line"><span class="text-black/55">Freight</span><span class="tabular-nums">{{ $order->shipping_cents ? $order->money('shipping_cents') : 'Quoted at dispatch' }}</span></div>
      <div class="wd-summary-line"><span class="text-black/55">GST</span><span class="tabular-nums">{{ $order->money('tax_cents') }}</span></div>
      <div class="wd-summary-line border-t border-black/5 pt-3 text-base font-semibold"><span>Total</span><span class="tabular-nums">{{ $order->money('total_cents') }}</span></div>
      @if($order->savingsCents() > 0)
        <p class="rounded-xl bg-emerald-50 px-3 py-2 text-center text-xs font-semibold text-emerald-800">You saved {{ $order->moneyFromCents($order->savingsCents()) }} against retail on this order</p>
      @endif
    </div>
  </section>

  <aside class="space-y-5">
    <div class="wd-card wd-reveal p-6" style="--i:3">
      <p class="wd-eyebrow">Details</p>
      <dl class="mt-4 space-y-3 text-sm">
        <div><dt class="text-xs text-black/45">Status</dt><dd class="mt-1 flex flex-wrap gap-1.5">@include('website.wholesale.partials.order-status', ['order' => $order, 'withPayment' => true])</dd></div>
        <div><dt class="text-xs text-black/45">PO number</dt><dd class="font-medium">{{ $order->po_number ?: '—' }}</dd></div>
        <div>
          <dt class="text-xs text-black/45">Deliver to</dt>
          <dd class="font-medium">{{ collect([$address['line1'] ?? null, $address['line2'] ?? null, $address['city'] ?? null, $address['region'] ?? null, $address['postal_code'] ?? null, $address['country'] ?? null])->filter()->implode(', ') ?: '—' }}</dd>
        </div>
        @if($order->notes)
          <div><dt class="text-xs text-black/45">Notes</dt><dd class="whitespace-pre-line">{{ $order->notes }}</dd></div>
        @endif
      </dl>
    </div>
    @if($order->fulfillments->isNotEmpty())
      <div class="wd-card wd-reveal p-6" style="--i:4">
        <p class="wd-eyebrow">Shipments</p>
        <ul class="mt-4 space-y-3 text-sm">
          @foreach($order->fulfillments as $fulfillment)
            <li class="rounded-xl border border-black/5 p-3">
              <p class="font-medium">{{ $fulfillment->carrier ?: 'Freight' }} · {{ $fulfillment->fulfilled_at?->format('d M Y') ?? ucfirst((string) $fulfillment->status) }}</p>
              @if($fulfillment->tracking_number)
                <p class="mt-1 font-mono text-xs">
                  @if($fulfillment->tracking_url)
                    <a href="{{ $fulfillment->tracking_url }}" target="_blank" rel="noopener" class="text-[var(--color-gold-dark)] hover:underline">{{ $fulfillment->tracking_number }}</a>
                  @else
                    {{ $fulfillment->tracking_number }}
                  @endif
                </p>
              @endif
            </li>
          @endforeach
        </ul>
      </div>
    @endif
  </aside>
</div>
</x-layouts.wholesale>