{{-- Member Loan Repayment Schedule --}}
<x-app-layout title="Repayment Schedule">

    <x-module-hero
        :title="($loanApplication->loanProduct?->name ?? 'Loan') . ' — Repayment Schedule'"
        :description="'Reference: ' . $loanApplication->reference_number"
        icon="fa-calendar-alt">
        <x-slot name="backButton">
            <a href="{{ route('member.loans.show', $loanApplication) }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to Loan
            </a>
        </x-slot>
        <x-slot name="tabs">
            <a href="{{ route('member.dashboard') }}" class="module-hero-tab">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            <a href="{{ route('member.loans.index') }}" class="module-hero-tab">
                <i class="fas fa-list"></i> My Loans
            </a>
            <a href="{{ route('member.loans.show', $loanApplication) }}" class="module-hero-tab">
                <i class="fas fa-eye"></i> Loan Details
            </a>
            <a href="{{ route('member.loans.schedule', $loanApplication) }}" class="module-hero-tab active-tab">
                <i class="fas fa-calendar"></i> Schedule
            </a>
            @if($loanApplication->status === 'active')
                <a href="{{ route('member.loans.repay', $loanApplication) }}" class="module-hero-tab">
                    <i class="fas fa-credit-card"></i> Make Payment
                </a>
            @endif
        </x-slot>
    </x-module-hero>

    <div class="p-6">

        {{-- Loan Summary --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
                <div class="text-xs text-gray-500 mb-1">Principal</div>
                <div class="text-xl font-bold text-gray-900">{{ number_format($loanApplication->amount_disbursed ?? $loanApplication->amount_approved ?? $loanApplication->amount_requested, 2) }}</div>
                <div class="text-xs text-gray-500">{{ $loanApplication->currency }}</div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
                <div class="text-xs text-gray-500 mb-1">Monthly Payment</div>
                <div class="text-xl font-bold text-green-600">{{ number_format($loanApplication->monthly_payment ?? 0, 2) }}</div>
                <div class="text-xs text-gray-500">{{ $loanApplication->currency }}</div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
                <div class="text-xs text-gray-500 mb-1">Total Repayable</div>
                <div class="text-xl font-bold text-gray-900">{{ number_format($loanApplication->total_repayable ?? 0, 2) }}</div>
                <div class="text-xs text-gray-500">{{ $loanApplication->currency }}</div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
                <div class="text-xs text-gray-500 mb-1">Remaining Balance</div>
                <div class="text-xl font-bold text-red-600">{{ number_format($loanApplication->remaining_balance ?? $loanApplication->total_repayable ?? 0, 2) }}</div>
                <div class="text-xs text-gray-500">{{ $loanApplication->currency }}</div>
            </div>
        </div>

        {{-- Repayment Schedule Table --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
                <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-calendar-alt text-green-600"></i> Installment Schedule
                </h3>
                <span class="text-sm text-gray-500">{{ $loanApplication->term_months }} installments</span>
            </div>

            @if($loanApplication->repayments->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full table-zebra">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left th-col-1">#</th>
                                <th class="px-4 py-3 text-left th-col-2">Due Date</th>
                                <th class="px-4 py-3 text-right th-col-3">Amount</th>
                                <th class="px-4 py-3 text-right th-col-4">Principal</th>
                                <th class="px-4 py-3 text-right th-col-5">Interest</th>
                                <th class="px-4 py-3 text-right th-col-6">Balance After</th>
                                <th class="px-4 py-3 text-center th-col-7">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($loanApplication->repayments->sortBy('installment_number') as $repayment)
                                @php
                                    $isOverdue = $repayment->isOverdue();
                                    $isPaid    = $repayment->isPaid();
                                    $rowClass  = $isPaid ? 'opacity-60' : ($isOverdue ? 'bg-red-50' : '');
                                    $statusBadge = match($repayment->status) {
                                        'paid'      => 'bg-green-100 text-green-700',
                                        'overdue'   => 'bg-red-100 text-red-700',
                                        'partial'   => 'bg-yellow-100 text-yellow-700',
                                        'cancelled' => 'bg-gray-100 text-gray-500',
                                        default     => 'bg-blue-100 text-blue-700',
                                    };
                                    // Find matching amortization row for balance
                                    $amortRow = $loanApplication->amortizationSchedule
                                        ->firstWhere('installment_number', $repayment->installment_number);
                                @endphp
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0 {{ $rowClass }}">
                                    <td class="px-4 py-3 text-gray-900 text-sm font-medium">{{ $repayment->installment_number }}</td>
                                    <td class="px-4 py-3 text-gray-600 text-sm">
                                        {{ $repayment->due_date?->format('M d, Y') }}
                                        @if($isOverdue && !$isPaid)
                                            <span class="ml-1 text-xs text-red-500">({{ $repayment->getDaysOverdue() }}d overdue)</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-right font-medium text-gray-900 text-sm">
                                        {{ number_format($repayment->scheduled_amount, 2) }}
                                        @if($isPaid && $repayment->amount_paid != $repayment->scheduled_amount)
                                            <div class="text-xs text-green-600">Paid: {{ number_format($repayment->amount_paid, 2) }}</div>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-right text-gray-600 text-sm">{{ number_format($repayment->scheduled_principal, 2) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-600 text-sm">{{ number_format($repayment->scheduled_interest, 2) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-600 text-sm">
                                        @if($amortRow)
                                            {{ number_format($amortRow->ending_balance, 2) }}
                                        @elseif($repayment->principal_balance !== null)
                                            {{ number_format($repayment->principal_balance, 2) }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $statusBadge }}">
                                            {{ ucfirst($repayment->status) }}
                                        </span>
                                        @if($isPaid && $repayment->paid_date)
                                            <div class="text-xs text-gray-400 mt-0.5">{{ $repayment->paid_date->format('M d') }}</div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="bg-gray-50 font-semibold">
                                <td colspan="2" class="px-4 py-3 text-gray-700 text-sm">Totals</td>
                                <td class="px-4 py-3 text-right text-gray-900 text-sm">{{ number_format($loanApplication->total_repayable ?? 0, 2) }}</td>
                                <td class="px-4 py-3 text-right text-gray-900 text-sm">
                                    {{ number_format($loanApplication->amount_disbursed ?? $loanApplication->amount_approved ?? $loanApplication->amount_requested, 2) }}
                                </td>
                                <td class="px-4 py-3 text-right text-gray-900 text-sm">{{ number_format($loanApplication->total_interest ?? 0, 2) }}</td>
                                <td colspan="2" class="px-4 py-3"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @elseif($loanApplication->amortizationSchedule->count() > 0)
                {{-- Fallback: show amortization schedule if repayments not yet generated --}}
                <div class="overflow-x-auto">
                    <table class="w-full table-zebra">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left th-col-1">#</th>
                                <th class="px-4 py-3 text-left th-col-2">Payment Date</th>
                                <th class="px-4 py-3 text-right th-col-3">Payment</th>
                                <th class="px-4 py-3 text-right th-col-4">Principal</th>
                                <th class="px-4 py-3 text-right th-col-5">Interest</th>
                                <th class="px-4 py-3 text-right th-col-6">Balance</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($loanApplication->amortizationSchedule->sortBy('installment_number') as $row)
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                    <td class="px-4 py-3 text-gray-900 text-sm">{{ $row->installment_number }}</td>
                                    <td class="px-4 py-3 text-gray-600 text-sm">{{ $row->payment_date?->format('M d, Y') }}</td>
                                    <td class="px-4 py-3 text-right font-medium text-gray-900 text-sm">{{ number_format($row->scheduled_payment, 2) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-600 text-sm">{{ number_format($row->principal, 2) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-600 text-sm">{{ number_format($row->interest, 2) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-600 text-sm">{{ number_format($row->ending_balance, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-12">
                    <i class="fas fa-calendar-times text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-500 text-sm">Repayment schedule will be generated once the loan is disbursed.</p>
                </div>
            @endif
        </div>

        @if($loanApplication->status === 'active')
            <div class="mt-6 flex justify-end">
                <a href="{{ route('member.loans.repay', $loanApplication) }}"
                   class="inline-flex items-center px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-semibold">
                    <i class="fas fa-credit-card mr-2"></i> Make a Payment
                </a>
            </div>
        @endif

    </div>

</x-app-layout>
