<?php $__env->startSection('content'); ?>

    <div class="md:max-w-[80%] max-w-[90%] mx-auto md:mt-10 mt-20 px-8 relative">
        <h1 class="text-3xl font-bold text-gray-800 mb-8">Add Job Experience & Salary</h1>

        <?php if(session('success')): ?>
            <div class="bg-green-100 text-green-700 p-4 mb-6 rounded-lg">
                <?php echo e(session('success')); ?>

            </div>
        <?php endif; ?>

        <?php if($errors->any()): ?>
            <div class="bg-red-100 text-red-700 p-4 mb-6 rounded-lg">
                <ul class="list-disc list-inside">
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li><?php echo e($error); ?></li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
        <?php endif; ?>

        <form method="POST" action="<?php echo e(route('dashboard.job-experiences.store')); ?>" id="salaryForm"
            class="bg-white shadow-md rounded-xl p-8">
            <?php echo csrf_field(); ?>

            <div class="flex items-center justify-between mb-10 relative">
                <div class="absolute h-1 bg-gray-300 w-full top-3 left-0 z-0"></div>
                <div class="block md:flex md:text-right text-center justify-between relative z-10 w-full">
                    <?php $__currentLoopData = ['Job Info', 'Employment', 'Compensation']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $title): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="step-indicator flex flex-col items-center text-gray-400 font-semibold"
                            id="step-<?php echo e($i + 1); ?>-indicator">
                            <div
                                class="bg-white w-8 h-8 flex items-center justify-center rounded-full border-2 border-gray-400 mb-2 transition-colors">
                                <?php echo e($i + 1); ?></div>
                            <?php echo e($title); ?>

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

            <div class="step step-1 space-y-6">
                
                
                <div class="relative">
                    <label class="block text-gray-700 font-medium mb-1">Job Title <span class="text-red-700">*</span></label>
                    <input type="text" name="job_title" id="job_title" value="<?php echo e(old('job_title')); ?>" autocomplete="off"
                        class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"
                        required placeholder="Start typing (e.g. Software Engineer)...">
                    
                    
                    <ul id="job-suggestions"
                        class="absolute left-0 right-0 z-50 border border-gray-200 mt-1 rounded-lg max-h-60 overflow-y-auto hidden bg-white shadow-xl">
                    </ul>
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-1">Company Name <span
                            class="text-red-700">*</span></label>
                    <input type="text" name="company_name" value="<?php echo e(old('company_name')); ?>" required
                        class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-1">Level <span class="text-red-700">*</span></label>
                    <select name="level" required
                        class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                        <option value="">Select Level</option>
                        <?php $__currentLoopData = ['Intern', 'Junior', 'Mid-Level', 'Senior', 'Lead', 'Manager', 'Director', 'VP', 'C-Level']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $level): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($level); ?>" <?php echo e(old('level') == $level ? 'selected' : ''); ?>>
                                <?php echo e($level); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-1">Work Status <span
                            class="text-red-700">*</span></label>
                    <select name="work_status" required
                        class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                        <option value="">Select</option>
                        <?php $__currentLoopData = ['new_offer' => 'New Offer', 'current_employee' => 'Current Employee', 'former_employee' => 'Former Employee']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($val); ?>" <?php echo e(old('work_status') == $val ? 'selected' : ''); ?>>
                                <?php echo e($label); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>

                <div class="flex justify-end">
                    <button type="button" id="step1Next"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition disabled:opacity-50">Next</button>
                </div>
            </div>

            <div class="step step-2 hidden space-y-6">
                <div class="flex items-center gap-3">
                    <input type="checkbox" name="still_employed" id="still_employed" value="1" class="h-5 w-5"
                        <?php echo e(old('still_employed') ? 'checked' : ''); ?>> <label for="still_employed"
                        class="text-gray-700 font-medium">Still Employed</label>
                </div>

                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Employment Month <span
                                class="text-red-700">*</span></label>
                        <select name="employment_month" required
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                            <option value="">Select Month</option>
                            <?php $__currentLoopData = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($i + 1); ?>"
                                    <?php echo e(old('employment_month') == $i + 1 ? 'selected' : ''); ?>><?php echo e($m); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Employment Year <span
                                class="text-red-700">*</span></label>
                        <select name="employment_year" required
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                            <option value="">Select Year</option>
                            <?php for($y = date('Y'); $y >= 1900; $y--): ?>
                                <option value="<?php echo e($y); ?>" <?php echo e(old('employment_year') == $y ? 'selected' : ''); ?>>
                                    <?php echo e($y); ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1 end-date-field">
                        <label class="block text-gray-700 font-medium mb-1">End Month</label>
                        <select name="end_month"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-gray-400 focus:border-gray-400 transition">
                            <option value="">Select Month</option>
                            <?php $__currentLoopData = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($i + 1); ?>" <?php echo e(old('end_month') == $i + 1 ? 'selected' : ''); ?>>
                                    <?php echo e($m); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                    <div class="flex-1 end-date-field">
                        <label class="block text-gray-700 font-medium mb-1">End Year</label>
                        <select name="end_year"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-gray-400 focus:border-gray-400 transition">
                            <option value="">Select Year</option>
                            <?php for($y = date('Y'); $y >= 1900; $y--): ?>
                                <option value="<?php echo e($y); ?>" <?php echo e(old('end_year') == $y ? 'selected' : ''); ?>>
                                    <?php echo e($y); ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Years in Role</label>
                        <input type="number" required value="0" name="number_of_years_as_employee" min="0"
                            value="<?php echo e(old('number_of_years_as_employee')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Years of Experience</label>
                        <input type="number" required name="years_of_experience" min="0" value="0"
                            value="<?php echo e(old('years_of_experience')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Years in Level</label>
                        <input required type="number" name="years_in_level" value="0" min="0"
                            value="<?php echo e(old('years_in_level')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-1">Country <span
                            class="text-red-700">*</span></label>
                    <select name="country" id="country" required data-old="<?php echo e(old('country')); ?>"
                        class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                        <option value="">Select Country</option>
                        </select>
                </div>

                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">State / Province </label>
                        <select name="state" id="state" required disabled data-old="<?php echo e(old('state')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition disabled:bg-gray-100 disabled:text-gray-400">
                            <option value="">Select State / Province</option>
                            </select>
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">City </label>
                        <select name="city" id="city" required disabled data-old="<?php echo e(old('city')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition disabled:bg-gray-100 disabled:text-gray-400">
                            <option value="">Select City</option>
                            </select>
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Post Code</label>
                        <input type="text" name="post_code" value="<?php echo e(old('post_code')); ?>" placeholder="Optional"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                    </div>
                </div>

                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Work Arrangement <span
                                class="text-red-700">*</span></label>
                        <select name="work_arrangement" required
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                            <option value="">Select</option>
                            <?php $__currentLoopData = ['onsite' => 'Onsite', 'remote' => 'Remote', 'hybrid' => 'Hybrid']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($val); ?>"
                                    <?php echo e(old('work_arrangement') == $val ? 'selected' : ''); ?>><?php echo e($label); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Employment Type <span
                                class="text-red-700">*</span></label>
                        <select name="employment_type" required
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
                            <option value="">Select</option>
                            <?php $__currentLoopData = ['full_time' => 'Full Time', 'part_time' => 'Part Time', 'contract' => 'Contract', 'freelance' => 'Freelance', 'internship' => 'Internship']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($val); ?>"
                                    <?php echo e(old('employment_type') == $val ? 'selected' : ''); ?>><?php echo e($label); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                </div>

                <div class="flex justify-between">
                    <button type="button"
                        class="prev-step bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold transition">Back</button>
                    <button type="button" id="step2Next"
                        class="next-step bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition disabled:opacity-50">Next</button>
                </div>
            </div>

            <div class="step step-3 hidden space-y-6">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Annual Base Salary</label>
                        <input type="number" name="annual_base_salary" min="1"
                            value="<?php echo e(old('annual_base_salary')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Bonus/Commission</label>
                        <input type="number" name="bonus_commission" min="0"
                            value="<?php echo e(old('bonus_commission')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Overtime Pay</label>
                        <input type="number" name="overtime_pay" min="0" value="<?php echo e(old('overtime_pay')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                </div>

                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Equity</label>
                        <input type="number" name="equity" min="0" value="<?php echo e(old('equity')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Currency <span
                                class="text-red-700">*</span></label>
                        <select name="currency" required
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm focus:ring-2 focus:ring-green-400 focus:border-green-400 transition">
                            <option value="">Select Currency</option>
                            <?php $__currentLoopData = ['USD', 'EUR', 'GBP', 'NGN', 'CAD', 'AUD', 'JPY', 'CNY', 'CHF', 'INR', 'BRL', 'MXN', 'SEK', 'ZAR', 'NZD', 'RUB', 'SGD', 'HKD', 'KRW', 'TRY']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cur): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($cur); ?>" <?php echo e(old('currency') == $cur ? 'selected' : ''); ?>>
                                    <?php echo e($cur); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-1">Benefits</label>
                    <textarea name="benefits" rows="2" class="w-full border border-gray-300 p-3 rounded-lg shadow-sm"><?php echo e(old('benefits')); ?></textarea>
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-1">Job Description</label>
                    <textarea name="job_description" rows="3" class="w-full border border-gray-300 p-3 rounded-lg shadow-sm"><?php echo e(old('job_description')); ?></textarea>
                </div>

                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Industry</label>
                        <input type="text" name="industry" value="<?php echo e(old('industry')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                    <div class="flex-1">
                        <label class="block text-gray-700 font-medium mb-1">Company Size</label>
                        <input type="text" name="company_size" value="<?php echo e(old('company_size')); ?>"
                            class="w-full border border-gray-300 p-3 rounded-lg shadow-sm">
                    </div>
                </div>

                <div class="flex justify-between">
                    <button type="button"
                        class="prev-step bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold transition">Back</button>
                    <button type="submit"
                        class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-semibold transition">Submit</button>
                </div>
            </div>
        </form>
    </div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('scripts'); ?>
    <script>
        $(document).ready(function() {
            // Step Logic with Frontend Validation
            var $steps = $('.step');
            var $indicators = [$('#step-1-indicator'), $('#step-2-indicator'), $('#step-3-indicator')];
            var currentStep = 0;

            function showStep(index) {
                $steps.each(function(i) {
                    $(this).toggleClass('hidden', i !== index);
                });
                $indicators.forEach(function($ind, i) {
                    $ind.toggleClass('primary-color', i === index)
                        .toggleClass('border-blue-600', i === index)
                        .toggleClass('text-gray-400', i !== index);
                });
            }

            function validateStep(step) {
                var valid = true;
                $steps.eq(step).find('input, select, textarea').each(function() {
                    // Skip location inputs if they are disabled (dynamic loading)
                    if ($(this).is(':disabled')) return;

                    if ($(this).prop('required') && !$(this).val()) {
                        valid = false;
                        $(this).addClass('border-red-500').removeClass('border-gray-300');
                    } else {
                        $(this).removeClass('border-red-500').addClass('border-gray-300');
                    }
                });
                return valid;
            }

            $('#step1Next').click(function() {
                if (validateStep(0)) {
                    currentStep++;
                    showStep(currentStep);
                }
            });

            $('#step2Next').click(function() {
                if (validateStep(1)) {
                    currentStep++;
                    showStep(currentStep);
                }
            });

            $('.prev-step').click(function() {
                if (currentStep > 0) {
                    currentStep--;
                    showStep(currentStep);
                }
            });

            showStep(currentStep);

            // Job autocomplete
            var $jobInput = $('#job_title');
            var $suggestionsList = $('#job-suggestions');
            var timeout = null;
            $jobInput.on('input', function () {
                var query = $jobInput.val().trim();
                if (query.length < 2) {
                    $suggestionsList.addClass('hidden').empty();
                    return;
                }

                clearTimeout(timeout);
                timeout = setTimeout(function () {
                    $.getJSON('/google-job-autocomplete', {
                        q: query
                    })
                        .done(function (data) {
                            $suggestionsList.empty();
                            if (!data || data.length === 0) {
                                $suggestionsList.addClass('hidden');
                                return;
                            }
                            $.each(data, function (_, item) {
                                var $li = $('<li>')
                                    .text(item.displayTitle)
                                    .addClass(
                                        'px-3 py-2 hover:bg-blue-100 cursor-pointer text-sm text-left'
                                    )
                                    .click(function () {
                                        $jobInput.val($(this).text());
                                        $suggestionsList.addClass('hidden');
                                    });
                                $suggestionsList.append($li);
                            });
                            $suggestionsList.removeClass('hidden');
                        })
                        .fail(function (err) {
                            console.error(err);
                            $suggestionsList.addClass('hidden');
                        });
                }, 300);
            });


            // Still Employed toggle
            var $stillEmployedCheckbox = $('#still_employed');
            var $endDateFields = $('.end-date-field');

            function toggleEndDateFields() {
                if ($stillEmployedCheckbox.is(':checked')) {
                    $endDateFields.hide().find('select').prop('required', false);
                } else {
                    $endDateFields.show().find('select').prop('required', true);
                }
            }

            toggleEndDateFields(); // initialize on page load
            $stillEmployedCheckbox.change(toggleEndDateFields);

            // ============================================
            // 2. DYNAMIC LOCATION LOGIC
            // ============================================
            const $countrySelect = $('#country');
            const $stateSelect = $('#state');
            const $citySelect = $('#city');

            // Load Countries
            $.ajax({
                url: '/countries',
                method: 'GET',
                success: function(response) {
                    if (response.status) {
                        let oldCountry = $countrySelect.data('old');
                        response.data.forEach(function(country) {
                            let selected = (country.name === oldCountry) ? 'selected' : '';
                            $countrySelect.append(
                                `<option value="${country.name}" ${selected}>${country.name}</option>`
                            );
                        });

                        // If old value exists, trigger change to load states
                        if (oldCountry) {
                            $countrySelect.trigger('change');
                        }
                    }
                },
                error: function(err) {
                    console.error('Error fetching countries:', err);
                }
            });

            // On Country Change -> Load States
            $countrySelect.on('change', function() {
                const country = $(this).val();
                $stateSelect.html('<option value="">Select State / Province</option>').prop('disabled', true);
                $citySelect.html('<option value="">Select City</option>').prop('disabled', true);

                if (country) {
                    $stateSelect.html('<option value="">Loading...</option>');
                    $.ajax({
                        url: '/states/' + country,
                        method: 'GET',
                        success: function(response) {
                            $stateSelect.html('<option value="">Select State / Province</option>');
                            if (response.status) {
                                $stateSelect.prop('disabled', false);
                                let oldState = $stateSelect.data('old');
                                response.data.forEach(function(state) {
                                    let selected = (state.name === oldState) ? 'selected' : '';
                                    $stateSelect.append(
                                        `<option value="${state.name}" ${selected}>${state.name}</option>`
                                    );
                                });

                                if (oldState) {
                                    $stateSelect.trigger('change');
                                }
                            }
                        },
                        error: function(err) {
                            $stateSelect.html('<option value="">Could not load states</option>');
                        }
                    });
                }
            });

            // On State Change -> Load Cities
            $stateSelect.on('change', function() {
                const country = $countrySelect.val();
                const state = $(this).val();
                $citySelect.html('<option value="">Select City</option>').prop('disabled', true);

                if (country && state) {
                    $citySelect.html('<option value="">Loading...</option>');
                    $.ajax({
                        url: `/cities/${country}/${state}`,
                        method: 'GET',
                        success: function(response) {
                            $citySelect.html('<option value="">Select City</option>');
                            if (response.status) {
                                $citySelect.prop('disabled', false);
                                let oldCity = $citySelect.data('old');
                                response.data.forEach(function(city) {
                                    let selected = (city === oldCity) ? 'selected' : '';
                                    $citySelect.append(
                                        `<option value="${city}" ${selected}>${city}</option>`
                                    );
                                });
                            }
                        },
                        error: function(err) {
                            $citySelect.html('<option value="">Could not load cities</option>');
                        }
                    });
                }
            });
        });
    </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/resources/views/dashboard/job-experiences/create.blade.php ENDPATH**/ ?>