@extends('layouts.app')
@section('title', __('Payments'))
@section('content')
<section class="mb-6 flex flex-wrap items-end justify-between gap-4">
  <p class="text-sm text-slate-500">{{ __('Track submitted top-ups and review decisions.') }}</p>

</section>
<section class="panel-card overflow-hidden">
  <div class="border-b border-slate-100 px-5 py-5 sm:px-6"><h2 class="font-bold text-slate-900">{{ __('Payment history') }}</h2><p class="mt-1 text-xs text-slate-400">{{ $payments->total() }} {{ __('submissions') }}</p></div>
  @if($payments->count())
    <div class="table-scroll">
      <table class="w-full text-left text-sm">
        <thead class="bg-slate-50 text-xs font-bold uppercase tracking-wider text-slate-400"><tr><th class="px-5 py-3">{{ __('Date') }}</th><th class="px-5 py-3">{{ __('Amount') }}</th><th class="px-5 py-3">{{ __('Method') }}</th><th class="px-5 py-3">{{ __('Reference') }}</th><th class="px-5 py-3">{{ __('Status') }}</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
        @foreach($payments as $payment)
          <tr class="text-slate-600"><td class="whitespace-nowrap px-5 py-4">{{ $payment->created_at->format('M d, Y') }}</td><td class="whitespace-nowrap px-5 py-4 font-bold text-slate-900">৳{{ number_format($payment->amount, 2) }}</td><td class="px-5 py-4">{{ $payment->method ?: '—' }}</td><td class="px-5 py-4">{{ $payment->reference ?: '—' }}</td><td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $payment->status === 'approved' ? 'bg-emerald-50 text-emerald-700' : ($payment->status === 'rejected' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700') }}">{{ __(ucfirst($payment->status)) }}</span></td></tr>
        @endforeach
        </tbody>
      </table>
    </div>
    <div class="border-t border-slate-100 px-5 py-4">{{ $payments->links() }}</div>
  @else
    <div class="px-6 py-14 text-center"><p class="font-semibold text-slate-700">{{ __('No payment submissions yet') }}</p><p class="mt-1 text-sm text-slate-400">{{ __('Your submitted payments and review status will appear here.') }}</p></div>
  @endif
</section>
@endsection