@extends('layouts.app')
@section('header_title', 'Referral Commission Statements')
@section('content')
<div class="bg-white rounded-2xl border p-6">
    <h3 class="font-bold text-[#060453] text-lg mb-4">📑 Commission Payout Log</h3>
    <table class="w-full text-left text-sm">
        <thead class="bg-gray-50 text-xs uppercase text-gray-500"><tr><th class="p-3">Referral Partner</th><th class="p-3">Bill Ref</th><th class="p-3">Bill Amount</th><th class="p-3">Commission Earned</th><th class="p-3">Status</th></tr></thead>
        <tbody class="divide-y font-mono">
            @foreach($commissions as $com)
            <tr><td class="p-3 font-sans font-bold">{{ $com->referral->name }}</td><td class="p-3">{{ $com->bill->bill_number }}</td><td class="p-3">₦{{ number_format($com->bill_amount, 2) }}</td><td class="p-3 font-black text-green-700">₦{{ number_format($com->commission_amount, 2) }}</td><td class="p-3 font-sans"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">{{ $com->status }}</span></td></tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection