{% extends 'base.html' %}
{% block contentbody %}
{% csrf_token %}
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-5 align-self-center">
            <h4 class="page-title">   
            Course Detail:    
            </h4>
        </div>
        <div class="col-7 align-self-center">
            <div class="d-flex align-items-center justify-content-end">
                <nav aria-label="breadcrumb">
            <ul class="breadcrumb action-buttons pull-right">
            </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid" >

    <div class="card">
        <div class="card-body">

            <div class="basic-info-item row">
                <div class="col-md-3">Course:</div>
                
                <div class="col-md-4">{{object.course.name}}</div>
            </div>

            <div class="basic-info-item row">
                <div class="col-md-3">Program Country:</div>
                
                <div class="col-md-4">{% for country in object.course.countries.all %}
                    {{country.name}},
                {% endfor %}
                </div>
            </div>

            <div class="basic-info-item row">
                <div class="col-md-3">Keywords:</div>
                
                <div class="col-md-4">{{object.course.keywords}}</div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-5 align-self-center">
            <h4 class="page-title">   
            Course Information under {{university_selected.name}}:    
            </h4>
        </div>
        <div class="col-7 align-self-center">
            <div class="d-flex align-items-center justify-content-end">
                <nav aria-label="breadcrumb">
            <ul class="breadcrumb action-buttons pull-right">
               
                <a href="{% url 'university:edit_course_information' universitycourses.id %}" >
                    <i class="icon icon-plus3"></i>
                    Edit Details
                </a>
              
            </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
    
            


                <div class="basic-info-item row">
                    <div class="col-md-3">University:</div>
                    
                    <div class="col-md-4">{{object.uni_or_campus.name}}</div>
                </div>
                <div class="basic-info-item row">
                    <div class="col-md-3">Course:</div>
                    
                    <div class="col-md-4">{{object.course}}</div>
                </div>
                
                <div class="basic-info-item row">
                    <div class="col-md-3">Program Level:</div>
                    
                    <div class="col-md-4">{{object.program_level}}</div>
                </div>
                <div class="basic-info-item row">
                    <div class="col-md-3">Concentration:</div>
                    
                    <div class="col-md-4">{{object.concentration}}</div>
                    </div>  
                <div class="basic-info-item row">
                    <div class="col-md-3">Location:</div>
                    
                    <div class="col-md-4">{{object.location}}</div>
                </div>
                <div class="basic-info-item row">
                    <div class="col-md-3">Application Fee:</div>
                    
                    <div class="col-md-4">{{object.application_fee}}</div>
                </div>
                <div class="basic-info-item row">
                    <div class="col-md-3">Tuition Fee:</div>
                    
                    <div class="col-md-4">{{object.tuition_fee}}</div>
                </div>
                <div class="basic-info-item row">
                    <div class="col-md-3">Duration:</div>
                    
                    <div class="col-md-4">{{object.duration}}</div>
                </div>
                <div class="basic-info-item row">
                    <div class="col-md-3">Admission Requirements:</div>
                    
                    <div class="col-md-4">{{object.admission_requirements}}</div>
                </div>
                <div class="basic-info-item row">
                    <div class="col-md-3">Concentration:</div>
                    
                    <div class="col-md-4">{{object.concentration}}</div>
                </div>
        </div>
    </div>

    <div class="row">
        <div class="col-5 align-self-center">
            <h4 class="page-title">   
            Universities offering this course:    
            </h4>
        </div>
        <div class="col-7 align-self-center">
            <div class="d-flex align-items-center justify-content-end">
                <nav aria-label="breadcrumb">
            <ul class="breadcrumb action-buttons pull-right">
            </ul>
                </nav>
            </div>
        </div>
    </div>
<div class="card">
    <div class="card-body">
        {% for university in all_university %}

        <div class="basic-info-item row">
        
            
            <div class="col-md-4">
                <a href="{% url 'university:view_university' university.uni_or_campus.id %}">
                   {{university.uni_or_campus}}({{university.program_level}})
                   
               </a> 
            </div>
        </div>

        {% endfor %}

    </div>
</div>


</div>

<!-- <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Edit Country</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form method="post" id="edit_country">
        <div class="modal-body">
                {% csrf_token %}
                {{ form.as_p }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </form>
    </div>
  </div> -->

<!-- </div> -->




{% endblock contentbody %}
{% block js %}
<script>


//  function edit_detail(elem){
//     //  var uni_id = $(elem).data('uni_id');
//      var course_id = $(elem).data('course_id');
//      var uni_id = $(elem).data('university_id');
//     var csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
//     $('#edit_country').attr('action', '/university/edit_university_course_detail/'+course_id+'/');

//     $.ajax({
//         url: '/university/get_university_course_detail_info/',
//         type: 'POST',
//         data: {
//             'csrfmiddlewaretoken': csrf_token,
//             'course_id': course_id,
//             'university_id': uni_id,
//         },
//         success: function(data){
//             console.log(data)
//             $("#course_detail").val(data.concentration)
//             $('[name="location"]').val(data.location)
//             $('[name="program_level"]').val(data.program_level)
//             $('[name="application_fee"]').val(data.application_fee)
//             $('[name="admission_requirements"]').val(data.admission_requirements)
//             $('[name="duration"]').val(data.duration)
//             $('[name="tuition_fee"]').val(data.tuition_fee)

//         }
//     });
// }
 function add_detail(){
    $('#edit_country').attr('action', '/university/add_university_course_detail/'+"{{courses.id}}"+'/'+"{{university_selected.id}}"+'/');
    document.getElementById("edit_country").reset();

 }
</script>
{% endblock js %}