@extends('layouts.candidate')

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

@section('content')

<style>
    /* ========================================= */
    /* DASHBOARD SPECIFIC STYLES                 */
    /* ========================================= */
    
    /* Gradient Animation */
    .animated-bg {
        background: linear-gradient(-45deg, #1a56db, #1e429f, #2563eb, #1d4ed8);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
    }
    @keyframes gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Glassmorphism Effects */
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .glass-card {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    /* Hover Effects */
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        border-color: rgba(37, 99, 235, 0.3);
    }

    /* Floating Animation */
    .float-animation {
        animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
    }

    /* Badges */
    .status-badge {
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .status-pending { background-color: #fef3c7; color: #d97706; }
    .status-active { background-color: #d1fae5; color: #059669; }

    /* Modal Styles */
    #passwordModal {
        transition: opacity 0.3s ease;
    }
    #passwordModal.hidden {
        opacity: 0;
        pointer-events: none;
    }
    #passwordModal:not(.hidden) {
        opacity: 1;
        pointer-events: auto;
    }

    /* PIPELINE/JOURNEY STYLES */
    .pipeline-step .icon {
        transition: all 0.3s ease;
    }
    .pipeline-step.completed .icon {
        background-color: #10B981; /* Emerald 500 */
        color: white;
        transform: scale(1.1);
    }
    .pipeline-step.in_progress .icon {
        background-color: #3B82F6; /* Blue 500 */
        color: white;
        animation: pulse 2s infinite;
    }
    .pipeline-step.pending .icon {
        background-color: #E5E7EB; /* Gray 200 */
        color: #6B7280; /* Gray 500 */
    }
    .pipeline-line {
        transition: background-color 0.5s ease;
    }
</style>

@if(!$candidate->has_paid_registration_fee)
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 pb-2">
    <div class="glass-card border-2 border-blue-400 rounded-2xl p-4 md:p-6 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50">
        <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0">
            <div class="flex items-center space-x-3 md:space-x-4">
                <span class="text-3xl md:text-4xl">💡</span>
                <div>
                    <h3 class="text-lg md:text-xl font-black text-blue-900">Complete Your Profile</h3>
                    <p class="text-sm md:text-base text-blue-700 font-semibold">Complete your profile to activate your account</p>
                </div>
            </div>
            <a href="{{ route('candidate.profile.edit') }}" 
               class="w-full md:w-auto bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-black px-6 py-3 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition text-center whitespace-nowrap shadow-lg hover:shadow-xl">
                📝 Complete Profile →
            </a>
        </div>
    </div>
</div>
@endif

<section class="animated-bg py-8 md:py-16 relative overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-10 left-10 w-32 md:w-64 h-32 md:h-64 bg-white/10 rounded-full blur-3xl float-animation"></div>
        <div class="absolute bottom-10 right-10 w-40 md:w-80 h-40 md:h-80 bg-white/10 rounded-full blur-3xl float-animation" style="animation-delay: 1s;"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="glass p-6 md:p-8 rounded-3xl md:rounded-[3rem]">
            <div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
                <div class="text-center md:text-left">
                    <h1 class="text-3xl md:text-6xl font-black text-white mb-2 md:mb-3">
                        Welcome, {{ $candidate->first_name }}! 👋
                    </h1>
                    <p class="text-lg md:text-2xl text-white/90">
                        Your ID: <span class="font-bold text-yellow-300">{{ $candidate->majira_id }}</span>
                        @if($candidate->has_paid_registration_fee)
                            <span class="ml-2 px-3 py-1 bg-green-500 text-white text-sm font-bold rounded-full">✓ VERIFIED</span>
                        @else
                            <span class="ml-2 px-3 py-1 bg-blue-400/80 text-white text-sm font-bold rounded-full">📝 Complete Registration</span>
                        @endif
                    </p>
                </div>
                <div class="text-6xl md:text-8xl float-animation">
                    ✈️
                </div>
            </div>
        </div>
    </div>
</section>

<!-- MY JOURNEY PIPELINE -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-4 md:-mt-8 mb-8 md:mb-12 relative z-20">
    <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8">
        <h2 class="text-xl md:text-3xl font-black text-gray-800 mb-6 md:mb-8 text-center">🚀 My Journey</h2>
        @if(!empty($pipeline) && $pipeline[0]['status'] !== 'pending')
            <div class="relative flex flex-col md:flex-row justify-between w-full">
                @foreach($pipeline as $index => $stage)
                    @php
                        $isCompleted = $stage['status'] === 'completed';
                        $isInProgress = $stage['status'] === 'in_progress';
                        $isPending = $stage['status'] === 'pending';
                    @endphp
                    
                    <!-- Line Connector (not for the last item) -->
                    @if(!$loop->last)
                        <div class="hidden md:block absolute top-8 left-0 w-full h-1 transform -translate-y-1/2">
                            <div class="pipeline-line h-full w-full {{ $isCompleted ? 'bg-emerald-500' : 'bg-gray-200' }}"></div>
                        </div>
                    @endif
                     <!-- Vertical Line for mobile -->
                    @if(!$loop->last)
                        <div class="md:hidden absolute top-0 left-8 w-1 h-full transform -translate-x-1/2 mt-8">
                             <div class="pipeline-line h-full w-full {{ $isCompleted ? 'bg-emerald-500' : 'bg-gray-200' }}"></div>
                        </div>
                    @endif

                    <div class="pipeline-step relative z-10 flex md:flex-col items-start md:items-center text-center mb-6 md:mb-0 {{ $stage['status'] }} flex-1">
                        <div class="icon w-16 h-16 rounded-full flex-shrink-0 flex items-center justify-center text-3xl mb-0 md:mb-3 mr-4 md:mr-0">
                            {{ $isInProgress ? '⏳' : ($isCompleted ? '✓' : $stage['icon']) }}
                        </div>
                        <div class="text-left md:text-center">
                            <h3 class="text-sm md:text-base font-bold {{ $isPending ? 'text-gray-500' : 'text-gray-800' }}">{{ $stage['name'] }}</h3>
                            @if($isInProgress)
                                <p class="text-xs md:text-sm text-blue-600 font-semibold mt-1">{{ $stage['description'] }}</p>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <div class="text-5xl mb-4">📭</div>
                <p class="text-gray-500 font-semibold">Your journey begins once you apply for a job.</p>
                 <a href="{{ route('candidate.jobs.index') }}" 
                   class="inline-block mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg text-sm transition">
                    Browse Jobs →
                </a>
            </div>
        @endif
    </div>
</section>

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

@if(session('info'))
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-6 md:mb-8 relative z-20">
        <div class="glass-card border-2 border-blue-400 rounded-2xl p-4 md:p-6">
            <div class="flex items-center space-x-3 md:space-x-4">
                <span class="text-3xl md:text-5xl">💡</span>
                <div class="flex-1">
                    <h3 class="text-base md:text-xl font-bold text-blue-800 mb-1">Next Step</h3>
                    <p class="text-sm md:text-base text-blue-700">{{ session('info') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8 md:mb-12 relative z-20">
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6">
        
        <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8 card-hover group">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-3 md:mb-4">
                <div class="mb-2 md:mb-0">
                    <p class="text-xs font-bold text-gray-500 uppercase mb-1 md:mb-2">Profile</p>
                    <h3 class="text-3xl md:text-5xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                        {{ $stats['profile_completion'] ?? 0 }}%
                    </h3>
                </div>
                <div class="w-10 h-10 md:w-16 md:h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl md:rounded-2xl flex items-center justify-center text-xl md:text-3xl group-hover:scale-110 transition-transform">
                    📊
                </div>
            </div>
            <div class="h-2 md:h-3 bg-gray-200 rounded-full overflow-hidden">
                <div class="h-2 md:h-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full transition-all duration-1000" 
                     style="width: {{ $stats['profile_completion'] ?? 0 }}%"></div>
            </div>
            @if(($stats['profile_completion'] ?? 0) < 100)
            <a href="{{ route('candidate.profile.edit') }}" class="inline-block mt-2 md:mt-4 text-xs md:text-sm font-bold text-blue-600 hover:underline">
                Complete →
            </a>
            @endif
        </div>

        <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8 card-hover group">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-3 md:mb-4">
                <div class="mb-2 md:mb-0">
                    <p class="text-xs font-bold text-gray-500 uppercase mb-1 md:mb-2">Applications</p>
                    <h3 class="text-3xl md:text-5xl font-black bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                        {{ $stats['total_applications'] ?? 0 }}
                    </h3>
                </div>
                <div class="w-10 h-10 md:w-16 md:h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl md:rounded-2xl flex items-center justify-center text-xl md:text-3xl group-hover:scale-110 transition-transform">
                    📝
                </div>
            </div>
            <p class="text-xs md:text-sm text-gray-600 font-semibold">Total submitted</p>
        </div>

        <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8 card-hover group">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-3 md:mb-4">
                <div class="mb-2 md:mb-0">
                    <p class="text-xs font-bold text-gray-500 uppercase mb-1 md:mb-2">Shortlisted</p>
                    <h3 class="text-3xl md:text-5xl font-black bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                        {{ $stats['shortlisted'] ?? 0 }}
                    </h3>
                </div>
                <div class="w-10 h-10 md:w-16 md:h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl md:rounded-2xl flex items-center justify-center text-xl md:text-3xl group-hover:scale-110 transition-transform">
                    ⭐
                </div>
            </div>
            <p class="text-xs md:text-sm text-gray-600 font-semibold">Under review</p>
        </div>

        <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8 card-hover group">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-3 md:mb-4">
                <div class="mb-2 md:mb-0">
                    <p class="text-xs font-bold text-gray-500 uppercase mb-1 md:mb-2">Interviews</p>
                    <h3 class="text-3xl md:text-5xl font-black bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">
                        {{ $stats['interviews'] ?? 0 }}
                    </h3>
                </div>
                <div class="w-10 h-10 md:w-16 md:h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl md:rounded-2xl flex items-center justify-center text-xl md:text-3xl group-hover:scale-110 transition-transform">
                    💼
                </div>
            </div>
            <p class="text-xs md:text-sm text-gray-600 font-semibold">Scheduled</p>
        </div>

    </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 md:pb-20">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
        
        <div class="lg:col-span-2">
            <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8">
                <div class="flex items-center justify-between mb-6 md:mb-8">
                    <h2 class="text-xl md:text-3xl font-black text-gray-800 flex items-center">
                        <span class="text-2xl md:text-4xl mr-2 md:mr-3">🎯</span>
                        <span class="hidden sm:inline">Top Matched Jobs</span>
                        <span class="sm:hidden">Jobs</span>
                    </h2>
                    <a href="{{ route('candidate.jobs.index') }}" class="text-purple-600 font-bold hover:underline flex items-center text-sm md:text-base">
                        View All
                        <span class="ml-1">→</span>
                    </a>
                </div>

                <div class="space-y-4 md:space-y-6">
                    @forelse($matchedDemands ?? [] as $match)
                        <div class="bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200 rounded-xl md:rounded-2xl p-4 md:p-6 card-hover group">
                            <div class="flex flex-col md:flex-row justify-between items-start mb-4 space-y-3 md:space-y-0">
                                <div class="flex-1 w-full md:w-auto">
                                    <div class="flex items-start space-x-2 md:space-x-3 mb-3 md:mb-2">
                                        <span class="text-2xl md:text-3xl flex-shrink-0">🌍</span>
                                        <div class="flex-1 min-w-0">
                                            <h3 class="text-lg md:text-2xl font-black text-gray-800 break-words">
                                                {{ $match['demand']->job_title ?: 'Job Opportunity' }}
                                            </h3>
                                            <p class="text-sm md:text-base text-gray-600 font-semibold">{{ $match['demand']->country }}</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-4 space-y-2 sm:space-y-0 mt-3 md:mt-4">
                                        <div class="flex items-center space-x-2">
                                            <span class="text-lg md:text-xl">💰</span>
                                            <span class="text-base md:text-xl font-black text-green-600">
                                                {{ $match['demand']->salary_currency }} {{ number_format($match['demand']->salary_amount) }}/mo
                                            </span>
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-lg md:text-xl">👥</span>
                                            <span class="text-sm md:text-base font-bold text-gray-700">{{ $match['demand']->positions_available }} positions</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="text-center w-full md:w-auto md:ml-4">
                                    <div class="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl md:rounded-2xl flex items-center justify-center mb-2 mx-auto">
                                        <div class="text-2xl md:text-3xl font-black text-white">{{ $match['score'] }}%</div>
                                    </div>
                                    <p class="text-xs font-bold text-purple-600">MATCH</p>
                                </div>
                            </div>

                            <a href="{{ route('candidate.jobs.show', $match['demand']) }}" 
                               class="block btn-primary text-white font-bold py-3 px-6 rounded-xl text-center group-hover:shadow-2xl text-sm md:text-base bg-blue-600 hover:bg-blue-700 transition">
                                View & Apply →
                            </a>
                        </div>
                    @empty
                        <div class="bg-blue-50 rounded-xl md:rounded-2xl p-8 md:p-12 text-center">
                            <div class="text-6xl md:text-8xl mb-4">🔍</div>
                            <h3 class="text-xl md:text-2xl font-bold text-gray-800 mb-3">No Matched Jobs Yet</h3>
                            <p class="text-sm md:text-base text-gray-600 mb-6">Complete your profile to get better job matches!</p>
                            <a href="{{ route('candidate.profile.edit') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 md:px-8 py-3 rounded-xl text-sm md:text-base transition">
                                Complete Profile →
                            </a>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="space-y-6">
            
            <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8">
                <h2 class="text-xl md:text-2xl font-black text-gray-800 mb-4 md:mb-6 flex items-center">
                    <span class="text-2xl md:text-3xl mr-2">📋</span>
                    My Applications
                </h2>

                <div class="space-y-3 md:space-y-4 max-h-[400px] md:max-h-[500px] overflow-y-auto">
                    @forelse($applications ?? [] as $application)
                        <div class="bg-gradient-to-br from-blue-50 to-cyan-50 border-2 border-blue-200 rounded-xl p-3 md:p-4 card-hover">
                            <div class="flex items-start space-x-2 md:space-x-3">
                                <span class="text-2xl md:text-3xl flex-shrink-0">🌍</span>
                                <div class="flex-1 min-w-0">
                                    <h4 class="text-sm md:text-base font-black text-gray-800 break-words">{{ $application->job_title ?: $application->demand_sn }}</h4>
                                    <p class="text-xs md:text-sm text-gray-600 font-semibold">{{ $application->country }}</p>
                                    <span class="inline-block mt-2 px-2 md:px-3 py-1 rounded-full text-xs font-bold
                                        {{ $application->pivot->status === 'shortlisted' ? 'bg-green-100 text-green-800' : 
                                           ($application->pivot->status === 'applied' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800') }}">
                                        {{ ucfirst($application->pivot->status) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-8 md:py-12">
                            <div class="text-5xl md:text-6xl mb-4">📭</div>
                            <p class="text-sm md:text-base text-gray-500 font-semibold">No applications yet</p>
                        </div>
                    @endforelse
                </div>

                <a href="{{ route('candidate.jobs.index') }}" 
                   class="block mt-4 md:mt-6 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-xl text-center hover:shadow-2xl text-sm md:text-base transition">
                    Browse All Jobs →
                </a>
            </div>

            <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8 bg-gradient-to-br from-purple-50 to-pink-50">
                <h3 class="text-lg md:text-xl font-black text-gray-800 mb-4">⚡ Quick Actions</h3>
                <div class="space-y-3">
                    <a href="{{ route('candidate.profile.edit') }}" class="block p-3 md:p-4 bg-white rounded-xl hover:shadow-lg transition">
                        <div class="flex items-center space-x-3">
                            <span class="text-xl md:text-2xl">👤</span>
                            <span class="text-sm md:text-base font-bold text-gray-800">Update Profile</span>
                        </div>
                    </a>
                    <a href="{{ route('candidate.documents.index') }}" class="block p-3 md:p-4 bg-white rounded-xl hover:shadow-lg transition">
                        <div class="flex items-center space-x-3">
                            <span class="text-xl md:text-2xl">📄</span>
                            <span class="text-sm md:text-base font-bold text-gray-800">Upload Documents</span>
                        </div>
                    </a>
                    <a href="{{ route('candidate.password.edit') }}" class="block p-3 md:p-4 bg-white rounded-xl hover:shadow-lg transition">
                        <div class="flex items-center space-x-3">
                            <span class="text-xl md:text-2xl">🔐</span>
                            <span class="text-sm md:text-base font-bold text-gray-800">Change Password</span>
                        </div>
                    </a>
                    <a href="{{ route('candidate.jobs.index') }}" class="block p-3 md:p-4 bg-white rounded-xl hover:shadow-lg transition">
                        <div class="flex items-center space-x-3">
                            <span class="text-xl md:text-2xl">🔍</span>
                            <span class="text-sm md:text-base font-bold text-gray-800">Search Jobs</span>
                        </div>
                    </a>
                </div>
            </div>

        </div>

    </div>
</section>

<div id="passwordModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
    <div class="glass-card rounded-2xl shadow-2xl max-w-md w-full mx-4 overflow-hidden transform transition-all scale-100 p-6 bg-white">
        <div class="text-center mb-6">
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 mb-4">
                <i class="fas fa-shield-alt text-3xl text-blue-600"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900">Security Check</h3>
            <p class="text-sm text-gray-500 mt-2">
                We generated a secure password for you. Would you like to keep it or create your own?
            </p>
        </div>
        
        <div class="flex flex-col space-y-3">
            <button onclick="changePassword()" class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-3 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm transition">
                Create My Own Password
            </button>
            <button onclick="keepPassword()" class="w-full inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-3 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm transition">
                Keep Generated Password
            </button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Check for 'welcome' param in URL
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('welcome')) {
            document.getElementById('passwordModal').classList.remove('hidden');
        }
    });

    function keepPassword() {
        document.getElementById('passwordModal').classList.add('hidden');
        // Optional: Remove query param without refreshing
        const url = new URL(window.location);
        url.searchParams.delete('welcome');
        window.history.pushState({}, '', url);
    }

    function changePassword() {
        // Redirect to the dedicated password change route
        window.location.href = "{{ route('candidate.password.edit') }}";
    }
</script>

@endsection