@extends('layouts.admin')

@section('heading', 'Payments')
@section('subheading', 'Every payment collected across all orders.')

@section('content')

<div class="card p-5 mb-4">
  <p class="text-xs" style="color:#6b6470;">Total collected</p>
  <p class="font-display font-semibold text-2xl" style="color:#0F6E56;">₹{{ number_format($totalCollected, 0) }}</p>
</div>

<div class="card p-6">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left" style="color:#a19a8f;">
        <th class="pb-3 font-medium text-xs">Date</th>
        <th class="pb-3 font-medium text-xs">Order</th>
        <th class="pb-3 font-medium text-xs">Customer</th>
        <th class="pb-3 font-medium text-xs">Mode</th>
        <th class="pb-3 font-medium text-xs">Collected by</th>
        <th class="pb-3 font-medium text-xs text-right">Amount</th>
      </tr>
    </thead>
    <tbody style="color:#1A1625;">
      @forelse($payments as $payment)
        <tr class="border-t" style="border-color:#f2ece0;">
          <td class="py-3 text-xs">{{ $payment->created_at->format('d M Y, h:i A') }}</td>
          <td class="py-3">
            <a href="{{ route('orders.show', $payment->order_id) }}" style="color:#5E35B1; text-decoration:underline;">#{{ $payment->order_id }}</a>
          </td>
          <td class="py-3">{{ $payment->order->customer->name ?? '—' }}</td>
          <td class="py-3 text-xs uppercase">{{ $payment->mode }}</td>
          <td class="py-3 text-xs">{{ $payment->collector->name ?? '—' }}</td>
          <td class="py-3 text-right font-medium">₹{{ number_format($payment->amount, 0) }}</td>
        </tr>
      @empty
        <tr><td colspan="6" class="py-6 text-center text-sm" style="color:#a19a8f;">No payments recorded yet.</td></tr>
      @endforelse
    </tbody>
  </table>

  <div class="mt-4">{{ $payments->links() }}</div>
</div>

@endsection