<?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' => 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" x-data="{
                    editingSection: null,
                    editedContent: '',
                    editedItems: [],
                    startEdit(section, content) {
                        this.editingSection = section;
                        if (typeof content === 'string') {
                            this.editedContent = content;
                            this.editedItems = [];
                        } else {
                            this.editedContent = '';
                            this.editedItems = [...content];
                        }
                    },
                    cancelEdit() {
                        this.editingSection = null;
                        this.editedContent = '';
                        this.editedItems = [];
                    },
                    saveEdit() {
                        const sectionMap = {
                            'summary': 'role_summary',
                            'responsibilities': 'key_responsibilities',
                            'skills': 'required_skills',
                            'qualifications': 'qualifications',
                            'competencies': 'core_competencies'
                        };
                        const sectionType = sectionMap[this.editingSection];
                        if (!sectionType) { this.editingSection = null; return; }
                
                        // For array sections, join items back to newline-separated text
                        const content = this.editedItems.length > 0 ?
                            this.editedItems.filter(i => i.trim()).join('\n') :
                            this.editedContent;
                
                        const form = document.getElementById('section-update-form');
                        document.getElementById('section-update-type').value = sectionType;
                        document.getElementById('section-update-content').value = content;
                        form.submit();
                    },
                    addItem() {
                        this.editedItems.push('');
                    },
                    removeItem(index) {
                        this.editedItems.splice(index, 1);
                    }
                }">

                    
                    <div class="flex items-center gap-3 mb-2">
                        <h2 class="text-2xl font-semibold text-gray-900">Generated Job Description</h2>
                        <span
                            class="inline-flex items-center gap-1 px-3 py-1 bg-[#DBEAFE] text-[#2F3D7E] text-xs font-semibold rounded-full">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_680_18252)">
                            <path d="M4.96774 7.74988C4.9231 7.57684 4.83291 7.41893 4.70655 7.29257C4.58019 7.16621 4.42227 7.07602 4.24924 7.03138L1.18174 6.24038C1.1294 6.22553 1.08334 6.19401 1.05054 6.1506C1.01775 6.1072 1 6.05428 1 5.99988C1 5.94548 1.01775 5.89256 1.05054 5.84916C1.08334 5.80575 1.1294 5.77423 1.18174 5.75938L4.24924 4.96788C4.42221 4.92328 4.58008 4.83317 4.70644 4.7069C4.83279 4.58063 4.92302 4.42282 4.96774 4.24988L5.75874 1.18238C5.77344 1.12984 5.80493 1.08355 5.8484 1.05058C5.89187 1.0176 5.94493 0.999756 5.99949 0.999756C6.05405 0.999756 6.10711 1.0176 6.15058 1.05058C6.19405 1.08355 6.22553 1.12984 6.24024 1.18238L7.03074 4.24988C7.07538 4.42292 7.16557 4.58083 7.29193 4.70719C7.41829 4.83355 7.5762 4.92374 7.74924 4.96838L10.8167 5.75888C10.8695 5.77343 10.916 5.80488 10.9492 5.84842C10.9823 5.89195 11.0003 5.94516 11.0003 5.99988C11.0003 6.0546 10.9823 6.10781 10.9492 6.15134C10.916 6.19488 10.8695 6.22633 10.8167 6.24088L7.74924 7.03138C7.5762 7.07602 7.41829 7.16621 7.29193 7.29257C7.16557 7.41893 7.07538 7.57684 7.03074 7.74988L6.23974 10.8174C6.22503 10.8699 6.19355 10.9162 6.15008 10.9492C6.10661 10.9822 6.05355 11 5.99899 11C5.94443 11 5.89137 10.9822 5.8479 10.9492C5.80443 10.9162 5.77294 10.8699 5.75824 10.8174L4.96774 7.74988Z" stroke="#2F3D7E" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 1.5V3.5" stroke="#2F3D7E" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M11 2.5H9" stroke="#2F3D7E" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 8.5V9.5" stroke="#2F3D7E" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2.5 9H1.5" stroke="#2F3D7E" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_680_18252">
                            <rect width="12" height="12" fill="white"/>
                            </clipPath>
                            </defs>
                            </svg>
                            Generated
                        </span>
                    </div>
                    <p class="text-sm text-[#45556C] mb-8">Review and edit the generated content. You can regenerate any section or
                        make manual edits.</p>

                    <?php
                        $roleSummary =
                            $jobDescription->role_summary ??
                            'We are seeking a highly skilled professional to join our Engineering team. In this part-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 = $jobDescription->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',
                        ];
                        $skills = $jobDescription->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 = $jobDescription->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 = $jobDescription->competencies ?? [
                            'Technical Leadership',
                            'Problem Solving',
                            'Communication',
                            'Team Collaboration',
                            'Innovation',
                        ];
                    ?>

                    
                    <form id="section-update-form"
                        action="<?php echo e(route('dashboard.job-descriptions.update', $jobDescription->id)); ?>" method="POST"
                        class="hidden">
                        <?php echo csrf_field(); ?>
                        <?php echo method_field('PUT'); ?>
                        <input type="hidden" name="section_type" id="section-update-type">
                        <input type="hidden" name="content" id="section-update-content">
                        <input type="hidden" name="_action" value="update_section">
                    </form>

                    
                    <div id="section-role_summary" class="bg-white border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Role Summary</h3>
                            <div class="flex items-center gap-3">
                                <form
                                    action="<?php echo e(route('dashboard.job-descriptions.regenerate-section', $jobDescription->id)); ?>"
                                    method="POST" class="inline">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="section_type" value="role_summary">
                                    <?php echo $__env->make('partials.re-generate-button', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                                </form>

                                <button x-show="editingSection !== 'summary'"
                                    @click="startEdit('summary', '<?php echo e(addslashes($roleSummary)); ?>')"
                                    class="inline-flex items-center gap-1.5 text-sm text-[#0A0A0A] hover:text-[#0A0A0A] 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                    Edit
                                </button>
                            </div>
                        </div>
                        
                        <div x-show="editingSection !== 'summary'">
                            <p class="text-sm text-[#314158] leading-relaxed"><?php echo e($roleSummary); ?></p>
                        </div>
                        
                        <div x-show="editingSection === 'summary'" x-cloak>
                            <textarea x-model="editedContent" rows="4"
                                class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-gray-200 focus:border-gray-200 resize-none"></textarea>
                            <div class="flex items-center justify-end gap-3 mt-3">
                                <button @click="cancelEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                                    Cancel
                                </button>
                                <button @click="saveEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-[#2F3D7E] rounded-lg hover:bg-[#1E2858] transition-colors">
                                    Save Changes
                                </button>
                            </div>
                        </div>
                    </div>

                    
                    <div id="section-key_responsibilities" class="bg-white border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Key Responsibilities</h3>
                            <div class="flex items-center gap-3">
                                <form
                                    action="<?php echo e(route('dashboard.job-descriptions.regenerate-section', $jobDescription->id)); ?>"
                                    method="POST" class="inline">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="section_type" value="key_responsibilities">
                                    <?php echo $__env->make('partials.re-generate-button', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                                </form>

                                <button x-show="editingSection !== 'responsibilities'"
                                    @click="startEdit('responsibilities', <?php echo e(json_encode($responsibilities)); ?>)"
                                    class="inline-flex items-center gap-1.5 text-sm text-[#0A0A0A] hover:text-[#0A0A0A] 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                    Edit
                                </button>
                            </div>
                        </div>
                        
                        <div x-show="editingSection !== 'responsibilities'">
                            <ol class="space-y-3">
                                <?php $__currentLoopData = $responsibilities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $responsibility): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li class="flex items-start gap-3">
                                        <span class="w-2 h-2 bg-[#2F3D7E] rounded-full mt-1.5 shrink-0"></span>
                                        <span class="text-sm text-[#314158]"><?php echo e($responsibility); ?></span>
                                    </li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ol>
                        </div>
                        
                        <div x-show="editingSection === 'responsibilities'" x-cloak>
                            <div class="space-y-3">
                                <template x-for="(item, index) in editedItems" :key="index">
                                    <div class="flex items-start gap-3">
                                        <span class="w-2 h-2 bg-[#2F3D7E] rounded-full mt-3.5 shrink-0"></span>
                                        <input type="text" x-model="editedItems[index]"
                                            class="flex-1 px-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-gray-200 focus:border-gray-200">
                                        <button @click="removeItem(index)"
                                            class="text-gray-400 hover:text-red-500 mt-2 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                            <button @click="addItem()"
                                class="inline-flex items-center gap-1.5 text-sm text-[#2F3D7E] hover:text-[#1E2858] mt-3 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="M12 4v16m8-8H4" />
                                </svg>
                                Add Item
                            </button>
                            <div class="flex items-center justify-end gap-3 mt-3">
                                <button @click="cancelEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                                    Cancel
                                </button>
                                <button @click="saveEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-[#2F3D7E] rounded-lg hover:bg-[#1E2858] transition-colors">
                                    Save Changes
                                </button>
                            </div>
                        </div>
                    </div>

                    
                    <div id="section-required_skills" class="bg-white border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Required Skills</h3>
                            <div class="flex items-center gap-3">
                                <form
                                    action="<?php echo e(route('dashboard.job-descriptions.regenerate-section', $jobDescription->id)); ?>"
                                    method="POST" class="inline">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="section_type" value="required_skills">
                                    <button type="submit"
                                        class="inline-flex items-center gap-1.5 text-sm text-[#0A0A0A] hover:text-[#0A0A0A] 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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                        </svg>
                                        Regenerate
                                    </button>
                                </form>

                                <button x-show="editingSection !== 'skills'"
                                    @click="startEdit('skills', <?php echo e(json_encode($skills)); ?>)"
                                    class="inline-flex items-center gap-1.5 text-sm text-[#0A0A0A] hover:text-[#0A0A0A] 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                    Edit
                                </button>
                            </div>
                        </div>
                        
                        <div x-show="editingSection !== 'skills'">
                            <ul class="space-y-3">
                                <?php $__currentLoopData = $skills; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $skill): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li class="flex items-start gap-3">
                                        <span class="w-2 h-2 bg-[#2F3D7E] rounded-full mt-1.5 shrink-0"></span>
                                        <span class="text-sm text-[#314158]"><?php echo e($skill); ?></span>
                                    </li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        </div>
                        
                        <div x-show="editingSection === 'skills'" x-cloak>
                            <div class="space-y-3">
                                <template x-for="(item, index) in editedItems" :key="index">
                                    <div class="flex items-start gap-3">
                                        <span class="w-2 h-2 bg-[#2F3D7E] rounded-full mt-3.5 shrink-0"></span>
                                        <input type="text" x-model="editedItems[index]"
                                            class="flex-1 px-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-gray-200 focus:border-gray-200">
                                        <button @click="removeItem(index)"
                                            class="text-gray-400 hover:text-red-500 mt-2 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                            <button @click="addItem()"
                                class="inline-flex items-center gap-1.5 text-sm text-[#2F3D7E] hover:text-[#1E2858] mt-3 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="M12 4v16m8-8H4" />
                                </svg>
                                Add Item
                            </button>
                            <div class="flex items-center justify-end gap-3 mt-3">
                                <button @click="cancelEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                                    Cancel
                                </button>
                                <button @click="saveEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-[#2F3D7E] rounded-lg hover:bg-[#1E2858] transition-colors">
                                    Save Changes
                                </button>
                            </div>
                        </div>
                    </div>

                    
                    <div id="section-qualifications" class="bg-white border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Qualifications</h3>
                            <div class="flex items-center gap-3">
                                <form
                                    action="<?php echo e(route('dashboard.job-descriptions.regenerate-section', $jobDescription->id)); ?>"
                                    method="POST" class="inline">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="section_type" value="qualifications">
                                    <?php echo $__env->make('partials.re-generate-button', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

                                </form>

                                <button x-show="editingSection !== 'qualifications'"
                                    @click="startEdit('qualifications', <?php echo e(json_encode($qualifications)); ?>)"
                                    class="inline-flex items-center gap-1.5 text-sm text-[#0A0A0A] hover:text-[#0A0A0A] 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                    Edit
                                </button>
                            </div>
                        </div>
                        
                        <div x-show="editingSection !== 'qualifications'">
                            <ul class="space-y-3">
                                <?php $__currentLoopData = $qualifications; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $qualification): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li class="flex items-start gap-3">
                                        <span class="w-2 h-2 bg-[#2F3D7E] rounded-full mt-1.5 shrink-0"></span>
                                        <span class="text-sm text-[#314158]"><?php echo e($qualification); ?></span>
                                    </li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        </div>
                        
                        <div x-show="editingSection === 'qualifications'" x-cloak>
                            <div class="space-y-3">
                                <template x-for="(item, index) in editedItems" :key="index">
                                    <div class="flex items-start gap-3">
                                        <span class="w-2 h-2 bg-[#2F3D7E] rounded-full mt-3.5 shrink-0"></span>
                                        <input type="text" x-model="editedItems[index]"
                                            class="flex-1 px-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-gray-200 focus:border-gray-200">
                                        <button @click="removeItem(index)"
                                            class="text-gray-400 hover:text-red-500 mt-2 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                            <button @click="addItem()"
                                class="inline-flex items-center gap-1.5 text-sm text-[#2F3D7E] hover:text-[#1E2858] mt-3 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="M12 4v16m8-8H4" />
                                </svg>
                                Add Item
                            </button>
                            <div class="flex items-center justify-end gap-3 mt-3">
                                <button @click="cancelEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                                    Cancel
                                </button>
                                <button @click="saveEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-[#2F3D7E] rounded-lg hover:bg-[#1E2858] transition-colors">
                                    Save Changes
                                </button>
                            </div>
                        </div>
                    </div>

                    
                    <div id="section-core_competencies" class="bg-white border border-gray-200 rounded-2xl p-6 mb-8">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Core Competencies</h3>
                            <div class="flex items-center gap-3">
                                <form
                                    action="<?php echo e(route('dashboard.job-descriptions.regenerate-section', $jobDescription->id)); ?>"
                                    method="POST" class="inline">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="section_type" value="core_competencies">
                                    <?php echo $__env->make('partials.re-generate-button', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

                                </form>

                                <button x-show="editingSection !== 'competencies'"
                                    @click="startEdit('competencies', <?php echo e(json_encode($competencies)); ?>)"
                                    class="inline-flex items-center gap-1.5 text-sm text-[#0A0A0A] hover:text-[#0A0A0A] 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                    Edit
                                </button>
                            </div>
                        </div>

                        
                        <div x-show="editingSection !== 'competencies'">
                            <div class="flex flex-wrap gap-2">
                                <?php $__currentLoopData = $competencies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $competency): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <span
                                        class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium border border-gray-200">
                                        <?php echo e($competency); ?>

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

                        
                        <div x-show="editingSection === 'competencies'" x-cloak>
                            <div class="space-y-3">
                                <template x-for="(item, index) in editedItems" :key="index">
                                    <div class="flex items-start gap-3">
                                        <span class="w-2 h-2 bg-[#2F3D7E] rounded-full mt-3.5 shrink-0"></span>
                                        <input type="text" x-model="editedItems[index]"
                                            class="flex-1 px-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-gray-200 focus:border-gray-200">
                                        <button @click="removeItem(index)"
                                            class="text-gray-400 hover:text-red-500 mt-2 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                            <button @click="addItem()"
                                class="inline-flex items-center gap-1.5 text-sm text-[#2F3D7E] hover:text-[#1E2858] mt-3 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="M12 4v16m8-8H4" />
                                </svg>
                                Add Item
                            </button>
                            <div class="flex items-center justify-end gap-3 mt-3">
                                <button @click="cancelEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                                    Cancel
                                </button>
                                <button @click="saveEdit()"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-[#2F3D7E] rounded-lg hover:bg-[#1E2858] transition-colors">
                                    Save Changes
                                </button>
                            </div>
                        </div>
                    </div>

                    
                    <form id="add-custom-section-form"
                        action="<?php echo e(route('dashboard.job-descriptions.section.add', $jobDescription->id)); ?>"
                        method="POST" class="hidden">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" name="title" id="custom-section-title">
                        <input type="hidden" name="content" id="custom-section-content">
                    </form>

                    
                    <div class="bg-white border border-gray-200 rounded-2xl p-6 mb-8" x-data="{
                        customSectionModal: false,
                        sectionTitle: '',
                        sectionContent: '',
                        sectionError: '',
                    
                        customSections: <?php echo \Illuminate\Support\Js::from(
    $jobDescription->customSections->map(
        fn($s) => [
            'id' => $s->id,
            'title' => $s->title,
            'content' => $s->content,
            'persisted' => true,
        ],
    ),
)->toHtml() ?>,
                    
                        addSection() {
                            if (!this.sectionTitle || !this.sectionContent) return;

                            this.sectionError = '';
                            const title = this.sectionTitle;
                            const content = this.sectionContent;

                            fetch(`/dashboard/job-descriptions/<?php echo e($jobDescription->id); ?>/sections`, {
                                    method: 'POST',
                                    credentials: 'same-origin',
                                    headers: {
                                        'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>',
                                        'Accept': 'application/json',
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify({
                                        title,
                                        content
                                    })
                                })
                                .then(async (res) => {
                                    const data = await res.json().catch(() => ({}));
                                    if (!res.ok) {
                                        const message =
                                            data.message ||
                                            Object.values(data.errors || {})
                                            .flat()
                                            .join(', ') ||
                                            'Content must be at least 10 characters.';

                                        throw new Error(message);
                                    }
                                    return data;
                                })
                                .then((data) => {
                                    this.customSections.push({
                                        id: data.section.id,
                                        title: data.section.title,
                                        content: data.section.content,
                                        persisted: true
                                    });

                                    this.sectionTitle = '';
                                    this.sectionContent = '';
                                    this.sectionError = '';
                                    this.customSectionModal = false;
                                })
                                .catch((err) => {
                                    this.sectionError = err.message;
                                });
                        },
                    
                        deleteSection(index, section) {
                            // optimistic UI removal
                            const removed = this.customSections.splice(index, 1)[0];
                    
                            if (!section.persisted || !section.id) return;
                    
                            fetch(`/dashboard/job-descriptions/<?php echo e($jobDescription->id); ?>/sections/${section.id}`, {
                                    method: 'DELETE',
                                    credentials: 'same-origin',
                                    headers: {
                                        'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>',
                                        'Accept': 'application/json'
                                    }
                                })
                                .then(async (res) => {
                                    if (!res.ok) {
                                        throw await res.text();
                                    }
                                })
                                .catch((err) => {
                                    console.error('Delete failed:', err);
                    
                                    // rollback
                                    this.customSections.splice(index, 0, removed);
                                    alert('Delete failed. Restored item.');
                                });
                        }
                    }">

                        
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Custom Sections</h3>

                            <button @click="customSectionModal = true"
                                class="inline-flex items-center gap-1.5 text-sm font-medium text-gray-500 hover:text-[#2F3D7E] 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="M12 4v16m8-8H4" />
                                </svg>
                                Add Custom Section
                            </button>
                        </div>

                        
                        <template x-if="customSections.length === 0">
                            <p class="text-sm text-gray-400">No custom sections added yet.</p>
                        </template>

                        
                        <template x-for="(section, index) in customSections" :key="section.id ?? index">
                            <div class="border border-gray-100 rounded-xl p-4 mb-3">

                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="text-sm font-bold text-gray-900" x-text="section.title"></h4>

                                    <button @click="deleteSection(index, section)"
                                        class="text-gray-400 hover:text-red-500 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </div>

                                <p class="text-sm text-[#314158]" x-text="section.content"></p>
                            </div>
                        </template>

                        
                        <div x-show="customSectionModal" x-cloak
                            class="fixed inset-0 z-50 flex items-center justify-center p-4">

                            <div class="fixed inset-0 bg-black/50" @click="customSectionModal = false"></div>

                            <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-lg">
                                <div class="p-6">

                                    <div class="flex items-start justify-between mb-5">
                                        <div>
                                            <h3 class="text-xl font-semibold text-gray-900">Add Custom Section</h3>
                                            <p class="text-sm text-gray-500">Create a custom section for your job
                                                description.</p>
                                        </div>

                                        <button @click="customSectionModal = false"
                                            class="text-gray-400 hover:text-[#314158]">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                        </button>
                                    </div>

                                    <div class="space-y-4">
                                        <input type="text" x-model="sectionTitle" placeholder="Section title"
                                            class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-gray-200 focus:border-gray-200">

                                        <textarea x-model="sectionContent" rows="4" placeholder="Content (at least 10 characters)"
                                            class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm resize-none focus:outline-none focus:ring-1 focus:ring-gray-200 focus:border-gray-200"></textarea>
                                    </div>

                                    <p x-show="sectionError" x-text="sectionError"
                                        class="text-red-500 text-sm mt-2 font-medium"></p>

                                    <div class="flex justify-end gap-3 mt-6">
                                        <button @click="customSectionModal = false; sectionError = ''"
                                            class="px-4 py-2 text-sm border rounded-lg">
                                            Cancel
                                        </button>

                                        <button @click="addSection()" :disabled="!sectionTitle || !sectionContent"
                                            class="px-5 py-2 text-sm text-white bg-[#2F3D7E] rounded-lg disabled:opacity-50">
                                            Save
                                        </button>
                                    </div>

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

                    </div>

                    
                    <div class="flex items-center justify-end gap-4">
                        <a href="<?php echo e(route('dashboard.job-descriptions.create')); ?>"
                            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.validate', $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 Validation</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>
                                Validating...
                            </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/show.blade.php ENDPATH**/ ?>