@extends('layout.user')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
  .hx{max-width:560px;margin:0 auto;padding:10px 12px 80px}

  .card{
    background:#fff;
    border:1.5px solid #2563eb;
    border-radius:18px;
    box-shadow:0 10px 24px rgba(37,99,235,.08);
    overflow:hidden
  }

  .head{
    padding:14px 14px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    font-weight:1000;
    display:flex;
    align-items:center;
    gap:8px
  }

  .body{padding:14px}

  .row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    border:1.5px solid #2563eb;
    border-radius:14px;
    margin-bottom:12px;
    background:#f8fbff
  }

  .name{font-weight:1000;color:#0f172a}
  .meta{font-size:12px;color:#64748b;margin-top:4px}
  .amt{font-weight:1000;color:#2563eb;font-size:15px}

  .empty{
    font-weight:900;
    color:#64748b;
    text-align:center;
    padding:18px;
    border:1.5px solid #2563eb;
    border-radius:14px;
    background:#f8fbff
  }

  .backBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    font-weight:1000;
    padding:12px;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border:1.5px solid #2563eb;
    color:#ffffff;
    margin-top:8px
  }
</style>

<div class="hx">
  <div class="card">
    <div class="head">
      <i class="fas fa-history"></i>
      লিডারশিপ ক্লেইম হিস্ট্রি
    </div>

    <div class="body">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:900;color:#0f172a">
        <span>মোট অর্জন: {{ $claims->count() }} বার</span>
        <span>রেফার কোড: {{ auth()->user()->referral_code ?? 'N/A' }}</span>
      </div>

      @if($claims->isEmpty())
        <div class="empty">
          <i class="fas fa-info-circle"></i>
          এখনো কোনো রিওয়ার্ড ক্লেইম করা হয়নি।
        </div>
      @else
        @foreach($claims as $idx => $c)
          <div class="row">
            <div>
              <div class="name">
                <i class="fas fa-trophy text-primary"></i>
                #{{ $idx+1 }} — {{ $c->rank->name ?? 'N/A' }}
              </div>
              <div class="meta">
                <i class="far fa-clock"></i>
                ক্লেইম সময়: {{ $c->claimed_at?->format('d M Y, h:i A') }} • রেফার কোড: {{ auth()->user()->referral_code ?? 'N/A' }}
              </div>
            </div>
            <div class="amt">
              <i class="fas fa-coins"></i>
              ৳{{ number_format((float)$c->reward_amount,2) }}
            </div>
          </div>
        @endforeach
      @endif

      <a href="{{ route('leadership.progress') }}" class="backBtn">
        <i class="fas fa-arrow-left"></i>
        প্রোগ্রেস পেজে ফিরুন
      </a>

    </div>
  </div>
</div>
@endsection
