@extends('layouts.client')
@section('title', 'Wallet')
@section('content')
<div class="row g-3 mb-3">
 <div class="col-6 col-lg-3"><x-stat label="Paid balance" :value="$currency . ' ' . number_format($wallet->balance, 2)"/></div>
 <div class="col-6 col-lg-3"><x-stat label="Free credits" :value="$wallet->free_credits" :sub="$wallet->total_free_used . ' used so far'"/></div>
 <div class="col-6 col-lg-3"><x-stat label="Total deposited" :value="number_format($wallet->total_deposited, 2)"/></div>
 <div class="col-6 col-lg-3"><x-stat label="Total call expenses" :value="number_format($wallet->total_spent, 2)" :sub="'Price per call ' . number_format($price, 2)"/></div>
</div>
<div class="row g-3"><div class="col-lg-4"><div class="card p-3"><h2 class="h6">Recharge wallet</h2>
 <form method="post" action="{{ route('client.wallet.recharge') }}">@csrf
 <label class="form-label">Amount ({{ $currency }})</label><input class="form-control mb-2" type="number" step="1" min="10" name="amount" required>
 <label class="form-label">Method</label><select class="form-select mb-2" name="gateway">@foreach($gateways as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select>
 <label class="form-label">Your payment transaction ID</label><input class="form-control mb-2" name="payer_reference" maxlength="100" placeholder="e.g. bKash TrxID">
 <button class="btn btn-primary" type="submit">Submit recharge request</button></form>
 <p class="small text-muted mt-2 mb-0">Your wallet is credited only after the payment is verified by our team or by the payment gateway server – never from a browser redirect.</p></div>
 <div class="card mt-3"><div class="p-3 pb-0"><h2 class="h6">Recharge history</h2></div>
 @forelse($recharges as $r)<div class="px-3 py-2 border-top small d-flex justify-content-between"><span>{{ $r->created_at->format('d M Y') }} · <span class="mono">{{ $r->reference }}</span></span><span>{{ number_format($r->amount, 2) }} <x-badge :v="$r->status"/></span></div>@empty<x-empty text="No recharges yet."/>@endforelse</div></div>
 <div class="col-lg-8"><div class="card"><div class="p-3 pb-0 d-flex justify-content-between"><h2 class="h6">Transaction history</h2>
  <form method="get"><select class="form-select form-select-sm" name="asset" onchange="this.form.submit()"><option value="">All</option><option value="cash" @selected(request('asset')==='cash')>Paid balance</option><option value="free" @selected(request('asset')==='free')>Free credits</option></select></form></div>
 @if($tx->isEmpty())<x-empty text="No transactions yet."/>@else<div class="table-responsive"><table class="table table-sm align-middle mb-0"><thead><tr><th>Date</th><th>Reference</th><th>Type</th><th>Description</th><th class="text-end">Amount</th><th class="text-end">Balance</th></tr></thead><tbody>
 @foreach($tx as $t)<tr><td class="text-nowrap">{{ $t->created_at->format('d M H:i') }}</td><td class="mono">{{ $t->reference }}</td><td>{{ $t->asset }}/{{ $t->type }}</td><td>{{ $t->description }}</td><td class="text-end">{{ $t->asset==='free' ? (int)$t->amount : number_format($t->amount, 2) }}</td><td class="text-end">{{ $t->asset==='free' ? (int)$t->balance_after : number_format($t->balance_after, 2) }}</td></tr>@endforeach
 </tbody></table></div><div class="p-3">{{ $tx->links() }}</div>@endif</div></div></div>
@endsection