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


<script type='text/javascript'>
    var requireJS = [];
    var request_url = "{%url 'dashboard:administrator_educators_rating_api'%}";
    var educatorsRatingData = {{educators_rating|safe}};
    loadJS(requireJS, "{% static 'dashboard/views/charts5.js'%}");
</script>


<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">Educators 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>

                <div class="col-md-6">
                    <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">

                        </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">Educators
                            <a href="{% url 'dashboard:administrator_educator_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="Educator Name">
                        <span class=" input-group-btn ">
                            <button type="button" class="btn btn-primary " id="search_btn">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>

                    </div>
                </div>

            </div>
            <div class="card-body" id="search_results">
                {% include 'administrator/educators/pagination/educators_performance.html' %}
            </div>
        </div>
    </div>

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

    function loadResults(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_educators_paginator' %}?page=" + page;
            if (search_val != "") {
                url += "&keyword=" + search_val;
            }
            $.ajax({
                type: "GET",
                url: url,
                success: function (data) {
                    $('#search_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_educators_paginator' %}?keyword=" + search_val,
            success: function (data) {
                $('#search_results').html(data);
                document.getElementById("lis_1").parentElement.classList.add("active");
            },
            error: function (response, error) {
                alert(response.responseText);
            }
        });

    }
    $(document).ready(function () {
        var input_val;
        $("#search_btn").click(function (e) {
            input_val = $("#search_input").val();
            if (input_val !== search_val) {
                searchResults();
            }
        });
        $("#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 %}