{% extends 'administrator/base.html' %} {% block title %}Students Performance{% endblock %}
{% block body %}
    {% load static %}

    <script>
        var requireJS = [];
        var request_url = "{% url 'dashboard:administrator_students_years_performance_api'%}";
        loadJS(requireJS, "{% static 'dashboard/views/charts4.js'%}");
    </script>

    <input type="hidden" id="myData" name="variable" readonly value="{{ years_counts }}">
    <main class="animated fadeIn row">

        <div class="col-md-12">
            <div class="card" style="margin-top: 10px">
                <div class="card-header">
                    <h3 class="card-title mb-0">Students Performance</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="row col-sm-9">
                            <div class="col-xl-2 col-md-3">
                                <div class="dropdown">
                                    <select class="form-control" id="year-selector">
                                        <option id="yTitle" value="" selected>Year</option>
                                        {% for year in years %}
                                            <option value="{{ year.id }}"
                                                    id="year_{{ forloop.counter }}">{{ year.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>


                            <div class="col-xl-2 col-md-4">
                                <div class="dropdown">
                                    <select class="form-control" id="department-selector">
                                        <option id="dTitle" value="" selected>Department</option>
                                        {% for dep in departments %}
                                            <option value="{{ dep.id }}"
                                                    id="dep_{{ forloop.counter }}">{{ dep.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-3">
                            <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
                                    {% for term in terms %}
                                        <label class="btn btn-outline-secondary">
                                            <input type="radio" id="rb" name="options"
                                                   value="{{ term.id }}"> {{ term.name }}
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="wrapper mx-auto">
                        <canvas id="canvas-1" class="chart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card" style="margin-top: 10px">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8 col-sm-12">
                            <h3 class="card-title mb-0">Students
                                <a href="{% url 'dashboard:administrator_student_add' %}" type="button"
                                   class="btn btn-info">Add</a>
                            </h3>
                        </div>

                        <div class="input-group col-md-4 col-sm-12">
                            <input type="text" id="search_input" name="input1-group2" class="form-control"
                                   placeholder="Student Name">
                            <span class=" input-group-btn ">
                            <button type="button" class="btn btn-primary " onclick="searchResults()">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>

                    </div>
                </div>
                <div class="card-body" id="students_results">
                    {% include 'administrator/students/pagination/students_performance.html' %}
                </div>
            </div>
        </div>

    </main>
    <script>
        document.getElementById("lis_1").parentElement.classList.add("active");
        var search_val = "";
        var url;

        function loadPage(event) {
            var id = event.target.id;
            if (document.getElementById(id).parentElement.classList.contains("active") != true) {
                page = document.getElementById(id).innerHTML;
                if (isNaN(page)) {
                    page = id;
                }
                url = "{% url 'dashboard:administrator_students_paginator' %}?page=" + page;
                if (search_val != "") {
                    url += "&keyword=" + search_val;
                }
                $.ajax({
                    type: "GET",
                    url: url,
                    success: function (data) {
                        $('#students_results').html(data);
                        if (isNaN(id) != true)
                            id = "lis_" + id;
                        document.getElementById(id).parentElement.classList.add("active");
                    },

                    error: function (response, error) {
                        alert(response.responseText);
                    }
                });
            }
        }

        function searchResults(e) {
            search_val = $("#search_input").val();

            $.ajax({
                type: "GET",
                url: "{% url 'dashboard:administrator_students_paginator' %}?keyword=" + search_val,
                success: function (data) {
                    $('#students_results').html(data);
                    document.getElementById("lis_1").parentElement.classList.add("active");
                },

                error: function (response, error) {
                    alert(response.responseText);
                }
            });
        }

        $(document).ready(function () {
            $("#search_input").keypress(function (e) {
                input_val = $("#search_input").val();
                if (input_val !== search_val) {
                    var key_pressed = e.which;
                    if (key_pressed === 13) {
                        searchResults();
                    }
                }
            });
        })
    </script>
{% endblock %}