@extends('layouts.admin')
@section('title', 'Referrals')
@section('page-title', 'Referral Overview')
@section('content')
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-6">
    <div class="bg-white rounded-xl shadow p-5 border-l-4 border-purple-500">
        <p class="text-sm text-gray-500">Total Referrals</p>
        <p class="text-3xl font-bold">{{ $totalReferrals }}</p>
    </div>
    <div class="bg-white rounded-xl shadow p-5 border-l-4 border-green-500">
        <p class="text-sm text-gray-500">Total Commissions Paid</p>
        <p class="text-3xl font-bold text-green-600">${{ number_format($totalEarnings, 2) }}</p>
    </div>
    <div class="bg-white rounded-xl shadow p-5 border-l-4 border-indigo-500">
        <p class="text-sm text-gray-500">Level Distribution</p>
        <p class="text-sm mt-1">L1: {{ $referrals->where('level', 1)->count() }} | L2: {{ $referrals->where('level', 2)->count() }}</p>
    </div>
</div>
<div class="bg-white rounded-xl shadow overflow-hidden">
    <div class="p-5 border-b flex justify-between items-center">
        <h3 class="font-bold text-gray-800">Referral Records</h3>
        <a href="{{ route('admin.referrals.settings') }}" class="bg-indigo-600 text-white px-3 py-1.5 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition">
            <i class="fas fa-sliders-h mr-1"></i>Commission Settings
        </a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Referrer</th>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Referred</th>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Level</th>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($referrals as $r)
                <tr class="hover:bg-gray-50">
                    <td class="px-5 py-3">
                        <p class="font-medium text-sm">{{ $r->referrer->name ?? 'N/A' }}</p>
                        <p class="text-xs text-gray-400">{{ $r->referrer->email ?? '' }}</p>
                    </td>
                    <td class="px-5 py-3">
                        <p class="font-medium text-sm">{{ $r->referred->name ?? 'N/A' }}</p>
                        <p class="text-xs text-gray-400">{{ $r->referred->email ?? '' }}</p>
                    </td>
                    <td class="px-5 py-3">
                        <span class="px-2 py-1 text-xs rounded-full {{ $r->level === 1 ? 'bg-purple-100 text-purple-800' : 'bg-indigo-100 text-indigo-800' }}">
                            Level {{ $r->level }}
                        </span>
                    </td>
                    <td class="px-5 py-3 text-xs text-gray-400">{{ $r->created_at->format('M d, Y') }}</td>
                </tr>
                @empty
                <tr><td colspan="4" class="px-5 py-8 text-center text-gray-400">No referrals recorded yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-4">{{ $referrals->links() }}</div>
</div>
@endsection