{% extends 'base.html' %}
{% block contentbody %}
{% csrf_token %}

<div class="collapse" id="collapseExample">
    <div class="card card-body">
        <form action="{% url 'program:view_all_courses' %}" method="GET">
            <div class="row">
                <div class="col-md-2">
                    <select class="form-control countrySelect" name="country">
                        <option value="">Select Country</option>
                        {% for each in countrys %}
                        <option value="{{each.id}}">{{each.name}}</option>
                        {% endfor %}

                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-control programySelect" name="pg_level">
                        <option value="">Select program</option>
                        {% for each in pg_level %}
                        <option value="{{each.id}}">{{each}}</option>
                        {% endfor %}

                    </select>
                </div>
                <div class="col-md-3">
                    <input class="programName form-control" name="course" placeholder="Course Name" type="text"
                        min="10">
                </div>

                <input type="submit" class="btn btn-info btn-sm" value="Search">
            </div>

        </form>
    </div>
</div>

<div class="d-flex py-3 align-items-center justify-content-between">
    <div>
        <h4>All Courses:</h4>
    </div>
    <div>
        <a class="btn btn-secondary" href="{% url 'program:download-course'%}" style="color: white;">
            <i class="ti-export"></i>
            EXPORT
        </a>
        <a data-toggle="modal" class="btn btn-info" style="color: white;" data-target="#exampleModal"
            onclick="add_course()">
            <i class="mdi mdi-plus-outline"></i>
            Add Course
        </a>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
            aria-controls="collapseExample">
            <i class="m-r-10 mdi mdi-filter"></i>
        </a>
        {% comment %} <a href="#" class="btn btn-link btn-float has-text text-size-small" id="showHideFilterButton"
            title="filter" data-toggle="collapse" data-target="#filterPanel">
            <i class="mdi mdi-filter text-blue-400"></i>
        </a> {% endcomment %}
    </div>
</div>

<table class="table table-striped table-hover">
    <thead class="bg-secondary text-white">
        <tr>
            <td>SN</td>
            <td>Name</td>
            <td>Course ID</td>
            <td>Countries</td>
            <td>Program Level</td>
            <td>Status</td>
            <td>Universities</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        {% for course in courses %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ course.name }}</td>
            <td>{{ course.id }}</td>
            <td>
                {% for country in course.countries.all %}
                {{country}},
                {% endfor %}
            </td>
            <td>{{course.program_level}}</td>
            <td>
                {% if course.status %}
                <span class="badge badge-pill badge-success"> Active </span>
                {% else %}
                <span class="badge badge-pill badge-warning"> Inactive </span>
                {% endif%}
            </td>
            <td>
                <div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
                            <div class="modal-dialog modal-md">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="mySmallModalLabel">UNIVERSITIES</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    </div>
                                    <div class="modal-body">
                                        {% for obj in course.universitycourses_set.all %}
                                            <p class="badge badge-pill badge-primary" style="font-size: 12px;">{{obj.uni_or_campus.name}}</p>
                                        {% endfor %}  
                                    </div>
                                </div>
                                
                            </div>
                            
                        </div>

                <!-- <button id="myBtn" class="btn btn-primary btn-xs btn-info"> {{course.universitycourses_set.all.count}} Universities</button> -->
                <a id="myBtn" href="#" data-toggle="modal" data-target=".bs-example-modal-sm" data-id="3995"
                    class="btn btn-primary btn-xs btn-info">
                    {{course.universitycourses_set.all.count}} Universities
                </a>


            </td>

            <td class="d-flex justify-content-between">
                {% if perms.program.change_courses %}
                <a href="{% url 'program:edit_courses' course.id %}" data-id="{{ course.id }}"
                    class="btn btn-primary btn-sm">
                    <i class="icon icon-pencil"> edit </i>
                </a>
                {%endif%}
                {% if perms.program.delete_courses %}
                <a href="#" class="btn btn-danger btn-sm" data-id="{{ course.id }}" data-name="{{course.name}}"
                    onclick="delete_course(this)">
                    <i class="icon icon-trash"> delete </i>
                </a>
                {%endif%}
                <form action="{% url 'program:delete_course' pk=course.id %}" method="post"
                    id="delete_form_{{course.id}}">
                    {% csrf_token %}
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>

</table>
<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>
{% include 'pages/pagination.html' %}


{% endblock %}

{% block js%}
<script>
    function add_course() {
        $('#edit_country').attr('action', "/programs/add_course/");
        // $('#edit_country').trigger('reset');
        document.getElementById("edit_country").reset();
        document.getElementById("exampleModalLabel").innerHTML = "Add Course";

    }
    // function edit_course(elem){
    //     var id = $(elem).data('id');
    //     var csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
    //     console.log(id);
    //     document.getElementById("exampleModalLabel").innerHTML = "Edit Course";
    //     $.ajax({
    //         url: '/programs/get_course_info/',
    //         type: "POST",
    //         headers: {'X-CSRFToken': csrf_token},
    //         data: {'id': id},
    //         dataType: "json",
    //         success: function(data){
    //             console.log(data)
    //             $('#edit_country').attr('action', "/programs/edit_course/"+id+"/");
    //             $("#edit_country").find('input[name="name"]').val(data.name);
    //             $('#keywords').val(data.keywords);
    //             var program_level_options = $('#program_level').find("option");
    //             console.log(program_level_options);
    //             for (let i=0;i<program_level_options.length;i++){
    //                 if (program_level_options[i].text == data.program_level){
    //                     program_level_options[i].selected = true;
    //                     break;
    //                 }
    //             }
    //             country_options = $('#countries').find("option");
    //             for (let i=0; i<country_options.length;i++){
    //                 if (country_options[i].text == data.country){
    //                     country_options[i].selected = true;
    //                     break;
    //                 }
    //             }


    //             // document.getElementById('program_level').text()= data.program_level;
    //             $("#edit_country").find('input[name="countries"]').val(data.country);

    //         }
    //     });
    // }
    function delete_course(elem) {
        var id = $(elem).data('id');
        var name = $(elem).data('name');
        var del = confirm("Are you sure you want to delete " + name + "?");
        if (del == true) {
            $("#delete_form_" + id).submit();
        }
    }
</script>
{% endblock %}