@extends('layouts.public')

@section('title', 'Apply for a Job - M-Ajira')

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* Custom Colors - Professional Blue Theme */
        :root {
            --primary-blue: #1a56db;
            --primary-blue-dark: #1e429f;
            --accent-orange: #f59e0b;
            --light-gray: #f8fafc;
        }
        
        .bg-primary { background-color: var(--primary-blue); }
        .text-primary { color: var(--primary-blue); }
        .border-primary { border-color: var(--primary-blue); }
        
        /* ----------------------------------------- */
        /* STEPPER STYLES (Horizontal Layout)        */
        /* ----------------------------------------- */
        .step-container {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 100%;
            position: relative;
            padding-top: 10px;
        }

        .step-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 10;
            width: 50px;
        }

        .step-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            background-color: white; 
            border: 2px solid #e5e7eb;
            margin-bottom: 10px;
        }

        .step-label-container {
            position: absolute;
            top: 60px;
            width: 140px;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
        }

        .step-label-title {
            font-size: 0.75rem;
            font-weight: 700;
            margin-bottom: 2px;
            text-transform: uppercase;
        }

        .step-label-desc {
            font-size: 0.85rem;
            line-height: 1.2;
            font-weight: 400;
        }

        .step-line {
            flex: 1;
            height: 4px;
            background-color: #e5e7eb;
            margin-top: 23px;
            margin-left: -2px;
            margin-right: -2px;
            transition: all 0.3s ease;
            z-index: 1;
        }

        /* STATES */
        .step-circle.active {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            color: white;
            box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.2);
        }

        .step-circle.completed {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            color: white;
        }

        .step-circle.inactive {
            background-color: #e2e8f0;
            border-color: #cbd5e1;
            color: #64748b;
        }

        .step-line.completed {
            background-color: var(--primary-blue);
        }

        .text-active { color: var(--primary-blue); }
        .text-inactive { color: #94a3b8; }
        
        /* ----------------------------------------- */
        /* GENERAL FORM STYLES                       */
        /* ----------------------------------------- */
        .form-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .upload-zone {
            border: 2px dashed #d1d5db;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: #f9fafb;
        }
        
        .upload-zone:hover {
            border-color: var(--primary-blue);
            background-color: #eff6ff;
        }
        
        .upload-zone.has-file {
            border-color: #10b981;
            background-color: #ecfdf5;
        }
        
        /* New Preview Styles */
        .preview-container {
            margin-top: 15px;
            display: none; /* Hidden by default */
        }
        
        .preview-image {
            max-width: 100%;
            max-height: 200px;
            object-fit: contain;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin: 0 auto;
        }

        .preview-toggle-btn {
            color: var(--primary-blue);
            font-size: 0.875rem;
            font-weight: 500;
            margin-top: 8px;
            cursor: pointer;
            display: none; /* Hidden until file selected */
        }

        .preview-toggle-btn:hover {
            text-decoration: underline;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
        }
        
        .form-step .btn-primary {
            background-color: var(--primary-blue);
            color: white;
            padding: 12px 32px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .form-step .btn-primary:hover {
            background-color: var(--primary-blue-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3);
        }
        
        .form-step .btn-secondary {
            background-color: #f59e0b;
            color: white;
            padding: 12px 32px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
        }
        
        .form-step .btn-secondary:hover {
            background-color: #d97706;
        }

        /* Countdown Circle Styles */
        .countdown-circle {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
        }
        .countdown-svg {
            width: 80px;
            height: 80px;
            transform: rotate(-90deg);
        }
        .countdown-circle-bg {
            fill: none;
            stroke: #e5e7eb;
            stroke-width: 4;
        }
        .countdown-circle-progress {
            fill: none;
            stroke: var(--primary-blue);
            stroke-width: 4;
            stroke-dasharray: 238; /* 2 * PI * r (r=38) */
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 1s linear;
        }
        .countdown-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: 1.5rem;
            color: var(--primary-blue);
        }
    </style>

    <div class="max-w-4xl mx-auto px-4 py-8">
        
        @if (session('success'))
            
            <div class="bg-white rounded-2xl shadow-lg p-12 text-center max-w-2xl mx-auto mt-10">
                <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-check text-4xl text-green-600"></i>
                </div>
                
                <h2 class="text-3xl font-bold text-gray-800 mb-2">Registration Successful!</h2>
                
                <p class="text-gray-600 text-lg mb-6 leading-relaxed">
                    An M-Pesa payment request (KSh 1,000) has been sent to your phone. 
                    <br>Please check your phone and enter your PIN.
                </p>

                @if(session('generated_password'))
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8 inline-block w-full max-w-md">
                    <p class="text-sm text-blue-800 mb-2 font-bold uppercase tracking-wider">Your Login Password</p>
                    <div class="flex items-center justify-center space-x-3">
                        <span class="text-3xl font-mono text-blue-900 font-bold tracking-widest bg-white px-4 py-2 rounded border border-blue-100" id="password-text">{{ session('generated_password') }}</span>
                        <button onclick="copyPassword()" class="text-blue-500 hover:text-blue-700 p-2" title="Copy to clipboard">
                            <i class="fas fa-copy text-xl"></i>
                        </button>
                    </div>
                    <p class="text-xs text-blue-600 mt-3">
                        <i class="fas fa-info-circle mr-1"></i> Please copy and save this password.
                    </p>
                </div>
                @endif

                <div class="mt-4">
                    <div class="countdown-circle">
                        <svg class="countdown-svg">
                            <circle class="countdown-circle-bg" cx="40" cy="40" r="38"></circle>
                            <circle class="countdown-circle-progress" id="progress-ring" cx="40" cy="40" r="38"></circle>
                        </svg>
                        <div class="countdown-text" id="countdown-number">5</div>
                    </div>
                    <p class="text-gray-500 text-sm">Redirecting to dashboard...</p>
                </div>
                
                <div class="mt-6">
                    <a href="{{ route('candidate.dashboard', ['welcome' => 1]) }}" class="inline-block bg-blue-600 text-white font-semibold px-8 py-3 rounded-lg hover:bg-blue-700 transition">
                        Go to Dashboard Now
                    </a>
                </div>
            </div>

            <script>
                function copyPassword() {
                    var password = document.getElementById("password-text").innerText;
                    navigator.clipboard.writeText(password).then(function() {
                        alert("Password copied to clipboard!");
                    });
                }

                // Countdown Logic
                let timeLeft = 5;
                const circle = document.getElementById('progress-ring');
                const radius = circle.r.baseVal.value;
                const circumference = radius * 2 * Math.PI;

                circle.style.strokeDasharray = `${circumference} ${circumference}`;
                circle.style.strokeDashoffset = 0;

                const timer = setInterval(() => {
                    timeLeft--;
                    document.getElementById('countdown-number').textContent = timeLeft;
                    
                    // Update visual circle
                    const offset = circumference - ((5 - timeLeft) / 5) * circumference;
                    circle.style.strokeDashoffset = (circumference - offset); // Fill effect or empty effect

                    if (timeLeft <= 0) {
                        clearInterval(timer);
                        window.location.href = "{{ route('candidate.dashboard', ['welcome' => 1]) }}";
                    }
                }, 1000);
            </script>

        @else
            <div class="text-center mb-4">
                <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Apply For a Job</h1>
            </div>

            <div class="mb-24 mt-8"> 
                <div class="max-w-3xl mx-auto px-2">
                    <div class="step-container">
                        
                        <div class="step-wrapper">
                            <div class="step-circle active" id="step-circle-1">1</div>
                            <div class="step-label-container">
                                <div class="step-label-title text-active" id="step-label-1">Step 1</div>
                                <div class="step-label-desc text-active" id="step-name-1">Personal<br>Details</div>
                            </div>
                        </div>
                        
                        <div class="step-line" id="step-line-1"></div>
                        
                        <div class="step-wrapper">
                            <div class="step-circle inactive" id="step-circle-2">2</div>
                            <div class="step-label-container">
                                <div class="step-label-title text-inactive" id="step-label-2">Step 2</div>
                                <div class="step-label-desc text-inactive" id="step-name-2">Upload<br>Document</div>
                            </div>
                        </div>
                        
                        <div class="step-line" id="step-line-2"></div>
                        
                        <div class="step-wrapper">
                            <div class="step-circle inactive" id="step-circle-3">3</div>
                            <div class="step-label-container">
                                <div class="step-label-title text-inactive" id="step-label-3">Step 3</div>
                                <div class="step-label-desc text-inactive" id="step-name-3">Job<br>Selection</div>
                            </div>
                        </div>
                        
                        <div class="step-line" id="step-line-3"></div>
                        
                        <div class="step-wrapper">
                            <div class="step-circle inactive" id="step-circle-4">4</div>
                            <div class="step-label-container">
                                <div class="step-label-title text-inactive" id="step-label-4">Step 4</div>
                                <div class="step-label-desc text-inactive" id="step-name-4">Confirm<br>Details</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            @if ($errors->any())
                <div class="bg-red-50 border border-red-300 text-red-800 rounded-lg p-4 mb-6">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-exclamation-circle text-red-500 mt-1"></i>
                        <div>
                            <h4 class="font-bold mb-1">Please fix the following errors:</h4>
                            <ul class="list-disc list-inside text-sm">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            <div id="validationAlert" class="bg-red-50 border border-red-300 text-red-800 rounded-lg p-4 mb-6" style="display: none;">
                <div class="flex items-start space-x-3">
                    <i class="fas fa-exclamation-circle text-red-500 mt-1"></i>
                    <div>
                        <h4 class="font-bold mb-1">Please fill in all required fields.</h4>
                        <p class="text-sm" id="validationMessage"></p>
                    </div>
                </div>
            </div>

            <form method="POST" action="{{ route('candidate.register') }}" enctype="multipart/form-data" id="applicationForm">
                @csrf
                
                <div class="form-step" id="step-1">
                    <div class="form-card p-6 md:p-8">
                        <p class="text-red-500 text-sm text-center mb-6">Please fill in all required fields.</p>
                        <h2 class="text-xl font-bold text-gray-800 mb-6 text-center">User Information</h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">First Name <span class="text-red-500">*</span></label>
                                <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}" required
                                    placeholder="First Name"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Last Name <span class="text-red-500">*</span></label>
                                <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}" required
                                    placeholder="Last Name"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Email Address <span class="text-red-500">*</span></label>
                                <input type="email" name="email" id="email" value="{{ old('email') }}" required
                                    placeholder="Email Address"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number <span class="text-red-500">*</span></label>
                                <input type="text" name="phone" id="phone" value="{{ old('phone') }}" required
                                    placeholder="Phone Number"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">ID Number <span class="text-red-500">*</span></label>
                                <input type="text" name="national_id" id="national_id" value="{{ old('national_id') }}" required
                                    placeholder="ID Number"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Passport Number <span class="text-gray-400 text-xs">(optional)</span></label>
                                <input type="text" name="passport_number" id="passport_number" value="{{ old('passport_number') }}"
                                    placeholder="Passport Number(optional)"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Gender <span class="text-red-500">*</span></label>
                                <select name="gender" id="gender" required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                                    <option value="">Select Gender</option>
                                    <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Age <span class="text-red-500">*</span></label>
                                <input type="number" name="age" id="age" value="{{ old('age') }}" required min="18" max="65"
                                    placeholder="Age"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">County <span class="text-red-500">*</span></label>
                                <input type="text" name="county" id="county" value="{{ old('county') }}" required
                                    placeholder="e.g., Nairobi"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                            </div>
                        </div>
                        
                        <div class="flex justify-center mt-8">
                            <button type="button" onclick="nextStep()" class="btn-primary px-12">
                                Next <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-step" id="step-2" style="display: none;">
                    <div class="form-card p-6 md:p-8">
                        <h2 class="text-xl font-bold text-gray-800 mb-6 text-center">Upload Documents</h2>
                        
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Upload Passport Photo</label>
                            <p class="text-orange-500 text-xs mb-3">2 inches x 2 inches with a white background</p>
                            <div class="upload-zone" id="zone-passport-photo" onclick="document.getElementById('passport_photo').click()">
                                <i class="fas fa-id-badge text-4xl text-gray-400 mb-2"></i>
                                <p class="text-gray-500 text-sm">Passport Photo <span class="text-gray-400">(optional)</span></p>
                                <button type="button" class="btn-primary mt-3 text-sm py-2 px-4">Choose File</button>
                                <input type="file" name="passport_photo" id="passport_photo" accept="image/*" class="hidden" onchange="updateUploadZone(this, 'zone-passport-photo')">
                                <p class="text-xs text-gray-400 mt-2" id="filename-passport-photo">No file chosen</p>
                                
                                <button type="button" id="toggle-passport-photo" class="preview-toggle-btn" onclick="togglePreview(event, 'passport-photo')">
                                    <i class="fas fa-eye mr-1"></i> View Preview
                                </button>
                                <div id="container-passport-photo" class="preview-container">
                                    <img id="preview-passport-photo" class="preview-image" alt="Passport Photo Preview">
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Upload ID Front</label>
                                <div class="upload-zone" id="zone-id-front" onclick="document.getElementById('id_front').click()">
                                    <i class="fas fa-id-card text-3xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-500 text-sm">Upload ID Front <span class="text-gray-400">(optional)</span></p>
                                    <button type="button" class="btn-primary mt-3 text-sm py-2 px-4">Choose File</button>
                                    <input type="file" name="id_front" id="id_front" accept="image/*" class="hidden" onchange="updateUploadZone(this, 'zone-id-front')">
                                    <p class="text-xs text-gray-400 mt-2" id="filename-id-front">No file chosen</p>
                                    
                                    <button type="button" id="toggle-id-front" class="preview-toggle-btn" onclick="togglePreview(event, 'id-front')">
                                        <i class="fas fa-eye mr-1"></i> View Preview
                                    </button>
                                    <div id="container-id-front" class="preview-container">
                                        <img id="preview-id-front" class="preview-image" alt="ID Front Preview">
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Upload ID Back</label>
                                <div class="upload-zone" id="zone-id-back" onclick="document.getElementById('id_back').click()">
                                    <i class="fas fa-id-card text-3xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-500 text-sm">Upload ID Back <span class="text-gray-400">(optional)</span></p>
                                    <button type="button" class="btn-primary mt-3 text-sm py-2 px-4">Choose File</button>
                                    <input type="file" name="id_back" id="id_back" accept="image/*" class="hidden" onchange="updateUploadZone(this, 'zone-id-back')">
                                    <p class="text-xs text-gray-400 mt-2" id="filename-id-back">No file chosen</p>
                                    
                                    <button type="button" id="toggle-id-back" class="preview-toggle-btn" onclick="togglePreview(event, 'id-back')">
                                        <i class="fas fa-eye mr-1"></i> View Preview
                                    </button>
                                    <div id="container-id-back" class="preview-container">
                                        <img id="preview-id-back" class="preview-image" alt="ID Back Preview">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Upload Passport</label>
                                <div class="upload-zone" id="zone-passport-copy" onclick="document.getElementById('passport_copy').click()">
                                    <i class="fas fa-passport text-3xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-500 text-sm">Upload Passport <span class="text-gray-400">(optional)</span></p>
                                    <button type="button" class="btn-primary mt-3 text-sm py-2 px-4">Choose File</button>
                                    <input type="file" name="passport_copy" id="passport_copy" accept="image/*,.pdf" class="hidden" onchange="updateUploadZone(this, 'zone-passport-copy')">
                                    <p class="text-xs text-gray-400 mt-2" id="filename-passport-copy">No file chosen</p>
                                    
                                    <button type="button" id="toggle-passport-copy" class="preview-toggle-btn" onclick="togglePreview(event, 'passport-copy')">
                                        <i class="fas fa-eye mr-1"></i> View Preview
                                    </button>
                                    <div id="container-passport-copy" class="preview-container">
                                        <img id="preview-passport-copy" class="preview-image" alt="Passport Copy Preview">
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Upload Good Conduct Certificate</label>
                                <div class="upload-zone" id="zone-good-conduct" onclick="document.getElementById('good_conduct').click()">
                                    <i class="fas fa-file-certificate text-3xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-500 text-sm">Good Conduct Certificate <span class="text-gray-400">(optional)</span></p>
                                    <button type="button" class="btn-primary mt-3 text-sm py-2 px-4">Choose File</button>
                                    <input type="file" name="good_conduct" id="good_conduct" accept="image/*,.pdf" class="hidden" onchange="updateUploadZone(this, 'zone-good-conduct')">
                                    <p class="text-xs text-gray-400 mt-2" id="filename-good-conduct">No file chosen</p>
                                    
                                    <button type="button" id="toggle-good-conduct" class="preview-toggle-btn" onclick="togglePreview(event, 'good-conduct')">
                                        <i class="fas fa-eye mr-1"></i> View Preview
                                    </button>
                                    <div id="container-good-conduct" class="preview-container">
                                        <img id="preview-good-conduct" class="preview-image" alt="Good Conduct Preview">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between mt-8">
                            <button type="button" onclick="prevStep()" class="btn-secondary">
                                <i class="fas fa-arrow-left mr-2"></i> Previous
                            </button>
                            <button type="button" onclick="nextStep()" class="btn-primary">
                                Next <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-step" id="step-3" style="display: none;">
                    <div class="form-card p-6 md:p-8">
                        <p class="text-red-500 text-sm text-center mb-6">Please fill in all required fields.</p>
                        
                        <h2 class="text-xl font-bold text-gray-800 mb-6 text-center">Job Selection</h2>
                        
                        <div class="mb-6">
                            <div class="upload-zone" id="zone-cv" onclick="document.getElementById('cv').click()">
                                <i class="fas fa-file-alt text-4xl text-gray-400 mb-2"></i>
                                <p class="text-gray-500 text-sm">Upload CV <span class="text-gray-400">(optional)</span></p>
                                <button type="button" class="btn-primary mt-3 text-sm py-2 px-4">Choose File</button>
                                <input type="file" name="cv" id="cv" accept=".pdf,.doc,.docx" class="hidden" onchange="updateUploadZone(this, 'zone-cv')">
                                <p class="text-xs text-gray-400 mt-2" id="filename-cv">No file chosen</p>
                                
                                </div>
                        </div>
                        
                        <div class="border-t pt-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2 text-center">Select Your Job Preferences</h3>
                            <p class="text-gray-500 text-sm mb-6 text-center">Enter your desired job/profession</p>
                            
                            <div class="max-w-md mx-auto">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Desired Job/Profession <span class="text-red-500">*</span></label>
                                <input type="text" name="international_profession" id="international_profession" value="{{ old('international_profession') }}" required
                                    placeholder="e.g., Taxi Driver, Bike Rider, Security Guard"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                                <p class="text-xs text-gray-500 mt-2">Enter the type of job you are looking for abroad</p>
                            </div>
                        </div>
                        
                        <div class="flex justify-between mt-8">
                            <button type="button" onclick="prevStep()" class="btn-secondary">
                                <i class="fas fa-arrow-left mr-2"></i> Previous
                            </button>
                            <button type="button" onclick="nextStep()" class="btn-primary">
                                Next <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-step" id="step-4" style="display: none;">
                    <div class="form-card p-6 md:p-8">
                        <h2 class="text-xl font-bold text-primary mb-6 text-center">Application Summary</h2>
                        
                        <div class="border rounded-lg p-4 mb-6">
                            <h3 class="text-lg font-bold text-primary mb-4 text-center">Application Summary</h3>
                            <h4 class="text-md font-semibold text-gray-700 mb-4 text-center border-b pb-2">Personal Details</h4>
                            
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div class="text-right text-gray-500">First Name:</div>
                                <div class="font-medium" id="summary-first-name">-</div>
                                
                                <div class="text-right text-gray-500">Surname:</div>
                                <div class="font-medium" id="summary-last-name">-</div>
                                
                                <div class="text-right text-gray-500">Email:</div>
                                <div class="font-medium" id="summary-email">-</div>
                                
                                <div class="text-right text-gray-500">Phone Number:</div>
                                <div class="font-medium" id="summary-phone">-</div>
                                
                                <div class="text-right text-gray-500">ID Number:</div>
                                <div class="font-medium" id="summary-national-id">-</div>
                                
                                <div class="text-right text-gray-500">Passport Number:</div>
                                <div class="font-medium" id="summary-passport">-</div>
                            </div>
                        </div>
                        
                        <div class="border rounded-lg p-4 mb-6">
                            <h4 class="text-md font-semibold text-primary mb-4 text-center border-b pb-2">Uploaded Documents</h4>
                            
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div class="text-right text-gray-500">Passport Photo:</div>
                                <div class="font-medium" id="summary-passport-photo">Not uploaded</div>
                                
                                <div class="text-right text-gray-500">ID Front:</div>
                                <div class="font-medium" id="summary-id-front">Not uploaded</div>
                                
                                <div class="text-right text-gray-500">ID Back:</div>
                                <div class="font-medium" id="summary-id-back">Not uploaded</div>
                                
                                <div class="text-right text-gray-500">Passport Copy:</div>
                                <div class="font-medium" id="summary-passport-copy">Not uploaded</div>
                                
                                <div class="text-right text-gray-500">Good Conduct:</div>
                                <div class="font-medium" id="summary-good-conduct">Not uploaded</div>
                                
                                <div class="text-right text-gray-500">Curriculum Vitae (CV):</div>
                                <div class="font-medium" id="summary-cv">Not uploaded</div>
                            </div>
                        </div>
                        
                        <div class="border rounded-lg p-4 mb-6">
                            <h4 class="text-md font-semibold text-primary mb-4 text-center border-b pb-2">Job Details</h4>
                            
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div class="text-right text-gray-500">Desired Job:</div>
                                <div class="font-medium" id="summary-job">-</div>
                            </div>
                        </div>
                        
                        <div class="border-2 border-primary rounded-lg p-6 bg-blue-50">
                            <h3 class="text-lg font-bold text-primary mb-4 text-center">Payment Details</h3>
                            
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">M-Pesa Phone Number</label>
                                <input type="text" name="mpesa_phone" id="mpesa_phone" value="{{ old('mpesa_phone') }}"
                                    placeholder="(optional) Another payment number"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-100">
                                <p class="text-xs text-gray-500 mt-1">Ensure this is the phone number registered with M-Pesa</p>
                            </div>
                            
                            <div class="bg-white border rounded-lg p-4">
                                <h4 class="font-bold text-gray-800 mb-2 text-center">Payment Confirmation</h4>
                                <p class="text-sm text-gray-600 text-center mb-4">
                                    To complete your application, a non-refundable fee of <strong>KSh 1,000</strong> will be required. 
                                    A payment prompt will be sent to the provided phone number.
                                </p>
                                <label class="flex items-start space-x-3 cursor-pointer">
                                    <input type="checkbox" name="payment_consent" id="payment_consent" class="w-5 h-5 mt-0.5 text-primary rounded">
                                    <span class="text-sm text-gray-700">
                                        I understand that my account will be activated after payment of <strong>KSh 1,000</strong> registration fee.
                                    </span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="flex justify-between mt-8">
                            <button type="button" onclick="prevStep()" class="btn-secondary">
                                <i class="fas fa-arrow-left mr-2"></i> Previous
                            </button>
                            <button type="submit" id="submitBtn" class="bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-8 rounded-lg transition">
                                Submit Application <i class="fas fa-check ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>

        @endif

    </div>

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

        // Navigate to next step
        function nextStep() {
            if (validateCurrentStep()) {
                if (currentStep < totalSteps) {
                    currentStep++;
                    showStep(currentStep);
                    
                    // Update summary when reaching step 4
                    if (currentStep === 4) {
                        updateSummary();
                    }
                }
            }
        }

        // Navigate to previous step
        function prevStep() {
            if (currentStep > 1) {
                currentStep--;
                showStep(currentStep);
            }
        }

        // Show specific step
        function showStep(step) {
            // Hide all steps
            document.querySelectorAll('.form-step').forEach(el => {
                el.style.display = 'none';
            });

            // Show current step
            document.getElementById(`step-${step}`).style.display = 'block';

            // Update step indicators
            for (let i = 1; i <= totalSteps; i++) {
                const circle = document.getElementById(`step-circle-${i}`);
                const labelTitle = document.getElementById(`step-label-${i}`);
                const labelDesc = document.getElementById(`step-name-${i}`);
                const line = document.getElementById(`step-line-${i}`);

                // Remove color states first
                if(labelTitle) labelTitle.classList.remove('text-active', 'text-inactive');
                if(labelDesc) labelDesc.classList.remove('text-active', 'text-inactive');

                if (i < step) {
                    // Completed
                    circle.className = 'step-circle completed';
                    circle.innerHTML = '<i class="fas fa-check"></i>';
                    
                    if(labelTitle) labelTitle.classList.add('text-active');
                    if(labelDesc) labelDesc.classList.add('text-active');
                    
                    if (line) line.className = 'step-line completed';
                } else if (i === step) {
                    // Active
                    circle.className = 'step-circle active';
                    circle.innerHTML = i;
                    
                    if(labelTitle) labelTitle.classList.add('text-active');
                    if(labelDesc) labelDesc.classList.add('text-active');
                    
                } else {
                    // Inactive
                    circle.className = 'step-circle inactive';
                    circle.innerHTML = i;
                    
                    if(labelTitle) labelTitle.classList.add('text-inactive');
                    if(labelDesc) labelDesc.classList.add('text-inactive');
                    
                    if (line) line.className = 'step-line';
                }
            }

            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // Validate current step
        function validateCurrentStep() {
            const alert = document.getElementById('validationAlert');
            const message = document.getElementById('validationMessage');
            let isValid = true;
            let missingFields = [];

            if (currentStep === 1) {
                // Validate Step 1: Personal Details
                const requiredFields = [
                    { id: 'first_name', label: 'First Name' },
                    { id: 'last_name', label: 'Last Name' },
                    { id: 'email', label: 'Email Address' },
                    { id: 'phone', label: 'Phone Number' },
                    { id: 'national_id', label: 'ID Number' },
                    { id: 'gender', label: 'Gender' },
                    { id: 'age', label: 'Age' },
                    { id: 'county', label: 'County' }
                ];

                requiredFields.forEach(field => {
                    const el = document.getElementById(field.id);
                    if (!el || !el.value.trim()) {
                        missingFields.push(field.label);
                        isValid = false;
                        if (el) {
                            el.classList.add('border-red-500');
                            el.classList.remove('border-gray-300');
                        }
                    } else {
                        if (el) {
                            el.classList.remove('border-red-500');
                            el.classList.add('border-gray-300');
                        }
                    }
                });
            }

            if (currentStep === 3) {
                // Validate Step 3: Job Selection
                const job = document.getElementById('international_profession');
                if (!job || !job.value.trim()) {
                    missingFields.push('Desired Job/Profession');
                    isValid = false;
                    if (job) {
                        job.classList.add('border-red-500');
                        job.classList.remove('border-gray-300');
                    }
                } else {
                    if (job) {
                        job.classList.remove('border-red-500');
                        job.classList.add('border-gray-300');
                    }
                }
            }

            if (!isValid) {
                message.innerHTML = `Missing: <strong>${missingFields.join(', ')}</strong>`;
                alert.style.display = 'block';
                alert.scrollIntoView({ behavior: 'smooth', block: 'center' });
                setTimeout(() => { alert.style.display = 'none'; }, 5000);
            } else {
                alert.style.display = 'none';
            }

            return isValid;
        }

        // NEW: Toggle Image Preview
        function togglePreview(event, idSuffix) {
            // Prevent event from bubbling up to the upload zone (which triggers file dialog)
            event.stopPropagation();
            
            const container = document.getElementById(`container-${idSuffix}`);
            const btn = document.getElementById(`toggle-${idSuffix}`);
            
            if (container.style.display === 'block') {
                container.style.display = 'none';
                btn.innerHTML = '<i class="fas fa-eye mr-1"></i> View Preview';
            } else {
                container.style.display = 'block';
                btn.innerHTML = '<i class="fas fa-eye-slash mr-1"></i> Hide Preview';
            }
        }

        // Update file upload zone
        function updateUploadZone(input, zoneId) {
            const idSuffix = zoneId.replace('zone-', '');
            const zone = document.getElementById(zoneId);
            const filenameEl = document.getElementById('filename-' + idSuffix);
            
            // Preview elements
            const toggleBtn = document.getElementById('toggle-' + idSuffix);
            const previewImg = document.getElementById('preview-' + idSuffix);
            const previewContainer = document.getElementById('container-' + idSuffix);
            
            if (input.files && input.files[0]) {
                const file = input.files[0];
                
                zone.classList.add('has-file');
                filenameEl.textContent = file.name;
                filenameEl.classList.remove('text-gray-400');
                filenameEl.classList.add('text-green-600', 'font-medium');
                
                // Handle Image Preview
                if (file.type.startsWith('image/') && previewImg) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        if(toggleBtn) {
                            toggleBtn.style.display = 'inline-block';
                            toggleBtn.innerHTML = '<i class="fas fa-eye mr-1"></i> View Preview';
                        }
                        if(previewContainer) previewContainer.style.display = 'none'; // Keep hidden initially
                    }
                    
                    reader.readAsDataURL(file);
                } else {
                    // Not an image (e.g. PDF) or CV
                    if(toggleBtn) toggleBtn.style.display = 'none';
                    if(previewContainer) previewContainer.style.display = 'none';
                }
                
            } else {
                zone.classList.remove('has-file');
                filenameEl.textContent = 'No file chosen';
                filenameEl.classList.add('text-gray-400');
                filenameEl.classList.remove('text-green-600', 'font-medium');
                
                if(toggleBtn) toggleBtn.style.display = 'none';
                if(previewContainer) previewContainer.style.display = 'none';
            }
        }

        // Update summary in Step 4
        function updateSummary() {
            // Personal Details
            document.getElementById('summary-first-name').textContent = document.getElementById('first_name').value || '-';
            document.getElementById('summary-last-name').textContent = document.getElementById('last_name').value || '-';
            document.getElementById('summary-email').textContent = document.getElementById('email').value || '-';
            document.getElementById('summary-phone').textContent = document.getElementById('phone').value || '-';
            document.getElementById('summary-national-id').textContent = document.getElementById('national_id').value || '-';
            document.getElementById('summary-passport').textContent = document.getElementById('passport_number').value || '-';

            // Documents
            document.getElementById('summary-passport-photo').textContent = document.getElementById('passport_photo').files[0]?.name || 'Not uploaded';
            document.getElementById('summary-id-front').textContent = document.getElementById('id_front').files[0]?.name || 'Not uploaded';
            document.getElementById('summary-id-back').textContent = document.getElementById('id_back').files[0]?.name || 'Not uploaded';
            document.getElementById('summary-passport-copy').textContent = document.getElementById('passport_copy').files[0]?.name || 'Not uploaded';
            document.getElementById('summary-good-conduct').textContent = document.getElementById('good_conduct').files[0]?.name || 'Not uploaded';
            document.getElementById('summary-cv').textContent = document.getElementById('cv').files[0]?.name || 'Not uploaded';

            // Job Details
            document.getElementById('summary-job').textContent = document.getElementById('international_profession').value || '-';

            // Pre-fill M-Pesa phone with registered phone
            const mpesaPhone = document.getElementById('mpesa_phone');
            if (!mpesaPhone.value) {
                mpesaPhone.value = document.getElementById('phone').value;
            }
        }

        // Real-time validation styling removal
        document.querySelectorAll('input, select').forEach(el => {
            el.addEventListener('input', function() {
                if (this.value.trim()) {
                    this.classList.remove('border-red-500');
                    this.classList.add('border-gray-300');
                }
            });
        });

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            // Only show stepper if the form exists (i.e., not in success mode)
            if (document.getElementById('step-1')) {
                showStep(1);
            }
        });
        
        function copyPassword() {
            var password = document.getElementById("password-text").innerText;
            navigator.clipboard.writeText(password).then(function() {
                alert("Password copied to clipboard!");
            });
        }
    </script>
@endsection