@extends('layouts.app')
@section('title', __('Wallet'))
@section('content')
<section class="mb-6">
  <p class="text-sm text-slate-500">{{ __('A clear view of your current balance and transaction history.') }}</p>
</section>

<section class="grid gap-5 xl:grid-cols-[.9fr_1.1fr]">
  <div class="overflow-hidden rounded-[1.7rem] bg-gradient-to-br from-blue-950 via-[#123f83] to-slate-900 p-6 text-white shadow-xl shadow-blue-950/15 sm:p-8">
    <div class="flex items-start justify-between gap-4">
      <div><p class="text-xs font-bold uppercase tracking-[.18em] text-blue-200">{{ __('LML digital wallet') }}</p><p class="mt-2 text-sm text-blue-100/80">{{ __('Available balance') }}</p></div>
      <span class="rounded-xl bg-white/10 p-3"><x-nav-icon name="wallet" class="h-6 w-6" /></span>
    </div>
    <p class="mt-8 text-4xl font-extrabold tracking-tight sm:text-5xl">৳{{ number_format($wallet?->balance ?? 0, 2) }}</p>
    <div class="mt-9 flex flex-wrap items-end justify-between gap-4 border-t border-white/15 pt-5">
      <div><p class="text-[10px] font-bold uppercase tracking-[.16em] text-blue-200/75">{{ __('Account holder') }}</p><p class="mt-1 font-semibold">{{ $user->name }}</p></div>
      <div class="text-right"><p class="text-[10px] font-bold uppercase tracking-[.16em] text-blue-200/75">{{ __('Member ID') }}</p><p class="mt-1 font-semibold">{{ $user->member_id ?: '—' }}</p></div>
    </div>
    <div class="pointer-events-none absolute"></div>
  </div>

  <div class="grid gap-4 sm:grid-cols-2">
    <a href="{{ route('member.payments.index') }}" class="panel-card flex min-h-40 flex-col justify-between p-5 transition hover:-translate-y-0.5 hover:shadow-lg">
      <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-blue-50 text-blue-700"><x-nav-icon name="receipt" class="h-5 w-5" /></span>
      <span><span class="block font-bold text-slate-900">{{ __('Payment history') }}</span><span class="mt-1 block text-xs text-slate-500">{{ __('View your previous payment records') }}</span></span>
    </a>
    <a href="{{ route('withdrawals') }}" class="panel-card flex min-h-40 flex-col justify-between p-5 transition hover:-translate-y-0.5 hover:shadow-lg">
      <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-violet-50 text-violet-700"><x-nav-icon name="transfer" class="h-5 w-5" /></span>
      <span><span class="block font-bold text-slate-900">{{ __('Withdraw') }}</span><span class="mt-1 block text-xs text-slate-500">{{ __('Request a balance payout') }}</span></span>
    </a>
    <div class="metric-card sm:col-span-2">
      <p class="text-xs font-bold uppercase tracking-wider text-slate-400">{{ __('Account details') }}</p>
      <div class="mt-4 flex flex-wrap justify-between gap-4">
        <div><p class="text-xs text-slate-400">{{ __('Account status') }}</p><p class="mt-1 text-sm font-bold {{ $user->is_active ? 'text-emerald-700' : 'text-rose-700' }}">{{ $user->is_active ? __('Active') : __('Inactive') }}</p></div>
        <div class="text-right"><p class="text-xs text-slate-400">{{ __('Member since') }}</p><p class="mt-1 text-sm font-bold text-slate-800">{{ $user->created_at->format('M Y') }}</p></div>
      </div>
    </div>
  </div>
</section>

<section class="panel-card mt-6 overflow-hidden">
  <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-5 sm:px-6">
    <div><h2 class="font-bold text-slate-900">{{ __('Transaction history') }}</h2><p class="mt-1 text-xs text-slate-400">{{ __('Credits and debits posted to your wallet') }}</p></div>
    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-600">{{ method_exists($txs, 'total') ? $txs->total() : $txs->count() }} {{ __('records') }}</span>
  </div>
  @if($txs->count())
    <div class="table-scroll">
      <table class="w-full text-left text-sm">
        <thead class="bg-slate-50 text-xs font-bold uppercase tracking-wider text-slate-400"><tr><th class="px-5 py-3 sm:px-6">{{ __('Description') }}</th><th class="px-5 py-3">{{ __('Reference') }}</th><th class="px-5 py-3">{{ __('Date') }}</th><th class="px-5 py-3 text-right sm:px-6">{{ __('Amount') }}</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
        @foreach($txs as $transaction)
          <tr>
            <td class="whitespace-nowrap px-5 py-4 font-semibold text-slate-800 sm:px-6">{{ $transaction->description ?: ucfirst($transaction->type) }}</td>
            <td class="whitespace-nowrap px-5 py-4 text-slate-500">{{ $transaction->reference ?: '—' }}</td>
            <td class="whitespace-nowrap px-5 py-4 text-slate-500">{{ $transaction->created_at->format('M d, Y · g:i A') }}</td>
            <td class="whitespace-nowrap px-5 py-4 text-right font-extrabold sm:px-6 {{ $transaction->type === 'credit' ? 'text-emerald-700' : 'text-slate-800' }}">{{ $transaction->type === 'credit' ? '+' : '−' }}৳{{ number_format($transaction->amount, 2) }}</td>
          </tr>
        @endforeach
        </tbody>
      </table>
    </div>
    @if(method_exists($txs, 'links'))<div class="border-t border-slate-100 px-5 py-4 sm:px-6">{{ $txs->links() }}</div>@endif
  @else
    <div class="px-6 py-14 text-center">
      <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-500"><x-nav-icon name="receipt" class="h-6 w-6" /></span>
      <p class="mt-4 font-semibold text-slate-700">{{ __('No transactions yet') }}</p>
      <p class="mt-1 text-sm text-slate-400">{{ __('Your wallet activity will appear here after a transaction is posted.') }}</p>
    </div>
  @endif
</section>
@endsection