@php
    $walletBalanceDisplay = (float) ($walletBalance ?? 0);
    $walletStatusDisplay = (string) ($walletStatusLabel ?? $loan_client->wallet?->status ?? 'active');
@endphp
<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
    <h3 class="text-sm font-semibold text-slate-900">Wallet</h3>
    <div class="flex flex-wrap gap-2">
        @if(auth()->user()?->hasLoanPermission('wallets.view') && \Illuminate\Support\Facades\Route::has('loan.clients.wallet.statement'))
            <a href="{{ route('loan.clients.wallet.statement', $loan_client) }}" class="inline-flex rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">Export statement</a>
        @endif
        @if(auth()->user()?->hasLoanPermission('wallets.pay_loan') && $walletBalanceDisplay > 0.01 && ($loan_client->wallet?->status ?? '') === \App\Models\ClientWallet::STATUS_ACTIVE)
            <button type="button" @click="payLoanModalOpen = true; refundRequestModalOpen = false" class="inline-flex rounded-lg border border-teal-700 bg-teal-700 px-3 py-2 text-xs font-semibold text-white hover:bg-teal-800">Use wallet to pay loan</button>
        @endif
        @if(auth()->user()?->hasLoanPermission('wallets.refund_request') && $walletBalanceDisplay > 0.01)
            <button type="button" @click="refundRequestModalOpen = true; payLoanModalOpen = false" class="inline-flex rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-900 hover:bg-amber-100">Request refund</button>
        @endif
    </div>
</div>
<div class="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm">
    <div><span class="text-slate-500">Current balance</span><p class="text-lg font-semibold text-slate-900">KSh {{ number_format($walletBalanceDisplay, 2) }}</p></div>
    <div><span class="text-slate-500">Total credits</span><p class="text-lg font-semibold text-emerald-800">KSh {{ number_format((float) ($walletTotals['credits'] ?? 0), 2) }}</p></div>
    <div><span class="text-slate-500">Total debits</span><p class="text-lg font-semibold text-rose-800">KSh {{ number_format((float) ($walletTotals['debits'] ?? 0), 2) }}</p></div>
    <div><span class="text-slate-500">Status</span><p class="text-lg font-semibold text-slate-900">{{ ucfirst($walletStatusDisplay) }}</p></div>
</div>
@if(auth()->user()?->hasLoanPermission('wallets.adjust') && \Illuminate\Support\Facades\Route::has('loan.clients.wallet.adjust'))
    <form method="post" action="{{ route('loan.clients.wallet.adjust', $loan_client) }}" data-loan-modal-exclude class="mb-4 rounded-xl border border-dashed border-slate-300 bg-white p-4 text-sm">
        @csrf
        <p class="mb-2 font-semibold text-slate-800">Manual adjustment</p>
        <div class="flex flex-wrap items-end gap-2">
            <select name="direction" class="rounded-lg border-slate-200 text-sm">
                <option value="credit">Credit</option>
                <option value="debit">Debit</option>
            </select>
            <input type="number" name="amount" step="0.01" min="0.01" class="rounded-lg border-slate-200 text-sm w-32" placeholder="Amount" required />
            <input type="text" name="description" class="min-w-[12rem] flex-1 rounded-lg border-slate-200 text-sm" placeholder="Reason (required)" required />
            <button type="submit" class="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800">Post adjustment</button>
        </div>
    </form>
@endif
<div class="overflow-x-auto mobile-table-scroll rounded-xl border border-slate-300">
    <table class="min-w-full w-full text-sm ws-table--sticky-first md:min-w-[900px]">
        <thead class="bg-slate-100 text-xs uppercase tracking-wide text-slate-600">
            <tr>
                <th class="px-3 py-2 text-left">Date</th>
                <th class="px-3 py-2 text-left">Type</th>
                <th class="px-3 py-2 text-left">Description</th>
                <th class="px-3 py-2 text-right">Credit</th>
                <th class="px-3 py-2 text-right">Debit</th>
                <th class="px-3 py-2 text-right">Balance</th>
            </tr>
        </thead>
        <tbody class="bg-white text-slate-700">
            @forelse(($walletStatement ?? collect()) as $tx)
                <tr class="border-b border-slate-100">
                    <td class="px-3 py-2 whitespace-nowrap">{{ optional($tx->created_at)->format('Y-m-d H:i') }}</td>
                    <td class="px-3 py-2">{{ $tx->transaction_type }}</td>
                    <td class="px-3 py-2 max-w-xs truncate" title="{{ $tx->description }}">{{ $tx->description ?? '—' }}</td>
                    <td class="px-3 py-2 text-right tabular-nums">{{ $tx->transaction_type === 'credit' ? number_format((float) $tx->amount, 2) : '—' }}</td>
                    <td class="px-3 py-2 text-right tabular-nums">{{ $tx->transaction_type === 'debit' ? number_format((float) $tx->amount, 2) : '—' }}</td>
                    <td class="px-3 py-2 text-right font-medium tabular-nums">{{ number_format((float) $tx->running_balance, 2) }}</td>
                </tr>
            @empty
                <tr><td colspan="6" class="px-4 py-10 text-center text-slate-500">No wallet transactions yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>