{{-- TAB 4: Payouts (Admin / Finance) --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-5">
    <div class="stat-card waiting">
        <div class="text-xs text-gray-500 uppercase">Total Payable</div>
        <div class="text-xl font-bold">KES {{ number_format($summary['total_payable'], 0) }}</div>
    </div>
    <div class="stat-card done">
        <div class="text-xs text-gray-500 uppercase">Total Paid (all time)</div>
        <div class="text-xl font-bold">KES {{ number_format($summary['total_paid'], 0) }}</div>
    </div>
    <div class="stat-card">
        <div class="text-xs text-gray-500 uppercase">Outstanding Balance</div>
        <div class="text-xl font-bold">KES {{ number_format($summary['outstanding'], 0) }}</div>
    </div>
</div>

<div class="flex flex-wrap items-center gap-2 mb-3 text-sm">
    <span class="text-gray-500">Export outstanding:</span>
    <a class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50" href="{{ route('corporate.referrals.export', 'xlsx') }}?type=payout">Excel</a>
    <a class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50" href="{{ route('corporate.referrals.export', 'pdf') }}?type=payout">PDF</a>
    <a class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50" href="{{ route('corporate.referrals.export', 'csv') }}?type=payout">CSV</a>
</div>

{{-- Outstanding by rider --}}
<h2 class="text-sm font-bold text-gray-700 mb-2">Outstanding by rider</h2>
<div class="bg-white rounded-lg border border-gray-200 overflow-x-auto mb-8">
    <table class="min-w-full text-sm">
        <thead class="bg-gray-50 text-gray-600 text-xs uppercase">
            <tr>
                <th class="px-3 py-2 text-left">MKR No.</th>
                <th class="px-3 py-2 text-left">Rider</th>
                <th class="px-3 py-2 text-right">Referrals</th>
                <th class="px-3 py-2 text-right">Amount Due</th>
                <th class="px-3 py-2 text-left">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse ($byRider as $row)
                @php
                    $p = $row->member?->patient;
                    $name = $p ? trim($p->first_name.' '.$p->last_name) : '—';
                @endphp
                <tr>
                    <td class="px-3 py-2">{{ $row->mkr_number }}</td>
                    <td class="px-3 py-2">
                        @if ($row->member)
                            <a href="{{ route('corporate.referrals.rider', $row->member) }}" class="text-blue-600 hover:underline">{{ $name }}</a>
                        @else
                            {{ $name }}
                        @endif
                    </td>
                    <td class="px-3 py-2 text-right">{{ $row->referral_count }}</td>
                    <td class="px-3 py-2 text-right font-semibold">KES {{ number_format($row->amount_due, 0) }}</td>
                    <td class="px-3 py-2 whitespace-nowrap">
                        <button type="button" class="text-green-700 hover:underline text-xs"
                                onclick="openPay({{ $row->member?->id }}, '{{ $row->mkr_number }}', {{ (float) $row->amount_due }}, {{ $row->referral_count }})">Mark as Paid</button>
                        @if ($row->member)
                            <a href="{{ route('corporate.referrals.statement', $row->member) }}" class="text-blue-600 hover:underline text-xs ml-2">Statement</a>
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="px-3 py-8 text-center text-gray-400">No outstanding payouts.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Recent payouts --}}
<h2 class="text-sm font-bold text-gray-700 mb-2">Recent payouts</h2>
<div class="bg-white rounded-lg border border-gray-200 overflow-x-auto">
    <table class="min-w-full text-sm">
        <thead class="bg-gray-50 text-gray-600 text-xs uppercase">
            <tr>
                <th class="px-3 py-2 text-left">Payout ID</th>
                <th class="px-3 py-2 text-left">MKR No.</th>
                <th class="px-3 py-2 text-left">Rider</th>
                <th class="px-3 py-2 text-left">Period</th>
                <th class="px-3 py-2 text-right">Count</th>
                <th class="px-3 py-2 text-right">Amount</th>
                <th class="px-3 py-2 text-left">Method</th>
                <th class="px-3 py-2 text-left">Ref</th>
                <th class="px-3 py-2 text-left">Date</th>
                <th class="px-3 py-2 text-left">Status</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse ($payouts as $po)
                @php
                    $p = $po->member?->patient;
                    $name = $p ? trim($p->first_name.' '.$p->last_name) : '—';
                @endphp
                <tr>
                    <td class="px-3 py-2 font-mono text-xs">{{ $po->payout_code }}</td>
                    <td class="px-3 py-2">{{ $po->member?->member_number }}</td>
                    <td class="px-3 py-2">{{ $name }}</td>
                    <td class="px-3 py-2 text-gray-500">{{ $po->period_start?->format('d M') }} – {{ $po->period_end?->format('d M Y') }}</td>
                    <td class="px-3 py-2 text-right">{{ $po->referral_count }}</td>
                    <td class="px-3 py-2 text-right">KES {{ number_format($po->amount_paid, 0) }}</td>
                    <td class="px-3 py-2">{{ $po->payment_method }}</td>
                    <td class="px-3 py-2 text-gray-500">{{ $po->reference_number ?: '—' }}</td>
                    <td class="px-3 py-2 text-gray-500">{{ $po->payment_date?->format('d M Y') }}</td>
                    <td class="px-3 py-2">@include('corporate.referrals.partials.status-badge', ['status' => $po->status])</td>
                </tr>
            @empty
                <tr>
                    <td colspan="10" class="px-3 py-8 text-center text-gray-400">No payouts recorded yet.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Pay modal --}}
<div id="pay-modal" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-lg max-w-md w-full p-5">
        <h3 class="font-semibold text-gray-900 mb-1">Mark referrals as paid</h3>
        <p class="text-xs text-gray-500 mb-4" id="pay-summary"></p>
        <form method="POST" id="pay-form">
            @csrf
            <div class="mb-3">
                <label class="form-label">Payment method <span class="text-red-500">*</span></label>
                <select name="payment_method" class="form-input" required>
                    <option value="M-Pesa">M-Pesa</option>
                    <option value="Cash">Cash</option>
                    <option value="Bank Transfer">Bank Transfer</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Reference number</label>
                <input type="text" name="reference_number" class="form-input" placeholder="M-Pesa code / cheque no.">
            </div>
            <div class="mb-3">
                <label class="form-label">Payment date</label>
                <input type="date" name="payment_date" class="form-input" value="{{ now()->toDateString() }}">
            </div>
            <div class="flex justify-end gap-2 mt-4">
                <button type="button" class="px-3 py-1.5 text-sm text-gray-600" onclick="document.getElementById('pay-modal').classList.add('hidden')">Close</button>
                <button class="btn-primary bg-green-600 hover:bg-green-700">Confirm Payment</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openPay(memberId, mkr, amount, count) {
        const form = document.getElementById('pay-form');
        form.action = "{{ url('corporate/referrals/rider') }}/" + memberId + "/pay";
        document.getElementById('pay-summary').textContent =
            'Paying ' + count + ' referral(s) — KES ' + amount.toLocaleString() + ' to ' + mkr + '.';
        document.getElementById('pay-modal').classList.remove('hidden');
    }
</script>