@php
  $money = fn (int $cents) => 'AUD '.number_format($cents / 100, 2);
  $canApprove = $wsMember->canApprove();
  $statusPill = ['converted' => ['wd-pill-success', 'Approved'], 'declined' => ['wd-pill-danger', 'Declined']];
@endphp
<x-layouts.wholesale :seo="$seo" title="Approvals" :subtitle="$canApprove ? 'Review orders from buyers above their spending limit' : 'Track orders you have sent for approval'">
<section class="wd-reveal">
  <div class="flex items-center gap-3">
    <h2 class="text-lg font-semibold">Waiting for a decision</h2>
    <span class="wd-pill wd-pill-gold">{{ $pending->count() }}</span>
  </div>

  @forelse($pending as $i => ['cart' => $cart, 'quote' => $quote])
    <article class="wd-card wd-reveal mt-4 overflow-hidden" style="--i:{{ $i + 1 }}">
      <div class="flex flex-wrap items-start justify-between gap-4 p-6">
        <div class="flex items-start gap-4">
          <span class="flex h-11 w-11 items-center justify-center rounded-full bg-[var(--color-gold)]/15 font-semibold text-[var(--color-gold-dark)]">{{ strtoupper(substr($cart->customer->name ?: $cart->customer->email, 0, 1)) }}</span>
          <div>
            <p class="font-semibold">{{ $cart->customer->name ?: $cart->customer->email }} <span class="font-normal text-black/50">requested</span> {{ $money($quote['net_cents']) }}</p>
            <p class="mt-0.5 text-xs text-black/50">
              {{ $cart->submitted_at?->diffForHumans() }} · {{ number_format($quote['units']) }} units · {{ count($quote['lines']) }} lines
              @if($cart->po_number) · PO {{ $cart->po_number }} @endif
              · {{ $cart->payment_method === 'account' ? 'On account' : 'Proforma' }}
              @if($cart->location) · {{ $cart->location->label }} @endif
            </p>
            @if($cart->notes)<p class="mt-2 max-w-xl rounded-xl bg-black/[0.03] px-3 py-2 text-sm text-black/70">“{{ $cart->notes }}”</p>@endif
          </div>
        </div>
        <p class="text-right"><span class="block text-2xl wd-kpi">{{ $money($quote['net_cents']) }}</span><span class="text-xs text-emerald-700">saves {{ $money($quote['savings_cents']) }} vs retail</span></p>
      </div>

      <details class="border-t border-black/5">
        <summary class="cursor-pointer list-none px-6 py-3 text-sm font-medium text-black/60 hover:text-black">View {{ count($quote['lines']) }} lines</summary>
        <div class="overflow-x-auto">
          <table class="wd-table">
            <tbody>
              @foreach($quote['lines'] as $line)
                <tr>
                  <td>{{ $line['title'] }} <span class="text-xs text-black/45">{{ $line['variant_title'] }}</span></td>
                  <td class="text-right tabular-nums">{{ number_format($line['quantity']) }} × {{ $money($line['unit_price_cents']) }}</td>
                  <td class="text-right font-semibold tabular-nums">{{ $money($line['total_cents']) }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </details>

      @if($canApprove)
        <div class="flex flex-wrap items-center justify-end gap-2 border-t border-black/5 bg-black/[0.015] px-6 py-4">
          <form method="post" action="{{ route('wholesale.approvals.decline', $cart) }}" class="flex flex-1 flex-wrap items-center gap-2 sm:justify-end">@csrf
            <input name="note" maxlength="255" class="wd-input max-w-xs py-2 text-sm" placeholder="Reason (optional, shared with buyer)">
            <button class="wd-btn"><i data-lucide="x" class="h-4 w-4"></i> Decline</button>
          </form>
          <form method="post" action="{{ route('wholesale.approvals.approve', $cart) }}" data-wd-confirm="Approve and place this order for {{ $money($quote['net_cents']) }}?">@csrf
            <button class="wd-btn wd-btn-gold"><i data-lucide="check" class="h-4 w-4"></i> Approve &amp; place</button>
          </form>
        </div>
      @else
        <p class="border-t border-black/5 bg-black/[0.015] px-6 py-3 text-xs text-black/50">Awaiting an approver at {{ $wsCompany->name }}.</p>
      @endif
    </article>
  @empty
    <div class="wd-card mt-4 flex items-center gap-4 p-6">
      <span class="flex h-11 w-11 items-center justify-center rounded-full bg-emerald-50 text-emerald-700"><i data-lucide="check-check" class="h-5 w-5"></i></span>
      <div>
        <p class="font-medium">All clear</p>
        <p class="text-sm text-black/50">{{ $canApprove ? 'No orders are waiting for your approval.' : 'You have no orders awaiting approval.' }}</p>
      </div>
    </div>
  @endforelse
</section>

<section class="wd-card wd-reveal mt-8 overflow-hidden" style="--i:4">
  <div class="px-6 pt-6"><h2 class="text-lg font-semibold">History</h2></div>
  @if($history->isEmpty())
    <p class="px-6 pb-6 pt-3 text-sm text-black/50">Reviewed requests will appear here.</p>
  @else
    <div class="mt-3 overflow-x-auto">
      <table class="wd-table">
        <thead><tr><th>Requested by</th><th>Submitted</th><th>Decision</th><th>Reviewer</th><th class="text-right">Value</th></tr></thead>
        <tbody>
          @foreach($history as $cart)
            @php [$tone, $label] = $statusPill[$cart->status] ?? ['', ucfirst($cart->status)]; @endphp
            <tr>
              <td class="font-medium">{{ $cart->customer->name ?: $cart->customer->email }}</td>
              <td class="text-black/60">{{ $cart->submitted_at?->format('d M Y') }}</td>
              <td>
                <span class="wd-pill {{ $tone }}">{{ $label }}</span>
                @if($cart->order)<a href="{{ route('wholesale.orders.show', $cart->order_id) }}" class="ml-1 text-xs font-medium text-[var(--color-gold-dark)] hover:underline">{{ $cart->order->number }}</a>@endif
                @if($cart->review_note)<p class="mt-1 text-xs text-black/50">“{{ $cart->review_note }}”</p>@endif
              </td>
              <td class="text-black/60">{{ $cart->reviewer?->name ?? ($cart->status === 'converted' ? 'Within limit' : '—') }}</td>
              <td class="text-right font-semibold tabular-nums">{{ $money((int) $cart->net_cents) }}</td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif
</section>
</x-layouts.wholesale>