<?php $__env->startSection('title', 'Apply for ' . $job->title . ' - Step 3/5 | Munchify Careers'); ?>

<?php $__env->startSection('content'); ?>
<section class="py-12 max-w-3xl mx-auto px-4 sm:px-6">
    
    <!-- Wizard Card Wrapper -->
    <div class="bg-white rounded-3xl border border-gray-200 shadow-sm overflow-hidden animate-slide-up">
        
        <!-- Header banner -->
        <div class="bg-[#111318] p-6 md:p-8 text-white relative overflow-hidden">
            <div class="absolute w-[200px] h-[200px] bg-[#FF6B00]/20 rounded-full blur-[50px] -top-20 -right-20"></div>
            <span class="text-[10px] text-[#FFD233] uppercase font-bold tracking-wider mb-1 block">Application Form</span>
            <h2 class="text-xl font-extrabold text-white leading-none"><?php echo e($job->title); ?></h2>
        </div>

        <!-- Horizontal progress steps indicator -->
        <div class="p-6 border-b border-gray-100 flex items-center justify-between text-xs font-semibold bg-[#F9FAFB]">
            <span class="text-[#FF6B00] flex items-center gap-1.5"><i class="fa-solid fa-circle-check text-xs"></i> Personal Details</span>
            <span class="text-[#FF6B00] flex items-center gap-1.5"><i class="fa-solid fa-circle-check text-xs"></i> Experience</span>
            <span class="text-[#FF6B00] flex items-center gap-1.5"><span class="w-5 h-5 rounded-full bg-[#FF6B00] text-white flex items-center justify-center text-[10px]">3</span> Questions</span>
            <span class="text-gray-400 flex items-center gap-1.5"><span class="w-5 h-5 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-[10px]">4</span> Uploads</span>
            <span class="text-gray-400 flex items-center gap-1.5"><span class="w-5 h-5 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-[10px]">5</span> Review</span>
        </div>

        <!-- Body Form -->
        <div class="p-6 md:p-10">
            
            <?php if(empty($job->screening_questions) || count($job->screening_questions) === 0): ?>
                <!-- Skip screening questions if there are none -->
                <div class="text-center py-8">
                    <p class="text-xs text-gray-500 mb-6">No screening questions are required for this role. You can proceed directly to files upload.</p>
                    <form action="<?php echo e(route('apply.step.save', ['ulid' => $job->ulid, 'step' => 3])); ?>" method="POST">
                        <?php echo csrf_field(); ?>
                        <div class="flex justify-between border-t border-gray-100 pt-6">
                            <a href="<?php echo e(route('apply.step', ['ulid' => $job->ulid, 'step' => 2])); ?>" class="btn btn-secondary rounded-full px-6 py-3">
                                <i class="fa-solid fa-angle-left"></i> Back to Step 2
                            </a>
                            <button type="submit" class="btn btn-primary rounded-full px-8 py-3 font-bold">
                                Continue to Step 4 <i class="fa-solid fa-angle-right"></i>
                            </button>
                        </div>
                    </form>
                </div>
            <?php else: ?>
                <form action="<?php echo e(route('apply.step.save', ['ulid' => $job->ulid, 'step' => 3])); ?>" method="POST" class="space-y-6">
                    <?php echo csrf_field(); ?>
                    
                    <?php $__currentLoopData = $job->screening_questions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $question): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            // Check if there is previously submitted data
                            $prevAnswer = $wizardData['step3']['screening_answers'][$index]['answer'] ?? '';
                        ?>
                        
                        <div class="space-y-2">
                            <label class="form-label text-sm">
                                <?php echo e($question['question']); ?>

                                <?php if(isset($question['knockout']) && $question['knockout'] == true): ?>
                                    <span class="text-red-500" title="This is a required qualifying question">* (Required)</span>
                                <?php endif; ?>
                            </label>
                            
                            <?php if($question['type'] === 'boolean'): ?>
                                <div class="flex gap-4">
                                    <label class="flex items-center text-xs font-semibold text-gray-700 cursor-pointer">
                                        <input type="radio" name="answers[<?php echo e($index); ?>][answer]" value="1" 
                                               class="rounded border-gray-300 text-[#FF6B00] focus:ring-[#FF6B00] mr-2"
                                               <?php echo e($prevAnswer === true || $prevAnswer === '1' || $prevAnswer === 1 ? 'checked' : ''); ?> required>
                                        Yes
                                    </label>
                                    <label class="flex items-center text-xs font-semibold text-gray-700 cursor-pointer">
                                        <input type="radio" name="answers[<?php echo e($index); ?>][answer]" value="0" 
                                               class="rounded border-gray-300 text-[#FF6B00] focus:ring-[#FF6B00] mr-2"
                                               <?php echo e($prevAnswer === false || $prevAnswer === '0' || $prevAnswer === 0 ? 'checked' : ''); ?> required>
                                        No
                                    </label>
                                </div>
                            <?php elseif($question['type'] === 'number'): ?>
                                <input type="number" name="answers[<?php echo e($index); ?>][answer]" 
                                       class="form-input" 
                                       placeholder="e.g. 2" 
                                       value="<?php echo e($prevAnswer); ?>" required>
                            <?php elseif($question['type'] === 'select' && isset($question['options'])): ?>
                                <select name="answers[<?php echo e($index); ?>][answer]" class="form-input" required>
                                    <option value="">-- Select option --</option>
                                    <?php $__currentLoopData = $question['options']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($option); ?>" <?php echo e($prevAnswer === $option ? 'selected' : ''); ?>><?php echo e($option); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            <?php else: ?>
                                <input type="text" name="answers[<?php echo e($index); ?>][answer]" 
                                       class="form-input" 
                                       placeholder="Your answer" 
                                       value="<?php echo e($prevAnswer); ?>" required>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    <!-- Footer CTA actions -->
                    <div class="flex justify-between pt-4 border-t border-gray-100">
                        <a href="<?php echo e(route('apply.step', ['ulid' => $job->ulid, 'step' => 2])); ?>" class="btn btn-secondary rounded-full px-6 py-3">
                            <i class="fa-solid fa-angle-left"></i> Back to Step 2
                        </a>
                        <button type="submit" class="btn btn-primary rounded-full px-8 py-3 font-bold">
                            Continue to Step 4 <i class="fa-solid fa-angle-right"></i>
                        </button>
                    </div>
                </form>
            <?php endif; ?>
        </div>

    </div>
</section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.public', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/manuu/Projects/munchify/Munchify appointing/resources/views/public/wizard/step3.blade.php ENDPATH**/ ?>