{% block contentbody %}
<!-- <button type="button" class="btn waves-effect waves-light btn-info" data-toggle="modal" data-target="#enrollmentModal" >Make enrollment</button> -->

<div class="modal enrollment" id="enrollmentModal" tabindex="-1" role="dialog" aria-labelledby="enrollmentModal" aria-modal="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="enrollmentModal">University Application </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div class="form-errors">{{ enrollment_form.non_form_errors }}</div>
                <form method="POST" action="{% url 'application:make-enrollment' id%}">
                    {% csrf_token %}
                    
                    {{enrollment_form.as_p}}
                    <input type="submit" value="Submit" class="btn btn-primary">
                </form>
            </div>
        
        </div>
    </div>
</div>
<script>
    let country = document.querySelector('#id_country');
    let university = document.querySelector('#id_name_of_institution');
    let selectedprogram = document.querySelector('#id_program_level');
    let courses = document.querySelector('#id_course');

    country.addEventListener('change', countryProgram);
    // university.addEventListener('change',countryProgram);
    selectedprogram.addEventListener('change', countryProgram); 

    
function clearSelectOption(e){
    try{
        let id = e.currentTarget.getAttribute('id');
        if (id=='id_country'){
            university.innerHTML = '<option value="">Select a Institution</option>';
            courses.innerHTML = '<option value="">Select a Course</option>';
            // selectedprogram.innerHTML = '<option value="">Select a Program</option>';
        }
        if (id=='id_name_of_institution'){        
            courses.innerHTML = '<option value="">Select a Course</option>';
        }
        if(id='id_program_level'){
            courses.innerHTML = '<option value="">Select a Course</option>';
        }
}catch(err){
    //console.log()
}
}

function countryProgram(e){
    clearSelectOption(e);
    $.ajax({
        url: `/enrollment-form/choices/?country=${country.value}&program=${selectedprogram.value}&uni=${university.value}`,
        method: 'GET',
        mode: 'same-origin', // Do not send CSRF token to another domain.
        processData: false,
        contentType: false,
        success: function( result ) {
            result=JSON.parse(result);
            //console.log(result);
            clearSelectOption()
            result.forEach(myFunction);
            function myFunction(value){
                if (value.model == 'university.university'){//Univeristy data
                    let id=value.pk;
                    let name=value.fields.name;
                    //console.log(name);
                    clearSelectOption();
                        $('#id_name_of_institution').append($("<option></option>")
                        .attr("value",id)
                        .text(name));
                }
                if (value.model == 'university.universitycourses'){//UniveristyCourse data
                        console.log(value);
                        let id=value.pk;
                        let name=value.fields.course;
                        console.log(value);
                        clearSelectOption();
                        $('#id_course').append($("<option></option>")
                        .attr("value",id)
                        .text(name +" ("+value.fields.concentration+")"));
                }  
            }
        }
    });
}
</script>

{% endblock %}