@extends('layout.admin')
@section('title','Recharge Management')

@section('content')
@php
  $statusOptions = [
    'all' => 'সব',
    'pending' => 'পেন্ডিং',
    'success' => 'সাকসেস',
    'failed' => 'রিজেক্ট/ফেইল',
  ];
@endphp

<div class="max-w-7xl mx-auto mt-2 px-0">

  @if(session('success'))
    <div class="mb-4 rounded-lg border border-green-200 bg-green-50 text-green-800 px-4 py-3 flex items-center gap-2">
      <i class="fa-solid fa-check-circle"></i>
      <span>{{ session('success') }}</span>
    </div>
  @endif

  @if(session('error'))
    <div class="mb-4 rounded-lg border border-rose-200 bg-rose-50 text-rose-800 px-4 py-3 flex items-center gap-2">
      <i class="fa-solid fa-triangle-exclamation"></i>
      <span>{{ session('error') }}</span>
    </div>
  @endif

  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
    <div>
      <h2 class="text-2xl font-black tracking-tight text-slate-800">রিচার্জ ম্যানেজমেন্ট</h2>
      <p class="text-slate-500 text-sm">পেন্ডিং রিচার্জ success করুন, success হলে reject করলে কমিশন ও রিফান্ড রিভার্স হবে।</p>
    </div>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
    <div class="p-3 sm:p-4 border-b border-slate-200">
      <form method="GET" class="flex flex-col sm:flex-row gap-2 sm:items-center">
        <select name="status" class="border rounded-lg px-3 py-2 text-sm">
          @foreach($statusOptions as $key => $label)
            <option value="{{ $key }}" @selected(($status ?? 'all') === $key)>{{ $label }}</option>
          @endforeach
        </select>
        <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Mobile / TRX / নাম / রেফারেল কোড"
               class="border rounded-lg px-3 py-2 text-sm w-full sm:w-80" />
        <button class="inline-flex items-center gap-2 rounded-lg bg-slate-800 hover:bg-slate-900 text-white font-semibold px-4 py-2 text-sm">
          <i class="fa-solid fa-magnifying-glass"></i> খুঁজুন
        </button>
      </form>
    </div>

    <div class="hidden md:block overflow-auto">
      <table class="min-w-full text-sm">
        <thead class="bg-slate-50 text-slate-700 text-xs uppercase tracking-wider sticky top-0 z-10 border-b border-slate-200">
          <tr>
            <th class="text-left px-4 py-3 font-semibold">#</th>
            <th class="text-left px-4 py-3 font-semibold">ইউজার</th>
            <th class="text-left px-4 py-3 font-semibold">নাম্বার</th>
            <th class="text-left px-4 py-3 font-semibold">অপারেটর</th>
            <th class="text-left px-4 py-3 font-semibold">অ্যামাউন্ট</th>
            <th class="text-left px-4 py-3 font-semibold">ক্যাশব্যাক</th>
            <th class="text-left px-4 py-3 font-semibold">স্ট্যাটাস</th>
            <th class="text-left px-4 py-3 font-semibold">TRX</th>
            <th class="text-left px-4 py-3 font-semibold">তারিখ</th>
            <th class="text-right px-4 py-3 font-semibold">অ্যাকশন</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          @forelse($rows as $r)
            @php
              $st = $r->status;
              $badge = $st === 'success'
                ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                : ($st === 'failed' ? 'bg-rose-50 text-rose-700 border-rose-200' : 'bg-amber-50 text-amber-700 border-amber-200');
              $stText = $st === 'success' ? 'Success' : ($st === 'failed' ? 'Failed' : 'Pending');
              $u = $r->user;
              $submittedAt = $r->created_at ?? $r->updated_at;
            @endphp
            <tr class="hover:bg-slate-50/50 transition">
              <td class="px-4 py-3 text-slate-500">#{{ $r->id }}</td>
              <td class="px-4 py-3">
                <div class="font-semibold text-slate-800">{{ $u->name ?? 'N/A' }}</div>
                <div class="text-xs text-slate-500">{{ $u->referral_code ?? '---' }}</div>
              </td>
              <td class="px-4 py-3">{{ $r->number }}</td>
              <td class="px-4 py-3">{{ strtoupper($r->operator) }}</td>
              <td class="px-4 py-3 font-semibold">৳ {{ number_format((float) $r->amount, 2) }}</td>
              <td class="px-4 py-3">৳ {{ number_format((float) $r->cashback, 2) }}</td>
              <td class="px-4 py-3">
                <span class="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-semibold {{ $badge }}">
                  {{ $stText }}
                </span>
              </td>
              <td class="px-4 py-3 font-mono text-xs">{{ $r->tran_id }}</td>
              <td class="px-4 py-3 text-xs text-slate-500">
                <div>{{ optional($submittedAt)->format('d M Y') ?: '—' }}</div>
                <div class="mt-0.5 text-[11px] text-slate-400">{{ optional($submittedAt)->format('h:i A') ?: '' }}</div>
              </td>
              <td class="px-4 py-3 text-right">
                <div class="flex items-center justify-end gap-2">
                  @if($r->status === 'pending')
                    <form method="POST" action="{{ route('admin.recharge.success', $r) }}">
                      @csrf
                      <button class="px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold"
                              onclick="return confirm('Pending রিচার্জ success করবেন?')">
                        Success
                      </button>
                    </form>
                    <form method="POST" action="{{ route('admin.recharge.failed', $r) }}">
                      @csrf
                      <button class="px-3 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold"
                              onclick="return confirm('Pending রিচার্জ reject করবেন?')">
                        Reject
                      </button>
                    </form>
                  @elseif($r->status === 'success')
                    <form method="POST" action="{{ route('admin.recharge.reject', $r) }}">
                      @csrf
                      <button class="px-3 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold"
                              onclick="return confirm('Success রিচার্জ reject করলে কমিশন/ক্যাশব্যাক/রিফান্ড রিভার্স হবে। নিশ্চিত?')">
                        Reject + Reverse
                      </button>
                    </form>
                  @else
                    <span class="text-xs text-slate-400">--</span>
                  @endif
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="10" class="px-4 py-10 text-center text-slate-500">
                কোনো রিচার্জ পাওয়া যায়নি।
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div class="md:hidden divide-y divide-slate-100">
      @forelse($rows as $r)
        @php
          $st = $r->status;
          $badge = $st === 'success'
            ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
            : ($st === 'failed' ? 'bg-rose-50 text-rose-700 border-rose-200' : 'bg-amber-50 text-amber-700 border-amber-200');
          $stText = $st === 'success' ? 'Success' : ($st === 'failed' ? 'Failed' : 'Pending');
          $u = $r->user;
          $submittedAt = $r->created_at ?? $r->updated_at;
        @endphp
        <div class="p-4">
          <div class="flex items-start justify-between">
            <div>
              <div class="font-semibold text-slate-800">{{ $u->name ?? 'N/A' }}</div>
              <div class="text-xs text-slate-500">{{ $u->referral_code ?? '---' }}</div>
            </div>
            <span class="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-semibold {{ $badge }}">
              {{ $stText }}
            </span>
          </div>
          <div class="mt-2 text-sm">
            <div>নাম্বার: <span class="font-semibold">{{ $r->number }}</span></div>
            <div>অ্যামাউন্ট: <span class="font-semibold">৳ {{ number_format((float) $r->amount, 2) }}</span></div>
            <div>ক্যাশব্যাক: ৳ {{ number_format((float) $r->cashback, 2) }}</div>
            <div>TRX: <span class="font-mono text-xs">{{ $r->tran_id }}</span></div>
            <div>তারিখ: <span class="font-semibold">{{ optional($submittedAt)->format('d M Y') ?: '—' }}</span></div>
            <div>সময়: <span class="font-semibold">{{ optional($submittedAt)->format('h:i A') ?: '—' }}</span></div>
          </div>
          <div class="mt-3 flex items-center gap-2">
            @if($r->status === 'pending')
              <form method="POST" action="{{ route('admin.recharge.success', $r) }}">
                @csrf
                <button class="px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold"
                        onclick="return confirm('Pending রিচার্জ success করবেন?')">
                  Success
                </button>
              </form>
              <form method="POST" action="{{ route('admin.recharge.failed', $r) }}">
                @csrf
                <button class="px-3 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold"
                        onclick="return confirm('Pending রিচার্জ reject করবেন?')">
                  Reject
                </button>
              </form>
            @elseif($r->status === 'success')
              <form method="POST" action="{{ route('admin.recharge.reject', $r) }}">
                @csrf
                <button class="px-3 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold"
                        onclick="return confirm('Success রিচার্জ reject করলে কমিশন/ক্যাশব্যাক/রিফান্ড রিভার্স হবে। নিশ্চিত?')">
                  Reject + Reverse
                </button>
              </form>
            @endif
          </div>
        </div>
      @empty
        <div class="p-6 text-center text-slate-500">কোনো রিচার্জ নেই।</div>
      @endforelse
    </div>
  </div>

  <div class="mt-4">
    {{ $rows->links() }}
  </div>
</div>
@endsection
