{% load static %}
<div>
    {% include 'generic/bulk_form.html' %}
</div>
<script>

    // auto update job position and job role when change department
    $('#id_employee_work_info__department_id').on('change', function() {
        var departmentId = $(this).val();
        $.ajax({
            url: '{% url "get-job-positions" %}',
            method: 'GET',
            data: {
                'department_id': departmentId
            },
            success: function(data) {

                $('#id_employee_work_info__job_position_id').empty();

                $.each(data.job_positions, function(key, value) {
                    $('#id_employee_work_info__job_position_id').append($('<option>', {
                        value: key,
                        text: value
                    }));
                });

                if ($('#id_employee_work_info__job_position_id option').length > 0) {
                    var firstJobPositionId = $('#id_employee_work_info__job_position_id option:first').val();
                    $('#id_employee_work_info__job_position_id').val(firstJobPositionId);


                    $('#id_employee_work_info__job_role_id').empty();
                    $.each(data.job_roles, function(key, value) {
                        $('#id_employee_work_info__job_role_id').append($('<option>', {
                            value: key,
                            text: value
                        }));
                    });
                }

                $('#id_employee_work_info__job_position_id').change();
                $('#id_employee_work_info__job_role_id').change();
            }
        });
    });


    // auto update department and job role when change job position
    $('#id_employee_work_info__job_position_id').on('change', function() {

        var jobPositionId = $(this).val();
        $.ajax({
            url: '{% url "get-job-roles" %}',
            method: 'GET',
            data: {
                'job_position_id': jobPositionId
            },
            success: function(data) {

                $('#id_employee_work_info__job_role_id').empty();
                $.each(data.job_roles, function(key, value) {
                    $('#id_employee_work_info__job_role_id').append($('<option>', {
                        value: key,
                        text: value
                    }));
                });

                $('#id_employee_work_info__job_role_id').change();
                //department
                $('#id_employee_work_info__department_id').empty();
                $.each(data.departments, function(key, value) {
                    $('#id_employee_work_info__department_id').append($('<option>', {
                        value: key,
                        text: value
                    }));
                });

                // Select the correct department
                if (data.department_id) {
                    $('#id_employee_work_info__department_id').val(data.department_id);
                }
            }
        });
    });
// changing job role
    $('#id_employee_work_info__job_role_id').on('change', function() {

        var jobroleId = $(this).val();
        $.ajax({
            url: '{% url "get-job-position-department" %}',
            method: 'GET',
            data: {
                'job_role_id': jobroleId
            },
            success: function(data) {

                $('#id_employee_work_info__job_position_id').empty();
                $.each(data.job_positions, function(key, value) {
                    $('#id_employee_work_info__job_position_id').append($('<option>', {
                        value: key,
                        text: value
                    }));
                });

                if (data.job_position_id) {
                    $('#id_employee_work_info__job_position_id').val(data.job_position_id);
                }
                //department
                $('#id_employee_work_info__department_id').empty();
                $.each(data.departments, function(key, value) {
                    $('#id_employee_work_info__department_id').append($('<option>', {
                        value: key,
                        text: value
                    }));
                });

                // Select the correct department
                if (data.department_id) {
                    $('#id_employee_work_info__department_id').val(data.department_id);
                }
            }
        });
    });
</script>