@extends('layouts.user')
@section('title', 'Referral')
@section('content')
<h1 class="text-2xl font-bold mb-6">Referral Program</h1>

<div class="bg-white rounded-xl shadow p-6 mb-6">
    <p class="text-sm text-gray-500">Your Referral Code</p>
    <p class="text-2xl font-bold mb-3">{{ $referralCode }}</p>
    <p class="text-sm text-gray-500">Your Referral Link</p>
    <div class="flex gap-2 mt-1">
        <input readonly value="{{ $referralLink }}" class="flex-1 border rounded-lg px-4 py-2 text-sm font-mono" onclick="this.select()">
    </div>
    <p class="text-sm text-gray-500 mt-4">Total Bonus Earned</p>
    <p class="text-xl font-bold text-green-600">{{ number_format($totalBonusEarned, 4) }}</p>
</div>

<div class="bg-white rounded-xl shadow p-6">
    <h2 class="font-bold mb-4">Your Referrals</h2>
    <table class="w-full text-sm">
        <thead>
            <tr class="text-left text-gray-500 border-b">
                <th class="py-2">Name</th>
                <th>Joined</th>
                <th>Their Referrals</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($referrals as $ref)
                <tr class="border-b last:border-0">
                    <td class="py-2">{{ $ref->name }}</td>
                    <td>{{ $ref->created_at->format('d M Y') }}</td>
                    <td>{{ $ref->referrals_count }}</td>
                </tr>
            @empty
                <tr><td colspan="3" class="py-4 text-center text-gray-400">No referrals yet. Share your link!</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="mt-4">{{ $referrals->links() }}</div>
</div>
@endsection