<?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' => 4]] + (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' => 4]); ?>
<?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" x-data="{
                    approved: <?php echo e($jobDescription->isApproved() || $jobDescription->isPublished() ? 'true' : 'false'); ?>,
                    approving: false,
                    showApproveConfirm: false,
                    handleApprove() {
                        this.approving = true;
                        this.showApproveConfirm = false;
                        document.getElementById('approve-form').submit();
                    }
                }">

                    
                    <div class="flex items-start justify-between mb-8">
                        <div>
                            <h2 class="text-2xl font-semibold text-gray-900 mb-2">Review & Submit for Approval</h2>
                            <p class="text-sm text-gray-500">Review the complete job description and approve or save as draft.</p>
                        </div>
                        <div class="flex items-center gap-3 shrink-0">
                            
                            <template x-if="!approved">
                                <div class="flex items-center gap-3">
                                    <form
                                        action="<?php echo e(route('dashboard.job-descriptions.save-draft', $jobDescription->id ?? 0)); ?>"
                                        method="POST">
                                        <?php echo csrf_field(); ?>
                                        <button type="submit"
                                            class="inline-flex items-center justify-center h-11 px-6 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                                            Save as Draft
                                        </button>
                                    </form>
                                    <button @click="showApproveConfirm = true" :disabled="approving"
                                        class="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors disabled:opacity-50">
                                        <template x-if="!approving">
                                            <svg class="w-4 h-4 transform rotate-45" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                                            </svg>
                                        </template>
                                        <template x-if="approving">
                                            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                                <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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                                </path>
                                            </svg>
                                        </template>
                                        <span x-text="approving ? 'Approving...' : 'Approve'"></span>
                                    </button>
                                </div>
                            </template>
                            
                            <template x-if="approved">
                                <a href="<?php echo e(route('dashboard.job-descriptions.publish', $jobDescription->id ?? 0)); ?>"
                                    class="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Publish
                                </a>
                            </template>
                        </div>
                    </div>

                    
                    <div x-show="showApproveConfirm" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
                        <div class="fixed inset-0 bg-black/50" @click="showApproveConfirm = false"></div>
                        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 text-center">
                            <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg class="w-6 h-6 text-[#2F3D7E]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-2">Approve Job Description?</h4>
                            <p class="text-sm text-gray-500 mb-6">This will mark the job description as approved. You can then proceed to publish it.</p>
                            <div class="flex gap-3">
                                <button @click="showApproveConfirm = false" class="flex-1 h-11 rounded-lg font-medium text-gray-700 border border-gray-200 hover:bg-gray-50 transition-colors text-sm">Cancel</button>
                                <button @click="handleApprove()" class="flex-1 h-11 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors text-sm">Yes, Approve</button>
                            </div>
                        </div>
                    </div>

                    
                    <?php if(session('success')): ?>
                        <div x-data="{ approved: true }" x-show="approved" x-cloak x-init="setTimeout(() => approved = false, 4000)"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            class="bg-green-50 border border-green-100 rounded-2xl p-5 mb-8">
                            <div class="flex items-start gap-3">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center shrink-0">
  <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_7274)">
                                    <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_7274">
                                    <rect width="20" height="20" fill="white"/>
                                    </clipPath>
                                    </defs>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="text-sm font-bold text-gray-900">
                                        <?php echo e(session('success')); ?>

                                    </h4>
                                    <p class="text-xs text-gray-600 mt-1">
                                        Your job description has been approved. You can now publish or export it.
                                    </p>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        
                        <div class="lg:col-span-2">
                            <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden">
                                
                                <div
                                    class="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-gray-50">
                                    <h3 class="text-base font-semibold text-gray-900">Job Description Preview</h3>
                                </div>

                                
                                <div class="p-6 md:p-8">
                                    <?php
                                        $jd =
                                            $jobDescription ??
                                            (object) [
                                                'job_title' => 'Software Engineer',
                                                'department' => 'Design',
                                                'level' => 'L8 - Director',
                                                'location' => 'America USA',
                                                'employment_type' => 'Full-Time',
                                                'role_summary' =>
                                                    'We are seeking a highly skilled professional to join our Design team. In this full-time role based in the specified location, you will play a crucial part in driving innovation and excellence. This position offers an exciting opportunity to work with cutting-edge technologies and collaborate with talented professionals.',
                                                'responsibilities' => [
                                                    'Lead the design and development of scalable software solutions',
                                                    'Collaborate with cross-functional teams to define technical requirements',
                                                    'Mentor junior team members and provide technical guidance',
                                                    'Participate in code reviews and ensure best practices',
                                                    'Drive continuous improvement in development processes',
                                                ],
                                                'required_skills' => [
                                                    '5+ years of experience in software development',
                                                    'Proficiency in modern programming languages (Python, Java, or JavaScript)',
                                                    'Strong understanding of software architecture and design patterns',
                                                    'Experience with cloud platforms (AWS, Azure, or GCP)',
                                                    'Excellent problem-solving and analytical skills',
                                                ],
                                                'qualifications' => [
                                                    "Bachelor's degree in Computer Science or related field",
                                                    "Master's degree preferred",
                                                    'Relevant industry certifications (AWS, Azure, etc.)',
                                                    'Proven track record of delivering complex projects',
                                                ],
                                                'competencies' => [
                                                    'Technical Leadership',
                                                    'Problem Solving',
                                                    'Communication',
                                                    'Team Collaboration',
                                                    'Innovation',
                                                ],
                                            ];
                                    ?>

                                    <h2 class="text-2xl font-semibold text-gray-900 mb-4"><?php echo e($jd->job_title); ?></h2>

                                    <div class="grid grid-cols-2 gap-x-6 gap-y-2 mb-6 text-sm">
                                        <p><span class="font-semibold text-gray-900">Department: </span><span
                                                class="text-gray-600"><?php echo e($jd->department); ?></span></p>
                                        <p><span class="font-semibold text-gray-900">Level: </span><span
                                                class="text-gray-600"><?php echo e($jd->level); ?></span></p>
                                        <p><span class="font-semibold text-gray-900">Location: </span><span
                                                class="text-gray-600"><?php echo e($jd->location); ?></span></p>
                                        <p><span class="font-semibold text-gray-900">Employment Type: </span><span
                                                class="text-gray-600"><?php echo e($jd->employment_type); ?></span></p>
                                    </div>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-semibold text-gray-900 mb-3">Role Summary</h3>
                                    <p class="text-sm text-gray-600 leading-relaxed mb-6"><?php echo e($jd->role_summary); ?></p>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-semibold text-gray-900 mb-3">Key Responsibilities</h3>
                                    <ul class="space-y-2 mb-6">
                                        <?php $__currentLoopData = $jd->responsibilities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li class="flex items-start gap-2 text-sm text-gray-600">
                                                <span class="w-1.5 h-1.5 bg-[#142C9F] rounded-full mt-1.5 shrink-0"></span>
                                                <?php echo e($item); ?>

                                            </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-semibold text-gray-900 mb-3">Required Skills</h3>
                                    <ul class="space-y-2 mb-6">
                                        <?php $__currentLoopData = $jd->required_skills; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li class="flex items-start gap-2 text-sm text-gray-600">
                                                <span class="w-1.5 h-1.5 bg-[#142C9F] rounded-full mt-1.5 shrink-0"></span>
                                                <?php echo e($item); ?>

                                            </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-semibold text-gray-900 mb-3">Qualifications</h3>
                                    <ul class="space-y-2 mb-6">
                                        <?php $__currentLoopData = $jd->qualifications; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li class="flex items-start gap-2 text-sm text-gray-600">
                                                <span class="w-1.5 h-1.5 bg-[#142C9F] rounded-full mt-1.5 shrink-0"></span>
                                                <?php echo e($item); ?>

                                            </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-semibold text-gray-900 mb-3">Core Competencies</h3>
                                    <div class="flex flex-wrap gap-2">
                                        <?php $__currentLoopData = $jd->competencies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $comp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <span
                                                class="inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-xs font-medium border border-gray-200">
                                                <?php echo e($comp); ?>

                                            </span>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>

                                    <?php $__currentLoopData = $jobDescription->customSections; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $section): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <hr class="my-6 border-gray-100">

                                        <h3 class="text-base font-semibold text-gray-900 mb-3">
                                            <?php echo e($section->title); ?>

                                        </h3>

                                        <p class="text-sm text-gray-600 leading-relaxed">
                                            <?php echo e($section->content); ?>

                                        </p>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>

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

                        
                        <div class="space-y-6">
                            
                            <div class="bg-white border border-gray-200 rounded-2xl">
                                <div class="flex items-center gap-2 mb-4 p-6 border-b">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M2 8C2 9.18669 2.35189 10.3467 3.01118 11.3334C3.67047 12.3201 4.60754 13.0892 5.7039 13.5433C6.80026 13.9974 8.00666 14.1162 9.17054 13.8847C10.3344 13.6532 11.4035 13.0818 12.2426 12.2426C13.0818 11.4035 13.6532 10.3344 13.8847 9.17054C14.1162 8.00666 13.9974 6.80026 13.5433 5.7039C13.0892 4.60754 12.3201 3.67047 11.3334 3.01118C10.3467 2.35189 9.18669 2 8 2C6.32263 2.00631 4.71265 2.66082 3.50667 3.82667L2 5.33333" stroke="#0F172B" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M2 2V5.33333H5.33333" stroke="#0F172B" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8 4.66675V8.00008L10.6667 9.33341" stroke="#0F172B" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <h3 class="text-base font-semibold text-gray-900">Activity Log</h3>
                                </div>

                                <div class="px-6 pb-6 space-y-4">
                                    <?php $__empty_1 = true; $__currentLoopData = $jobDescription->latestActivityPerType(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $entry): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <div class="flex items-start gap-3">
                                            <div
                                                class="w-8 h-8 bg-[#DBEAFE] rounded-full flex items-center justify-center shrink-0 mt-0.5">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clip-path="url(#clip0_680_18915)">
                                                <path d="M14.535 6.66666C14.8395 8.16086 14.6225 9.71428 13.9203 11.0679C13.218 12.4214 12.073 13.4934 10.6761 14.1049C9.27913 14.7164 7.71479 14.8305 6.24391 14.4282C4.77302 14.026 3.4845 13.1316 2.59323 11.8943C1.70195 10.657 1.26179 9.15148 1.34615 7.62892C1.43051 6.10635 2.0343 4.65872 3.05681 3.52744C4.07932 2.39616 5.45876 1.64961 6.96509 1.4123C8.47141 1.17498 10.0136 1.46123 11.3344 2.22333" stroke="#2F3D7E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M6 7.33341L8 9.33341L14.6667 2.66675" stroke="#2F3D7E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                                </g>
                                                <defs>
                                                <clipPath id="clip0_680_18915">
                                                <rect width="16" height="16" fill="white"/>
                                                </clipPath>
                                                </defs>
                                                </svg>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-900"><?php echo e($entry->label()); ?></p>
                                                <p class="text-xs text-gray-500">
                                                    <?php echo e($entry->created_at->format('M d, Y')); ?> at
                                                    <?php echo e($entry->created_at->format('h:i A')); ?></p>
                                                <p class="text-xs text-gray-400"><?php echo e($entry->user?->name ?? 'System'); ?></p>
                                            </div>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                        <p class="text-sm text-gray-400">No activity recorded yet.</p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <form id="approve-form"
            action="<?php echo e(route('dashboard.job-descriptions.submit-approval', $jobDescription->id ?? 0)); ?>" method="POST"
            class="hidden">
            <?php echo csrf_field(); ?>
        </form>
    </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/review.blade.php ENDPATH**/ ?>