@php
    $paginator = $rows;
    $emptyMessage = $empty ?? 'No upcoming installments.';
@endphp

<div class="overflow-x-auto rounded-xl border bg-white shadow-sm mobile-table-scroll" data-loan-table-wheel-scroll>
    <table class="loan-compact-table ws-table--sticky-actions collections-due-register min-w-full text-xs">
        <thead class="sticky top-0 bg-slate-50 text-left text-slate-600">
            <tr>
                <th class="px-3 py-2 tabular-nums">#</th>
                <th class="px-3 py-2">Client</th>
                <th class="px-3 py-2">Mobile</th>
                <th class="px-3 py-2">Branch</th>
                <th class="px-3 py-2">Loan officer</th>
                <th class="px-3 py-2">Due date</th>
                <th class="px-3 py-2 text-right">Expected Amount</th>
                <th class="px-3 py-2 text-right">Collected Amount</th>
                <th class="px-3 py-2 text-right">Remaining Amount</th>
                <th class="px-3 py-2 text-right">Collection Progress</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($paginator ?? [] as $row)
                @php
                    $rowToneClass = match ($row->register_row_tone ?? 'open') {
                        'cleared' => 'collections-due-row--cleared',
                        'partial' => 'collections-due-row--partial',
                        'arrears' => 'collections-due-row--arrears',
                        default => '',
                    };
                    $clientName = trim((string) ($row->register_client_name ?? ''));
                    $progress = (float) ($row->register_progress_pct ?? 0);
                    $phone = (string) ($row->register_phone ?? '');
                    $due = $row->due_date instanceof \Illuminate\Support\Carbon
                        ? $row->due_date->toDateString()
                        : (string) $row->due_date;
                @endphp
                <tr class="border-t {{ $rowToneClass }}">
                    <td class="px-3 py-2 tabular-nums text-slate-500">{{ ($paginator->firstItem() ?? 0) + $loop->index }}</td>
                    <td class="px-3 py-2">{{ $clientName !== '' ? $clientName : '—' }}</td>
                    <td class="px-3 py-2">
                        @if ($phone !== '')
                            <a href="tel:{{ preg_replace('/\D+/', '', $phone) }}" class="text-blue-600 hover:underline">{{ $phone }}</a>
                        @else
                            —
                        @endif
                    </td>
                    <td class="px-3 py-2">{{ $row->register_branch ?: '—' }}</td>
                    <td class="px-3 py-2">{{ $row->register_officer ?: '—' }}</td>
                    <td class="px-3 py-2 tabular-nums">{{ $due }}</td>
                    <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) ($row->register_expected ?? 0), 0) }}</td>
                    <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) ($row->register_collected ?? 0), 0) }}</td>
                    <td class="px-3 py-2 text-right tabular-nums font-semibold">{{ number_format((float) ($row->register_remaining ?? 0), 0) }}</td>
                    <td class="px-3 py-2 text-right tabular-nums">{{ number_format($progress, 0) }}%</td>
                </tr>
            @empty
                <tr><td colspan="10" class="px-3 py-8 text-center text-slate-500">{{ $emptyMessage }}</td></tr>
            @endforelse
        </tbody>
    </table>
</div>