@extends('layouts.app')
@section('title', __('Balance transfer'))
@section('content')
<section class="grid gap-5 xl:grid-cols-[.8fr_1.2fr]">
  <div class="panel-card p-5 sm:p-7">
    <p class="text-xs font-bold uppercase tracking-widest text-rose-600">{{ __('Member wallet') }}</p>
    <h2 class="mt-2 text-xl font-bold">{{ __('Transfer to another member') }}</h2>
    <p class="mt-2 text-sm text-slate-500">{{ __('Wallet transfers are immediate and recorded in both account ledgers.') }}</p>
    <p class="mt-5 rounded-2xl bg-slate-50 p-4 text-sm">{{ __('Available balance') }}: <strong class="text-lg">৳{{ number_format($wallet?->balance ?? 0, 2) }}</strong></p>
    <form method="POST" action="{{ route('transfers.store') }}" class="mt-5 space-y-4">@csrf
      <label class="block text-sm font-semibold">{{ __('Recipient member ID') }}<input name="recipient_member_id" class="field-control mt-2" required maxlength="255"></label>
      <label class="block text-sm font-semibold">{{ __('Amount') }}<input name="amount" type="number" step="0.01" min="0.01" max="{{ $wallet?->balance ?? 0 }}" class="field-control mt-2" required></label>
      <button class="w-full rounded-xl bg-rose-600 px-4 py-3 text-sm font-bold text-white" @disabled(($wallet?->balance ?? 0) <= 0)>{{ __('Transfer balance') }}</button>
    </form>
  </div>
  <div class="panel-card overflow-hidden">
    <div class="border-b border-slate-100 px-5 py-5"><h2 class="font-bold">{{ __('Transfer history') }}</h2></div>
    <div class="divide-y divide-slate-100">
      @forelse($transfers as $transfer)
        @php($sent = $transfer->sender_id === auth()->id())
        <div class="flex items-center justify-between gap-3 px-5 py-4">
          <div class="min-w-0"><p class="font-bold text-slate-800">{{ $sent ? __('Sent to') : __('Received from') }} {{ $sent ? $transfer->recipient?->name : $transfer->sender?->name }}</p><p class="mt-1 text-xs text-slate-400">{{ $transfer->created_at->format('M d, Y · g:i A') }} · {{ $transfer->reference }}</p></div>
          <p class="shrink-0 font-extrabold {{ $sent ? 'text-rose-700' : 'text-emerald-700' }}">{{ $sent ? '−' : '+' }}৳{{ number_format($transfer->amount, 2) }}</p>
        </div>
      @empty<div class="px-5 py-12 text-center text-sm text-slate-400">{{ __('No wallet transfers yet.') }}</div>@endforelse
    </div>
    <div class="border-t border-slate-100 px-5 py-4">{{ $transfers->links() }}</div>
  </div>
</section>
@endsection