{{-- Member Make Loan Payment --}}
<x-app-layout title="Make Payment">

    <x-module-hero title="Make Loan Payment" :description="($loanApplication->loanProduct?->name ?? 'Loan') . ' — ' . $loanApplication->reference_number" icon="fa-credit-card">
        <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">
                <i class="fas fa-calendar"></i> Schedule
            </a>
            <a href="{{ route('member.loans.repay', $loanApplication) }}" class="module-hero-tab active-tab">
                <i class="fas fa-credit-card"></i> Make Payment
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
            </div>
        @endif
        @if($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <p class="font-semibold mb-2 text-sm">Please correct the following errors:</p>
                <ul class="list-disc list-inside text-sm">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="max-w-5xl">

            @if($nextRepayment)

                {{-- Overdue Alert --}}
                @if($overdueRepayments->count() > 0)
                    <div class="mb-6 p-4 bg-red-50 border border-red-300 rounded-lg">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-exclamation-triangle text-red-500 mt-0.5"></i>
                            <div>
                                <p class="font-semibold text-red-800 text-sm">
                                    You have {{ $overdueRepayments->count() }} overdue
                                    {{ Str::plural('installment', $overdueRepayments->count()) }}
                                </p>
                                <p class="text-red-600 text-xs mt-1">
                                    Paying the next installment below will clear the oldest overdue payment first.
                                    Late payment penalties may apply per your loan agreement.
                                </p>
                                <div class="mt-2 space-y-1">
                                    @foreach($overdueRepayments as $od)
                                        <div class="flex items-center gap-2 text-xs text-red-700">
                                            <i class="fas fa-circle text-red-400" style="font-size:6px"></i>
                                            Installment #{{ $od->installment_number }} —
                                            {{ number_format($od->scheduled_amount, 2) }} {{ $loanApplication->currency }}
                                            — due {{ $od->due_date?->format('M d, Y') }}
                                            ({{ $od->getDaysOverdue() }} days overdue)
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Next Payment Details --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-calendar-check text-green-600"></i>
                            @if($nextRepayment->isOverdue())
                                Overdue Payment — Installment #{{ $nextRepayment->installment_number }}
                            @else
                                Next Payment Due — Installment #{{ $nextRepayment->installment_number }}
                            @endif
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Installment</label>
                                <p class="font-semibold text-gray-900 text-sm">#{{ $nextRepayment->installment_number }} of {{ $loanApplication->term_months }}</p>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Due Date</label>
                                <p class="font-semibold {{ $nextRepayment->isOverdue() ? 'text-red-600' : 'text-gray-900' }} text-sm">
                                    {{ $nextRepayment->due_date?->format('M d, Y') }}
                                    @if($nextRepayment->isOverdue())
                                        <span class="text-xs">({{ $nextRepayment->getDaysOverdue() }}d overdue)</span>
                                    @endif
                                </p>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Principal</label>
                                <p class="font-medium text-gray-700 text-sm">{{ number_format($nextRepayment->scheduled_principal, 2) }} {{ $loanApplication->currency }}</p>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Interest</label>
                                <p class="font-medium text-gray-700 text-sm">{{ number_format($nextRepayment->scheduled_interest, 2) }} {{ $loanApplication->currency }}</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center p-4 {{ $nextRepayment->isOverdue() ? 'bg-red-50 border-red-200' : 'bg-green-50 border-green-200' }} rounded-lg border">
                            <span class="text-gray-700 font-semibold text-sm">Total Amount Due</span>
                            <span class="text-2xl font-bold {{ $nextRepayment->isOverdue() ? 'text-red-600' : 'text-green-600' }}">
                                {{ number_format($nextRepayment->scheduled_amount, 2) }} {{ $loanApplication->currency }}
                            </span>
                        </div>
                    </div>
                </div>

                {{-- Payment Form --}}
                <form action="{{ route('member.loans.process-repayment', $loanApplication) }}" method="POST" id="repayment-form">
                    @csrf
                    <input type="hidden" name="repayment_id" value="{{ $nextRepayment->id }}">

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                            <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                                <i class="fas fa-credit-card text-yellow-500"></i> Choose Payment Method
                            </h3>
                        </div>
                        <div class="p-6">

                            {{-- Payment Method Toggle (Mobile Money + Bank Card) --}}
                            <div class="mb-6">
                                <x-payment-method-toggle />
                            </div>

                            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                                <h4 class="font-semibold text-yellow-900 mb-2 text-sm flex items-center gap-2">
                                    <i class="fas fa-list-ol text-yellow-600"></i> How it works
                                </h4>
                                <ol class="text-xs text-yellow-800 space-y-1.5">
                                    <li class="flex items-start gap-2"><span class="font-bold">1.</span> Choose Mobile Money or Bank Card above</li>
                                    <li class="flex items-start gap-2"><span class="font-bold">2.</span> Enter your phone number or card details</li>
                                    <li class="flex items-start gap-2"><span class="font-bold">3.</span> Click Pay Now to initiate the payment</li>
                                    <li class="flex items-start gap-2"><span class="font-bold">4.</span> For MoMo: approve the prompt on your phone with your PIN</li>
                                    <li class="flex items-start gap-2"><span class="font-bold">5.</span> Your loan balance will update automatically once confirmed</li>
                                </ol>
                            </div>

                            <button type="submit" id="pay-btn"
                                    class="w-full px-4 py-3.5 bg-yellow-500 text-yellow-900 rounded-lg hover:bg-yellow-400 active:bg-yellow-600 transition font-bold text-base flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
                                    onclick="this.disabled=true; this.innerHTML='<i class=\'fas fa-spinner fa-spin mr-2\'></i> Processing…'; this.form.submit();">
                                <i class="fas fa-lock text-lg"></i>
                                Pay {{ number_format($nextRepayment->scheduled_amount, 2) }} {{ $loanApplication->currency }}
                            </button>

                        </div>
                    </div>
                </form>

                {{-- Loan Summary --}}
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                    <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 ?? 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">Amount Paid</div>
                        <div class="text-xl font-bold text-green-600">{{ number_format($loanApplication->amount_repaid ?? 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">Installments Paid</div>
                        <div class="text-xl font-bold text-gray-900">{{ $loanApplication->repayments->where('status', 'paid')->count() }} / {{ $loanApplication->term_months }}</div>
                        <div class="text-xs text-gray-500">installments</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">Overdue</div>
                        <div class="text-xl font-bold {{ $overdueRepayments->count() > 0 ? 'text-red-600' : 'text-gray-400' }}">
                            {{ $overdueRepayments->count() }}
                        </div>
                        <div class="text-xs text-gray-500">installments</div>
                    </div>
                </div>

                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-center">
                    <i class="fas fa-lock text-gray-400 mr-2"></i>
                    <span class="text-xs text-gray-600">Your payment is secure and processed by MTN Mobile Money. We never store your PIN.</span>
                </div>

            @else
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
                    <i class="fas fa-check-circle text-5xl text-green-300 mb-4"></i>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">No Payment Due</h3>
                    <p class="text-gray-500 mb-6">There are no pending payments for this loan at this time.</p>
                    <a href="{{ route('member.loans.show', $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-medium">
                        <i class="fas fa-eye mr-2"></i> View Loan Details
                    </a>
                </div>
            @endif

        </div>
    </div>

</x-app-layout>
