@php
  $tabs = ['' => 'All', 'open' => 'In production', 'unpaid' => 'Unpaid', 'shipped' => 'Shipped', 'canceled' => 'Canceled'];
@endphp
<x-layouts.wholesale :seo="$seo" title="Orders" subtitle="Every trade order, invoice and shipment for {{ $wsCompany->name }}">
<div class="wd-reveal flex flex-wrap items-center justify-between gap-3">
  <nav class="wd-tabs overflow-x-auto" aria-label="Filter orders">
    @foreach($tabs as $key => $label)
      <a href="{{ route('wholesale.orders.index', array_filter(['status' => $key, 'q' => $search])) }}" class="wd-tab whitespace-nowrap {{ $status === $key ? 'is-active' : '' }}">{{ $label }}</a>
    @endforeach
  </nav>
  <form method="get" class="relative w-full sm:w-72">
    @if($status)<input type="hidden" name="status" value="{{ $status }}">@endif
    <i data-lucide="search" 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" name="q" value="{{ $search }}" class="wd-input pl-9" placeholder="Order or PO number">
  </form>
</div>

<div class="wd-card wd-reveal mt-5 overflow-hidden" style="--i:1">
  @if($orders->isEmpty())
    <div class="px-6 py-16 text-center">
      <i data-lucide="package-search" class="mx-auto h-10 w-10 text-black/20"></i>
      <p class="mt-3 font-medium">{{ $search || $status ? 'No orders match this filter' : 'No orders yet' }}</p>
      @if($wsMember->canOrder() && ! $search && ! $status)
        <a href="{{ route('wholesale.order-pad') }}" class="wd-btn wd-btn-gold mt-5">Start your first order</a>
      @endif
    </div>
  @else
    <div class="overflow-x-auto">
      <table class="wd-table">
        <thead>
          <tr><th>Order</th><th>PO</th><th>Placed by</th><th class="text-right">Lines</th><th>Status</th><th class="text-right">Total</th><th></th></tr>
        </thead>
        <tbody>
          @foreach($orders as $order)
            <tr>
              <td>
                <a href="{{ route('wholesale.orders.show', $order) }}" class="font-semibold hover:text-[var(--color-gold-dark)]">{{ $order->number }}</a>
                <div class="text-xs text-black/45">{{ $order->created_at->format('d M Y') }}</div>
              </td>
              <td class="text-black/60">{{ $order->po_number ?: '—' }}</td>
              <td class="text-black/60">{{ $order->customer?->name ?: $order->email }}</td>
              <td class="text-right tabular-nums">{{ $order->lines_count }}</td>
              <td class="whitespace-nowrap">@include('website.wholesale.partials.order-status', ['order' => $order, 'withPayment' => true])</td>
              <td class="text-right font-semibold tabular-nums">{{ $order->money('total_cents') }}</td>
              <td class="whitespace-nowrap text-right">
                <a href="{{ route('wholesale.orders.invoice', $order) }}" target="_blank" class="wd-icon-btn inline-flex" title="Invoice"><i data-lucide="file-text" class="h-4 w-4"></i></a>
                @if($wsMember->canOrder())
                  <form method="post" action="{{ route('wholesale.orders.reorder', $order) }}" class="inline">@csrf
                    <button class="wd-icon-btn inline-flex" title="Reorder"><i data-lucide="repeat-2" class="h-4 w-4"></i></button>
                  </form>
                @endif
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    @if($orders->hasPages())
      <div class="border-t border-black/5 px-6 py-4">{{ $orders->links() }}</div>
    @endif
  @endif
</div>
</x-layouts.wholesale>