{{-- Admin Loan Application Details --}}
<x-app-layout title="Loan Application 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('admin.loan-applications.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 Applications
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view loan products')
                <a href="{{ route('admin.loan-products.index') }}" class="module-hero-tab">
                    <i class="fas fa-box"></i> Products
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loan-applications.index') }}" class="module-hero-tab active-tab">
                    <i class="fas fa-file-alt"></i> Applications
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loans.active') }}" class="module-hero-tab">
                    <i class="fas fa-check-circle"></i> Active Loans
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loans.overdue') }}" class="module-hero-tab">
                    <i class="fas fa-exclamation-triangle"></i> Overdue
                </a>
            @endcan
        </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($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <ul class="list-disc list-inside text-sm">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </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">

                {{-- Applicant Information --}}
                <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-user text-green-600"></i> Applicant Information
                        </h3>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Member Name</label>
                            <p class="font-medium text-gray-900 text-sm">{{ $loanApplication->member?->full_name ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Membership Code</label>
                            <p class="font-mono text-gray-900 text-sm">{{ $loanApplication->member?->membership_code ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Email</label>
                            <p class="text-gray-900 text-sm">{{ $loanApplication->member?->email ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Phone</label>
                            <p class="text-gray-900 text-sm">{{ $loanApplication->member?->phone ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Membership Categories</label>
                            <div class="flex flex-wrap gap-1">
                                @foreach($loanApplication->member?->membershipCategories ?? [] as $cat)
                                    <span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded">{{ $cat->name }}</span>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Member Since</label>
                            <p class="text-gray-900 text-sm">{{ $loanApplication->member?->created_at?->format('M d, Y') ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>

                {{-- 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 font-medium text-gray-500 mb-1">Loan Product</label>
                            <p class="font-medium text-gray-900 text-sm">{{ $loanApplication->loanProduct?->name }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Reference Number</label>
                            <p class="font-mono text-gray-900 text-sm">{{ $loanApplication->reference_number }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Amount Requested</label>
                            <p class="text-2xl font-bold text-gray-900">{{ number_format($loanApplication->amount_requested, 2) }} {{ $loanApplication->currency }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Term</label>
                            <p class="text-xl font-bold text-gray-900">{{ $loanApplication->term_months }} months</p>
                        </div>
                        @if($loanApplication->amount_approved)
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Amount Approved</label>
                                <p class="text-2xl 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 font-medium text-gray-500 mb-1">Amount Disbursed</label>
                                <p class="text-2xl font-bold text-purple-600">{{ number_format($loanApplication->amount_disbursed, 2) }} {{ $loanApplication->currency }}</p>
                            </div>
                        @endif
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Interest Rate</label>
                            <p class="text-xl font-bold text-gray-900">{{ $loanApplication->interest_rate ?? $loanApplication->loanProduct?->interest_rate }}%</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Monthly Payment</label>
                            <p class="text-xl font-bold text-gray-900">{{ number_format($loanApplication->monthly_payment ?? 0, 2) }} {{ $loanApplication->currency }}</p>
                        </div>
                        @if($loanApplication->purpose)
                            <div class="md:col-span-2">
                                <label class="block text-xs font-medium 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>

                @if($loanApplication->employment_status || $loanApplication->monthly_income)
                    <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-briefcase text-green-600"></i> Employment & Financial Info
                            </h3>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            @if($loanApplication->employment_status)
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">Employment Status</label>
                                    <p class="text-gray-900 text-sm">{{ ucfirst($loanApplication->employment_status) }}</p>
                                </div>
                            @endif
                            @if($loanApplication->employer_name)
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">Employer</label>
                                    <p class="text-gray-900 text-sm">{{ $loanApplication->employer_name }}</p>
                                </div>
                            @endif
                            @if($loanApplication->monthly_income)
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">Monthly Income</label>
                                    <p class="text-gray-900 text-sm">{{ number_format($loanApplication->monthly_income, 2) }} {{ $loanApplication->income_currency ?? $loanApplication->currency }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                @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 ({{ $loanApplication->documents->count() }})
                            </h3>
                        </div>
                        <div class="p-6 space-y-3">
                            @foreach($loanApplication->documents as $doc)
                                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-file-pdf text-red-500 text-xl"></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>
                                    <div class="flex items-center gap-3">
                                        <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' }}
                                        </span>
                                        @if(!$doc->is_verified && auth()->user()->can('verify loan documents'))
                                            <form action="{{ route('admin.loan-applications.documents.verify', $doc) }}" method="POST">
                                                @csrf
                                                <button type="submit" class="px-3 py-1 bg-blue-600 text-white rounded text-xs font-medium hover:bg-blue-700 transition">Verify</button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if(in_array($loanApplication->status, ['active', 'disbursed']) && $loanApplication->repayments->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-list-alt text-green-600"></i> Repayment Schedule
                            </h3>
                        </div>
                        <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-center th-col-6">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($loanApplication->repayments->sortBy('installment_number') as $repayment)
                                        <tr>
                                            <td class="px-4 py-3 text-gray-900 text-sm">{{ $repayment->installment_number }}</td>
                                            <td class="px-4 py-3 text-gray-600 text-sm">{{ $repayment->due_date?->format('M d, Y') }}</td>
                                            <td class="px-4 py-3 text-right font-medium text-gray-900 text-sm">{{ number_format($repayment->scheduled_amount, 2) }}</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-center">
                                                <span class="px-2 py-0.5 rounded text-xs font-medium {{ $repayment->status === 'paid' ? 'bg-green-100 text-green-700' : ($repayment->status === 'overdue' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                                                    {{ ucfirst($repayment->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </div>

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

                {{-- Status 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">
                        <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 H:i') }}</p>
                            </div>
                        </div>
                        @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 H:i') }}</p>
                                    @if($loanApplication->manager_review_notes)
                                        <p class="text-xs text-gray-600 mt-1">{{ $loanApplication->manager_review_notes }}</p>
                                    @endif
                                </div>
                            </div>
                        @endif
                        @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 text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">Final Approval</p>
                                    <p class="text-xs text-gray-500">{{ $loanApplication->super_manager_approved_at->format('M d, Y H:i') }}</p>
                                </div>
                            </div>
                        @endif
                        @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 H:i') }}</p>
                                </div>
                            </div>
                        @endif
                        @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">{{ $loanApplication->rejection_reason }}</p>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Manager Review Form --}}
                @if($loanApplication->canBeApprovedByManager() && auth()->user()->hasAnyRole(['Manager', 'Super Manager']) && auth()->user()->can('approve loan applications'))
                    <div id="manager-review" class="bg-white rounded-lg shadow-sm border-2 border-blue-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-blue-200 bg-blue-50">
                            <h3 class="text-base font-semibold text-blue-900 flex items-center gap-2">
                                <i class="fas fa-user-check"></i> Manager Review
                            </h3>
                        </div>
                        <div class="p-6">
                            <form action="{{ route('admin.loan-applications.manager-review', $loanApplication) }}" method="POST">
                                @csrf
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Decision</label>
                                    <div class="flex gap-4">
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input type="radio" name="approved" value="1" class="text-green-600" required>
                                            <span class="text-green-700 font-medium text-sm">Approve</span>
                                        </label>
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input type="radio" name="approved" value="0" class="text-red-600" required>
                                            <span class="text-red-700 font-medium text-sm">Reject</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Notes (Optional)</label>
                                    <textarea name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="Add any review notes..."></textarea>
                                </div>
                                <button type="submit" class="w-full px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm font-medium">
                                    <i class="fas fa-check-circle mr-1"></i> Submit Review
                                </button>
                            </form>
                        </div>
                    </div>
                @endif

                {{-- Super Manager Approval --}}
                @if($loanApplication->canBeApprovedBySuperManager() && auth()->user()->hasRole('Super Manager') && auth()->user()->can('approve loan applications'))
                    <div id="super-manager-approve" class="bg-white rounded-lg shadow-sm border-2 border-green-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-green-200 bg-green-50">
                            <h3 class="text-base font-semibold text-green-900 flex items-center gap-2">
                                <i class="fas fa-check-double"></i> Final Approval
                            </h3>
                        </div>
                        <div class="p-6">
                            <form action="{{ route('admin.loan-applications.super-manager-approve', $loanApplication) }}" method="POST">
                                @csrf
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Approved Amount (Optional)</label>
                                    <input type="number" name="approved_amount" step="0.01" value="{{ $loanApplication->amount_requested }}"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                                    <p class="text-xs text-gray-500 mt-1">Requested: {{ number_format($loanApplication->amount_requested, 2) }} {{ $loanApplication->currency }}</p>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Notes (Optional)</label>
                                    <textarea name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm" placeholder="Add any approval notes..."></textarea>
                                </div>
                                <button type="submit" class="w-full px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium">
                                    <i class="fas fa-check-double mr-1"></i> Approve Application
                                </button>
                            </form>
                        </div>
                    </div>
                @endif

                {{-- Disbursement Form --}}
                @if($loanApplication->canBeDisbursed() && auth()->user()->can('disburse loans'))
                    <div id="disburse" class="bg-white rounded-lg shadow-sm border-2 border-purple-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-purple-200 bg-purple-50">
                            <h3 class="text-base font-semibold text-purple-900 flex items-center gap-2">
                                <i class="fas fa-money-bill-wave"></i> Disburse Loan
                            </h3>
                        </div>
                        <div class="p-6">
                            <div class="mb-4 p-3 bg-purple-100 rounded-lg">
                                <p class="text-xs text-purple-600">Amount to Disburse</p>
                                <p class="text-xl font-bold text-purple-900">{{ number_format($loanApplication->amount_approved ?? $loanApplication->amount_requested, 2) }} {{ $loanApplication->currency }}</p>
                            </div>
                            <form action="{{ route('admin.loan-applications.disburse', $loanApplication) }}" method="POST">
                                @csrf
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">MTN MoMo Phone Number</label>
                                    <input type="text" name="phone_number" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
                                           placeholder="e.g., 2567XXXXXXXX">
                                </div>
                                <button type="submit" class="w-full px-4 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm font-medium">
                                    <i class="fas fa-paper-plane mr-1"></i> Disburse via MTN MoMo
                                </button>
                            </form>
                        </div>
                    </div>
                @endif

                @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 Status</h3>
                        </div>
                        <div class="p-6 space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500 text-sm">Total Repayable</span>
                                <span class="font-bold text-gray-900 text-sm">{{ number_format($loanApplication->total_repayable ?? 0, 2) }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500 text-sm">Amount Paid</span>
                                <span class="font-bold text-green-600 text-sm">{{ number_format($loanApplication->amount_repaid ?? 0, 2) }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500 text-sm">Outstanding Balance</span>
                                <span class="font-bold text-red-600 text-sm">{{ number_format($loanApplication->outstanding_balance ?? 0, 2) }}</span>
                            </div>
                            @if($loanApplication->next_payment_date)
                                <div class="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                                    <p class="text-xs text-yellow-600">Next Payment Due</p>
                                    <p class="font-bold text-yellow-800 text-sm">{{ $loanApplication->next_payment_date->format('F d, Y') }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

</x-app-layout>
