@extends('layouts.user')

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

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

    {{-- Header --}}
    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <div class="bg-gradient-to-r from-slate-900 via-slate-800 to-indigo-900 px-4 py-4 text-white">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                <div class="min-w-0">
                    <p class="text-[10px] uppercase tracking-[0.22em] text-white/70 font-semibold">
                        {{ __('loans.loan_statement') }}
                    </p>
                    <h1 class="mt-1 text-lg sm:text-xl font-bold truncate">
                        {{ $loan->lender_name ?: __('loans.unknown_lender') }}
                    </h1>
                    <p class="mt-1 text-[11px] sm:text-xs text-white/80 leading-5">
                        {{ __('loans.ref_label') }}: {{ $loan->loan_no ?: __('loans.na') }}
                        · {{ __('loans.start') }}: {{ optional($loan->start_date)->format('d M Y') }}
                        · {{ __('loans.rate') }}: {{ number_format((float) $loan->interest_rate, 2) }}%
                    </p>
                </div>

                <div class="flex gap-2 flex-wrap shrink-0">
                    @if($loan->status !== 'closed')
                        <a href="{{ route('user.loans.payments.create', $loan) }}"
                           class="bg-white px-3 py-2 text-xs font-semibold text-slate-900 transition hover:bg-slate-100">
                            {{ __('loans.add_payment_button') }}
                        </a>
                    @endif

                    <a href="{{ route('user.loans.index') }}"
                       class="border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold text-white transition hover:bg-white/20">
                        {{ __('loans.back') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Summary Cards --}}
    <div class="grid grid-cols-2 lg:grid-cols-5 gap-3">
        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-wide text-slate-500">{{ __('loans.principal') }}</div>
            <div class="mt-1 text-base sm:text-lg font-bold text-slate-900">
                {{ number_format((float) $loan->principal_amount, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-wide text-slate-500">{{ __('loans.remaining') }}</div>
            <div class="mt-1 text-base sm:text-lg font-bold {{ (float) $loan->remaining_amount > 0 ? 'text-amber-600' : 'text-emerald-600' }}">
                {{ number_format((float) $loan->remaining_amount, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-wide text-slate-500">{{ __('loans.principal_paid') }}</div>
            <div class="mt-1 text-base sm:text-lg font-bold text-slate-900">
                {{ number_format($totalPrincipalPaid, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-wide text-slate-500">{{ __('loans.interest_paid') }}</div>
            <div class="mt-1 text-base sm:text-lg font-bold text-slate-900">
                {{ number_format($totalInterestPaid, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-wide text-slate-500">{{ __('loans.fee_total_paid') }}</div>
            <div class="mt-1 text-[11px] font-semibold text-slate-600">
                {{ number_format($totalFeePaid, 2) }}
            </div>
            <div class="mt-1 text-base sm:text-lg font-bold text-slate-900">
                {{ number_format($totalPaid, 2) }}
            </div>
        </div>
    </div>

    {{-- Payments Section --}}
    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <form method="GET" class="border-b border-slate-200 p-4">
            <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.from') }}
                    </label>
                    <input
                        type="date"
                        name="from"
                        value="{{ request('from') }}"
                        class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 outline-none transition hover:border-slate-400 focus:border-indigo-500 focus:ring-0"
                    >
                </div>

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

                <div class="flex items-end gap-2 md:col-span-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.statement', $loan) }}"
                       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="px-4 py-3 border-b border-slate-200 bg-slate-50">
            <h2 class="text-sm font-bold text-slate-800">{{ __('loans.payments') }}</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-100 text-slate-700">
                    <tr>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.date') }}</th>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.trx') }}</th>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.account') }}</th>
                        <th class="px-3 py-2 text-right font-semibold whitespace-nowrap">{{ __('loans.principal') }}</th>
                        <th class="px-3 py-2 text-right font-semibold whitespace-nowrap">{{ __('loans.interest') }}</th>
                        <th class="px-3 py-2 text-right font-semibold whitespace-nowrap">{{ __('loans.fee') }}</th>
                        <th class="px-3 py-2 text-right font-semibold whitespace-nowrap">{{ __('loans.total') }}</th>
                        <th class="px-3 py-2 text-right font-semibold whitespace-nowrap">{{ __('loans.action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                @forelse($payments as $payment)
                    <tr class="hover:bg-slate-50">
                        <td class="px-3 py-2 whitespace-nowrap">{{ optional($payment->paid_at)->format('d M Y h:i A') }}</td>
                        <td class="px-3 py-2 font-medium whitespace-nowrap">{{ $payment->trx_no }}</td>
                        <td class="px-3 py-2 whitespace-nowrap">{{ $payment->account->name ?? '-' }}</td>
                        <td class="px-3 py-2 text-right whitespace-nowrap">{{ number_format((float) $payment->principal_paid, 2) }}</td>
                        <td class="px-3 py-2 text-right whitespace-nowrap">{{ number_format((float) $payment->interest_paid, 2) }}</td>
                        <td class="px-3 py-2 text-right whitespace-nowrap">{{ number_format((float) $payment->fee_paid, 2) }}</td>
                        <td class="px-3 py-2 text-right font-bold whitespace-nowrap">{{ number_format((float) $payment->total_paid, 2) }}</td>
                        <td class="px-3 py-2">
                            <div class="flex justify-end gap-2">
                                @if($payment->proof_photo)
                                    <a href="{{ asset($payment->proof_photo) }}" target="_blank"
                                       class="border border-slate-300 px-2.5 py-1 text-[11px] font-semibold text-slate-700 hover:bg-slate-50 whitespace-nowrap">
                                        {{ __('loans.proof') }}
                                    </a>
                                @endif

                                <form method="POST"
                                      action="{{ route('user.loans.payments.destroy', [$loan, $payment]) }}"
                                      class="js-delete"
                                      data-confirm-title="{{ __('loans.delete_payment_title') }}"
                                      data-confirm-text="{{ __('loans.delete_payment_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 whitespace-nowrap">
                                        {{ __('loans.delete') }}
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>

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

        <div class="p-3 border-t border-slate-200 bg-white">
            {{ $payments->links() }}
        </div>
    </div>

    {{-- Ledger Section --}}
    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <div class="px-4 py-3 border-b border-slate-200 bg-slate-50">
            <h2 class="text-sm font-bold text-slate-800">{{ __('loans.related_ledger_entries') }}</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-100 text-slate-700">
                    <tr>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.date') }}</th>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.trx') }}</th>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.type') }}</th>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.account') }}</th>
                        <th class="px-3 py-2 text-right font-semibold whitespace-nowrap">{{ __('loans.debit') }}</th>
                        <th class="px-3 py-2 text-right font-semibold whitespace-nowrap">{{ __('loans.credit') }}</th>
                        <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ __('loans.description') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                @forelse($ledgerEntries as $row)
                    <tr class="hover:bg-slate-50">
                        <td class="px-3 py-2 whitespace-nowrap">{{ optional($row->posted_at)->format('d M Y h:i A') }}</td>
                        <td class="px-3 py-2 font-medium whitespace-nowrap">{{ $row->trx_no }}</td>
                        <td class="px-3 py-2 whitespace-nowrap">{{ $row->type }}</td>
                        <td class="px-3 py-2 whitespace-nowrap">{{ $row->account->name ?? '-' }}</td>
                        <td class="px-3 py-2 text-right whitespace-nowrap">{{ number_format((float) $row->debit, 2) }}</td>
                        <td class="px-3 py-2 text-right whitespace-nowrap">{{ number_format((float) $row->credit, 2) }}</td>
                        <td class="px-3 py-2">{{ $row->description }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-xs text-slate-500">
                            {{ __('loans.no_ledger_rows_found') }}
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection