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

    <x-module-hero title="Overdue Loans" description="Loans with missed payment deadlines" icon="fa-exclamation-triangle">
        <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">
                    <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 active-tab">
                    <i class="fas fa-exclamation-triangle"></i> Overdue
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="w-full">
        {{-- 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-red-500 focus:border-red-500 text-sm">
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm font-medium">
                        <i class="fas fa-search mr-1"></i> Search
                    </button>
                    @if(request('search'))
                        <a href="{{ route('admin.loans.overdue') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition text-sm">Clear</a>
                    @endif
                </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">Balance</th>
                            <th class="px-4 py-3 text-center th-col-5">Days Overdue</th>
                            <th class="px-4 py-3 text-center th-col-6">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?->phone }}</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-red-600 text-sm">{{ number_format($loan->remaining_balance ?? 0, 2) }} {{ $loan->currency }}</td>
                                <td class="px-4 py-3 text-center">
                                    @if($loan->next_payment_date)
                                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                                            {{ abs(now()->diffInDays($loan->next_payment_date)) }} days
                                        </span>
                                    @else
                                        <span class="text-xs text-gray-400">N/A</span>
                                    @endif
                                </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-green-300 mb-4"></i>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">No Overdue Loans</h3>
                    <p class="text-gray-500">All loan payments are up to date.</p>
                </div>
            @endif
        </div>
    </div>

</x-app-layout>
