<?php $__env->startSection('content'); ?>
    <?php echo $__env->make('partials.generating', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <div id="creator" 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' => 1]] + (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' => 1]); ?>
<?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="bg-[#f9fafb] px-6 md:px-40 pb-10 pt-8">
                    <h2 class="text-2xl font-semibold text-gray-900 mb-2">Let's start with the basics</h2>
                    <p class="text-sm text-gray-500 mb-8">Provide the essential information about the role. We'll use this to
                        generate a comprehensive job description.</p>

                    <form
                        action="<?php echo e(isset($jobDescription) ? route('dashboard.job-descriptions.update', $jobDescription->id) : route('dashboard.job-descriptions.store')); ?>"
                        method="POST" x-data="{
                            jobTitle: '<?php echo e(old('job_title', $jobDescription->job_title ?? '')); ?>',
                            department: '<?php echo e(old('department', $jobDescription->department ?? '')); ?>',
                            level: '<?php echo e(old('level', $jobDescription->level ?? '')); ?>',
                            location: '<?php echo e(old('location', $jobDescription->location ?? '')); ?>',
                            employmentType: '<?php echo e(old('employment_type', $jobDescription->employment_type ?? '')); ?>',
                            errors: {},
                            validate() {
                                this.errors = {};
                                if (!this.jobTitle.trim()) this.errors.jobTitle = 'Job title is required';
                                else if (this.jobTitle.trim().length < 3) this.errors.jobTitle = 'Job title must be at least 3 characters';
                                else if (!/^[a-zA-Z][a-zA-Z0-9\s\-\/&(),.']+$/.test(this.jobTitle.trim())) this.errors.jobTitle = 'Job title must start with a letter and contain only letters, numbers, spaces, and common punctuation';
                                if (!this.department) this.errors.department = 'Department is required';
                                if (!this.level) this.errors.level = 'Level is required';
                                if (!this.location.trim()) this.errors.location = 'Location is required';
                                if (!this.employmentType) this.errors.employmentType = 'Employment type is required';
                                return Object.keys(this.errors).length === 0;
                            },
                            submitForm(e) {
                                if (!this.validate()) {
                                    
                                    e.preventDefault();
                        
                                } else {
                                    JobDescriptionLoader.showAndStart();
                                }
                            }
                        }">
                        <?php echo csrf_field(); ?>
                        <?php if(isset($jobDescription)): ?>
                            <?php echo method_field('PUT'); ?>
                        <?php endif; ?>
                        <?php if($errors->has('error')): ?>
                            <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">
                                <?php echo e($errors->first('error')); ?>

                            </div>
                        <?php endif; ?>

                        
                        <div class="border border-gray-200 rounded-2xl p-6 md:p-8 shadow-sm">
                            <h3 class="text-xl font-semibold text-gray-900 mb-1">Role Information</h3>
                            <p class="text-sm text-gray-500 mb-6 pb-6 border-b border-gray-100">Fill in the core details
                                about this position</p>

                            
                            <div class="mb-6">
                                <label class="block text-[12px] font-semibold text-gray-700 mb-2">
                                    Job Title <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="job_title" x-model="jobTitle"
                                    placeholder="e.g., Senior Software Engineer"
                                    :class="errors.jobTitle ? 'border-red-300 ring-2 ring-red-100' :
                                        'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                    class="w-full px-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors bg-[#F3F3F5]">
                                <p x-show="errors.jobTitle" x-text="errors.jobTitle"
                                    class="text-red-500 text-xs mt-1.5 font-medium"></p>
                                <?php $__errorArgs = ['job_title'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p class="text-red-500 text-xs mt-1.5 font-medium"><?php echo e($message); ?></p>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            <div class="mb-6">
                                <label class="block text-[12px] font-semibold text-gray-700 mb-2">
                                    Department <span class="text-red-500">*</span>
                                </label>

                                <div class="relative">
                                    <div class="absolute left-3 top-1/2 -translate-y-1/2">
                                        <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_21045)">
                                        <path d="M4 14.6666V2.66659C4 2.31296 4.14048 1.97382 4.39052 1.72378C4.64057 1.47373 4.97971 1.33325 5.33333 1.33325H10.6667C11.0203 1.33325 11.3594 1.47373 11.6095 1.72378C11.8595 1.97382 12 2.31296 12 2.66659V14.6666H4Z" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M3.9987 8H2.66536C2.31174 8 1.9726 8.14048 1.72256 8.39052C1.47251 8.64057 1.33203 8.97971 1.33203 9.33333V13.3333C1.33203 13.687 1.47251 14.0261 1.72256 14.2761C1.9726 14.5262 2.31174 14.6667 2.66536 14.6667H3.9987" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M12 6H13.3333C13.687 6 14.0261 6.14048 14.2761 6.39052C14.5262 6.64057 14.6667 6.97971 14.6667 7.33333V13.3333C14.6667 13.687 14.5262 14.0261 14.2761 14.2761C14.0261 14.5262 13.687 14.6667 13.3333 14.6667H12" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6.66797 4H9.33464" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6.66797 6.66675H9.33464" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6.66797 9.33325H9.33464" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6.66797 12H9.33464" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        </g>
                                        <defs>
                                        <clipPath id="clip0_680_21045">
                                        <rect width="16" height="16" fill="white"/>
                                        </clipPath>
                                        </defs>
                                        </svg>
                                    </div>
                                    <input type="text" name="department" list="departments" x-model="department"
                                        placeholder="Search or type a new department"
                                        :class="errors.department ? 'border-red-300 ring-2 ring-red-100' :
                                            'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                        class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors bg-[#F3F3F5]">
                                </div>

                                <datalist id="departments">
                                    <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dept): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($dept); ?>"></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </datalist>

                                <p x-show="errors.department" x-text="errors.department"
                                    class="text-red-500 text-xs mt-1.5 font-medium"></p>
                            </div>

                            <div class="mb-6">
                                <label class="block text-[12px] font-semibold text-gray-700 mb-2">
                                    Level / Grade <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select name="level" x-model="level"
                                        :class="errors.level ? 'border-red-300 ring-2 ring-red-100' :
                                            'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                        class="w-full px-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 appearance-none transition-colors bg-[#F3F3F5]">
                                        <option value="">Select level</option>
                                        <option value="L1 - Entry Level">L1 - Entry Level</option>
                                        <option value="L2 - Associate">L2 - Associate</option>
                                        <option value="L3 - Junior">L3 - Junior</option>
                                        <option value="L4 - Mid-Level">L4 - Mid-Level</option>
                                        <option value="L5 - Senior">L5 - Senior</option>
                                        <option value="L5 - Lead">L5 - Lead</option>
                                        <option value="L6 - Principal">L6 - Principal</option>
                                        <option value="L7 - Director">L7 - Director</option>
                                        <option value="L8 - VP">L8 - VP</option>
                                        <option value="L9 - Executive">L9 - Executive</option>
                                    </select>
                                    <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7" />
                                    </svg>
                                </div>
                                <p x-show="errors.level" x-text="errors.level"
                                    class="text-red-500 text-xs mt-1.5 font-medium"></p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-[12px] font-semibold text-gray-700 mb-2">
                                        Location <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <div class="absolute left-3 top-1/2 -translate-y-1/2">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.3346 6.66671C13.3346 9.99537 9.64197 13.462 8.40197 14.5327C8.28645 14.6196 8.14583 14.6665 8.0013 14.6665C7.85677 14.6665 7.71615 14.6196 7.60064 14.5327C6.36064 13.462 2.66797 9.99537 2.66797 6.66671C2.66797 5.25222 3.22987 3.89567 4.23007 2.89547C5.23026 1.89528 6.58681 1.33337 8.0013 1.33337C9.41579 1.33337 10.7723 1.89528 11.7725 2.89547C12.7727 3.89567 13.3346 5.25222 13.3346 6.66671Z" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M8 8.66663C9.10457 8.66663 10 7.7712 10 6.66663C10 5.56206 9.10457 4.66663 8 4.66663C6.89543 4.66663 6 5.56206 6 6.66663C6 7.7712 6.89543 8.66663 8 8.66663Z" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                        


<input type="text"
       id="location-input"
       name="location"
       x-model="location"
       placeholder="Search e.g., New York, NY"
       :class="errors.location ? 'border-red-300 ring-2 ring-red-100' :
           'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
       class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors bg-[#F3F3F5]">


                                    </div>
                                    <p x-show="errors.location" x-text="errors.location"
                                        class="text-red-500 text-xs mt-1.5 font-medium"></p>
                                </div>

                                
                                <div>
                                    <label class="block text-[12px] font-semibold text-gray-700 mb-2">
                                        Employment Type <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <div class="absolute left-3 top-1/2 -translate-y-1/2">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10.6654 13.3334V2.66671C10.6654 2.31309 10.5249 1.97395 10.2748 1.7239C10.0248 1.47385 9.68565 1.33337 9.33203 1.33337H6.66536C6.31174 1.33337 5.9726 1.47385 5.72256 1.7239C5.47251 1.97395 5.33203 2.31309 5.33203 2.66671V13.3334" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M13.332 4H2.66536C1.92898 4 1.33203 4.59695 1.33203 5.33333V12C1.33203 12.7364 1.92898 13.3333 2.66536 13.3333H13.332C14.0684 13.3333 14.6654 12.7364 14.6654 12V5.33333C14.6654 4.59695 14.0684 4 13.332 4Z" stroke="#62748E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                        <select name="employment_type" x-model="employmentType"
                                            :class="errors.employmentType ? 'border-red-300 ring-2 ring-red-100' :
                                                'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                            class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 bg-[#F3F3F5] appearance-none transition-colors">
                                            <option value="">Select type</option>
                                            <option value="Full-Time">Full-Time</option>
                                            <option value="Part-Time">Part-Time</option>
                                            <option value="Contract">Contract</option>
                                            <option value="Temporary">Temporary</option>
                                            <option value="Internship">Internship</option>
                                        </select>
                                        <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                    <p x-show="errors.employmentType" x-text="errors.employmentType"
                                        class="text-red-500 text-xs mt-1.5 font-medium"></p>
                                </div>
                            </div>
                        </div>

                        
                        <div class="mt-8 bg-blue-50 border border-blue-100 rounded-2xl p-5 flex items-start gap-4">
                            <div class="w-10 h-10 bg-[#2F3D7E] rounded-xl 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_705_5125)">
                                <path d="M8.28086 12.9167C8.20647 12.6283 8.05615 12.3651 7.84555 12.1545C7.63494 11.9439 7.37176 11.7936 7.08336 11.7192L1.97086 10.4009C1.88364 10.3761 1.80687 10.3236 1.75221 10.2512C1.69754 10.1789 1.66797 10.0907 1.66797 10C1.66797 9.90937 1.69754 9.82118 1.75221 9.74884C1.80687 9.6765 1.88364 9.62397 1.97086 9.59921L7.08336 8.28004C7.37166 8.20572 7.63477 8.05552 7.84537 7.84508C8.05596 7.63463 8.20634 7.37162 8.28086 7.08338L9.5992 1.97088C9.6237 1.88331 9.67618 1.80616 9.74863 1.75121C9.82108 1.69625 9.90951 1.6665 10.0004 1.6665C10.0914 1.6665 10.1798 1.69625 10.2523 1.75121C10.3247 1.80616 10.3772 1.88331 10.4017 1.97088L11.7192 7.08338C11.7936 7.37177 11.9439 7.63496 12.1545 7.84556C12.3651 8.05616 12.6283 8.20648 12.9167 8.28088L18.0292 9.59838C18.1171 9.62263 18.1946 9.67505 18.2499 9.74761C18.3052 9.82016 18.3351 9.90884 18.3351 10C18.3351 10.0912 18.3052 10.1799 18.2499 10.2525C18.1946 10.325 18.1171 10.3775 18.0292 10.4017L12.9167 11.7192C12.6283 11.7936 12.3651 11.9439 12.1545 12.1545C11.9439 12.3651 11.7936 12.6283 11.7192 12.9167L10.4009 18.0292C10.3764 18.1168 10.3239 18.1939 10.2514 18.2489C10.179 18.3038 10.0905 18.3336 9.99961 18.3336C9.90868 18.3336 9.82025 18.3038 9.7478 18.2489C9.67535 18.1939 9.62287 18.1168 9.59836 18.0292L8.28086 12.9167Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16.668 2.5V5.83333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.3333 4.16663H15" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M3.33203 14.1666V15.8333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.16667 15H2.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_705_5125">
                                <rect width="20" height="20" fill="white"/>
                                </clipPath>
                                </defs>
                            </svg>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-[#2F3D7E] mb-1">Professional Job Description Generation
                                </h4>
                                <p class="text-[12px] text-[#3657A7]">Based on your inputs, we'll create a complete, structured
                                    job description including role summary, responsibilities, required skills,
                                    qualifications, and competencies aligned with your job architecture.</p>
                            </div>
                        </div>


                        <div class="flex items-center justify-end gap-4 mt-10">
                            <a href="<?php echo e(route('dashboard.job-descriptions.index')); ?>"
                                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">
                                Cancel
                            </a>
                            <button type="submit" @click="submitForm($event)"
                                class="inline-flex items-center justify-center h-12 px-4 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors gap-2 text-sm">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_705_5125)">
                                <path d="M8.28086 12.9167C8.20647 12.6283 8.05615 12.3651 7.84555 12.1545C7.63494 11.9439 7.37176 11.7936 7.08336 11.7192L1.97086 10.4009C1.88364 10.3761 1.80687 10.3236 1.75221 10.2512C1.69754 10.1789 1.66797 10.0907 1.66797 10C1.66797 9.90937 1.69754 9.82118 1.75221 9.74884C1.80687 9.6765 1.88364 9.62397 1.97086 9.59921L7.08336 8.28004C7.37166 8.20572 7.63477 8.05552 7.84537 7.84508C8.05596 7.63463 8.20634 7.37162 8.28086 7.08338L9.5992 1.97088C9.6237 1.88331 9.67618 1.80616 9.74863 1.75121C9.82108 1.69625 9.90951 1.6665 10.0004 1.6665C10.0914 1.6665 10.1798 1.69625 10.2523 1.75121C10.3247 1.80616 10.3772 1.88331 10.4017 1.97088L11.7192 7.08338C11.7936 7.37177 11.9439 7.63496 12.1545 7.84556C12.3651 8.05616 12.6283 8.20648 12.9167 8.28088L18.0292 9.59838C18.1171 9.62263 18.1946 9.67505 18.2499 9.74761C18.3052 9.82016 18.3351 9.90884 18.3351 10C18.3351 10.0912 18.3052 10.1799 18.2499 10.2525C18.1946 10.325 18.1171 10.3775 18.0292 10.4017L12.9167 11.7192C12.6283 11.7936 12.3651 11.9439 12.1545 12.1545C11.9439 12.3651 11.7936 12.6283 11.7192 12.9167L10.4009 18.0292C10.3764 18.1168 10.3239 18.1939 10.2514 18.2489C10.179 18.3038 10.0905 18.3336 9.99961 18.3336C9.90868 18.3336 9.82025 18.3038 9.7478 18.2489C9.67535 18.1939 9.62287 18.1168 9.59836 18.0292L8.28086 12.9167Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16.668 2.5V5.83333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.3333 4.16663H15" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M3.33203 14.1666V15.8333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.16667 15H2.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_705_5125">
                                <rect width="20" height="20" fill="white"/>
                                </clipPath>
                                </defs>
                                </svg>
                                <?php echo e(isset($jobDescription) ? 'Update Job Description' : 'Generate Job Description'); ?>

                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('scripts'); ?>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5mVDa0d4nsqDYPd5Bz0SwzHGiJZMSlKg&libraries=places"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('location-input');
        const autocomplete = new google.maps.places.Autocomplete(input, {
            types: ['(regions)'], // cities, states, regions
        });

        autocomplete.addListener('place_changed', function () {
            const place = autocomplete.getPlace();

            let lga = '';
            let city = '';
            let state = '';
            let country = '';

            place.address_components.forEach(component => {
                const types = component.types;

                if (types.includes('locality')) {
                    city = component.long_name;
                }

                if (types.includes('administrative_area_level_2')) {
                    lga = component.long_name; // LGA (Nigeria)
                }

                if (types.includes('administrative_area_level_1')) {
                    state = component.long_name;
                }

                if (types.includes('country')) {
                    country = component.long_name;
                }
            });

            // document.getElementById('lga').value = lga;
            // document.getElementById('city').value = city;
            // document.getElementById('state').value = state;
            // document.getElementById('country').value = country;

            // Optional: format nicely into input
            input.value = [lga, city, state, country].filter(Boolean).join(', ');
        });
    });
</script>
<?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/create.blade.php ENDPATH**/ ?>