<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/parallax.min.js"></script>
<script src="assets/js/tilt.jquery.min.js"></script>
<script src="assets/js/jquery.paroller.min.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/backtotop.js"></script>
<script src="assets/js/odometer.js"></script>
<script src="assets/js/parallax-scroll.js"></script>
<script src="assets/js/gsap.min.js"></script>
<script src="assets/js/SplitText.min.js"></script>
<script src="assets/js/ScrollTrigger.min.js"></script>
<script src="assets/js/ScrollToPlugin.min.js"></script>
<script src="assets/js/ScrollSmoother.min.js"></script>
<script src="assets/js/typeit.js"></script>
<script src="assets/js/jquery.marquee.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/nav-tool.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/element-in-view.js"></script>
<script src="assets/js/color-settings.js"></script>
<script src="assets/js/script.js"></script>
<script>
$(document).ready(function() {
    $("#preferred_days").select2();
    $("#time_slots").select2();
});
const nextButtons = document.querySelectorAll('.next-step');
const prevButtons = document.querySelectorAll('.prev-step');

// Clear previous error messages and styles
function clearErrors(currentTab) {
    const invalidFields = currentTab.querySelectorAll('.is-invalid');
    invalidFields.forEach(field => field.classList.remove('is-invalid'));

    const errorMessages = currentTab.querySelectorAll('.text-danger');
    errorMessages.forEach(error => error.remove());
}

// Add an error message and styling to an invalid field
function showError(field, message) {
    const error = document.createElement('small');
    error.classList.add('text-danger', 'd-block', 'mt-1');
    error.innerText = message;

    if (!field.parentNode.querySelector('.text-danger')) {
        field.parentNode.appendChild(error);
    }

    field.classList.add('is-invalid');
}

// Handle the "Next" button click
nextButtons.forEach(button => {
    button.addEventListener('click', () => {
        const currentTab = document.querySelector('.tab-pane.active');
        const requiredFields = currentTab.querySelectorAll('[required]');
        let allValid = true;

        // Clear previous errors
        clearErrors(currentTab);

        // Validate required fields
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                allValid = false;
                const label = field.previousElementSibling?.innerText || 'This field';
                showError(field, `${label} is required.`);
            }
        });

        // Move to the next tab if all fields are valid
        if (allValid) {
            const nextTab = currentTab.nextElementSibling;
            if (nextTab) {
                currentTab.classList.remove('show', 'active');
                nextTab.classList.add('show', 'active');
                updateNav(nextTab.id);
            }
        }
    });
});

// Handle the "Previous" button click
prevButtons.forEach(button => {
    button.addEventListener('click', () => {
        const currentTab = document.querySelector('.tab-pane.active');
        const prevTab = currentTab.previousElementSibling;
        if (prevTab) {
            currentTab.classList.remove('show', 'active');
            prevTab.classList.add('show', 'active');
            updateNav(prevTab.id);
        }
    });
});

// Update the navigation based on the active tab
function updateNav(stepId) {
    document.querySelectorAll('.nav-link').forEach(nav => nav.classList.remove('active'));
    document.querySelector(`.nav-link[data-step="${stepId.replace('step', '')}"]`)?.classList.add('active');
}
/* On click show input js */
$('#work_as').click(function() {
    $('.work_input').css('display', 'block');
});
$('#other_langugaes').click(function() {
    $('.other_langugaes_input').css('display', 'block');
});
$('#driving_license').click(function() {
    $('.driving_license_box').css('display', 'block');
});
$('#medical_condi').click(function() {
    $('.medical_condi').css('display', 'block');
});
</script>
<script>
$(document).on('change', '#country', function() {
    var countryId = $(this).val();
    $.ajax({
        type: 'GET',
        url: 'https://demo-customdesigns.com/travel-ez/get/states',
        datatype: 'json',
        data: {
            country_id: countryId,
        },
        success: function(response) {
            $('.select-state').html('');
            if (response.length != undefined && response.length != null && response.length >
                0) {
                for (let i = 0; i < response.length; i++) {
                    $('.select-state').append(
                        `<option value="${response[i].id}">${response[i].name}</option>`)
                }
            } else {
                $('.select-state').html('<option>State Not Found</option>');
            }
            $('.select-state').trigger('change');
        }
    });
});

$(document).on('change', '#state', function() {
    var stateId = $(this).val();
    $.ajax({
        type: 'GET',
        url: 'https://demo-customdesigns.com/travel-ez/get/cities',
        datatype: 'json',
        data: {
            state_id: stateId,
        },
        success: function(response) {
            $('.select-city').html('');
            if (response.length != undefined && response.length != null && response.length >
                0) {
                for (let i = 0; i < response.length; i++) {
                    $('.select-city').append(
                        `<option value="${response[i].id}">${response[i].name}</option>`)
                }
            } else {
                $('.select-city').html('<option>City Not Found</option>');
            }
            $('.select-city').trigger('change');
        }
    });
});
</script>


</body>
</html>