
<div id="loaderContainer" class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20" style="display: none;">
    <div class="mx-auto px-6">

        
        <div class="bg-white rounded-[20px]">

            
            <?php if (isset($component)) { $__componentOriginal1038c49ba30ba5d39ad311c8f546df99 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal1038c49ba30ba5d39ad311c8f546df99 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.job-descriptions.stepper','data' => ['currentStep' => 2]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('job-descriptions.stepper'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['currentStep' => 2]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal1038c49ba30ba5d39ad311c8f546df99)): ?>
<?php $attributes = $__attributesOriginal1038c49ba30ba5d39ad311c8f546df99; ?>
<?php unset($__attributesOriginal1038c49ba30ba5d39ad311c8f546df99); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal1038c49ba30ba5d39ad311c8f546df99)): ?>
<?php $component = $__componentOriginal1038c49ba30ba5d39ad311c8f546df99; ?>
<?php unset($__componentOriginal1038c49ba30ba5d39ad311c8f546df99); ?>
<?php endif; ?>

            
            <div class="px-6 md:px-10 pb-10 bg-[#f9fafb] pt-8">

                <div class="max-w-2xl mx-auto mt-8">

                    
                    <div
                        class="bg-gradient-to-b from-gray-50 to-white border border-gray-200 rounded-2xl p-8 md:p-12 text-center">

                        
                        <div class="w-20 h-20 bg-[#2F3D7E] rounded-full flex items-center justify-center mx-auto mb-6">
                              <svg width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_705_5125)">
                                <path d="M8.28086 12.9167C8.20647 12.6283 8.05615 12.3651 7.84555 12.1545C7.63494 11.9439 7.37176 11.7936 7.08336 11.7192L1.97086 10.4009C1.88364 10.3761 1.80687 10.3236 1.75221 10.2512C1.69754 10.1789 1.66797 10.0907 1.66797 10C1.66797 9.90937 1.69754 9.82118 1.75221 9.74884C1.80687 9.6765 1.88364 9.62397 1.97086 9.59921L7.08336 8.28004C7.37166 8.20572 7.63477 8.05552 7.84537 7.84508C8.05596 7.63463 8.20634 7.37162 8.28086 7.08338L9.5992 1.97088C9.6237 1.88331 9.67618 1.80616 9.74863 1.75121C9.82108 1.69625 9.90951 1.6665 10.0004 1.6665C10.0914 1.6665 10.1798 1.69625 10.2523 1.75121C10.3247 1.80616 10.3772 1.88331 10.4017 1.97088L11.7192 7.08338C11.7936 7.37177 11.9439 7.63496 12.1545 7.84556C12.3651 8.05616 12.6283 8.20648 12.9167 8.28088L18.0292 9.59838C18.1171 9.62263 18.1946 9.67505 18.2499 9.74761C18.3052 9.82016 18.3351 9.90884 18.3351 10C18.3351 10.0912 18.3052 10.1799 18.2499 10.2525C18.1946 10.325 18.1171 10.3775 18.0292 10.4017L12.9167 11.7192C12.6283 11.7936 12.3651 11.9439 12.1545 12.1545C11.9439 12.3651 11.7936 12.6283 11.7192 12.9167L10.4009 18.0292C10.3764 18.1168 10.3239 18.1939 10.2514 18.2489C10.179 18.3038 10.0905 18.3336 9.99961 18.3336C9.90868 18.3336 9.82025 18.3038 9.7478 18.2489C9.67535 18.1939 9.62287 18.1168 9.59836 18.0292L8.28086 12.9167Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16.668 2.5V5.83333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.3333 4.16663H15" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M3.33203 14.1666V15.8333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.16667 15H2.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_705_5125">
                                <rect width="20" height="20" fill="white"/>
                                </clipPath>
                                </defs>
                            </svg>
                        </div>

                        <h3 class="text-xl font-bold text-gray-900 mb-6">
                            Crafting your job description...
                        </h3>

                        
                        <div id="stepsContainer" class="space-y-3 mb-8 max-w-sm mx-auto flex flex-col items-center">
                            
                        </div>

                        
                        <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                            <div id="progressBar"
                                class="h-full bg-gradient-to-r from-[#2F3D7E] to-[#4a5db8] transition-all duration-300"
                                style="width: 0%">
                            </div>
                        </div>

                        <p class="text-sm text-gray-400 mt-3">
                            This usually takes a few seconds...
                        </p>

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

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


<script>
    // Global loader controller
    JobDescriptionLoader = {
        // State variables
        progress: 0,
        currentStepIndex: 0,
        isRunning: false,
        redirectUrl: null,

        steps: [{
                label: 'Analyzing role requirements...',
                done: false
            },
            {
                label: 'Generating comprehensive content...',
                done: false
            },
            {
                label: 'Finalizing job structure...',
                done: false
            }
        ],

        // Initialize the loader UI
        init() {
            this.renderSteps();
        },

        // Render steps in the DOM
        renderSteps() {
            const container = document.getElementById('stepsContainer');
            if (!container) return;

            container.innerHTML = '';

            this.steps.forEach((step, index) => {
                const stepDiv = document.createElement('div');
                stepDiv.className = 'flex items-center gap-3';
                stepDiv.id = `step-${index}`;

                // Status icon
                const iconSpan = document.createElement('div');
                iconSpan.className = 'w-5 h-5 shrink-0';

                if (step.done) {
                    iconSpan.className += ' bg-green-500 rounded-full flex items-center justify-center';
                    iconSpan.innerHTML =
                        '<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>';
                } else if (index === this.currentStepIndex && this.isRunning) {
                    iconSpan.className +=
                        ' border-2 border-[#2F3D7E] border-t-transparent rounded-full animate-spin';
                } else {
                    iconSpan.className += ' border-2 border-gray-200 rounded-full';
                }

                // Label
                const labelSpan = document.createElement('span');
                labelSpan.className = 'text-sm';
                labelSpan.className += step.done ? 'text-gray-900' : 'text-gray-400';
                labelSpan.textContent = step.label;

                stepDiv.appendChild(iconSpan);
                stepDiv.appendChild(labelSpan);
                container.appendChild(stepDiv);
            });
        },

        // Update a specific step's UI
        updateStepUI(index) {
            const stepDiv = document.getElementById(`step-${index}`);
            if (!stepDiv) return;

            const iconSpan = stepDiv.children[0];
            const labelSpan = stepDiv.children[1];
            const step = this.steps[index];

            if (step.done) {
                iconSpan.className = 'w-5 h-5 bg-green-500 rounded-full flex items-center justify-center shrink-0';
                iconSpan.innerHTML =
                    '<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>';
                labelSpan.className = 'text-sm text-gray-900';
            } else if (index === this.currentStepIndex && this.isRunning) {
                iconSpan.className =
                    'w-5 h-5 border-2 border-[#2F3D7E] border-t-transparent rounded-full animate-spin shrink-0';
                iconSpan.innerHTML = '';
                labelSpan.className = 'text-sm text-gray-400';
            } else {
                iconSpan.className = 'w-5 h-5 border-2 border-gray-200 rounded-full shrink-0';
                iconSpan.innerHTML = '';
                labelSpan.className = 'text-sm text-gray-400';
            }
        },

        // Update progress bar
        updateProgress(value) {
            this.progress = value;
            const progressBar = document.getElementById('progressBar');
            if (progressBar) {
                progressBar.style.width = value + '%';
            }
        },

        // Reset all states
        reset() {
            this.progress = 0;
            this.currentStepIndex = 0;
            this.isRunning = false;
            this.steps.forEach(step => step.done = false);
            this.updateProgress(0);
            this.renderSteps();
        },

        // Sleep utility
        sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        },

        // Set redirect URL
        setRedirectUrl(url) {
            this.redirectUrl = url;
        },

        // Main execution
        async runSteps() {
            this.isRunning = true;
            this.reset();
            this.renderSteps();

            // STEP 1
            this.currentStepIndex = 0;
            this.updateProgress(10);
            this.updateStepUI(0);
            await this.sleep(1200);
            this.steps[0].done = true;
            this.updateProgress(33);
            this.updateStepUI(0);

            // STEP 2
            this.currentStepIndex = 1;
            this.updateStepUI(1);
            await this.sleep(1500);
            this.steps[1].done = true;
            this.updateProgress(66);
            this.updateStepUI(1);

            // STEP 3
            this.currentStepIndex = 2;
            this.updateStepUI(2);
            await this.sleep(1200);
            this.steps[2].done = true;
            this.updateProgress(100);
            this.updateStepUI(2);

            // Redirect after completion
            setTimeout(() => {
                if (this.redirectUrl) {
                    window.location.href = this.redirectUrl;
                }
                this.isRunning = false;
            }, 600);
        },

        // Public method to show and start the loader
        showAndStart(redirectUrl = null) {
            // Show the loader container
            const loaderContainer = document.getElementById('loaderContainer');
            if (loaderContainer) {
                loaderContainer.style.display = 'block';
            }
            creator
            const creatorContainer = document.getElementById('creator');
            creatorContainer.style.display = "none";

            // Set redirect URL if provided
            if (redirectUrl) {
                this.setRedirectUrl(redirectUrl);
            }

            // Scroll to top
            window.scrollTo(0, 0);

            // Start the animation
            if (!this.isRunning) {
                this.runSteps();
            }
        },

        // Hide the loader
        hide() {
            const loaderContainer = document.getElementById('loaderContainer');
            if (loaderContainer) {
                loaderContainer.style.display = 'none';
            }
            this.reset();
        }
    };

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', () => {
        window.JobDescriptionLoader.init();
    });
</script>
<?php /**PATH /var/www/ratemypay_dev/resources/views/partials/generating.blade.php ENDPATH**/ ?>