
<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['currentStep' => 1]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['currentStep' => 1]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<?php
    $steps = [
        ['number' => 1, 'label' => 'Role Basics', 'subtitle' => 'Step 1 of 5'],
        ['number' => 2, 'label' => 'Content Review', 'subtitle' => 'Step 2 of 5'],
        ['number' => 3, 'label' => 'Validation', 'subtitle' => 'Step 3 of 5'],
        ['number' => 4, 'label' => 'Review & Approval', 'subtitle' => 'Step 4 of 5'],
        ['number' => 5, 'label' => 'Export & Publish', 'subtitle' => 'Step 5 of 5'],
    ];
?>

<div class="flex items-center justify-between w-full mx-auto p-6 shadow-md">
    <?php $__currentLoopData = $steps; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $step): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="flex items-center gap-3">
            
            <?php if($step['number'] < $currentStep): ?>
                
                <div class="w-10 h-10 rounded-full bg-[#2F3D7E] flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
            <?php elseif($step['number'] == $currentStep): ?>
                
                <div class="w-10 h-10 rounded-full bg-[#2F3D7E] flex items-center justify-center text-white font-bold text-sm shrink-0">
                    <?php echo e($step['number']); ?>

                </div>
            <?php else: ?>
                
                <div class="w-10 h-10 rounded-full bg-[#E2E8F0] border border-gray-200 flex items-center justify-center text-[#45556C] font-bold text-sm shrink-0">
                    <?php echo e($step['number']); ?>

                </div>
            <?php endif; ?>

            
            <div class="hidden sm:block">
                <p class="text-xs text-[#45556C]"><?php echo e($step['subtitle']); ?></p>
                <p class="text-sm font-semibold <?php echo e($step['number'] <= $currentStep ? 'text-gray-900' : 'text-[#45556C]'); ?>">
                    <?php echo e($step['label']); ?>

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

        
        <?php if($index < count($steps) - 1): ?>
            <div class="flex-1 mx-2 sm:mx-4">
                <div class="h-0.5 <?php echo e($step['number'] < $currentStep ? 'bg-[#2F3D7E]' : 'bg-gray-200'); ?> rounded-full"></div>
            </div>
        <?php endif; ?>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php /**PATH /var/www/ratemypay_dev/resources/views/components/job-descriptions/stepper.blade.php ENDPATH**/ ?>