@extends('layout.user')
@section('title','রিচার্জ হিস্ট্রি')

@section('content')

@php
  $blue1 = '#2563eb';
  $blue2 = '#1d4ed8';

  $opLabel = [
    'gp'        => 'গ্রামীণফোন',
    'robi'      => 'রবি',
    'airtel'    => 'এয়ারটেল',
    'banglalink'=> 'বাংলালিংক',
    'teletalk'  => 'টেলিটক',
    'skitto'    => 'স্কিটো',
  ];
@endphp

<style>
  :root{
    --blue1: {{ $blue1 }};
    --blue2: {{ $blue2 }};
  }

  .wrap{
    padding:10px 14px 84px;
    max-width:520px;
    margin:0 auto
  }

  /* 🔵 Main Card */
  .card{
    background:#fff;
    border-radius:18px;
    border:1.5px solid var(--blue1);
    box-shadow:0 14px 30px rgba(37,99,235,.08);
    padding:14px
  }

  .list{display:grid;gap:12px}

  .top{display:flex;justify-content:space-between;gap:10px}

  .num{
    font-size:18px;
    font-weight:1000;
    color:#0f172a
  }

  /* 🔵 Status */
  .st{
    font-size:12px;
    font-weight:1000;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid var(--blue1);
    background:#eff6ff;
    color:var(--blue2);
    display:inline-block;
    margin-top:4px;
  }

  /* 🔵 Info Grid */
  .grid{
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
  }

  .box{
    border:1.5px solid var(--blue1);
    border-radius:14px;
    padding:10px;
    background:#ffffff;
  }

  .lbl{
    font-size:11px;
    font-weight:1000;
    color:#64748b;
    margin-bottom:4px
  }

  .val{
    font-size:14px;
    font-weight:1000;
    color:#0f172a;
    word-break:break-all
  }

  .title{
    font-size:18px;
    font-weight:1000;
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .btn-new{
    font-weight:1000;
    text-decoration:none;
    padding:6px 12px;
    border-radius:8px;
    border:1.5px solid var(--blue1);
    color:var(--blue1);
  }

  .btn-new:hover{
    background:#eff6ff;
  }

</style>

<div class="wrap">

  <div style="display:flex;justify-content:space-between;align-items:center;margin:10px 0 14px">
    <div class="title">রিচার্জ হিস্ট্রি</div>

    <a href="{{ route('user.recharge.index') }}" class="btn-new">
      নতুন রিচার্জ
    </a>
  </div>

  <div class="list">
    @forelse($rows as $r)

      @php
        $st = $r->status;
        $stText = $st === 'success' ? 'সফল' : ($st === 'failed' ? 'ব্যর্থ' : 'অপেক্ষমাণ');
      @endphp

      <div class="card">

        <div class="top">
          <div>
            <div class="num">{{ $r->number }}</div>
            <div style="font-size:12px;font-weight:900;color:#64748b;margin-top:3px">
              {{ $r->created_at->format('d M Y, h:i A') }}
            </div>
          </div>

          <div style="text-align:right">
            <div style="font-size:18px;font-weight:1000;color:#0f172a">
              ৳ {{ number_format((float)$r->amount,2) }}
            </div>
            <div class="st">{{ $stText }}</div>
          </div>
        </div>

        <div class="grid">
          <div class="box">
            <div class="lbl">ক্যাশব্যাক</div>
            <div class="val">৳ {{ number_format((float)$r->cashback,2) }}</div>
          </div>

          <div class="box">
            <div class="lbl">অপারেটর</div>
            <div class="val">{{ $opLabel[$r->operator] ?? $r->operator }}</div>
          </div>

          <div class="box" style="grid-column:1/-1">
            <div class="lbl">ট্রানজেকশন আইডি</div>
            <div class="val">{{ $r->tran_id }}</div>
          </div>
        </div>

      </div>

    @empty

      <div class="card" style="text-align:center;color:#64748b;font-weight:1000">
        কোনো রিচার্জ নেই
      </div>

    @endforelse
  </div>

  <div style="margin-top:14px">
    {{ $rows->links() }}
  </div>

</div>

@endsection
