@extends('layouts.user')

@section('title', __('loans.title'))
@section('page_title', __('loans.page_title'))
@section('breadcrumb', __('loans.breadcrumb'))

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-4">

    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <div class="bg-gradient-to-r from-slate-900 via-indigo-900 to-slate-900 px-4 py-4 text-white">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div>
                    <p class="text-[10px] uppercase tracking-[0.24em] text-white/70 font-semibold">
                        {{ __('loans.loan_management') }}
                    </p>
                    <h1 class="mt-1 text-lg md:text-xl font-bold leading-tight">{{ __('loans.loan_list') }}</h1>
                    <p class="mt-1 text-xs text-white/80">{{ __('loans.hero_text') }}</p>
                </div>

                <div class="flex gap-2 flex-wrap">
                    <a href="{{ route('user.reports.loan-general-ledger') }}"
                       class="inline-flex items-center justify-center border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold hover:bg-white/20">
                        {{ __('loans.loan_ledger') }}
                    </a>

                    <a href="{{ route('user.loans.create') }}"
                       class="inline-flex items-center justify-center bg-white px-3 py-2 text-xs font-semibold text-slate-900 hover:bg-slate-100">
                        {{ __('loans.new_loan') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-5 gap-3">
        <div class="border bg-white p-3 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('loans.active_loans') }}</div>
            <div class="mt-1 text-lg font-bold">{{ number_format($activeCount) }}</div>
        </div>

        <div class="border bg-white p-3 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('loans.outstanding') }}</div>
            <div class="mt-1 text-lg font-bold">{{ number_format($activeOutstanding, 2) }}</div>
        </div>

        <div class="border bg-white p-3 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('loans.total_principal') }}</div>
            <div class="mt-1 text-lg font-bold">{{ number_format($totalPrincipal, 2) }}</div>
        </div>

        <div class="border bg-white p-3 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('loans.paid_principal') }}</div>
            <div class="mt-1 text-lg font-bold">{{ number_format($totalPaidPrincipal, 2) }}</div>
        </div>

        <div class="border bg-white p-3 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('loans.interest_fee_paid') }}</div>
            <div class="mt-1 text-lg font-bold">{{ number_format($totalPaidInterest + $totalPaidFee, 2) }}</div>
        </div>
    </div>

    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <form method="GET" class="border-b border-slate-100 p-3">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                <div>
                    <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.status') }}</label>
                    <select
                        name="status"
                        class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                    >
                        <option value="">{{ __('loans.all') }}</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>
                            {{ __('loans.active') }}
                        </option>
                        <option value="closed" {{ request('status') === 'closed' ? 'selected' : '' }}>
                            {{ __('loans.closed') }}
                        </option>
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.search') }}</label>
                    <input
                        type="text"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="{{ __('loans.search_placeholder') }}"
                        class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                    >
                </div>

                <div class="flex items-end gap-2">
                    <button
                        type="submit"
                        class="bg-slate-900 px-4 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-slate-800"
                    >
                        {{ __('loans.filter') }}
                    </button>

                    <a href="{{ route('user.loans.index') }}"
                       class="border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-slate-50">
                        {{ __('loans.reset') }}
                    </a>
                </div>
            </div>
        </form>

        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50 text-slate-600">
                    <tr>
                        <th class="px-3 py-2.5 text-left font-semibold">{{ __('loans.loan') }}</th>
                        <th class="px-3 py-2.5 text-left font-semibold">{{ __('loans.account') }}</th>
                        <th class="px-3 py-2.5 text-right font-semibold">{{ __('loans.principal') }}</th>
                        <th class="px-3 py-2.5 text-right font-semibold">{{ __('loans.remaining') }}</th>
                        <th class="px-3 py-2.5 text-right font-semibold">{{ __('loans.rate') }}</th>
                        <th class="px-3 py-2.5 text-left font-semibold">{{ __('loans.start') }}</th>
                        <th class="px-3 py-2.5 text-left font-semibold">{{ __('loans.status') }}</th>
                        <th class="px-3 py-2.5 text-right font-semibold">{{ __('loans.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                @forelse($loans as $loan)
                    <tr class="hover:bg-slate-50/70">
                        <td class="px-3 py-2.5">
                            <div class="font-semibold text-slate-800 text-xs">{{ $loan->lender_name ?: __('loans.unknown_lender') }}</div>
                            <div class="text-[11px] text-slate-500">{{ $loan->loan_no ?: __('loans.no_ref') }}</div>
                        </td>

                        <td class="px-3 py-2.5">
                            <div class="font-medium text-xs">{{ $loan->account->name ?? '-' }}</div>
                            <div class="text-[11px] text-slate-500 uppercase">{{ $loan->account->type ?? '-' }}</div>
                        </td>

                        <td class="px-3 py-2.5 text-right font-semibold">
                            {{ number_format((float) $loan->principal_amount, 2) }}
                        </td>

                        <td class="px-3 py-2.5 text-right font-bold {{ (float) $loan->remaining_amount > 0 ? 'text-amber-600' : 'text-emerald-600' }}">
                            {{ number_format((float) $loan->remaining_amount, 2) }}
                        </td>

                        <td class="px-3 py-2.5 text-right">
                            {{ number_format((float) $loan->interest_rate, 2) }}%
                        </td>

                        <td class="px-3 py-2.5">
                            {{ optional($loan->start_date)->format('d M Y') }}
                        </td>

                        <td class="px-3 py-2.5">
                            @if($loan->status === 'closed')
                                <span class="inline-flex bg-emerald-100 px-2 py-1 text-[11px] font-semibold text-emerald-700">
                                    {{ __('loans.closed') }}
                                </span>
                            @else
                                <span class="inline-flex bg-amber-100 px-2 py-1 text-[11px] font-semibold text-amber-700">
                                    {{ __('loans.active') }}
                                </span>
                            @endif
                        </td>

                        <td class="px-3 py-2.5">
                            <div class="flex justify-end gap-1.5 flex-wrap">
                                <a href="{{ route('user.loans.statement', $loan) }}"
                                   class="border px-2.5 py-1 text-[11px] font-semibold hover:bg-slate-50">
                                    {{ __('loans.statement') }}
                                </a>

                                @if($loan->status !== 'closed')
                                    <a href="{{ route('user.loans.payments.create', $loan) }}"
                                       class="bg-indigo-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-indigo-700">
                                        {{ __('loans.payment') }}
                                    </a>

                                    <a href="{{ route('user.loans.edit', $loan) }}"
                                       class="border px-2.5 py-1 text-[11px] font-semibold hover:bg-slate-50">
                                        {{ __('loans.edit') }}
                                    </a>

                                    @if((float) $loan->remaining_amount <= 0.01)
                                        <form method="POST"
                                              action="{{ route('user.loans.close', $loan) }}"
                                              class="js-confirm"
                                              data-confirm-title="{{ __('loans.close_loan_title') }}"
                                              data-confirm-text="{{ __('loans.close_loan_text') }}"
                                              data-confirm-button-text="{{ __('loans.yes_close_it') }}">
                                            @csrf
                                            <button type="submit" class="bg-emerald-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-emerald-700">
                                                {{ __('loans.close') }}
                                            </button>
                                        </form>
                                    @endif
                                @endif

                                @if($loan->status !== 'closed')
                                    <form method="POST"
                                          action="{{ route('user.loans.destroy', $loan) }}"
                                          class="js-delete"
                                          data-confirm-title="{{ __('loans.delete_loan_title') }}"
                                          data-confirm-text="{{ __('loans.delete_loan_text') }}"
                                          data-confirm-button-text="{{ __('loans.yes_delete_it') }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-rose-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-rose-700">
                                            {{ __('loans.delete') }}
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>

                    @if($loan->note)
                        <tr>
                            <td></td>
                            <td colspan="7" class="px-3 pb-2.5 text-[11px] text-slate-500">
                                {{ __('loans.note') }}: {{ $loan->note }}
                            </td>
                        </tr>
                    @endif
                @empty
                    <tr>
                        <td colspan="8" class="px-3 py-8 text-center text-sm text-slate-500">
                            {{ __('loans.no_loans_found') }}
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-3 border-t border-slate-100">
            {{ $loans->links() }}
        </div>
    </div>
</div>
@endsection