{% load i18n %}

{% include "generic/components.html" %}
<form
    hx-post='{% url "interview-schedule" cand_id %}?view={{view}}'
    hx-target="#genericModalBody"
    hx-encoding="multipart/form-data"
    id="skillform"
>
    {{form.as_p}}
</form>
<script>
    $("#skillform .col-md-6").toggleClass("col-md-6");

    $(document).ready(function(){
        var candidate_id = $('[name=candidate_id]').val();
        var selectedmanagers = $('[name=employee_id]').val();

        // Make AJAX request to fetch available Managers for the selected Candidate
        $.ajax({
            url: '{% url "get_managers" %}',
            method: 'GET',
            data: {
            'cand_id': candidate_id
            },
            success: function(data) {
            // Clear existing options in the Managers dropdown
            $('[name=employee_id]').empty();

            // Append new options based on the response
            $.each(data.employees, function(key, value) {

                $('[name=employee_id]').append($('<option>', {
                value: key,
                text: value
                }));

            });

            // Set the selected Managers back to the dropdown
            if (selectedmanagers) {
                $('[name=employee_id]').val(selectedmanagers);
            }
            }
        });

    })

    $('[name=candidate_id]').change(function(){
        var candidate_id = $('[name=candidate_id]').val();
        var selectedmanagers = $('[name=employee_id]').val();

        // Make AJAX request to fetch available Managers for the selected Candidate
        $.ajax({
            url: '{% url "get_managers" %}',
            method: 'GET',
            data: {
            'cand_id': candidate_id
            },
            success: function(data) {
            // Clear existing options in the Managers dropdown
            $('[name=employee_id]').empty();

            // Append new options based on the response
            $.each(data.employees, function(key, value) {

                $('[name=employee_id]').append($('<option>', {
                value: key,
                text: value
                }));

            });

            // Set the selected Managers back to the dropdown
            if (selectedmanagers) {
                $('[name=employee_id]').val(selectedmanagers);
            }
            }
        });
    });


</script>