{% extends 'educator/base.html' %} {% block title %}Student{% endblock %} {% block body %} {% load static %} 
{% load widget_tweaks%}

<script>
    var requireJS = [];
    var request_url = "{% url 'dashboard:educator_student_profile_courses_grades_api' student_id%}";
    loadJS(requireJS, "{% static 'dashboard/views/charts.js'%}");
</script>
<input type="hidden" id="myVar" name="variable" readonly value="{{ student_predictions.courses }}">
<input type="hidden" id="" name="variable" readonly value="{{ student_advices_num_pages }}">
<input type="hidden" id="student_id" name="variable" readonly value="{{ student_id }}">

<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">Student 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 value="" id="yTitle" selected>Year</option>
                                    {% for year in years %}
                                        <option value="{{ year.id }}"
                                                id="year_{{ forloop.counter }}">{{ year.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 }}"
                                               checked="checked"> {{ term.name }}
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrapper mx-auto">
                    <canvas id="canvas-1" class="chart"></canvas>
                </div>
            </div>

        </div>
        <div class="col-md-12">
            <div class="card" style="margin-top:10px;">
                <div class="card-header">
                    <h3 class="card-title mb-0">Add Review</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{% url 'dashboard:educator_student_profile' student_id %}">
                        {%csrf_token%}
                        <div class="form-group">
                            <label for="comment">Review :</label>
                            {% for field in advice_form.visible_fields %}
                            <div class="form-group">

                                {{ field|add_class:'form-control' |attr:"rows:5" }} 
                                {% for error in field.errors %}
                                <span class="help-block">{{ error }}</span>
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                        <div class="col-md-8 col-sm-12 ">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card" style="margin-top: 10px">
                <div class="card-header">
                    <h3 class="card-title mb-0">Educators Advices</h3>
                </div>

                <div class="card-body" id="educator_advices">
                    {% include 'educator/pagination/student_profile.html' %}
                </div>
            </div>

        </div>
    </div>


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

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

                },

                error: function (response, error) {
                    alert(response.responseText);
                }
            });
        }
    }
</script>
{% endblock %}