@extends('layouts.candidate')

@section('title', 'Complete Profile - M-Ajira')

@section('content')

<section class="py-8 sm:py-12 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($candidate->has_paid_registration_fee)
        <div class="glass-card border-2 border-green-400 rounded-xl sm:rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 bg-gradient-to-r from-green-50 to-emerald-50">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center text-2xl sm:text-3xl shadow-lg">
                        ✓
                    </div>
                    <div>
                        <h3 class="text-lg sm:text-xl font-black text-green-800">Registration Fee Paid</h3>
                        <p class="text-green-700 text-sm sm:text-base">
                            Paid on {{ $candidate->registration_fee_paid_at ? \Carbon\Carbon::parse($candidate->registration_fee_paid_at)->format('d M Y, h:i A') : 'N/A' }}
                        </p>
                    </div>
                </div>
                <div class="hidden sm:block text-3xl sm:text-5xl">💳</div>
            </div>
        </div>
        @endif

        <a href="{{ route('candidate.dashboard') }}" class="text-purple-600 font-bold hover:text-purple-800 mb-6 inline-flex items-center space-x-2 text-sm sm:text-base">
            <span>←</span>
            <span>Back to Dashboard</span>
        </a>
        
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black text-gray-800 mb-8 text-center">Complete Your Profile</h1>

        <div class="max-w-4xl mx-auto mb-8">
            <div class="flex items-center justify-between relative">
                <div class="absolute left-0 right-0 top-8 h-1 bg-gray-200 -z-10"></div>
                <div class="absolute left-0 top-8 h-1 bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-500 -z-10" id="progressBar" style="width: 0%"></div>

                <div class="flex flex-col items-center flex-1" data-step="1">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center text-white font-black text-lg sm:text-xl mb-2 bg-gradient-to-br from-purple-500 to-pink-500 shadow-lg step-circle active">
                        1
                    </div>
                    <p class="text-xs sm:text-sm font-bold text-gray-800 text-center">Personal<br class="hidden sm:block">Details</p>
                </div>

                <div class="flex flex-col items-center flex-1" data-step="2">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center text-gray-500 font-black text-lg sm:text-xl mb-2 bg-gray-200 shadow-lg step-circle">
                        2
                    </div>
                    <p class="text-xs sm:text-sm font-bold text-gray-400 text-center">Professional<br class="hidden sm:block">Info</p>
                </div>

                <div class="flex flex-col items-center flex-1" data-step="3">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center text-gray-500 font-black text-lg sm:text-xl mb-2 bg-gray-200 shadow-lg step-circle">
                        3
                    </div>
                    <p class="text-xs sm:text-sm font-bold text-gray-400 text-center">Travel<br class="hidden sm:block">Documents</p>
                </div>

                <div class="flex flex-col items-center flex-1" data-step="4">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center text-gray-500 font-black text-lg sm:text-xl mb-2 bg-gray-200 shadow-lg step-circle">
                        4
                    </div>
                    <p class="text-xs sm:text-sm font-bold text-gray-400 text-center">Work<br class="hidden sm:block">Experience</p>
                </div>

                <div class="flex flex-col items-center flex-1" data-step="5">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center text-gray-500 font-black text-lg sm:text-xl mb-2 bg-gray-200 shadow-lg step-circle">
                        5
                    </div>
                    <p class="text-xs sm:text-sm font-bold text-gray-400 text-center">Emergency<br class="hidden sm:block">Contacts</p>
                </div>

                <div class="flex flex-col items-center flex-1" data-step="6">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center text-gray-500 font-black text-lg sm:text-xl mb-2 bg-gray-200 shadow-lg step-circle">
                        6
                    </div>
                    <p class="text-xs sm:text-sm font-bold text-gray-400 text-center">Review &<br class="hidden sm:block">Submit</p>
                </div>
            </div>
        </div>
    </div>
</section>

@if(session('success'))
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
        <div class="glass-card border-2 border-green-400 rounded-xl sm:rounded-2xl p-4 sm:p-6">
            <div class="flex items-start space-x-3 sm:space-x-4">
                <span class="text-3xl sm:text-4xl lg:text-5xl">✅</span>
                <div>
                    <h3 class="text-lg sm:text-xl font-bold text-green-800 mb-1">Success!</h3>
                    <p class="text-green-700 text-sm sm:text-base">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

@if(session('error'))
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
        <div class="glass-card border-2 border-red-400 rounded-xl sm:rounded-2xl p-4 sm:p-6">
            <div class="flex items-start space-x-3 sm:space-x-4">
                <span class="text-3xl sm:text-4xl lg:text-5xl">❌</span>
                <div>
                    <h3 class="text-lg sm:text-xl font-bold text-red-800 mb-1">Error!</h3>
                    <p class="text-red-700 text-sm sm:text-base">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

@if ($errors->any())
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
        <div class="glass-card border-2 border-red-400 rounded-xl sm:rounded-2xl p-4 sm:p-6">
            <div class="flex items-start space-x-3 sm:space-x-4 mb-3 sm:mb-4">
                <span class="text-3xl sm:text-4xl lg:text-5xl">⚠️</span>
                <div>
                    <h3 class="text-lg sm:text-xl font-bold text-red-800 mb-1">Please fix the following errors:</h3>
                </div>
            </div>
            <ul class="list-disc list-inside space-y-1 ml-8 sm:ml-12 text-red-700 text-sm sm:text-base">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<div id="validationAlert" class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6" style="display: none;">
    <div class="glass-card border-2 border-red-400 rounded-xl sm:rounded-2xl p-4 sm:p-6">
        <div class="flex items-start space-x-3 sm:space-x-4">
            <span class="text-3xl sm:text-4xl lg:text-5xl">⚠️</span>
            <div>
                <h3 class="text-lg sm:text-xl font-bold text-red-800 mb-1">Required Fields Missing!</h3>
                <p class="text-red-700 text-sm sm:text-base" id="validationMessage">Please fill in all required fields before proceeding to the next step.</p>
            </div>
        </div>
    </div>
</div>

<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-12">
    <form method="POST" action="{{ route('candidate.profile.update') }}" enctype="multipart/form-data" id="profileForm">
        @csrf
        @method('PUT')

        <div class="form-step active" data-step="1">
            <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 mb-6">
                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black text-gray-800 mb-6 sm:mb-8 flex items-center">
                    <span class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center text-2xl sm:text-3xl mr-4 flex-shrink-0">📋</span>
                    <span>Personal Information</span>
                </h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">First Name *</label>
                        <input type="text" name="first_name" id="first_name" value="{{ old('first_name', $candidate->first_name) }}" required
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Last Name *</label>
                        <input type="text" name="last_name" id="last_name" value="{{ old('last_name', $candidate->last_name) }}" required
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">National ID *</label>
                        <input type="text" name="national_id" id="national_id" value="{{ old('national_id', $candidate->national_id) }}" required
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Phone *</label>
                        <input type="text" name="phone" id="phone" value="{{ old('phone', $candidate->phone) }}" required
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Email *</label>
                        <input type="email" name="email" id="email" value="{{ old('email', $candidate->email) }}" required
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Gender *</label>
                        <select name="gender" id="gender" required class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                            <option value="">Select Gender</option>
                            <option value="Male" {{ $candidate->gender == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ $candidate->gender == 'Female' ? 'selected' : '' }}>Female</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Age *</label>
                        <input type="number" name="age" id="age" value="{{ old('age', $candidate->age) }}" required min="18" max="65"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Height (cm)</label>
                        <input type="number" name="height" id="height" value="{{ old('height', $candidate->height) }}" min="0" step="0.01"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Weight (kg)</label>
                        <input type="number" name="weight" id="weight" value="{{ old('weight', $candidate->weight) }}" min="0" step="0.01"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Marital Status *</label>
                        <select name="marital_status" id="marital_status" required class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                            <option value="">Select Status</option>
                            <option value="Single" {{ $candidate->marital_status == 'Single' ? 'selected' : '' }}>Single</option>
                            <option value="Married" {{ $candidate->marital_status == 'Married' ? 'selected' : '' }}>Married</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Number of Children *</label>
                        <input type="number" name="number_of_children" id="number_of_children" value="{{ old('number_of_children', $candidate->number_of_children ?? 0) }}" required min="0"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Religion *</label>
                        <input type="text" name="religion" id="religion" value="{{ old('religion', $candidate->religion) }}" required
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">County *</label>
                        <input type="text" name="county" id="county" value="{{ old('county', $candidate->county) }}" required
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div class="sm:col-span-2 lg:col-span-3">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Profile Photo</label>
                        @if($candidate->photo_path)
                            <img src="{{ Storage::url($candidate->photo_path) }}" alt="Profile" class="w-24 h-24 sm:w-32 sm:h-32 rounded-2xl object-cover mb-4 shadow-lg">
                        @endif
                        <input type="file" name="photo" accept="image/*"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100">
                    </div>
                </div>
            </div>
        </div>

        <div class="form-step" data-step="2" style="display: none;">
            <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 mb-6">
                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black text-gray-800 mb-6 sm:mb-8 flex items-center">
                    <span class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-2xl sm:text-3xl mr-4 flex-shrink-0">💼</span>
                    <span>Professional Information</span>
                </h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Education Level *</label>
                        <select name="education" id="education" required onchange="toggleInstitution()"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                            <option value="">Select Level</option>
                            <option value="KCPE" {{ $candidate->education == 'KCPE' ? 'selected' : '' }}>KCPE (Primary)</option>
                            <option value="KCSE" {{ $candidate->education == 'KCSE' ? 'selected' : '' }}>KCSE (Secondary)</option>
                            <option value="Certificate" {{ $candidate->education == 'Certificate' ? 'selected' : '' }}>Certificate</option>
                            <option value="Diploma" {{ $candidate->education == 'Diploma' ? 'selected' : '' }}>Diploma</option>
                            <option value="Degree" {{ $candidate->education == 'Degree' ? 'selected' : '' }}>Undergraduate Degree</option>
                            <option value="Masters" {{ $candidate->education == 'Masters' ? 'selected' : '' }}>Masters Degree</option>
                            <option value="PhD" {{ $candidate->education == 'PhD' ? 'selected' : '' }}>PhD</option>
                            <option value="Other" {{ $candidate->education == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>

                    <div id="institution_container" style="display: none;">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Issuing Institution *</label>
                        <input type="text" name="issuing_institution" id="issuing_institution" value="{{ old('issuing_institution', $candidate->issuing_institution) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Trade Certificate</label>
                        <input type="text" name="trade_cert" value="{{ old('trade_cert', $candidate->trade_cert) }}" placeholder="e.g., Housekeeping, Caregiver"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Profession *</label>
                        <input type="text" name="international_profession" value="{{ old('international_profession', $candidate->international_profession) }}" required
                            placeholder="e.g., Housekeeper, Nanny, Driver"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div class="sm:col-span-2">
                        <label class="flex items-center cursor-pointer p-4 bg-purple-50 rounded-xl hover:shadow-lg transition">
                            <input type="checkbox" name="has_driver_license" value="1" {{ $candidate->has_driver_license ? 'checked' : '' }}
                                class="w-6 h-6 text-purple-600 rounded">
                            <span class="ml-3 font-bold text-gray-700">I have a driver's license</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-step" data-step="3" style="display: none;">
            <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 mb-6 bg-gradient-to-br from-green-50 to-emerald-50">
                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black text-gray-800 mb-6 sm:mb-8 flex items-center">
                    <span class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center text-2xl sm:text-3xl mr-4 flex-shrink-0">✈️</span>
                    <span>Travel Documents</span>
                </h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label class="flex items-center cursor-pointer p-4 bg-white rounded-xl hover:shadow-lg transition mb-4">
                            <input type="checkbox" name="has_passport" value="1" {{ $candidate->has_passport ? 'checked' : '' }}
                                class="w-6 h-6 text-purple-600 rounded">
                            <span class="ml-3 font-bold text-gray-700">🛂 I have a valid passport</span>
                        </label>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Passport Number</label>
                        <input type="text" name="passport_number" value="{{ old('passport_number', $candidate->passport_number) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="flex items-center cursor-pointer p-4 bg-white rounded-xl hover:shadow-lg transition mb-4">
                            <input type="checkbox" name="has_valid_police_clearance" value="1" {{ $candidate->has_valid_police_clearance ? 'checked' : '' }}
                                class="w-6 h-6 text-purple-600 rounded">
                            <span class="ml-3 font-bold text-gray-700">👮 I have valid police clearance</span>
                        </label>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Police Clearance Number</label>
                        <input type="text" name="police_clearance_number" value="{{ old('police_clearance_number', $candidate->police_clearance_number) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div class="sm:col-span-2">
                        <label class="flex items-center cursor-pointer p-4 bg-white rounded-xl hover:shadow-lg transition mb-4">
                            <input type="checkbox" name="has_medical_certificate" value="1" {{ $candidate->has_medical_certificate ? 'checked' : '' }}
                                class="w-6 h-6 text-purple-600 rounded">
                            <span class="ml-3 font-bold text-gray-700">🏥 I have a valid medical certificate</span>
                        </label>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Medical Certificate Number</label>
                        <input type="text" name="medical_certificate_number" value="{{ old('medical_certificate_number', $candidate->medical_certificate_number) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition"
                            placeholder="e.g., MED-2024-12345">
                    </div>
                </div>
            </div>
        </div>

        <div class="form-step" data-step="4" style="display: none;">
            <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 mb-6">
                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black text-gray-800 mb-6 sm:mb-8 flex items-center">
                    <span class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center text-2xl sm:text-3xl mr-4 flex-shrink-0">🌍</span>
                    <span>International Work Experience</span>
                </h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                    <div class="sm:col-span-2 lg:col-span-3">
                        <label class="flex items-center cursor-pointer p-4 bg-orange-50 rounded-xl hover:shadow-lg transition">
                            <input type="checkbox" name="worked_abroad_before" value="1" {{ $candidate->worked_abroad_before ? 'checked' : '' }}
                                class="w-6 h-6 text-purple-600 rounded">
                            <span class="ml-3 font-bold text-gray-700">I have worked abroad before</span>
                        </label>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Previous Country</label>
                        <input type="text" name="previous_country" value="{{ old('previous_country', $candidate->previous_country) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">From Year</label>
                        <input type="number" name="work_abroad_from_year" value="{{ old('work_abroad_from_year', $candidate->work_abroad_from_year) }}" min="1990" max="2025"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">To Year</label>
                        <input type="number" name="work_abroad_to_year" value="{{ old('work_abroad_to_year', $candidate->work_abroad_to_year) }}" min="1990" max="2025"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>
                </div>
            </div>
        </div>

        <div class="form-step" data-step="5" style="display: none;">
            <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 mb-6">
                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black text-gray-800 mb-6 sm:mb-8 flex items-center">
                    <span class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl flex items-center justify-center text-2xl sm:text-3xl mr-4 flex-shrink-0">👨‍👩‍👧‍👦</span>
                    <span>Next of Kin</span>
                </h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Full Name</label>
                        <input type="text" name="next_of_kin_name" value="{{ old('next_of_kin_name', $candidate->next_of_kin_name) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">ID Number</label>
                        <input type="text" name="next_of_kin_id" value="{{ old('next_of_kin_id', $candidate->next_of_kin_id) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Relationship</label>
                        <input type="text" name="next_of_kin_relationship" value="{{ old('next_of_kin_relationship', $candidate->next_of_kin_relationship) }}" placeholder="e.g., Mother, Brother"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Phone Number</label>
                        <input type="text" name="next_of_kin_phone" value="{{ old('next_of_kin_phone', $candidate->next_of_kin_phone) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>
                </div>
            </div>

            <!-- <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 mb-6">
                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black text-gray-800 mb-6 sm:mb-8 flex items-center">
                    <span class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center text-2xl sm:text-3xl mr-4 flex-shrink-0">🤝</span>
                    <span>Guarantor</span>
                </h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Full Name</label>
                        <input type="text" name="guarantor_name" value="{{ old('guarantor_name', $candidate->guarantor_name) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">ID Number</label>
                        <input type="text" name="guarantor_id" value="{{ old('guarantor_id', $candidate->guarantor_id) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Relationship</label>
                        <input type="text" name="guarantor_relationship" value="{{ old('guarantor_relationship', $candidate->guarantor_relationship) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Phone Number</label>
                        <input type="text" name="guarantor_phone" value="{{ old('guarantor_phone', $candidate->guarantor_phone) }}"
                            class="w-full px-4 py-3 sm:px-6 sm:py-4 text-base border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition">
                    </div>
                </div>
            </div> -->

            </div>

        <div class="form-step" data-step="6" style="display: none;">
            <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 mb-6 bg-gradient-to-br from-purple-50 to-pink-50">
                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black text-gray-800 mb-6 sm:mb-8 flex items-center justify-center">
                    <span class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-2xl sm:text-3xl mr-4 flex-shrink-0">✅</span>
                    <span>Review Your Information</span>
                </h3>
                
                <div class="text-center mb-8">
                    <p class="text-gray-600 text-lg mb-4">Please review all the information you've entered before submitting.</p>
                    <p class="text-purple-600 font-bold">You can use the "Previous" button to go back and make any changes.</p>
                </div>

                <div class="max-w-2xl mx-auto">
                    <div class="glass-card p-6 rounded-2xl mb-6">
                        <div class="flex items-center justify-center space-x-4 mb-4">
                            <div class="text-5xl">📋</div>
                            <div>
                                <h4 class="text-xl font-black text-gray-800">Personal Information</h4>
                                <p class="text-gray-600 text-sm">Completed</p>
                            </div>
                            <div class="text-3xl text-green-500">✓</div>
                        </div>
                    </div>

                    <div class="glass-card p-6 rounded-2xl mb-6">
                        <div class="flex items-center justify-center space-x-4 mb-4">
                            <div class="text-5xl">💼</div>
                            <div>
                                <h4 class="text-xl font-black text-gray-800">Professional Information</h4>
                                <p class="text-gray-600 text-sm">Completed</p>
                            </div>
                            <div class="text-3xl text-green-500">✓</div>
                        </div>
                    </div>

                    <div class="glass-card p-6 rounded-2xl mb-6">
                        <div class="flex items-center justify-center space-x-4 mb-4">
                            <div class="text-5xl">✈️</div>
                            <div>
                                <h4 class="text-xl font-black text-gray-800">Travel Documents</h4>
                                <p class="text-gray-600 text-sm">Completed</p>
                            </div>
                            <div class="text-3xl text-green-500">✓</div>
                        </div>
                    </div>

                    <div class="glass-card p-6 rounded-2xl mb-6">
                        <div class="flex items-center justify-center space-x-4 mb-4">
                            <div class="text-5xl">🌍</div>
                            <div>
                                <h4 class="text-xl font-black text-gray-800">Work Experience</h4>
                                <p class="text-gray-600 text-sm">Completed</p>
                            </div>
                            <div class="text-3xl text-green-500">✓</div>
                        </div>
                    </div>

                    <div class="glass-card p-6 rounded-2xl mb-8">
                        <div class="flex items-center justify-center space-x-4 mb-4">
                            <div class="text-5xl">👨‍👩‍👧‍👦</div>
                            <div>
                                <h4 class="text-xl font-black text-gray-800">Emergency Contacts</h4>
                                <p class="text-gray-600 text-sm">Completed</p>
                            </div>
                            <div class="text-3xl text-green-500">✓</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 justify-between">
            <button type="button" id="prevBtn" onclick="changeStep(-1)" 
                    class="order-2 sm:order-1 w-full sm:w-auto bg-gray-200 text-gray-800 font-bold py-4 px-8 rounded-xl hover:bg-gray-300 transition text-lg"
                    style="display: none;">
                ← Previous
            </button>
            
            <button type="button" id="nextBtn" onclick="changeStep(1)" 
                    class="order-1 sm:order-2 w-full sm:w-auto bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-bold py-4 px-8 rounded-xl hover:shadow-2xl transition-all hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 text-lg">
                Next →
            </button>
            
            <button type="submit" id="submitBtn" 
                    class="order-1 sm:order-2 w-full sm:w-auto bg-gradient-to-r from-green-600 to-emerald-600 text-white font-bold py-4 px-8 rounded-xl hover:shadow-2xl transition-all hover:from-green-700 hover:to-emerald-700 transform hover:scale-105 text-lg"
                    style="display: none;">
                <div class="flex items-center justify-center space-x-3">
                    <span class="text-2xl">💾</span>
                    <span>Submit Profile</span>
                </div>
            </button>
        </div>

        <div class="text-center mt-6">
            <a href="{{ route('candidate.dashboard') }}" class="text-gray-600 hover:text-gray-800 font-semibold">
                Cancel and Return to Dashboard
            </a>
        </div>
    </form>
</section>

<script>
let currentStep = 1;
const totalSteps = 6;

function toggleInstitution() {
    const edu = document.getElementById('education').value;
    const container = document.getElementById('institution_container');
    const input = document.getElementById('issuing_institution');
    
    // Higher levels that require institution
    const higherLevels = ['Certificate', 'Diploma', 'Degree', 'Masters', 'PhD'];
    
    if (higherLevels.includes(edu)) {
        container.style.display = 'block';
        input.setAttribute('required', 'required');
    } else {
        container.style.display = 'none';
        input.removeAttribute('required');
        input.value = ''; // Optional: clear value
    }
}

// Validation function for Step 1 (Personal Information)
function validateStep1() {
    // UPDATED: Removed sub_county and ward from validation
    const requiredFields = [
        { id: 'first_name', label: 'First Name' },
        { id: 'last_name', label: 'Last Name' },
        { id: 'national_id', label: 'National ID' },
        { id: 'phone', label: 'Phone' },
        { id: 'email', label: 'Email' },
        { id: 'gender', label: 'Gender' },
        { id: 'age', label: 'Age' },
        { id: 'marital_status', label: 'Marital Status' },
        { id: 'number_of_children', label: 'Number of Children' },
        { id: 'religion', label: 'Religion' },
        { id: 'county', label: 'County' }
    ];

    let missingFields = [];
    let isValid = true;

    requiredFields.forEach(field => {
        const element = document.getElementById(field.id);
        if (!element || !element.value.trim()) {
            missingFields.push(field.label);
            isValid = false;
            
            // Add error styling
            if (element) {
                element.classList.add('border-red-500');
                element.classList.remove('border-gray-200');
            }
        } else {
            // Remove error styling if field is filled
            if (element) {
                element.classList.remove('border-red-500');
                element.classList.add('border-gray-200');
            }
        }
    });

    // Show validation alert if there are missing fields
    const validationAlert = document.getElementById('validationAlert');
    const validationMessage = document.getElementById('validationMessage');

    if (!isValid) {
        validationMessage.innerHTML = `Please fill in the following required fields:<br><strong>${missingFields.join(', ')}</strong>`;
        validationAlert.style.display = 'block';
        
        // Scroll to the alert
        validationAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            validationAlert.style.display = 'none';
        }, 5000);
    } else {
        validationAlert.style.display = 'none';
    }

    return isValid;
}

function showStep(step) {
    // Hide all steps
    document.querySelectorAll('.form-step').forEach(el => {
        el.style.display = 'none';
    });
    
    // Show current step
    const currentStepEl = document.querySelector(`.form-step[data-step="${step}"]`);
    if (currentStepEl) {
        currentStepEl.style.display = 'block';
    }
    
    // Update progress circles
    document.querySelectorAll('.step-circle').forEach((circle, index) => {
        const stepNum = index + 1;
        const parentDiv = circle.closest('[data-step]');
        const label = parentDiv.querySelector('p');
        
        if (stepNum < step) {
            // Completed steps
            circle.classList.remove('active', 'bg-gray-200');
            circle.classList.add('bg-gradient-to-br', 'from-green-500', 'to-emerald-500');
            circle.innerHTML = '✓';
            circle.classList.remove('text-gray-500');
            circle.classList.add('text-white');
            label.classList.remove('text-gray-400');
            label.classList.add('text-green-600', 'font-bold');
        } else if (stepNum === step) {
            // Current step
            circle.classList.remove('bg-gray-200', 'from-green-500', 'to-emerald-500');
            circle.classList.add('active', 'bg-gradient-to-br', 'from-purple-500', 'to-pink-500');
            circle.innerHTML = stepNum;
            circle.classList.remove('text-gray-500');
            circle.classList.add('text-white');
            label.classList.remove('text-gray-400', 'text-green-600');
            label.classList.add('text-purple-600', 'font-bold');
        } else {
            // Future steps
            circle.classList.remove('active', 'from-purple-500', 'to-pink-500', 'from-green-500', 'to-emerald-500');
            circle.classList.add('bg-gray-200');
            circle.innerHTML = stepNum;
            circle.classList.remove('text-white');
            circle.classList.add('text-gray-500');
            label.classList.remove('text-purple-600', 'text-green-600', 'font-bold');
            label.classList.add('text-gray-400');
        }
    });
    
    // Update progress bar
    const progressPercentage = ((step - 1) / (totalSteps - 1)) * 100;
    document.getElementById('progressBar').style.width = progressPercentage + '%';
    
    // Update buttons
    document.getElementById('prevBtn').style.display = step === 1 ? 'none' : 'block';
    document.getElementById('nextBtn').style.display = step === totalSteps ? 'none' : 'block';
    document.getElementById('submitBtn').style.display = step === totalSteps ? 'block' : 'none';
    
    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function changeStep(direction) {
    const newStep = currentStep + direction;
    
    // If moving forward from step 1, validate first
    if (currentStep === 1 && direction === 1) {
        if (!validateStep1()) {
            return; // Don't proceed if validation fails
        }
    }
    
    if (newStep >= 1 && newStep <= totalSteps) {
        currentStep = newStep;
        showStep(currentStep);
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    showStep(1);
    toggleInstitution(); // Run once to set initial state
    
    // Add real-time validation for Step 1 fields
    const step1Fields = [
        'first_name', 'last_name', 'national_id', 'phone', 'email', 
        'gender', 'age', 'marital_status', 'number_of_children', 
        'religion', 'county'
    ];
    
    step1Fields.forEach(fieldId => {
        const element = document.getElementById(fieldId);
        if (element) {
            element.addEventListener('input', function() {
                // Remove error styling when user starts typing
                if (this.value.trim()) {
                    this.classList.remove('border-red-500');
                    this.classList.add('border-gray-200');
                }
            });
            
            element.addEventListener('change', function() {
                // Remove error styling when user changes value
                if (this.value.trim()) {
                    this.classList.remove('border-red-500');
                    this.classList.add('border-gray-200');
                }
            });
        }
    });
});
</script>

<style>
.step-circle {
    transition: all 0.3s ease;
}

.step-circle.active {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(168, 85, 247, 0);
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* Shake animation for validation errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.border-red-500 {
    animation: shake 0.5s;
}
</style>

@endsection