@extends('layouts.agent')

@section('title', 'My Candidates - M-Ajira Agent')

@section('content')

<section class="py-12 bg-gradient-to-br from-blue-50 via-cyan-50 to-blue-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center">
            <div>
                <a href="{{ route('agent.dashboard') }}" class="text-blue-600 font-bold hover:text-blue-800 mb-3 inline-flex items-center space-x-2">
                    <span>←</span>
                    <span>Back to Dashboard</span>
                </a>
                <h1 class="text-5xl font-black text-gray-800">My Candidates</h1>
                <p class="text-gray-600 text-xl mt-2">{{ $candidates->total() }} candidates referred by you</p>
            </div>
        </div>
    </div>
</section>

<!-- Search & Filter -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="bg-white/80 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/20">
        <form method="GET" action="{{ route('agent.candidates.index') }}" class="flex gap-4">
            <input type="text" 
                   name="search" 
                   value="{{ request('search') }}"
                   placeholder="�� Search by name, phone, or M-Ajira ID..." 
                   class="flex-1 px-6 py-3 border-2 border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition">
            
            <select name="status" class="px-6 py-3 border-2 border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500">
                <option value="">All Status</option>
                <option value="registered" {{ request('status') == 'registered' ? 'selected' : '' }}>Registered</option>
                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
            </select>
            
            <button type="submit" class="bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-8 py-3 rounded-xl font-bold hover:shadow-2xl transition">
                Search
            </button>
            
            @if(request()->hasAny(['search', 'status']))
            <a href="{{ route('agent.candidates.index') }}" class="bg-gray-200 text-gray-800 px-6 py-3 rounded-xl font-bold hover:bg-gray-300 transition">
                Clear
            </a>
            @endif
        </form>
    </div>
</section>

<!-- Candidates List -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    @if($candidates->count() > 0)
    <div class="mb-4">
        <p class="text-gray-600 font-semibold">
            Showing {{ $candidates->firstItem() }} - {{ $candidates->lastItem() }} of {{ $candidates->total() }}
        </p>
    </div>

    <div class="grid grid-cols-1 gap-6">
        @foreach($candidates as $candidate)
            <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                    <div class="flex gap-6 flex-1">
                        @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">
                        @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">
                                {{ substr($candidate->first_name, 0, 1) }}{{ substr($candidate->last_name ?? 'X', 0, 1) }}
                            </div>
                        @endif
                        
                        <div class="flex-1">
                            <h3 class="text-3xl font-black text-gray-800 mb-2">{{ $candidate->first_name }} {{ $candidate->last_name }}</h3>
                            <p class="text-gray-600 font-bold text-lg mb-2">{{ $candidate->gender }} • {{ $candidate->age }} years • {{ $candidate->county }}</p>
                            <div class="flex flex-wrap gap-3 text-gray-500 font-semibold">
                                <span>📱 {{ $candidate->phone }}</span>
                                @if($candidate->email)
                                <span>📧 {{ $candidate->email }}</span>
                                @endif
                                <span>🆔 {{ $candidate->majira_id }}</span>
                            </div>
                            <div class="mt-3 flex gap-3">
                                @if($candidate->has_passport)
                                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-lg text-sm font-bold">✅ Passport</span>
                                @endif
                                @if($candidate->has_valid_police_clearance)
                                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-lg text-sm font-bold">✅ Clearance</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col items-end gap-3">
                        <span class="px-6 py-3 rounded-2xl text-sm font-bold border-2
                            {{ $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">
                            <span>View Details</span>
                            <span>→</span>
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @if($candidates->hasPages())
    <div class="mt-8">
        <div class="bg-white p-6 rounded-2xl shadow-lg">
            {{ $candidates->links() }}
        </div>
    </div>
    @endif
    @else
    <div class="bg-white rounded-3xl p-20 text-center shadow-lg">
        <div class="text-8xl mb-6">👥</div>
        <h3 class="text-3xl font-black text-gray-800 mb-4">
            @if(request()->hasAny(['search', 'status']))
                No Candidates Found
            @else
                No Candidates Yet
            @endif
        </h3>
        <p class="text-gray-600 text-xl mb-8">
            @if(request()->hasAny(['search', 'status']))
                Try adjusting your search or filters
            @else
                Share your referral code to start earning commissions!
            @endif
        </p>
        <div class="flex justify-center gap-4">
            @if(request()->hasAny(['search', 'status']))
            <a href="{{ route('agent.candidates.index') }}" class="bg-blue-600 text-white px-8 py-4 rounded-2xl font-bold text-lg hover:shadow-2xl transition">
                Clear Filters
            </a>
            @else
            <a href="{{ route('agent.dashboard') }}" class="bg-purple-600 text-white px-8 py-4 rounded-2xl font-bold text-lg hover:shadow-2xl transition">
                Go to Dashboard
            </a>
            @endif
        </div>
    </div>
    @endif
</section>

@endsection