@php
    $details = $details ?? [];
    $date = $date ?? '';
@endphp

<turbo-frame id="mtd-day-{{ $date }}">
@if (! empty($details))
    <p class="mb-2 flex flex-wrap items-center gap-3 text-[11px] text-slate-500">
        <span><span class="mr-1 inline-block h-2.5 w-2.5 rounded-sm bg-emerald-200"></span>Paid today (on-time)</span>
        <span><span class="mr-1 inline-block h-2.5 w-2.5 rounded-sm bg-red-300"></span>Arrears paid today</span>
        <span><span class="mr-1 inline-block h-2.5 w-2.5 rounded-sm bg-teal-200"></span>Prepaid</span>
    </p>
    <div class="overflow-x-auto rounded-lg border border-slate-200">
        <table class="min-w-full text-[11px]">
            <thead class="bg-slate-50 text-left text-slate-600">
                <tr>
                    <th class="px-2 py-1.5 tabular-nums">#</th>
                    <th class="px-2 py-1.5">Client</th>
                    <th class="px-2 py-1.5">Branch</th>
                    <th class="px-2 py-1.5">Loan</th>
                    <th class="px-2 py-1.5">Officer</th>
                    <th class="px-2 py-1.5 text-right">Days due</th>
                    <th class="px-2 py-1.5">Channel</th>
                    <th class="px-2 py-1.5 text-right">Amount</th>
                    <th class="px-2 py-1.5 text-right">Prepaid</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($details as $detail)
                    @php
                        $rowClass = match ($detail['category'] ?? '') {
                            'on_time' => 'bg-emerald-50',
                            'arrears' => 'bg-red-100',
                            'prepaid' => 'bg-teal-50',
                            default => '',
                        };
                    @endphp
                    <tr class="border-t border-slate-100 {{ $rowClass }}">
                        <td class="px-2 py-1.5 tabular-nums text-slate-500">{{ $loop->iteration }}</td>
                        <td class="px-2 py-1.5">{{ $detail['client_name'] }}</td>
                        <td class="px-2 py-1.5">{{ $detail['branch'] }}</td>
                        <td class="px-2 py-1.5">{{ $detail['loan_number'] ?? '—' }}</td>
                        <td class="px-2 py-1.5">{{ $detail['officer'] }}</td>
                        <td class="px-2 py-1.5 text-right tabular-nums">{{ $detail['days_due'] }}</td>
                        <td class="px-2 py-1.5">{{ $detail['channel'] ?? '—' }}</td>
                        <td class="px-2 py-1.5 text-right font-medium">KES {{ number_format($detail['amount'], 0) }}</td>
                        <td class="px-2 py-1.5 text-right tabular-nums">{{ number_format((float) ($detail['prepaid'] ?? 0), 0) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@else
    <p class="text-slate-500">No client-level receipts recorded for this day.</p>
@endif
</turbo-frame>