@extends('layouts.agent')

@section('title', 'Agent Dashboard - M-Ajira')

@section('content')

<!-- Hero Section with Welcome & Quick Actions -->
<section class="py-12 bg-gradient-to-br from-blue-600 via-cyan-600 to-blue-700 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
                <h1 class="text-5xl font-black mb-2">Welcome back, {{ $agent->user->name }}! 👋</h1>
                <p class="text-xl text-blue-100">Agent Code: <span class="font-bold">{{ $agent->agent_code }}</span></p>
                <p class="text-lg text-blue-200 mt-1">{{ $agent->county }}{{ $agent->sub_county ? ', ' . $agent->sub_county : '' }}</p>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('agent.candidates.index') }}" class="bg-white text-blue-600 px-6 py-3 rounded-xl font-bold hover:shadow-2xl transition inline-flex items-center gap-2">
                    <span>👥</span>
                    <span>My Candidates</span>
                </a>
                <a href="{{ route('agent.password.edit') }}" class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-400 transition inline-flex items-center gap-2">
                    <span>🔐</span>
                    <span>Change Password</span>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Referral Code Section - PROMINENT -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 mb-8">
    <div class="bg-gradient-to-r from-purple-600 via-purple-500 to-pink-500 rounded-3xl p-8 shadow-2xl">
        <div class="flex flex-col lg:flex-row items-start lg:items-center gap-8">
            <div class="flex-shrink-0">
                <div class="text-8xl">🎯</div>
            </div>
            
            <div class="flex-1">
                <h2 class="text-white text-3xl font-black mb-2">Your Referral Code</h2>
                <p class="text-purple-100 text-lg mb-6">Share this code or link with candidates to earn commissions when they get deployed!</p>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <!-- Referral Code -->
                    <div class="bg-white rounded-2xl p-6">
                        <p class="text-sm text-gray-600 mb-2 font-bold uppercase">Referral Code</p>
                        <div class="flex items-center gap-3">
                            <span class="text-4xl font-black text-purple-600 font-mono" id="referralCode">{{ $stats['referral_code'] }}</span>
                            <button onclick="copyCode()" class="bg-purple-600 text-white px-5 py-2.5 rounded-xl font-bold hover:bg-purple-700 transition text-sm">
                                📋 Copy
                            </button>
                        </div>
                    </div>

                    <!-- Referral Link -->
                    <div class="bg-white rounded-2xl p-6">
                        <p class="text-sm text-gray-600 mb-2 font-bold uppercase">Referral Link</p>
                        <div class="flex items-center gap-3">
                            <input type="text" value="{{ $stats['referral_link'] }}" id="referralLink" readonly 
                                class="flex-1 px-4 py-2.5 bg-gray-50 border-2 border-gray-200 rounded-xl text-sm text-gray-700 font-mono">
                            <button onclick="copyLink()" class="bg-purple-600 text-white px-5 py-2.5 rounded-xl font-bold hover:bg-purple-700 transition text-sm whitespace-nowrap">
                                🔗 Copy
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mt-4 bg-purple-700 bg-opacity-50 rounded-xl p-4">
                    <p class="text-white text-sm">
                        <span class="font-bold">💡 How it works:</span> When a candidate registers using your code/link, they'll be assigned to you. 
                        You earn commission when they get approved and deployed to work abroad!
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Performance Statistics -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
    <h2 class="text-3xl font-black text-gray-800 mb-6 flex items-center gap-3">
        <span>📊</span>
        <span>Your Performance</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Referrals -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-3xl p-8 text-white shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <span class="text-5xl">👥</span>
                <span class="text-5xl font-black">{{ $stats['total_referrals'] }}</span>
            </div>
            <h3 class="text-xl font-bold mb-1">Total Referrals</h3>
            <p class="text-blue-100">All candidates you brought</p>
        </div>

        <!-- Approved Candidates -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-3xl p-8 text-white shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <span class="text-5xl">✅</span>
                <span class="text-5xl font-black">{{ $stats['approved_candidates'] }}</span>
            </div>
            <h3 class="text-xl font-bold mb-1">Approved</h3>
            <p class="text-green-100">Ready for deployment</p>
        </div>

        <!-- Pending Review -->
        <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-3xl p-8 text-white shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <span class="text-5xl">⏳</span>
                <span class="text-5xl font-black">{{ $stats['pending_candidates'] }}</span>
            </div>
            <h3 class="text-xl font-bold mb-1">Pending</h3>
            <p class="text-orange-100">Awaiting approval</p>
        </div>

        <!-- Just Registered -->
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-3xl p-8 text-white shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <span class="text-5xl">📝</span>
                <span class="text-5xl font-black">{{ $stats['registered_candidates'] }}</span>
            </div>
            <h3 class="text-xl font-bold mb-1">Registered</h3>
            <p class="text-purple-100">Newly added</p>
        </div>
    </div>
</section>

<!-- Commission Earnings -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
    <h2 class="text-3xl font-black text-gray-800 mb-6 flex items-center gap-3">
        <span>💰</span>
        <span>Commission Earnings</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Total Earned -->
        <div class="bg-white rounded-3xl p-8 shadow-lg border-2 border-green-200 hover:shadow-2xl hover:border-green-300 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <span class="text-5xl">💵</span>
                <div class="text-right">
                    <span class="text-sm text-gray-600 font-bold block mb-1">TOTAL EARNED</span>
                    <span class="text-3xl font-black text-green-600">KES {{ number_format($stats['total_commission_earned'], 2) }}</span>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t-2 border-gray-100">
                <p class="text-gray-600 text-sm">All-time commission earnings</p>
            </div>
        </div>

        <!-- Paid Out -->
        <div class="bg-white rounded-3xl p-8 shadow-lg border-2 border-blue-200 hover:shadow-2xl hover:border-blue-300 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <span class="text-5xl">✅</span>
                <div class="text-right">
                    <span class="text-sm text-gray-600 font-bold block mb-1">PAID OUT</span>
                    <span class="text-3xl font-black text-blue-600">KES {{ number_format($stats['commission_paid'], 2) }}</span>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t-2 border-gray-100">
                <p class="text-gray-600 text-sm">Already received by you</p>
            </div>
        </div>

        <!-- Pending Payment -->
        <div class="bg-white rounded-3xl p-8 shadow-lg border-2 border-orange-200 hover:shadow-2xl hover:border-orange-300 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <span class="text-5xl">⏳</span>
                <div class="text-right">
                    <span class="text-sm text-gray-600 font-bold block mb-1">PENDING</span>
                    <span class="text-3xl font-black text-orange-600">KES {{ number_format($stats['commission_pending'], 2) }}</span>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t-2 border-gray-100">
                <p class="text-gray-600 text-sm">Awaiting payout approval</p>
            </div>
        </div>
    </div>
</section>

<!-- Recent Candidates -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-3xl font-black text-gray-800 flex items-center gap-3">
            <span>👥</span>
            <span>Recent Candidates</span>
        </h2>
        @if($recentCandidates->count() > 0)
        <a href="{{ route('agent.candidates.index') }}" class="bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:shadow-2xl hover:bg-blue-700 transition inline-flex items-center gap-2">
            <span>View All</span>
            <span>→</span>
        </a>
        @endif
    </div>

    @if($recentCandidates->count() > 0)
    <div class="grid grid-cols-1 gap-6">
        @foreach($recentCandidates as $candidate)
        <div class="bg-white rounded-3xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-gray-100 hover:border-blue-200">
            <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
                <div class="flex items-center gap-6 flex-1">
                    <!-- Photo -->
                    @if($candidate->photo_path)
                        <img src="{{ asset('storage/' . $candidate->photo_path) }}" alt="{{ $candidate->first_name }}" 
                            class="w-24 h-24 rounded-2xl object-cover shadow-lg flex-shrink-0">
                    @else
                        <div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white text-3xl font-black shadow-lg flex-shrink-0">
                            {{ substr($candidate->first_name, 0, 1) }}{{ substr($candidate->last_name ?? 'X', 0, 1) }}
                        </div>
                    @endif
                    
                    <!-- Info -->
                    <div class="flex-1 min-w-0">
                        <h3 class="text-2xl font-black text-gray-800 mb-1">{{ $candidate->first_name }} {{ $candidate->last_name }}</h3>
                        <div class="flex flex-wrap gap-3 text-gray-600 font-semibold mb-2">
                            <span>{{ $candidate->gender }}</span>
                            <span>•</span>
                            <span>{{ $candidate->age }} years</span>
                            <span>•</span>
                            <span>{{ $candidate->county }}</span>
                        </div>
                        <div class="flex flex-wrap gap-4 text-gray-500 text-sm">
                            <span>📱 {{ $candidate->phone }}</span>
                            @if($candidate->email)
                            <span>📧 {{ $candidate->email }}</span>
                            @endif
                            <span>🆔 {{ $candidate->majira_id }}</span>
                        </div>
                        <div class="mt-2">
                            <span class="text-xs text-gray-500">Registered: {{ $candidate->created_at->format('d M Y, h:i A') }}</span>
                        </div>
                    </div>
                </div>
                
                <!-- Status & Actions -->
                <div class="flex flex-col items-end gap-3">
                    <span class="px-6 py-3 rounded-2xl text-sm font-bold border-2 whitespace-nowrap
                        {{ $candidate->status === 'approved' ? 'bg-green-100 text-green-800 border-green-300' : 
                           ($candidate->status === 'pending' ? 'bg-orange-100 text-orange-800 border-orange-300' : 
                           ($candidate->status === 'registered' ? 'bg-blue-100 text-blue-800 border-blue-300' : 
                           'bg-gray-100 text-gray-800 border-gray-300')) }}">
                        {{ ucfirst($candidate->status) }}
                    </span>
                    <a href="{{ route('agent.candidates.show', $candidate) }}" 
                        class="bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-700 transition inline-flex items-center gap-2 whitespace-nowrap">
                        <span>View Details</span>
                        <span>→</span>
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="bg-gradient-to-br from-gray-50 to-blue-50 rounded-3xl p-20 text-center shadow-lg border-2 border-gray-200">
        <div class="text-9xl mb-6">👥</div>
        <h3 class="text-4xl font-black text-gray-800 mb-4">No Candidates Yet</h3>
        <p class="text-gray-600 text-xl mb-8 max-w-2xl mx-auto">
            Start earning commissions by sharing your referral code with potential candidates. 
            When they register and get deployed, you earn!
        </p>
        <div class="flex justify-center gap-4">
            <button onclick="copyCode()" class="bg-purple-600 text-white px-8 py-4 rounded-2xl font-bold text-lg hover:shadow-2xl hover:bg-purple-700 transition inline-flex items-center gap-2">
                <span>📋</span>
                <span>Copy Referral Code</span>
            </button>
            <button onclick="copyLink()" class="bg-blue-600 text-white px-8 py-4 rounded-2xl font-bold text-lg hover:shadow-2xl hover:bg-blue-700 transition inline-flex items-center gap-2">
                <span>🔗</span>
                <span>Copy Referral Link</span>
            </button>
        </div>
    </div>
    @endif
</section>

<!-- Copy to Clipboard Script -->
<script>
function copyCode() {
    const code = document.getElementById('referralCode').textContent.trim();
    navigator.clipboard.writeText(code).then(() => {
        // Show success message
        const btn = event.target;
        const originalText = btn.innerHTML;
        btn.innerHTML = '✅ Copied!';
        btn.classList.add('bg-green-600');
        btn.classList.remove('bg-purple-600');
        
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.classList.remove('bg-green-600');
            btn.classList.add('bg-purple-600');
        }, 2000);
    }).catch(err => {
        alert('Failed to copy. Please copy manually: ' + code);
    });
}

function copyLink() {
    const link = document.getElementById('referralLink');
    link.select();
    link.setSelectionRange(0, 99999); // For mobile devices
    
    navigator.clipboard.writeText(link.value).then(() => {
        // Show success message
        const btn = event.target;
        const originalText = btn.innerHTML;
        btn.innerHTML = '✅ Copied!';
        btn.classList.add('bg-green-600');
        btn.classList.remove('bg-purple-600');
        
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.classList.remove('bg-green-600');
            btn.classList.add('bg-purple-600');
        }, 2000);
    }).catch(err => {
        alert('Failed to copy. Please copy manually.');
    });
}
</script>

@endsection