{% load i18n %}
{% if messages %}
    <script>
        $('.filterButton')[0].click()
        setTimeout(function () { $('.oh-modal__close').click(); }, 1000);
    </script>
{% endif %}
<form hx-post="{% url 'create-interview-schedule' %}" hx-target="#createTarget" hx-encoding="multipart/form-data"
    id="skillform">
    {{form.as_p}}
</form>
<script>
    $("#skillform .col-md-6").toggleClass("col-md-6");

    $('[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>