{{-- Member Loan Application Details --}}
<x-app-layout title="Loan Details">

    <x-module-hero
        :title="$loanApplication->loanProduct?->name ?? 'Loan Application'"
        :description="'Reference: ' . $loanApplication->reference_number"
        icon="fa-file-invoice-dollar">
        <x-slot name="backButton">
            <a href="{{ route('member.loans.index') }}" 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 Loans
            </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 active-tab">
                <i class="fas fa-eye"></i> Loan Details
            </a>
            @if(in_array($loanApplication->status, ['active', 'disbursed', 'completed']))
                <a href="{{ route('member.loans.schedule', $loanApplication) }}" class="module-hero-tab">
                    <i class="fas fa-calendar"></i> Schedule
                </a>
            @endif
            @if(in_array($loanApplication->status, ['active', 'disbursed']))
                <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">

        @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 text-xl"></i> {{ session('success') }}
            </div>
        @endif
        @if(session('error') || $errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                @if(session('error'))<p>{{ session('error') }}</p>@endif
                @foreach($errors->all() as $error)<p>{{ $error }}</p>@endforeach
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Main Content --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Loan Details --}}
                <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">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-info-circle text-green-600"></i> Loan Details
                        </h3>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Product</label>
                            <p class="font-medium text-gray-900 text-sm">{{ $loanApplication->loanProduct?->name }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Reference</label>
                            <p class="font-mono text-gray-900 text-sm">{{ $loanApplication->reference_number }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Amount Requested</label>
                            <p class="text-xl font-bold text-gray-900">{{ number_format($loanApplication->amount_requested, 2) }} {{ $loanApplication->currency }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Term</label>
                            <p class="font-medium text-gray-900 text-sm">{{ $loanApplication->term_months }} months</p>
                        </div>
                        @if($loanApplication->amount_approved)
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Amount Approved</label>
                                <p class="text-xl font-bold text-green-600">{{ number_format($loanApplication->amount_approved, 2) }} {{ $loanApplication->currency }}</p>
                            </div>
                        @endif
                        @if($loanApplication->amount_disbursed)
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Amount Disbursed</label>
                                <p class="text-xl font-bold text-purple-600">{{ number_format($loanApplication->amount_disbursed, 2) }} {{ $loanApplication->currency }}</p>
                            </div>
                        @endif
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Interest Rate</label>
                            <p class="font-medium text-gray-900 text-sm">{{ $loanApplication->interest_rate }}% per annum</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Monthly Payment</label>
                            <p class="font-medium text-gray-900 text-sm">{{ number_format($loanApplication->monthly_payment ?? 0, 2) }} {{ $loanApplication->currency }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Applied On</label>
                            <p class="text-gray-900 text-sm">{{ $loanApplication->created_at->format('M d, Y') }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Status</label>
                            @php
                                $statusColors = [
                                    'pending'          => 'bg-yellow-100 text-yellow-700',
                                    'under_review'     => 'bg-blue-100 text-blue-700',
                                    'manager_approved' => 'bg-indigo-100 text-indigo-700',
                                    'approved'         => 'bg-green-100 text-green-700',
                                    'disbursed'        => 'bg-purple-100 text-purple-700',
                                    'active'           => 'bg-teal-100 text-teal-700',
                                    'completed'        => 'bg-green-100 text-green-700',
                                    'rejected'         => 'bg-red-100 text-red-700',
                                    'defaulted'        => 'bg-red-100 text-red-700',
                                    'cancelled'        => 'bg-gray-100 text-gray-600',
                                ];
                                $sc = $statusColors[$loanApplication->status] ?? 'bg-gray-100 text-gray-600';
                            @endphp
                            <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $sc }}">
                                {{ ucfirst(str_replace('_', ' ', $loanApplication->status)) }}
                            </span>
                        </div>
                        @if($loanApplication->purpose)
                            <div class="md:col-span-2">
                                <label class="block text-xs text-gray-500 mb-1">Purpose</label>
                                <p class="text-gray-900 text-sm bg-gray-50 p-3 rounded-lg">{{ $loanApplication->purpose }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Active / Disbursed Loan Payment Status --}}
                @if(in_array($loanApplication->status, ['active', 'disbursed']))
                    <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">
                            <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                                <i class="fas fa-chart-line text-green-600"></i> Repayment Status
                            </h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                                <div class="text-center p-4 bg-gray-50 rounded-lg">
                                    <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-400">{{ $loanApplication->currency }}</div>
                                </div>
                                <div class="text-center p-4 bg-green-50 rounded-lg">
                                    <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-400">{{ $loanApplication->currency }}</div>
                                </div>
                                <div class="text-center p-4 bg-red-50 rounded-lg">
                                    <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-400">{{ $loanApplication->currency }}</div>
                                </div>
                            </div>

                            {{-- Progress bar --}}
                            @php $progress = $loanApplication->getRepaymentProgress(); @endphp
                            <div class="mb-6">
                                <div class="flex justify-between text-xs text-gray-500 mb-1">
                                    <span>Repayment Progress</span>
                                    <span>{{ number_format($progress, 1) }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-green-500 h-2.5 rounded-full transition-all" style="width: {{ min(100, $progress) }}%"></div>
                                </div>
                            </div>

                            @if($loanApplication->next_payment_date)
                                @php
                                    $isOverdue = $loanApplication->next_payment_date->isPast();
                                @endphp
                                <div class="flex justify-between items-center p-4 {{ $isOverdue ? 'bg-red-50 border-red-200' : 'bg-yellow-50 border-yellow-200' }} border rounded-lg">
                                    <div>
                                        <span class="text-xs {{ $isOverdue ? 'text-red-600' : 'text-yellow-600' }}">
                                            {{ $isOverdue ? 'Payment Overdue' : 'Next Payment Due' }}
                                        </span>
                                        <p class="font-semibold {{ $isOverdue ? 'text-red-800' : 'text-yellow-800' }} text-sm">
                                            {{ $loanApplication->next_payment_date->format('F d, Y') }}
                                            @if($isOverdue)
                                                <span class="text-xs font-normal">({{ now()->diffInDays($loanApplication->next_payment_date) }} days ago)</span>
                                            @endif
                                        </p>
                                        @if($loanApplication->next_payment_amount)
                                            <p class="text-xs text-gray-600 mt-0.5">
                                                Amount: {{ number_format($loanApplication->next_payment_amount, 2) }} {{ $loanApplication->currency }}
                                            </p>
                                        @endif
                                    </div>
                                    <a href="{{ route('member.loans.repay', $loanApplication) }}"
                                       class="px-4 py-2 {{ $isOverdue ? 'bg-red-500 hover:bg-red-600 text-white' : 'bg-yellow-500 hover:bg-yellow-400 text-yellow-900' }} rounded-lg transition font-medium text-sm">
                                        Pay Now
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Completed Loan --}}
                @if($loanApplication->status === 'completed')
                    <div class="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
                        <i class="fas fa-check-circle text-green-500 text-4xl mb-3"></i>
                        <h3 class="text-lg font-semibold text-green-800 mb-1">Loan Fully Repaid</h3>
                        <p class="text-green-600 text-sm">Congratulations! You have successfully repaid this loan.</p>
                    </div>
                @endif

                {{-- Documents --}}
                @if($loanApplication->documents->count() > 0)
                    <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">
                            <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                                <i class="fas fa-file-alt text-green-600"></i> Documents
                            </h3>
                        </div>
                        <div class="p-6 space-y-3">
                            @foreach($loanApplication->documents as $doc)
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-file-pdf text-red-400"></i>
                                        <div>
                                            <p class="font-medium text-gray-900 text-sm">{{ ucfirst(str_replace('_', ' ', $doc->document_type)) }}</p>
                                            <p class="text-xs text-gray-500">{{ $doc->original_filename }}</p>
                                        </div>
                                    </div>
                                    <span class="px-2 py-0.5 rounded text-xs font-medium {{ $doc->is_verified ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                        {{ $doc->is_verified ? 'Verified' : 'Pending Review' }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">

                {{-- Quick Actions --}}
                @if(in_array($loanApplication->status, ['active', 'disbursed']))
                    <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">
                            <h3 class="text-base font-semibold text-gray-900">Quick Actions</h3>
                        </div>
                        <div class="p-6 space-y-3">
                            <a href="{{ route('member.loans.repay', $loanApplication) }}"
                               class="w-full text-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium text-sm block">
                                <i class="fas fa-credit-card mr-2"></i> Make a Payment
                            </a>
                            <a href="{{ route('member.loans.schedule', $loanApplication) }}"
                               class="w-full text-center px-4 py-3 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition font-medium text-sm block">
                                <i class="fas fa-calendar mr-2"></i> View Repayment Schedule
                            </a>
                        </div>
                    </div>
                @endif

                @if($loanApplication->status === 'completed')
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                        <div class="p-6 space-y-3">
                            <a href="{{ route('member.loans.schedule', $loanApplication) }}"
                               class="w-full text-center px-4 py-3 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition font-medium text-sm block">
                                <i class="fas fa-calendar mr-2"></i> View Repayment History
                            </a>
                        </div>
                    </div>
                @endif

                {{-- Application Timeline --}}
                <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">
                        <h3 class="text-base font-semibold text-gray-900">Application Timeline</h3>
                    </div>
                    <div class="p-6 space-y-4">

                        {{-- Submitted --}}
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900 text-sm">Submitted</p>
                                <p class="text-xs text-gray-500">{{ $loanApplication->created_at->format('M d, Y') }}</p>
                            </div>
                        </div>

                        {{-- Manager Review --}}
                        @if($loanApplication->manager_reviewed_at)
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 {{ $loanApplication->manager_approved ? 'bg-green-500' : 'bg-red-500' }} rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas {{ $loanApplication->manager_approved ? 'fa-check' : 'fa-times' }} text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">Manager Review</p>
                                    <p class="text-xs text-gray-500">{{ $loanApplication->manager_reviewed_at->format('M d, Y') }}</p>
                                </div>
                            </div>
                        @elseif(in_array($loanApplication->status, ['pending', 'under_review']))
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-clock text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-700 text-sm">Awaiting Review</p>
                                    <p class="text-xs text-gray-400">Your application is being reviewed</p>
                                </div>
                            </div>
                        @endif

                        {{-- Final Approval --}}
                        @if($loanApplication->super_manager_approved_at)
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check-double text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">Approved</p>
                                    <p class="text-xs text-gray-500">{{ $loanApplication->super_manager_approved_at->format('M d, Y') }}</p>
                                    @if($loanApplication->amount_approved && $loanApplication->amount_approved != $loanApplication->amount_requested)
                                        <p class="text-xs text-green-600 mt-0.5">
                                            Approved amount: {{ number_format($loanApplication->amount_approved, 2) }} {{ $loanApplication->currency }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endif

                        {{-- Disbursed --}}
                        @if($loanApplication->disbursed_at)
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-money-bill-wave text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">Disbursed</p>
                                    <p class="text-xs text-gray-500">{{ $loanApplication->disbursed_at->format('M d, Y') }}</p>
                                    @if($loanApplication->amount_disbursed)
                                        <p class="text-xs text-purple-600 mt-0.5">
                                            {{ number_format($loanApplication->amount_disbursed, 2) }} {{ $loanApplication->currency }} sent to your MoMo
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endif

                        {{-- Active --}}
                        @if($loanApplication->status === 'active')
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 bg-teal-500 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-play text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">Active — Repayments Running</p>
                                    <p class="text-xs text-gray-500">Make monthly payments to clear your balance</p>
                                </div>
                            </div>
                        @endif

                        {{-- Completed --}}
                        @if($loanApplication->status === 'completed')
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-trophy text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-green-800 text-sm">Fully Repaid</p>
                                    <p class="text-xs text-green-600">Loan closed successfully</p>
                                </div>
                            </div>
                        @endif

                        {{-- Rejected --}}
                        @if($loanApplication->status === 'rejected')
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-times text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-red-900 text-sm">Rejected</p>
                                    @if($loanApplication->rejection_reason)
                                        <p class="text-xs text-red-600 mt-0.5">{{ $loanApplication->rejection_reason }}</p>
                                    @endif
                                </div>
                            </div>
                        @endif

                    </div>
                </div>

                {{-- Loan Summary (active/disbursed) --}}
                @if(in_array($loanApplication->status, ['active', 'disbursed']))
                    <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">
                            <h3 class="text-base font-semibold text-gray-900">Loan Summary</h3>
                        </div>
                        <div class="p-6 space-y-3 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-500">Total Repayable</span>
                                <span class="font-semibold text-gray-900">{{ number_format($loanApplication->total_repayable ?? 0, 2) }} {{ $loanApplication->currency }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">Total Interest</span>
                                <span class="font-semibold text-gray-900">{{ number_format($loanApplication->total_interest ?? 0, 2) }} {{ $loanApplication->currency }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">Monthly Payment</span>
                                <span class="font-semibold text-gray-900">{{ number_format($loanApplication->monthly_payment ?? 0, 2) }} {{ $loanApplication->currency }}</span>
                            </div>
                            <div class="border-t border-gray-100 pt-3 flex justify-between">
                                <span class="text-gray-500">Installments Paid</span>
                                <span class="font-semibold text-gray-900">
                                    {{ $loanApplication->repayments->where('status', 'paid')->count() }} / {{ $loanApplication->term_months }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endif

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

</x-app-layout>
