<?php $__env->startSection('content'); ?>
    <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20">
        <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' => 3]] + (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' => 3]); ?>
<?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 ">

                    <h2 class="text-2xl font-semibold text-gray-900 mb-2">Validation & Alignment</h2>
                    <p class="text-sm text-[#45556C] mb-8">Review the validation results to ensure alignment with your job architecture and compliance standards.</p>

                    
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
                        <?php
                            $validationStats = $validationStats ?? ['total' => 14, 'aligned' => 11, 'needs_review' => 3];
                        ?>
                        <div class="bg-[#e7ecf3] border border-[#E2E8F0] rounded-2xl p-5">
                            <div class="w-10 h-10 bg-[#dbe9fe] rounded-xl flex items-center justify-center mb-3 shadow-sm">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7L15 2Z" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10 9H8" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16 13H8" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16 17H8" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <p class="text-sm font-medium text-[#2F3D7E]">Total Checks</p>
                            <p class="text-xl font-semibold text-[#0F172B]"><?php echo e($validationStats['total']); ?></p>
                        </div>
                        <div class="bg-[#F0FDF4] border border-[#B9F8CF] rounded-2xl p-5">
                            <div class="w-10 h-10 bg-[#c3f0d5] rounded-xl flex items-center justify-center mb-3 shadow-sm">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21.8026 9.99999C22.2593 12.2413 21.9338 14.5714 20.8804 16.6018C19.827 18.6322 18.1095 20.24 16.0141 21.1573C13.9187 22.0746 11.5722 22.2458 9.36586 21.6424C7.15954 21.0389 5.22676 19.6974 3.88984 17.8414C2.55293 15.9854 1.89269 13.7272 2.01923 11.4434C2.14577 9.15952 3.05144 6.98808 4.58522 5.29116C6.11899 3.59424 8.18815 2.47442 10.4476 2.11844C12.7071 1.76247 15.0203 2.19185 17.0016 3.33499" stroke="#0D542B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M9 11L12 14L22 4" stroke="#0D542B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <p class="text-sm font-medium text-green-700">Aligned</p>
                            <p class="text-xl font-semibold text-[#0F172B]"><?php echo e($validationStats['aligned']); ?></p>
                        </div>
                        <div class="bg-[#FFFBEB] border border-[#FEE685] rounded-2xl p-5">
                            <div class="w-10 h-10 bg-[#ffe2d1] rounded-xl flex items-center justify-center mb-3 shadow-sm">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#7B3306" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 6V12L16 14" stroke="#7B3306" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <p class="text-sm font-medium text-yellow-600">Needs Review</p>
                            <p class="text-xl font-semibold text-[#0F172B]"><?php echo e($validationStats['needs_review']); ?></p>
                        </div>
                    </div>

                    
                    
                    <?php
                        use App\Models\JobDescriptionSection;
                
                        // Group checks by section type for display
                        $checksBySection = $jobDescription->validationChecks->groupBy('section_type');
                
                        // Section display labels for card headers
                        $sectionLabels = [
                            JobDescriptionSection::TYPE_ROLE_SUMMARY         => 'Role Summary Checks',
                            JobDescriptionSection::TYPE_KEY_RESPONSIBILITIES => 'Key Responsibilities Checks',
                            JobDescriptionSection::TYPE_REQUIRED_SKILLS      => 'Required Skills Checks',
                            JobDescriptionSection::TYPE_QUALIFICATIONS       => 'Qualifications & Compliance',
                            JobDescriptionSection::TYPE_CORE_COMPETENCIES    => 'Competencies & Language',
                        ];
                    ?>
                
                    <?php $__currentLoopData = JobDescriptionSection::SECTION_TYPES; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sectionType): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $sectionChecks = $checksBySection->get($sectionType, collect());
                        ?>
                        <?php if($sectionChecks->isNotEmpty()): ?>
                        <div class="bg-white border border-gray-200 rounded-2xl p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-5 pb-4 border-b border-gray-100">
                                <?php echo e($sectionLabels[$sectionType] ?? ucfirst(str_replace('_', ' ', $sectionType))); ?>

                            </h3>
                            <div class="space-y-4">
                                <?php $__currentLoopData = $sectionChecks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $check): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="flex items-start justify-between">
                                        <div class="flex items-start gap-3">
                                            <?php if($check->passed): ?>
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clip-path="url(#clip0_954_7306)">
                                                <path d="M18.1669 8.33332C18.5474 10.2011 18.2762 12.1428 17.3984 13.8348C16.5206 15.5268 15.0893 16.8667 13.3431 17.6311C11.597 18.3955 9.64154 18.5381 7.80293 18.0353C5.96433 17.5325 4.35368 16.4145 3.23958 14.8678C2.12548 13.3212 1.57529 11.4394 1.68074 9.53615C1.78619 7.63294 2.54092 5.8234 3.81906 4.4093C5.0972 2.9952 6.8215 2.06202 8.7044 1.76537C10.5873 1.46872 12.515 1.82654 14.166 2.77916" stroke="#00A63E" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M7.5 9.16671L10 11.6667L18.3333 3.33337" stroke="#00A63E" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                                </g>
                                                <defs>
                                                <clipPath id="clip0_954_7306">
                                                <rect width="20" height="20" fill="white"/>
                                                </clipPath>
                                                </defs>
                                                </svg>
                                            <?php else: ?>
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M18.109 15L11.4423 3.33332C11.297 3.07682 11.0862 2.86347 10.8314 2.71504C10.5767 2.56661 10.2872 2.4884 9.99234 2.4884C9.69752 2.4884 9.40797 2.56661 9.15324 2.71504C8.8985 2.86347 8.6877 3.07682 8.54234 3.33332L1.87567 15C1.72874 15.2544 1.6517 15.5432 1.65235 15.8371C1.653 16.1309 1.73132 16.4194 1.87938 16.6732C2.02744 16.927 2.23996 17.1371 2.49542 17.2823C2.75088 17.4275 3.04018 17.5026 3.33401 17.5H16.6673C16.9598 17.4997 17.2469 17.4225 17.5001 17.2761C17.7532 17.1297 17.9634 16.9192 18.1094 16.6659C18.2555 16.4126 18.3324 16.1253 18.3323 15.8329C18.3322 15.5405 18.2552 15.2532 18.109 15Z" stroke="#E17100" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M10 7.5V10.8333" stroke="#E17100" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M10 14.1667H10.0083" stroke="#E17100" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                            <?php endif; ?>
                                            <div>
                                                <div class="flex items-center gap-2">
                                                    <p class="text-sm font-medium text-gray-900"><?php echo e($check->label()); ?></p>
                                                    <?php if($check->passed): ?>
                                                        <span class="text-xs font-medium bg-[#F0FDF4] text-green-700 px-2 py-0.5 rounded-full border border-[#B9F8CF]">Aligned</span>
                                                    <?php else: ?>
                                                        <span class="text-xs font-medium bg-yellow-50 text-yellow-700 px-2 py-0.5 rounded-full border border-yellow-300">Needs Review</span>
                                                    <?php endif; ?>
                                                </div>
                                                <?php if($check->message): ?>
                                                    <p class="text-xs mt-0.5 <?php echo e($check->passed ? 'text-green-600' : 'text-yellow-600'); ?>">
                                                        <?php echo e($check->message); ?>

                                                    </p>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        <?php if(!$check->passed): ?>
                                            <a href="<?php echo e(route('dashboard.job-descriptions.show', $jobDescription->id)); ?>#section-<?php echo e($sectionType); ?>"
                                            class="text-sm font-medium text-gray-700 border border-gray-200 px-4 py-1.5 rounded-lg hover:bg-gray-50 transition-colors shrink-0">
                                                Review
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                        <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                
                    
                    <?php if($jobDescription->validationChecks->isEmpty()): ?>
                        <div class="border border-gray-200 rounded-2xl p-6 mb-6 text-center text-sm text-gray-400">
                            Validation checks will appear here after running.
                        </div>
                    <?php endif; ?>

                    
                    <div class="flex items-center justify-end gap-4">
                        <a href="<?php echo e(route('dashboard.job-descriptions.show', $jobDescription->id ?? 0)); ?>"
                           class="inline-flex items-center justify-center h-12 px-4 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors text-sm">
                            Back
                        </a>
                     


                         <a href="<?php echo e(route('dashboard.job-descriptions.review', $jobDescription->id ?? 0)); ?>"
                            x-data="{ loading: false }"
                            @click.prevent="loading = true; setTimeout(() => { window.location = $el.href }, 200)"
                            class="inline-flex items-center justify-center h-12 px-4 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors text-sm">

                            
                            <span x-show="!loading">  Continue to Review</span>
                            
                            <span x-show="loading" class="flex items-center gap-2">
                                <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
                                    <circle class="opacity-25" cx="12" cy="12" r="10"
                                        stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z">
                                    </path>
                                </svg>
                                Please wait...
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.dashboard', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/ratemypay_dev/resources/views/dashboard/job-descriptions/validate.blade.php ENDPATH**/ ?>