@extends('layout.user')
@section('title','রিচার্জ ডিটেইলস')

@section('content')
@php
  $amount = (float) ($row->amount ?? 0);
  $cashback = (float) ($row->cashback ?? 0);
  $commission = (float) ($row->commission ?? 0);
  $apiStatus = $row->api_status ?? null;
  $message = $row->message ?? null;
  $number = $row->number ?? '-';
  $type = $row->type ?? '-';
  $title = $meta['title'] ?? null;
  $duration = $meta['duration'] ?? null;

  $badgeClass = match ($status) {
    'success' => 'bg-emerald-100 text-emerald-700 border-emerald-200',
    'failed' => 'bg-rose-100 text-rose-700 border-rose-200',
    default => 'bg-amber-100 text-amber-700 border-amber-200',
  };
@endphp

<div class="max-w-3xl mx-auto px-3 py-3 space-y-3">
  <div class="flex items-center justify-between">
    <h1 class="text-lg font-extrabold text-slate-900">রিচার্জ ডিটেইলস</h1>
    <div class="flex items-center gap-2">
      <a href="{{ route('user.recharge.history') }}" class="text-sm font-bold text-blue-700">History</a>
      @if($isDrive)
        <a href="{{ route('drive.index') }}" class="text-sm font-bold text-blue-700">Drive Packs</a>
      @endif
    </div>
  </div>

  @if(session('success'))
    <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{{ session('success') }}</div>
  @endif
  @if(session('error'))
    <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">{{ session('error') }}</div>
  @endif

  <div class="rounded-xl border border-slate-200 bg-white p-3">
    <div class="flex flex-wrap items-center justify-between gap-2">
      <div class="text-sm text-slate-600">মোবাইল নম্বর: <span class="font-semibold text-slate-900">{{ $number }}</span></div>
      <span class="inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-bold {{ $badgeClass }}">{{ $statusLabel }}</span>
    </div>

    <div class="mt-3 grid sm:grid-cols-2 gap-3 text-sm">
      <div class="rounded-lg border border-slate-200 p-3">
        <div class="text-xs text-slate-500">অপারেটর</div>
        <div class="font-semibold">{{ $operatorLabel ?: '-' }}</div>
      </div>
      <div class="rounded-lg border border-slate-200 p-3">
        <div class="text-xs text-slate-500">টাইপ</div>
        <div class="font-semibold">{{ $type }}</div>
      </div>
      <div class="rounded-lg border border-slate-200 p-3">
        <div class="text-xs text-slate-500">এমাউন্ট</div>
        <div class="font-semibold">৳ {{ number_format($amount, 2) }}</div>
      </div>
      <div class="rounded-lg border border-slate-200 p-3">
        <div class="text-xs text-slate-500">ট্রানজেকশন আইডি</div>
        <div class="font-semibold break-all">{{ $trxId ?: '-' }}</div>
      </div>
      <div class="rounded-lg border border-slate-200 p-3">
        <div class="text-xs text-slate-500">তারিখ</div>
        <div class="font-semibold">{{ $createdAt ? $createdAt->format('d M Y, h:i A') : '-' }}</div>
      </div>
      <div class="rounded-lg border border-slate-200 p-3">
        <div class="text-xs text-slate-500">ক্যাশব্যাক</div>
        <div class="font-semibold">
          @if($isDrive)
            ৳ {{ number_format($commission, 2) }}
          @else
            ৳ {{ number_format($cashback, 2) }}
          @endif
        </div>
      </div>
    </div>
  </div>

  @if($isDrive)
    <div class="rounded-xl border border-slate-200 bg-white p-3 space-y-2 text-sm">
      <div class="font-extrabold text-slate-800">ড্রাইভ প্যাক তথ্য</div>
      <div class="grid sm:grid-cols-2 gap-3">
        <div class="rounded-lg border border-slate-200 p-3">
          <div class="text-xs text-slate-500">প্যাক নাম</div>
          <div class="font-semibold">{{ $title ?: '-' }}</div>
        </div>
        <div class="rounded-lg border border-slate-200 p-3">
          <div class="text-xs text-slate-500">মেয়াদ</div>
          <div class="font-semibold">{{ $duration ? $duration . ' দিন' : '-' }}</div>
        </div>
        <div class="rounded-lg border border-slate-200 p-3">
          <div class="text-xs text-slate-500">API Status</div>
          <div class="font-semibold">{{ $apiStatus ?: '-' }}</div>
        </div>
        <div class="rounded-lg border border-slate-200 p-3 sm:col-span-2">
          <div class="text-xs text-slate-500">মেসেজ</div>
          <div class="font-semibold">{{ $message ?: '-' }}</div>
        </div>
      </div>

      @if($status === 'pending')
        <form method="POST" action="{{ route('recharge.refresh', $row->id) }}">
          @csrf
          <button class="mt-2 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">
            <i class="fa-solid fa-rotate"></i>
            স্ট্যাটাস রিফ্রেশ করুন
          </button>
        </form>
      @endif
    </div>
  @endif
</div>
@endsection
