@extends('layouts.app')
@section('title', 'My Referrals')
@section('content')
<div class="max-w-6xl mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-gray-800">Referral Program</h1>
        <p class="text-gray-500">Earn commissions by referring friends — 2 levels deep.</p>
    </div>

    <!-- Referral Link -->
    <div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-6 mb-8 text-white">
        <h2 class="font-bold text-lg mb-2"><i class="fas fa-link mr-2"></i>Your Referral Link</h2>
        <div class="flex items-center gap-3">
            <input type="text" id="refLink" value="{{ $referralLink }}" readonly
                class="flex-1 bg-white bg-opacity-20 text-white placeholder-purple-200 rounded-lg px-4 py-2.5 text-sm border border-white border-opacity-30 focus:outline-none">
            <button onclick="copyLink()" class="bg-yellow-400 text-gray-900 px-4 py-2.5 rounded-lg font-bold text-sm hover:bg-yellow-300 transition whitespace-nowrap">
                <i class="fas fa-copy mr-1"></i>Copy
            </button>
        </div>
        <p class="text-purple-200 text-xs mt-2">Share this link and earn commissions when your referrals complete surveys or purchase plans.</p>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow p-6 border-l-4 border-purple-500">
            <p class="text-sm text-gray-500">Level 1 Referrals</p>
            <p class="text-3xl font-bold text-gray-800">{{ $level1Referrals->count() }}</p>
            <p class="text-xs text-gray-400 mt-1">Direct referrals</p>
        </div>
        <div class="bg-white rounded-xl shadow p-6 border-l-4 border-indigo-500">
            <p class="text-sm text-gray-500">Level 2 Referrals</p>
            <p class="text-3xl font-bold text-gray-800">{{ $level2Referrals->count() }}</p>
            <p class="text-xs text-gray-400 mt-1">Referrals of your referrals</p>
        </div>
        <div class="bg-white rounded-xl shadow p-6 border-l-4 border-green-500">
            <p class="text-sm text-gray-500">Total Commissions</p>
            <p class="text-3xl font-bold text-green-600">${{ number_format($totalEarnings, 2) }}</p>
            <p class="text-xs text-gray-400 mt-1">All-time earnings</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Level 1 -->
        <div class="bg-white rounded-xl shadow">
            <div class="p-5 border-b flex items-center justify-between">
                <h3 class="font-bold text-gray-800"><i class="fas fa-user-friends text-purple-500 mr-2"></i>Level 1 Referrals</h3>
                <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2 py-1 rounded-full">{{ $level1Referrals->count() }}</span>
            </div>
            <div class="divide-y max-h-64 overflow-y-auto">
                @forelse($level1Referrals as $r)
                <div class="px-5 py-3 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                            <span class="text-purple-600 font-bold text-xs">{{ strtoupper(substr($r->referred->name, 0, 1)) }}</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-800">{{ $r->referred->name }}</p>
                            <p class="text-xs text-gray-400">Joined {{ $r->created_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                    <span class="text-xs {{ $r->referred->is_active ? 'text-green-600' : 'text-red-500' }}">
                        {{ $r->referred->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
                @empty
                <div class="px-5 py-8 text-center text-gray-400 text-sm">
                    <i class="fas fa-user-plus text-3xl mb-2"></i><br>No referrals yet. Share your link!
                </div>
                @endforelse
            </div>
        </div>

        <!-- Level 2 -->
        <div class="bg-white rounded-xl shadow">
            <div class="p-5 border-b flex items-center justify-between">
                <h3 class="font-bold text-gray-800"><i class="fas fa-sitemap text-indigo-500 mr-2"></i>Level 2 Referrals</h3>
                <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2 py-1 rounded-full">{{ $level2Referrals->count() }}</span>
            </div>
            <div class="divide-y max-h-64 overflow-y-auto">
                @forelse($level2Referrals as $r)
                <div class="px-5 py-3 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
                            <span class="text-indigo-600 font-bold text-xs">{{ strtoupper(substr($r->referred->name, 0, 1)) }}</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-800">{{ $r->referred->name }}</p>
                            <p class="text-xs text-gray-400">Joined {{ $r->created_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                    <span class="text-xs {{ $r->referred->is_active ? 'text-green-600' : 'text-red-500' }}">
                        {{ $r->referred->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
                @empty
                <div class="px-5 py-8 text-center text-gray-400 text-sm">
                    <i class="fas fa-project-diagram text-3xl mb-2"></i><br>No level 2 referrals yet.
                </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Earnings History -->
    <div class="bg-white rounded-xl shadow">
        <div class="p-5 border-b">
            <h3 class="font-bold text-gray-800"><i class="fas fa-history text-green-500 mr-2"></i>Commission History</h3>
        </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">From</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</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">Amount</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($earnings as $e)
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3 text-sm">{{ $e->referred->name ?? 'N/A' }}</td>
                        <td class="px-5 py-3">
                            <span class="px-2 py-1 text-xs rounded-full {{ $e->type === 'survey' ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800' }}">
                                {{ ucfirst($e->type) }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-sm text-gray-600">Level {{ $e->level }}</td>
                        <td class="px-5 py-3 font-bold text-green-600">+${{ number_format($e->amount, 2) }}</td>
                        <td class="px-5 py-3 text-sm text-gray-400">{{ $e->created_at->format('M d, Y H:i') }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="px-5 py-8 text-center text-gray-400">No commission earnings yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4">{{ $earnings->links() }}</div>
    </div>
</div>
<script>
function copyLink() {
    const input = document.getElementById('refLink');
    input.select();
    document.execCommand('copy');
    alert('Referral link copied!');
}
</script>
@endsection