@php
    $scheduleRows = $schedulePresentation['rows'] ?? [];
    $scheduleSummary = $schedulePresentation['summary'] ?? [];
    $usesBookedSchedule = (bool) ($schedulePresentation['uses_booked_schedule'] ?? false);
    $compact = (bool) ($compact ?? false);
    $loanFeesPenalties = (float) ($scheduleSummary['loan_fees_penalties_outstanding'] ?? 0);
    $totalAmountDue = (float) ($scheduleSummary['total_amount_due'] ?? ($scheduleSummary['total_remaining'] ?? 0));
@endphp

@if (! $usesBookedSchedule)
    <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
        No booked installment schedule on file.
        @if ($loan->disbursed_at ?? false)
            Schedule rows are created when the loan is disbursed or imported at booking.
        @else
            Disburse this loan to generate the booked schedule.
        @endif
        @if ($loanFeesPenalties > 0.01)
            <p class="mt-2 font-semibold">Fees &amp; penalties outstanding: KES {{ number_format($loanFeesPenalties, 2) }}</p>
        @endif
    </div>
@else
    <p class="mb-3 text-xs text-slate-500">
        Booked repayment schedule from loan booking. Use <span class="font-semibold">+</span> to view how processed payments were allocated to each installment.
        The same payment may appear under multiple installments when its amount was split across dues.
    </p>

    @unless ($compact)
        <div @class([
            'mb-5 grid grid-cols-2 gap-3',
            'md:grid-cols-6' => $loanFeesPenalties > 0.01,
            'md:grid-cols-5' => $loanFeesPenalties <= 0.01,
        ])>
            <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
                <p class="text-xs uppercase text-slate-500">Installments</p>
                <p class="text-lg font-semibold">{{ $scheduleSummary['count'] ?? 0 }}</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
                <p class="text-xs uppercase text-slate-500">Total due</p>
                <p class="text-lg font-semibold">KES {{ number_format((float) ($scheduleSummary['total_due'] ?? 0), 2) }}</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
                <p class="text-xs uppercase text-slate-500">Paid</p>
                <p class="text-lg font-semibold">KES {{ number_format((float) ($scheduleSummary['total_paid'] ?? 0), 2) }}</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
                <p class="text-xs uppercase text-slate-500">Schedule remaining</p>
                <p class="text-lg font-semibold">KES {{ number_format((float) ($scheduleSummary['total_remaining'] ?? 0), 2) }}</p>
            </div>
            @if ($loanFeesPenalties > 0.01)
                <div class="rounded-xl border border-amber-200 bg-amber-50 p-3 shadow-sm">
                    <p class="text-xs uppercase text-amber-700">Fees &amp; penalties</p>
                    <p class="text-lg font-semibold text-amber-900">KES {{ number_format($loanFeesPenalties, 2) }}</p>
                </div>
                <div class="rounded-xl border border-slate-300 bg-slate-50 p-3 shadow-sm">
                    <p class="text-xs uppercase text-slate-600">Total amount due</p>
                    <p class="text-lg font-semibold text-slate-900">KES {{ number_format($totalAmountDue, 2) }}</p>
                </div>
            @endif
            <div class="rounded-xl border border-rose-200 bg-rose-50 p-3 shadow-sm">
                <p class="text-xs uppercase text-rose-700">Overdue</p>
                <p class="text-lg font-semibold text-rose-900">{{ $scheduleSummary['overdue_count'] ?? 0 }}</p>
            </div>
        </div>
    @endunless

    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm" x-data="{ expanded: {} }">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-3 py-2 w-8"></th>
                        <th class="px-3 py-2">#</th>
                        <th class="px-3 py-2">Due date</th>
                        <th class="px-3 py-2 text-right">Principal</th>
                        <th class="px-3 py-2 text-right">Interest</th>
                        <th class="px-3 py-2 text-right">Fees</th>
                        <th class="px-3 py-2 text-right">Total</th>
                        <th class="px-3 py-2 text-right">Paid</th>
                        <th class="px-3 py-2 text-right">Remaining</th>
                        <th class="px-3 py-2">Status</th>
                        <th class="px-3 py-2">DPD</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach ($scheduleRows as $row)
                        @php
                            $rowKey = 'inst-' . ($row['installment_id'] ?? $row['installment_no']);
                            $statusClass = match ($row['status'] ?? '') {
                                'overdue' => 'bg-rose-50/50',
                                'paid' => 'text-slate-500',
                                default => '',
                            };
                        @endphp
                        <tr class="{{ $statusClass }}">
                            <td class="px-3 py-2 align-top">
                                @if (! empty($row['has_allocations']))
                                    <button
                                        type="button"
                                        class="inline-flex h-6 w-6 items-center justify-center rounded border border-slate-300 bg-white text-sm font-bold text-slate-600 hover:bg-slate-50"
                                        :aria-expanded="expanded[@js($rowKey)] ? 'true' : 'false'"
                                        @click="expanded[@js($rowKey)] = !expanded[@js($rowKey)]"
                                        title="Payment allocations for this installment"
                                    >+</button>
                                @endif
                            </td>
                            <td class="px-3 py-2 font-medium">{{ $row['installment_no'] }}</td>
                            <td class="px-3 py-2">{{ $row['due_date'] ?? '—' }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) ($row['principal_due'] ?? 0), 2) }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) ($row['interest_due'] ?? 0), 2) }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) (($row['fees_due'] ?? 0) + ($row['penalty_due'] ?? 0)), 2) }}</td>
                            <td class="px-3 py-2 text-right font-medium tabular-nums">{{ number_format((float) ($row['total_due'] ?? 0), 2) }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) ($row['total_paid'] ?? 0), 2) }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) ($row['remaining_balance'] ?? 0), 2) }}</td>
                            <td class="px-3 py-2 capitalize">{{ str_replace('_', ' ', (string) ($row['status'] ?? '')) }}</td>
                            <td class="px-3 py-2">{{ $row['dpd'] ?? 0 }}</td>
                        </tr>
                        @if (! empty($row['has_allocations']))
                            <tr x-show="expanded[@js($rowKey)]" x-cloak class="bg-slate-50/80">
                                <td colspan="11" class="px-4 py-3">
                                    <div class="space-y-2">
                                        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                                            Payment allocations — installment #{{ $row['installment_no'] }}
                                        </p>
                                        <p class="text-[11px] text-slate-500">
                                            Each row is an allocation slice from a processed payment, not a separate payment.
                                        </p>
                                        <div class="overflow-x-auto rounded-lg border border-slate-200 bg-white">
                                            <table class="min-w-full text-xs">
                                                <thead class="bg-slate-50 text-left text-[10px] uppercase tracking-wide text-slate-500">
                                                    <tr>
                                                        <th class="px-3 py-2">Receipt / date</th>
                                                        <th class="px-3 py-2 text-right">Original transaction amount</th>
                                                        <th class="px-3 py-2 text-right">Allocated to this installment</th>
                                                        <th class="px-3 py-2 text-right">Running on this installment</th>
                                                        <th class="px-3 py-2 text-right">Remaining installment balance</th>
                                                        <th class="px-3 py-2 text-right">Left on transaction</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-slate-100">
                                                    @foreach ($row['allocation_rows'] as $alloc)
                                                        <tr>
                                                            <td class="px-3 py-2">
                                                                <span class="font-mono font-semibold text-slate-800">{{ $alloc['receipt'] ?? '—' }}</span>
                                                                @if (! empty($alloc['transaction_at']))
                                                                    <span class="mt-0.5 block text-slate-500">{{ $alloc['transaction_at'] }}</span>
                                                                @endif
                                                            </td>
                                                            <td class="px-3 py-2 text-right tabular-nums font-medium text-slate-800">
                                                                {{ number_format((float) ($alloc['transaction_amount'] ?? 0), 2) }}
                                                            </td>
                                                            <td class="px-3 py-2 text-right tabular-nums font-semibold text-emerald-700">
                                                                {{ number_format((float) ($alloc['allocated_to_installment'] ?? 0), 2) }}
                                                            </td>
                                                            <td class="px-3 py-2 text-right tabular-nums text-slate-600">
                                                                {{ number_format((float) ($alloc['running_installment_allocation'] ?? 0), 2) }}
                                                            </td>
                                                            <td class="px-3 py-2 text-right tabular-nums text-slate-700">
                                                                {{ number_format((float) ($alloc['remaining_installment_balance'] ?? 0), 2) }}
                                                            </td>
                                                            <td class="px-3 py-2 text-right tabular-nums text-slate-600">
                                                                {{ number_format((float) ($alloc['remaining_transaction_allocation'] ?? 0), 2) }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
                @if ($loanFeesPenalties > 0.01)
                    <tfoot class="bg-slate-50 font-semibold">
                        <tr>
                            <td colspan="8" class="px-3 py-2 text-right text-xs uppercase tracking-wide text-slate-500">Schedule remaining</td>
                            <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) ($scheduleSummary['total_remaining'] ?? 0), 2) }}</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr class="bg-amber-50/80">
                            <td colspan="8" class="px-3 py-2 text-right text-xs uppercase tracking-wide text-amber-800">Fees &amp; penalties</td>
                            <td class="px-3 py-2 text-right tabular-nums text-amber-900">{{ number_format($loanFeesPenalties, 2) }}</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr class="bg-slate-100">
                            <td colspan="8" class="px-3 py-2 text-right text-xs uppercase tracking-wide text-slate-600">Total amount due</td>
                            <td class="px-3 py-2 text-right tabular-nums text-slate-900">{{ number_format($totalAmountDue, 2) }}</td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    </div>
@endif