{% extends 'base.html' %}

{% block css %}
{% include 'pages/csslinker.html' %}
<style>
    .select2 .select2-container .select2-container--default {
        height: 200px !important;
    }

    /* .select2-selection__rendered {
    line-height: 51px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
} */

    #id_intakes_master {
        padding: 1rem;
        display: inline-flex;
        overflow-wrap: break-word;
        overflow: auto;
    }

    #id_intakes_master>li {
        margin-right: 10px;
        list-style-type: none;

    }

    #id_intakes_bachelor {
        padding: 1rem;
        display: inline-flex;
        overflow-wrap: break-word;
    }

    #id_intakes_bachelor>li {
        margin-right: 10px;
        list-style-type: none;

    }

</style>
{% endblock css %}
{% block contentbody %}
<!-- FILE UPLOAD -->
{% if form.errors %}
<div class="alert alert-danger">
    {{ form.errors }}
</div>
{% endif %}
<form action="{% url 'university:upload-csv-file' %}" method="POST" enctype="multipart/form-data"
    class="form-horizontal">
    {% csrf_token %}
    <div class="form-group">
        <h4 for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">File: </h4>
        <div class="col-md-5">
            <input type="file" name="csv_file" id="csv_file" required="True" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
            <button class="btn btn-primary"> <span class="glyphicon glyphicon-upload"
                    style="margin-right:5px;"></span>Upload </button>
        </div>
    </div>
</form>
<!-- FILE UPLOAD END -->
{% csrf_token %}
<div class="card">
    <div class="card-body">
<div class="page-breadcrumb">
    <form action="{% url 'university:list_university' %}" method="GET">
        <div class="row justify-content-between mb-3">
            <div class="col-md-4">
            <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-7 d-flex">
                <input class="programName form-control" name="uni_name" placeholder="Uni Name" type="text" min="10">
                <button style="
                position: absolute;
                right: 12px;
                height: 95%;
                padding: unset;
                margin: unset;
            " type="submit" class="btn"><i style="
                    font-size: 1.75rem;
                    color: #4a4a4a;
                " class="mdi mdi-magnify"></i></button>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-5 align-self-center">
            <h4 class="page-title">
                Institution
            </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">
                        <li>
                            {% if perms.univeristy.add_university %}
                            <a data-toggle="modal" class="btn btn-success" style="color: white;"
                                data-target="#exampleModal" onclick="add_university()">
                                <i class="mdi mdi-plus-outline"></i>
                                Add university
                            </a>
                            {%endif%}
                        </li>
                    </ul>
                </nav>
            </ul>
            </div>
        </div>
    </div>
</div>


        <table class="table table-condensed table-bordered table-hover">
            <thead class="bg-secondary text-white">
                <tr>
                    <td>SN</td>
                    <td>Name</td>
                    <td>UNI ID</td>
                    <td>Country</td>
                    <td>Status</td>
                    <td>Website</td>
                    <td>Actions</td>
                </tr>
            </thead>
            <tbody>
                {% for uni in university_list %}
                <tr>

                    <td>
                        {{ forloop.counter }}</td>
                    <td>{{ uni.name }}</td>
                    <td>{{uni.id}}</td>
                    <td>{{uni.country}}</td>
                    <td>
                        {% if uni.status %}
                        <span class="label label-success">
                            Active
                        </span>
                        {% else %}
                        <span class="label label-danger">
                            Not-active
                        </span>
                        {% endif %}
                    </td>
                    <td>
                        {% if uni.uni_url%}
                        <a href="{{uni.uni_url}}" class="btn btn-xs btn-info" title="View" target="_blank">
                            <i class="mdi mdi-web"></i>
                        </a>
                        {% else %}
                        None
                        {% endif %}
                    </td>
                    <td>
                        <!-- <a class="btn btn-xs btn-success" href="{% url 'university:add_course_information' uni.id %}">
                            add course detail
                        </a> -->
                        {% if perms.university.view_university %}
                            <a href="/university/view_university_info/{{uni.id}}" class="btn btn-xs btn-info" title="View">
                                <i class="mdi mdi-eye"></i>
                            </a>
                        {%endif%}
                        {% if perms.university.delete_university %}
                        <a href="#" class="btn btn-danger btn-sm" data-id="{{ uni.id }}" data-name="{{uni.name}}"
                            onclick="delete_uni(this)">
                            <i class="icon icon-trash"> delete </i>
                        </a>
                        {%endif%}
                        {% if perms.university.change_university %}
                        <a href="{% url 'university:edit_university' uni.id %}" class="btn btn-primary btn-sm">
                            <i class="icon icon-edit"> edit </i>
                        </a>
                        {%endif%}
                        {% if perms.university.add_universitycourses %}
                        <a href="#" data-id="{{uni.id}}" onclick="get_courses(this)"  data-toggle="modal" data-target="#exampleModal1" class="btn btn-primary btn-sm">
                            <i class="icon icon-edit"  > assign Course </i> 
                        </a>
                        {%endif%}
                        <a href="{% url 'university:download-csv-file' uni.id %}" class="btn btn-light btn-sm">
                            <i class="icon icon-file"> EXPORT </i>
                        </a>
                        <form action="{% url 'university:delete_university' pk=uni.id %}" method="post"
                            id="delete_form_{{uni.id}}">
                            {% csrf_token %}
                        </form>

                    </td>
                </tr>
                {% endfor %}
            </tbody>

        </table>

    </div>

</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" 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 action="/university/add_university/" 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 class="modal fade" id="exampleModal1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"> Select Courses </h5> &nbsp;
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save_course()">Assign
                    Courses</button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row" id="course_pre_assigned">

                </div>
                <input type="text" id="my_uni" value="" style="visibility: hidden;">
                <input type="text" class="sel form-control" value="select options" style="width: 100%;">
            </div>
            <div class="modal-footer">

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

</div>
{% include 'pages/pagination.html' %}
{% endblock %}

{% block js %}
<script>

    $('.sel').select2({
        placeholder: 'Select an option'
    });


    function delete_uni(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();
        }

    }

    function get_courses(elem) {
        document.getElementById('course_pre_assigned').innerHTML = "";

        var id = $(elem).data('id');
        $('#my_uni').val(id);
        // console.log(id)
        url = "/university/assign-course/";
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                'id': id,
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
            },
            // processResults: function (data) {
            //     console.log(data);
            //     return {
            //         results: $.map(data, function (item) {
            //             return {id: item.id, text: item.title};
            //         })
            //     };
            // },
            success: function (data) {
                console.log(data);
                $('.sel').val(null).trigger('change');
                var data1 = data.data
                $(".sel").select2({
                    data: data1,
                    multiple: true,
                })
                // $(".sel").trigger('change'); 
            }
        });
    }

    function save_course() {
        var selected_course = $(".sel").select2('val');
        var uni_id = $('#my_uni').val();
        var all_ids = selected_course.split(",");

        url = "/university/save-course/";
        $.ajax({
            url: "/university/add-course-on-university/",
            type: 'POST',
            data: {
                'uni_id': uni_id,
                'courses': selected_course,
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function (data) {
                console.log("data")
            }
        });


    }


</script>

{% endblock %}