@extends('frontend.layout_2')
@section('title', 'Transactions')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
/* tiny press feedback */
@media (prefers-reduced-motion:no-preference){ .press:active{ transform: translateY(1px); } }

/* badges (no @apply) */
.badge{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.2rem .6rem;font-weight:600;font-size:11px;line-height:1;border:1px solid transparent}
.badge-pending{background:#fffbeb;color:#92400e;border-color:#fde68a}
.badge-approved{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}

/* section title */
.section-title{margin-top:.75rem;margin-bottom:.25rem;font-size:.875rem;font-weight:700;color:#1f2937}

/* list item */
.item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #f1f5f9}
.item:last-child{border-bottom:0}

/* icon pill */
.icon-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#fff;width:34px;height:34px}

/* card scroll when long */
.card-scroll{max-height:70vh;overflow:auto;padding-right:.25rem}
.amount-green{color:#047857}
.amount-red{color:#e11d48}
.text-dim{color:#64748b}
</style>
@endpush

@section('sub_layout')
<div class="mx-auto max-w-6xl px-4 py-6">

  {{-- success alert --}}
  @if(session('success'))
    <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-3 text-sm text-emerald-800">
      <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
    </div>
  @endif

  <div class="grid grid-cols-1 gap-5 md:grid-cols-2">

    {{-- Pending --}}
    <div class="rounded-2xl border border-slate-100 bg-white shadow-sm">
      <div class="flex items-center justify-between rounded-t-2xl border-b border-slate-100 px-4 py-3">
        <div class="flex items-center gap-2">
          <span class="badge badge-pending"><i class="fa-solid fa-hourglass-half"></i> Pending</span>
          <span class="text-xs text-dim">জামানত, উইথড্র, লোন, বোনাস</span>
        </div>
      </div>

      <div class="card-scroll px-4 pb-3">

        {{-- Deposits (pending) --}}
        <div class="section-title">জামানত</div>
        @forelse($pendingDeposits as $dep)
          <div class="item">
            <span class="icon-pill" style="background:#ef4444"><i class="fa-solid fa-piggy-bank"></i></span>
            <div class="min-w-0 flex-1">
              <div class="text-sm font-semibold">জামানত ({{ strtoupper($dep->method) }})</div>
              <div class="text-xs text-dim">trx: {{ $dep->transaction_id ?? '-' }}</div>
              <span class="badge badge-pending mt-1"><i class="fa-regular fa-clock"></i> Pending</span>
            </div>
            <div class="text-right text-sm font-extrabold amount-green">৳ {{ number_format($dep->amount) }}</div>
          </div>
        @empty
          <div class="py-2 text-xs text-dim">কোনো pending জামানত নেই</div>
        @endforelse

        {{-- Withdraw (pending) --}}
        <div class="section-title">উইথড্র</div>
        @forelse($pendingWithdraws as $w)
          <div class="item">
            <span class="icon-pill" style="background:#7e57c2"><i class="fa-solid fa-right-left"></i></span>
            <div class="min-w-0 flex-1">
              <div class="text-sm font-semibold">উইথড্র ({{ strtoupper($w->method) }})</div>
              <div class="text-xs text-dim">trx: -</div>
              <span class="badge badge-pending mt-1"><i class="fa-regular fa-clock"></i> Pending</span>
            </div>
            <div class="text-right text-sm font-extrabold amount-red">৳ {{ number_format($w->amount) }}</div>
          </div>
        @empty
          <div class="py-2 text-xs text-dim">কোনো pending উইথড্র নেই</div>
        @endforelse

        {{-- Loans (pending) --}}
        <div class="section-title">লোন</div>
        @forelse($pendingLoans as $loan)
          <div class="item">
            <span class="icon-pill" style="background:#ef4444"><i class="fa-solid fa-hand-holding-dollar"></i></span>
            <div class="min-w-0 flex-1">
              <div class="text-sm font-semibold">Loan #{{ $loan->id }}</div>
              <div class="text-xs text-dim">Status: {{ strtoupper(str_replace('_',' ', $loan->status)) }}</div>
            </div>
            <div class="text-right text-sm font-extrabold amount-green">৳ {{ number_format($loan->amount) }}</div>
          </div>
        @empty
          <div class="py-2 text-xs text-dim">কোনো pending লোন নেই</div>
        @endforelse

        {{-- Bonuses (pending placeholder) --}}
        <div class="section-title">Bonuses</div>
        <div class="py-2 text-xs text-dim">কোনো pending বোনাস নেই</div>
      </div>
    </div>

    {{-- Approved --}}
    <div class="rounded-2xl border border-slate-100 bg-white shadow-sm">
      <div class="flex items-center justify-between rounded-t-2xl border-b border-slate-100 px-4 py-3">
        <div class="flex items-center gap-2">
          <span class="badge badge-approved"><i class="fa-solid fa-circle-check"></i> Approved</span>
          <span class="text-xs text-dim">জামানত, উইথড্র, লোন, বোনাস</span>
        </div>
      </div>

      <div class="card-scroll px-4 pb-3">

        {{-- Deposits (approved) --}}
        <div class="section-title">জামানত</div>
        @forelse($approvedDeposits as $dep)
          <div class="item">
            <span class="icon-pill" style="background:#10b981"><i class="fa-solid fa-piggy-bank"></i></span>
            <div class="min-w-0 flex-1">
              <div class="text-sm font-semibold">জামানত ({{ strtoupper($dep->method) }})</div>
              <div class="text-xs text-dim">trx: {{ $dep->transaction_id ?? '-' }}</div>
              <span class="badge badge-approved mt-1">Approved</span>
            </div>
            <div class="text-right text-sm font-extrabold amount-green">৳ {{ number_format($dep->amount) }}</div>
          </div>
        @empty
          <div class="py-2 text-xs text-dim">কোনো approved ডিপোজিট নেই</div>
        @endforelse

        {{-- Withdraw (approved) --}}
        <div class="section-title">উইথড্র</div>
        @forelse($approvedWithdraws as $w)
          <div class="item">
            <span class="icon-pill" style="background:#10b981"><i class="fa-solid fa-right-left"></i></span>
            <div class="min-w-0 flex-1">
              <div class="text-sm font-semibold">Withdraw ({{ strtoupper($w->method) }})</div>
              <div class="text-xs text-dim">trx: {{ $w->trx_id ?? '-' }}</div>
              <span class="badge badge-approved mt-1">Approved</span>
            </div>
            <div class="text-right text-sm font-extrabold amount-red">৳ {{ number_format($w->amount) }}</div>
          </div>
        @empty
          <div class="py-2 text-xs text-dim">কোনো approved উইথড্র নেই</div>
        @endforelse

        {{-- Loans (running) --}}
        <div class="section-title">লোন</div>
        @forelse($runningLoans as $loan)
          <div class="item">
            <span class="icon-pill" style="background:#10b981"><i class="fa-solid fa-hand-holding-dollar"></i></span>
            <div class="min-w-0 flex-1">
              <div class="text-sm font-semibold">Loan #{{ $loan->id }}</div>
              <div class="text-xs text-dim">Running, Amount: ৳ {{ number_format($loan->amount) }}</div>
            </div>
          </div>
        @empty
          <div class="py-2 text-xs text-dim">কোনো approved লোন নেই</div>
        @endforelse

        {{-- Bonuses (sample) --}}
        <div class="section-title">Bonuses</div>
        <div class="item">
          <span class="icon-pill" style="background:#22c55e"><i class="fa-solid fa-star"></i></span>
          <div class="min-w-0 flex-1">
            <div class="text-sm font-semibold">Register Bonus</div>
            <div class="text-xs text-dim">trx: YhFereykFd</div>
            <span class="badge badge-approved mt-1">Approved</span>
          </div>
          <div class="text-right text-sm font-extrabold amount-green">৳ 100</div>
        </div>
      </div>
    </div>
  </div>

  {{-- footer note --}}
  <div class="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-3 py-3 text-sm text-rose-800">
    <i class="fa-regular fa-bell"></i>
    নোটঃ Pending আইটেমগুলো অ্যাডমিন অ্যাকশন হলেই Approved কলামে চলে যাবে।
  </div>
</div>
@endsection