@extends('layouts.agent')

@section('title', 'View Candidate - M-Ajira Agent')

@section('content')

<!-- Header Section -->
<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">
        <a href="{{ route('agent.candidates.index') }}" class="text-blue-600 font-bold hover:text-blue-800 mb-4 inline-flex items-center space-x-2 transition">
            <span>←</span>
            <span>Back to My Candidates</span>
        </a>
        <div class="flex items-center justify-between mt-4">
            <div>
                <h1 class="text-5xl font-black text-gray-800">{{ $candidate->first_name }} {{ $candidate->last_name }}</h1>
                <p class="text-gray-600 text-xl mt-2">M-Ajira ID: <span class="font-bold">{{ $candidate->majira_id }}</span></p>
            </div>
            <span class="px-8 py-4 rounded-2xl text-lg 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>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left Column - Photo & Quick Info -->
        <div class="lg:col-span-1 space-y-6">
            
            <!-- Photo Card -->
            <div class="glass-card rounded-3xl p-8 text-center">
                @if($candidate->photo_path)
                    <img src="{{ asset('storage/' . $candidate->photo_path) }}" 
                         alt="{{ $candidate->first_name }}" 
                         class="w-48 h-48 rounded-3xl object-cover shadow-2xl mx-auto mb-6">
                @else
                    <div class="w-48 h-48 rounded-3xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white text-6xl font-black shadow-2xl mx-auto mb-6">
                        {{ substr($candidate->first_name, 0, 1) }}{{ substr($candidate->last_name ?? 'X', 0, 1) }}
                    </div>
                @endif
                
                <h2 class="text-2xl font-black text-gray-800 mb-2">{{ $candidate->first_name }} {{ $candidate->last_name }}</h2>
                <p class="text-gray-600 font-semibold">{{ $candidate->majira_id }}</p>
            </div>

            <!-- Quick Stats -->
            <div class="glass-card rounded-3xl p-6 space-y-4">
                <h3 class="text-xl font-black text-gray-800 mb-4">📊 Quick Stats</h3>
                
                <div class="flex items-center justify-between p-3 bg-blue-50 rounded-xl">
                    <span class="text-gray-700 font-semibold">Gender</span>
                    <span class="font-black text-blue-600">{{ $candidate->gender }}</span>
                </div>
                
                <div class="flex items-center justify-between p-3 bg-purple-50 rounded-xl">
                    <span class="text-gray-700 font-semibold">Age</span>
                    <span class="font-black text-purple-600">{{ $candidate->age }} years</span>
                </div>
                
                <div class="flex items-center justify-between p-3 bg-green-50 rounded-xl">
                    <span class="text-gray-700 font-semibold">Marital Status</span>
                    <span class="font-black text-green-600">{{ $candidate->marital_status ?? 'N/A' }}</span>
                </div>
                
                @if($candidate->number_of_children > 0)
                <div class="flex items-center justify-between p-3 bg-orange-50 rounded-xl">
                    <span class="text-gray-700 font-semibold">Children</span>
                    <span class="font-black text-orange-600">{{ $candidate->number_of_children }}</span>
                </div>
                @endif
            </div>

            <!-- Travel Documents Status -->
            <div class="glass-card rounded-3xl p-6">
                <h3 class="text-xl font-black text-gray-800 mb-4">📄 Travel Documents</h3>
                
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 rounded-xl {{ $candidate->has_passport ? 'bg-green-50' : 'bg-red-50' }}">
                        <span class="font-semibold {{ $candidate->has_passport ? 'text-green-700' : 'text-red-700' }}">Passport</span>
                        <span class="text-2xl">{{ $candidate->has_passport ? '✅' : '❌' }}</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 rounded-xl {{ $candidate->has_valid_police_clearance ? 'bg-green-50' : 'bg-red-50' }}">
                        <span class="font-semibold {{ $candidate->has_valid_police_clearance ? 'text-green-700' : 'text-red-700' }}">Police Clearance</span>
                        <span class="text-2xl">{{ $candidate->has_valid_police_clearance ? '✅' : '❌' }}</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 rounded-xl {{ $candidate->has_medical_certificate ? 'bg-green-50' : 'bg-red-50' }}">
                        <span class="font-semibold {{ $candidate->has_medical_certificate ? 'text-green-700' : 'text-red-700' }}">Medical Certificate</span>
                        <span class="text-2xl">{{ $candidate->has_medical_certificate ? '✅' : '❌' }}</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 rounded-xl {{ $candidate->has_driver_license ? 'bg-green-50' : 'bg-red-50' }}">
                        <span class="font-semibold {{ $candidate->has_driver_license ? 'text-green-700' : 'text-red-700' }}">Driver's License</span>
                        <span class="text-2xl">{{ $candidate->has_driver_license ? '✅' : '❌' }}</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- Right Column - Detailed Information -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- Contact Information -->
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>📞</span>
                    <span>Contact Information</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Phone Number</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->phone }}</p>
                    </div>
                    
                    @if($candidate->email)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Email Address</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->email }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->national_id)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">National ID</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->national_id }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Location Details -->
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>📍</span>
                    <span>Location Details</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">County</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->county }}</p>
                    </div>
                    
                    @if($candidate->sub_county)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Sub County</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->sub_county }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->ward)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Ward</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->ward }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Education & Skills -->
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>🎓</span>
                    <span>Education & Skills</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @if($candidate->education)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Education Level</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->education }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->trade_cert)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Trade Certificate</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->trade_cert }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->issuing_institution)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Issuing Institution</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->issuing_institution }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->local_profession)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Local Profession</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->local_profession }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->international_profession)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">International Profession</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->international_profession }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->religion)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Religion</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->religion }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Passport Details -->
            @if($candidate->has_passport)
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>🛂</span>
                    <span>Passport Details</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @if($candidate->passport_number)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Passport Number</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->passport_number }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->passport_tracking_number)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Tracking Number</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->passport_tracking_number }}</p>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Police Clearance Details -->
            @if($candidate->has_valid_police_clearance && $candidate->police_clearance_number)
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>🚔</span>
                    <span>Police Clearance</span>
                </h3>
                
                <div>
                    <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Certificate Number</label>
                    <p class="text-lg font-bold text-gray-800">{{ $candidate->police_clearance_number }}</p>
                </div>
            </div>
            @endif

            <!-- Work Abroad Experience -->
            @if($candidate->worked_abroad_before)
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>✈️</span>
                    <span>Previous Work Abroad Experience</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    @if($candidate->previous_country)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Country</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->previous_country }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->work_abroad_from_year)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">From Year</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->work_abroad_from_year }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->work_abroad_to_year)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">To Year</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->work_abroad_to_year }}</p>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Financing -->
            @if($candidate->needs_financing)
            <div class="glass-card rounded-3xl p-8 bg-gradient-to-br from-orange-50 to-orange-100 border-2 border-orange-200">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>💳</span>
                    <span>Financing Required</span>
                </h3>
                
                @if($candidate->financing_notes)
                <div>
                    <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Notes</label>
                    <p class="text-lg text-gray-800">{{ $candidate->financing_notes }}</p>
                </div>
                @else
                <p class="text-gray-700">This candidate requires financing assistance.</p>
                @endif
            </div>
            @endif

            <!-- Next of Kin -->
            @if($candidate->next_of_kin_name)
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>👨‍👩‍👧</span>
                    <span>Next of Kin</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Name</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->next_of_kin_name }}</p>
                    </div>
                    
                    @if($candidate->next_of_kin_relationship)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Relationship</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->next_of_kin_relationship }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->next_of_kin_id)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">ID Number</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->next_of_kin_id }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->next_of_kin_phone)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Phone Number</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->next_of_kin_phone }}</p>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Guarantor -->
            @if($candidate->guarantor_name)
            <div class="glass-card rounded-3xl p-8">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>🤝</span>
                    <span>Guarantor</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Name</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->guarantor_name }}</p>
                    </div>
                    
                    @if($candidate->guarantor_relationship)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Relationship</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->guarantor_relationship }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->guarantor_id)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">ID Number</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->guarantor_id }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->guarantor_phone)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Phone Number</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->guarantor_phone }}</p>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Registration Details -->
            <div class="glass-card rounded-3xl p-8 bg-gradient-to-br from-blue-50 to-cyan-50 border-2 border-blue-200">
                <h3 class="text-2xl font-black text-gray-800 mb-6 flex items-center gap-3">
                    <span>📝</span>
                    <span>Registration Details</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Date of Entry</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->date_of_entry ? $candidate->date_of_entry->format('d M Y, h:i A') : 'N/A' }}</p>
                    </div>
                    
                    @if($candidate->how_did_you_hear)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">How Did You Hear</label>
                        <p class="text-lg font-bold text-gray-800">{{ $candidate->how_did_you_hear }}</p>
                    </div>
                    @endif
                    
                    @if($candidate->referral_code)
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Referred By Code</label>
                        <p class="text-lg font-bold text-purple-600">{{ $candidate->referral_code }}</p>
                    </div>
                    @endif
                    
                    <div>
                        <label class="text-sm font-bold text-gray-600 uppercase mb-2 block">Portal Access</label>
                        @if($candidate->user)
                            <span class="inline-flex items-center gap-2 px-4 py-2 rounded-xl font-bold bg-green-100 text-green-800 border-2 border-green-300">
                                <span>✅</span>
                                <span>Active</span>
                            </span>
                        @else
                            <span class="inline-flex items-center gap-2 px-4 py-2 rounded-xl font-bold bg-gray-100 text-gray-600 border-2 border-gray-300">
                                <span>❌</span>
                                <span>No Access</span>
                            </span>
                        @endif
                    </div>
                </div>
            </div>

        </div>
        
    </div>

    <!-- Back Button -->
    <div class="mt-12 text-center">
        <a href="{{ route('agent.candidates.index') }}" class="inline-flex items-center gap-3 bg-blue-600 text-white px-10 py-4 rounded-2xl font-bold text-lg hover:shadow-2xl hover:bg-blue-700 transition">
            <span>←</span>
            <span>Back to My Candidates</span>
        </a>
    </div>

</section>

@endsection