{{-- resources/views/dashboard/job-descriptions/show.blade.php - Generated Results --}}
@extends('layouts.dashboard')

@section('content')
    <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20">
        <div class="md:max-w-[80%] max-w-[90%] mx-auto px-6">

            {{-- Wizard Container --}}
            <div class="bg-white rounded-[20px] border border-gray-100 shadow-sm">

                {{-- Stepper --}}
                <x-job-descriptions.stepper :currentStep="2" />

                {{-- Content --}}
                <div class="px-6 md:px-10 pb-10"
                     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() {
                             // TODO: Backend developer to implement save logic
                             this.editingSection = null;
                             this.editedContent = '';
                             this.editedItems = [];
                         },
                         addItem() {
                             this.editedItems.push('');
                         },
                         removeItem(index) {
                             this.editedItems.splice(index, 1);
                         }
                     }">

                    {{-- Header --}}
                    <div class="flex items-center gap-3 mb-2">
                        <h2 class="text-2xl font-bold text-gray-900">Generated Job Description</h2>
                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            Generated
                        </span>
                    </div>
                    <p class="text-gray-500 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',
                        ];
                    @endphp

                    {{-- Role Summary --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold text-gray-900">Role Summary</h3>
                            <div class="flex items-center gap-3">
                                <button class="inline-flex items-center gap-1.5 text-sm 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="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>
                                <button x-show="editingSection !== 'summary'"
                                        @click="startEdit('summary', '{{ addslashes($roleSummary) }}')"
                                        class="inline-flex items-center gap-1.5 text-sm 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="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>
                        {{-- View Mode --}}
                        <div x-show="editingSection !== 'summary'">
                            <p class="text-sm text-gray-600 leading-relaxed">{{ $roleSummary }}</p>
                        </div>
                        {{-- Edit Mode --}}
                        <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-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] 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>

                    {{-- Key Responsibilities --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold text-gray-900">Key Responsibilities</h3>
                            <div class="flex items-center gap-3">
                                <button class="inline-flex items-center gap-1.5 text-sm 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="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>
                                <button x-show="editingSection !== 'responsibilities'"
                                        @click="startEdit('responsibilities', {{ json_encode($responsibilities) }})"
                                        class="inline-flex items-center gap-1.5 text-sm 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="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>
                        {{-- View Mode --}}
                        <div x-show="editingSection !== 'responsibilities'">
                            <ol class="space-y-3">
                                @foreach($responsibilities as $index => $responsibility)
                                    <li class="flex items-start gap-3">
                                        <span class="w-6 h-6 bg-blue-100 text-[#2F3D7E] rounded-full flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">{{ $index + 1 }}</span>
                                        <span class="text-sm text-gray-600">{{ $responsibility }}</span>
                                    </li>
                                @endforeach
                            </ol>
                        </div>
                        {{-- Edit Mode --}}
                        <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-6 h-6 bg-blue-100 text-[#2F3D7E] rounded-full flex items-center justify-center text-xs font-bold shrink-0 mt-2" x-text="index + 1"></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-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]">
                                        <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>

                    {{-- Required Skills --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold text-gray-900">Required Skills</h3>
                            <div class="flex items-center gap-3">
                                <button class="inline-flex items-center gap-1.5 text-sm 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="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>
                                <button x-show="editingSection !== 'skills'"
                                        @click="startEdit('skills', {{ json_encode($skills) }})"
                                        class="inline-flex items-center gap-1.5 text-sm 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="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>
                        {{-- View Mode --}}
                        <div x-show="editingSection !== 'skills'">
                            <ul class="space-y-3">
                                @foreach($skills as $skill)
                                    <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-gray-600">{{ $skill }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        {{-- Edit Mode --}}
                        <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-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]">
                                        <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>

                    {{-- Qualifications --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold text-gray-900">Qualifications</h3>
                            <div class="flex items-center gap-3">
                                <button class="inline-flex items-center gap-1.5 text-sm 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="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>
                                <button x-show="editingSection !== 'qualifications'"
                                        @click="startEdit('qualifications', {{ json_encode($qualifications) }})"
                                        class="inline-flex items-center gap-1.5 text-sm 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="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>
                        {{-- View Mode --}}
                        <div x-show="editingSection !== 'qualifications'">
                            <ul class="space-y-3">
                                @foreach($qualifications as $qualification)
                                    <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-gray-600">{{ $qualification }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        {{-- Edit Mode --}}
                        <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-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]">
                                        <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>

                    {{-- Core Competencies --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-8">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold text-gray-900">Core Competencies</h3>
                            <button class="inline-flex items-center gap-1.5 text-sm 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="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>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            @foreach($competencies as $competency)
                                <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">
                                    {{ $competency }}
                                </span>
                            @endforeach
                        </div>
                    </div>

                    {{-- Custom Sections --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-8"
                         x-data="{
                             customSectionModal: false,
                             sectionTitle: '',
                             sectionContent: '',
                             customSections: [],
                             addSection() {
                                 if (this.sectionTitle && this.sectionContent) {
                                     this.customSections.push({ title: this.sectionTitle, content: this.sectionContent });
                                     this.sectionTitle = '';
                                     this.sectionContent = '';
                                     this.customSectionModal = false;
                                 }
                             }
                         }">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold 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>

                        {{-- Custom sections list --}}
                        <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="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="customSections.splice(index, 1)" 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-gray-600" x-text="section.content"></p>
                            </div>
                        </template>

                        {{-- Add Custom Section Modal --}}
                        <div x-show="customSectionModal" x-cloak
                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0"
                             x-transition:enter-end="opacity-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100"
                             x-transition:leave-end="opacity-0">
                            <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"
                                 @click.away="customSectionModal = false">
                                <div class="p-6">
                                    <div class="flex items-start justify-between mb-1">
                                        <div>
                                            <h3 class="text-xl font-bold 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-gray-600 transition-colors">
                                            <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="mt-5 space-y-4">
                                        <div>
                                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Section Title</label>
                                            <input type="text" x-model="sectionTitle" placeholder="e.g., Benefits"
                                                   class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Content</label>
                                            <textarea x-model="sectionContent" rows="4" placeholder="Enter your section content..."
                                                      class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] resize-none"></textarea>
                                        </div>
                                    </div>

                                    <div class="flex items-center justify-end gap-3 mt-6">
                                        <button @click="customSectionModal = false"
                                                class="inline-flex items-center gap-1.5 px-4 py-2.5 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="addSection()"
                                                :disabled="!sectionTitle || !sectionContent"
                                                class="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg text-sm font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors disabled:opacity-50">
                                            <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                                            </svg>
                                            Save Section
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="flex items-center justify-end gap-4">
                        <a href="{{ route('dashboard.job-descriptions.create') }}"
                           class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                            Back
                        </a>
                        <a href="{{ route('dashboard.job-descriptions.validate', $jobDescription->id ?? 0) }}"
                           class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                            Continue to Validation
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
