@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">Referrals</h5>
    </div>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Code</th>
            <th>Referrer</th>
            <th>Referred</th>
            <th>Reward</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($referrals as $referral)
            <tr>
              <td><code>{{ $referral->code }}</code></td>
              <td>{{ $referral->referrer->name ?? 'N/A' }}</td>
              <td>{{ $referral->referredUser->name ?? 'N/A' }}</td>
              <td>${{ number_format($referral->reward_amount, 2) }}</td>
              <td><span class="badge bg-label-{{ $referral->status === 'completed' ? 'success' : 'warning' }}">{{ ucfirst($referral->status) }}</span></td>
              <td>
                @can('update referrals')
                  <a href="{{ route('admin.referrals.edit', $referral) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                @else
                  <span class="text-muted">-</span>
                @endcan
              </td>
            </tr>
          @empty
            <tr><td colspan="6" class="text-center py-4">No referrals found.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>

    @if($referrals->hasPages() || $referrals->total() > 0)
      <div class="card-footer d-flex justify-content-between align-items-center flex-wrap py-3 border-top">
        <div class="text-muted small mb-2 mb-md-0">
          Showing <strong>{{ $referrals->firstItem() ?? 0 }}</strong> to <strong>{{ $referrals->lastItem() ?? 0 }}</strong> of <strong>{{ $referrals->total() }}</strong> entries
        </div>
        <div>
          {{ $referrals->links() }}
        </div>
      </div>
    @endif
  </div>
</div>
@endsection