{{-- Admin Active Loans Index --}}
<x-app-layout title="Active Loans">

    <x-module-hero title="Active Loans" description="Monitor and manage active loan accounts" icon="fa-check-circle">
        <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">
                    <i class="fas fa-file-alt"></i> Applications
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loans.active') }}" class="module-hero-tab active-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="w-full">
        @if(session('success'))
            <div class="mx-6 mt-4 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

        {{-- Search --}}
        <div class="p-6 bg-white border-b border-gray-200">
            <form method="GET">
                <div class="flex gap-4">
                    <input type="text" name="search" value="{{ request('search') }}"
                           placeholder="Search by reference or member name..."
                           class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium">
                        <i class="fas fa-search mr-1"></i> Search
                    </button>
                </div>
            </form>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            @if($loans->count() > 0)
                <table class="w-full table-zebra">
                    <thead>
                        <tr>
                            <th class="px-4 py-3 text-left th-col-1">Reference</th>
                            <th class="px-4 py-3 text-left th-col-2">Member</th>
                            <th class="px-4 py-3 text-left th-col-3">Product</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">Balance</th>
                            <th class="px-4 py-3 text-center th-col-6">Next Payment</th>
                            <th class="px-4 py-3 text-center th-col-7">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($loans as $loan)
                            <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 font-mono text-sm text-gray-600">{{ $loan->reference_number }}</td>
                                <td class="px-4 py-3">
                                    <div class="font-medium text-gray-900 text-sm">{{ $loan->member?->full_name }}</div>
                                    <div class="text-xs text-gray-500">{{ $loan->member?->membership_code }}</div>
                                </td>
                                <td class="px-4 py-3 text-gray-600 text-sm">{{ $loan->loanProduct?->name }}</td>
                                <td class="px-4 py-3 text-right font-medium text-gray-900 text-sm">{{ number_format($loan->amount_disbursed ?? $loan->amount_requested, 2) }} {{ $loan->currency }}</td>
                                <td class="px-4 py-3 text-right font-medium text-red-600 text-sm">{{ number_format($loan->remaining_balance ?? 0, 2) }}</td>
                                <td class="px-4 py-3 text-center text-sm text-gray-600">{{ $loan->next_payment_date?->format('M d, Y') ?? 'N/A' }}</td>
                                <td class="px-4 py-3 text-center">
                                    <a href="{{ route('admin.loan-applications.show', $loan) }}" class="btn-action-view">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="px-4 py-3 border-t border-gray-200 bg-white">
                    {{ $loans->appends(request()->query())->links() }}
                </div>
            @else
                <div class="text-center py-16 bg-white">
                    <i class="fas fa-check-circle text-5xl text-gray-300 mb-4"></i>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">No Active Loans</h3>
                    <p class="text-gray-500">There are no active loans at this time.</p>
                </div>
            @endif
        </div>
    </div>

</x-app-layout>
