@php
  $money = fn (int $cents) => 'AUD '.number_format($cents / 100, 2);
  $buckets = [
      'current' => ['Current', 'bg-emerald-500'],
      'd1_30' => ['1–30 days', 'bg-amber-400'],
      'd31_60' => ['31–60 days', 'bg-orange-500'],
      'd61_plus' => ['61+ days', 'bg-red-600'],
  ];
@endphp
<x-layouts.wholesale :seo="$seo" title="Statements" :subtitle="'Account statement as at '.now()->format('j F Y')">
<div class="wd-no-print wd-reveal flex justify-end">
  <button type="button" onclick="window.print()" class="wd-btn"><i data-lucide="printer" class="h-4 w-4"></i> Print statement</button>
</div>

<section class="mt-4 grid gap-5 lg:grid-cols-12">
  <div class="wd-card-ink wd-reveal p-6 lg:col-span-5" style="--i:1">
    <p class="wd-eyebrow">Balance owing</p>
    <p class="mt-3 text-4xl wd-kpi" data-wd-count="{{ $aging['total'] }}" data-wd-format="money">{{ $money($aging['total']) }}</p>
    <p class="mt-1 text-sm text-white/55">{{ $outstanding->count() }} open {{ str('invoice')->plural($outstanding->count()) }}</p>
    @if($credit['on_account'])
      <div class="mt-6">
        <div class="flex justify-between text-xs text-white/50"><span>Credit used</span><span>{{ $money($credit['used_cents']) }} / {{ $money($credit['limit_cents']) }}</span></div>
        <div class="mt-2 h-2 overflow-hidden rounded-full bg-white/10"><span class="block h-full rounded-full bg-[var(--color-gold)] transition-[width] duration-1000" data-wd-progress="{{ $credit['utilization'] }}" style="width:0"></span></div>
      </div>
    @endif
  </div>

  <div class="wd-card wd-reveal p-6 lg:col-span-7" style="--i:2">
    <p class="wd-eyebrow">Aging</p>
    <div class="mt-4 flex h-3 overflow-hidden rounded-full bg-black/[0.05]">
      @foreach($buckets as $key => [$label, $color])
        @if($aging['total'] > 0 && $aging[$key] > 0)
          <span class="{{ $color }} h-full" style="width: {{ 100 * $aging[$key] / $aging['total'] }}%" title="{{ $label }}"></span>
        @endif
      @endforeach
    </div>
    <dl class="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-4">
      @foreach($buckets as $key => [$label, $color])
        <div>
          <dt class="flex items-center gap-2 text-xs text-black/50"><span class="h-2 w-2 rounded-full {{ $color }}"></span>{{ $label }}</dt>
          <dd class="mt-1 font-semibold tabular-nums">{{ $money($aging[$key]) }}</dd>
        </div>
      @endforeach
    </dl>
    @if($credit['overdue_cents'] > 0)
      <p class="mt-5 flex items-center gap-2 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-800"><i data-lucide="triangle-alert" class="h-4 w-4"></i> {{ $money($credit['overdue_cents']) }} is overdue. Settling it restores your full credit line.</p>
    @endif
  </div>
</section>

<section class="wd-card wd-reveal mt-5 overflow-hidden" style="--i:3">
  <div class="px-6 pt-6"><h2 class="text-lg font-semibold">Open invoices</h2></div>
  @if($outstanding->isEmpty())
    <p class="flex items-center gap-2 px-6 pb-6 pt-3 text-sm text-black/55"><i data-lucide="party-popper" class="h-4 w-4 text-[var(--color-gold-dark)]"></i> Nothing owing — you're all square.</p>
  @else
    <div class="mt-3 overflow-x-auto">
      <table class="wd-table">
        <thead><tr><th>Invoice</th><th>PO</th><th>Issued</th><th>Due</th><th class="text-right">Amount</th><th></th></tr></thead>
        <tbody>
          @foreach($outstanding as $order)
            <tr>
              <td><a href="{{ route('wholesale.orders.show', $order) }}" class="font-semibold hover:text-[var(--color-gold-dark)]">{{ $order->number }}</a></td>
              <td class="text-black/60">{{ $order->po_number ?: '—' }}</td>
              <td class="text-black/60">{{ $order->created_at->format('d M Y') }}</td>
              <td>
                @if($order->isOverdue())
                  <span class="wd-pill wd-pill-danger">{{ (int) $order->payment_due_at->diffInDays(now()) }}d overdue</span>
                @else
                  <span class="text-black/70">{{ $order->payment_due_at?->format('d M Y') ?? 'On receipt' }}</span>
                @endif
              </td>
              <td class="text-right font-semibold tabular-nums">{{ $order->moneyFromCents($order->netTotalCents()) }}</td>
              <td class="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></td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif
</section>

<section class="wd-card wd-reveal mt-5 overflow-hidden" style="--i:4">
  <div class="px-6 pt-6"><h2 class="text-lg font-semibold">Recently paid</h2></div>
  @if($paid->isEmpty())
    <p class="px-6 pb-6 pt-3 text-sm text-black/50">Paid invoices will appear here.</p>
  @else
    <div class="mt-3 overflow-x-auto">
      <table class="wd-table">
        <tbody>
          @foreach($paid as $order)
            <tr>
              <td><a href="{{ route('wholesale.orders.show', $order) }}" class="font-medium hover:text-[var(--color-gold-dark)]">{{ $order->number }}</a></td>
              <td class="text-black/60">{{ $order->created_at->format('d M Y') }}</td>
              <td><span class="wd-pill wd-pill-success">Paid</span></td>
              <td class="text-right tabular-nums">{{ $order->money('total_cents') }}</td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif
</section>
</x-layouts.wholesale>