@extends('layouts.app')
@section('title', __('Withdrawals'))
@section('content')
<section class="grid gap-5 xl:grid-cols-[.8fr_1.2fr]">
  <div class="panel-card p-5 sm:p-6">
    <p class="text-xs font-bold uppercase tracking-[.15em] text-blue-700">{{ __('Request payout') }}</p>
    <h2 class="mt-2 text-xl font-bold text-slate-900">{{ __('Withdraw from wallet') }}</h2>
    <p class="mt-2 text-sm leading-6 text-slate-500">{{ __('Submit a request for review. Pending requests count against your available amount.') }}</p>
    <div class="mt-5 rounded-2xl bg-blue-50 p-4">
      <p class="text-xs font-semibold text-blue-700">{{ __('Available to request') }}</p>
      <p class="mt-1 text-2xl font-extrabold text-blue-950">৳{{ number_format($availableBalance, 2) }}</p>
    </div>
    <form method="POST" action="{{ route('withdrawals.store') }}" class="mt-5 space-y-4">@csrf
      <label class="block text-sm font-semibold text-slate-700">{{ __('Amount') }}
        <div class="relative mt-2"><span class="absolute inset-y-0 left-3 flex items-center font-semibold text-slate-400">৳</span><input name="amount" type="number" step="0.01" min="1" max="{{ $availableBalance }}" value="{{ old('amount') }}" class="field-control pl-8" required></div>
      </label>
      <button class="w-full rounded-xl bg-blue-900 px-4 py-3 text-sm font-bold text-white transition hover:bg-blue-800 disabled:cursor-not-allowed disabled:opacity-50" @disabled($availableBalance < 1)>{{ __('Submit withdrawal request') }}</button>
    </form>
  </div>

  <div class="panel-card overflow-hidden">
    <div class="border-b border-slate-100 px-5 py-5 sm:px-6"><h2 class="font-bold text-slate-900">{{ __('Request history') }}</h2><p class="mt-1 text-xs text-slate-400">{{ __('Follow the status of each payout request') }}</p></div>
    @if($reqs->count())
      <div class="divide-y divide-slate-100">
        @foreach($reqs as $request)
          <div class="flex flex-wrap items-center justify-between gap-3 px-5 py-4 sm:px-6">
            <div><p class="font-bold text-slate-900">৳{{ number_format($request->amount, 2) }}</p><p class="mt-1 text-xs text-slate-400">{{ $request->created_at->format('M d, Y · g:i A') }}</p></div>
            <span class="rounded-full px-3 py-1 text-xs font-bold {{ $request->status === 'approved' ? 'bg-emerald-50 text-emerald-700' : ($request->status === 'rejected' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700') }}">{{ __(ucfirst($request->status)) }}</span>
          </div>
        @endforeach
      </div>
      <div class="border-t border-slate-100 px-5 py-4 sm:px-6">{{ $reqs->links() }}</div>
    @else
      <div class="px-6 py-12 text-center"><p class="font-semibold text-slate-700">{{ __('No withdrawal requests') }}</p><p class="mt-1 text-sm text-slate-400">{{ __('Requests you submit will appear here.') }}</p></div>
    @endif
  </div>
</section>
@endsection