{{-- Member My Loans Index --}}
<x-app-layout title="My Loans">

    <x-module-hero title="My Loans" description="View and manage your loan applications" icon="fa-money-bill-wave">
        <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 active-tab">
                <i class="fas fa-list"></i> My Loans
            </a>
            @can('view loan products')
            <a href="{{ route('member.loans.products') }}" class="module-hero-tab">
                <i class="fas fa-plus-circle"></i> Apply for Loan
            </a>
            @endcan
            <a href="{{ route('member.contributions') }}" class="module-hero-tab">
                <i class="fas fa-hand-holding-usd"></i> Contributions
            </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(session('error'))
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center">
                <i class="fas fa-exclamation-circle mr-3"></i> {{ session('error') }}
            </div>
        @endif

        @if($applications->count() > 0)
            <div class="space-y-4">
                @foreach($applications as $application)
                    @php
                        $statusColors = [
                            'draft'            => 'bg-gray-100 text-gray-700',
                            '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',
                            'rejected'         => 'bg-red-100 text-red-700',
                            'disbursed'        => 'bg-purple-100 text-purple-700',
                            'active'           => 'bg-teal-100 text-teal-700',
                            'completed'        => 'bg-green-100 text-green-700',
                            'defaulted'        => 'bg-red-100 text-red-700',
                            'cancelled'        => 'bg-gray-100 text-gray-700',
                        ];
                        $sc = $statusColors[$application->status] ?? 'bg-gray-100 text-gray-700';
                    @endphp
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
                        <div class="p-5">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                                <div>
                                    <h3 class="font-semibold text-gray-900 text-base">{{ $application->loanProduct?->name ?? 'Loan' }}</h3>
                                    <p class="text-xs text-gray-500 font-mono mt-0.5">{{ $application->reference_number }}</p>
                                </div>
                                <span class="self-start sm:self-auto px-3 py-1 rounded-full text-xs font-semibold {{ $sc }}">
                                    {{ ucfirst(str_replace('_', ' ', $application->status)) }}
                                </span>
                            </div>

                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                                <div>
                                    <div class="text-xs text-gray-500">Amount Requested</div>
                                    <div class="font-semibold text-gray-900 text-sm">{{ number_format($application->amount_requested, 2) }} {{ $application->currency }}</div>
                                </div>
                                <div>
                                    <div class="text-xs text-gray-500">Term</div>
                                    <div class="font-semibold text-gray-900 text-sm">{{ $application->term_months }} months</div>
                                </div>
                                @if(in_array($application->status, ['active', 'disbursed']))
                                    <div>
                                        <div class="text-xs text-gray-500">Remaining Balance</div>
                                        <div class="font-semibold text-red-600 text-sm">{{ number_format($application->remaining_balance ?? 0, 2) }}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-gray-500">Next Payment</div>
                                        <div class="font-semibold text-gray-900 text-sm">{{ $application->next_payment_date?->format('M d, Y') ?? 'N/A' }}</div>
                                    </div>
                                @else
                                    <div>
                                        <div class="text-xs text-gray-500">Applied On</div>
                                        <div class="font-semibold text-gray-900 text-sm">{{ $application->created_at->format('M d, Y') }}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-gray-500">Monthly Payment</div>
                                        <div class="font-semibold text-gray-900 text-sm">{{ number_format($application->monthly_payment ?? 0, 2) }}</div>
                                    </div>
                                @endif
                            </div>

                            @if(in_array($application->status, ['active', 'disbursed']))
                                {{-- Repayment progress bar --}}
                                @php
                                    $progress = $application->getRepaymentProgress();
                                @endphp
                                <div class="mb-4">
                                    <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">
                                        <div class="bg-green-500 h-2 rounded-full transition-all" style="width: {{ min(100, $progress) }}%"></div>
                                    </div>
                                </div>
                            @endif

                            @if($application->status === 'rejected' && $application->rejection_reason)
                                <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                                    <p class="text-xs text-red-600"><i class="fas fa-times-circle mr-1"></i> <strong>Rejection Reason:</strong> {{ $application->rejection_reason }}</p>
                                </div>
                            @endif

                            <div class="flex flex-wrap gap-2">
                                <a href="{{ route('member.loans.show', $application) }}"
                                   class="inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-xs font-medium">
                                    <i class="fas fa-eye mr-1"></i> View Details
                                </a>
                                @if(in_array($application->status, ['active', 'disbursed']))
                                    <a href="{{ route('member.loans.schedule', $application) }}"
                                       class="inline-flex items-center px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition text-xs font-medium">
                                        <i class="fas fa-calendar mr-1"></i> Schedule
                                    </a>
                                    <a href="{{ route('member.loans.repay', $application) }}"
                                       class="inline-flex items-center px-3 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-xs font-medium">
                                        <i class="fas fa-credit-card mr-1"></i> Make Payment
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-6">
                {{ $applications->links() }}
            </div>
        @else
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
                <i class="fas fa-money-bill-wave text-5xl text-gray-300 mb-4"></i>
                <h3 class="text-lg font-semibold text-gray-700 mb-2">No Loan Applications</h3>
                <p class="text-gray-500 mb-6">You have not applied for any loans yet.</p>
                @can('view loan products')
                    <a href="{{ route('member.loans.products') }}"
                       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-plus mr-2"></i> Apply for a Loan
                    </a>
                @endcan
            </div>
        @endif
    </div>

</x-app-layout>
