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

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


<input type="hidden" id="myVar" name="variable" readonly value="{{ student_predictions.courses }}">
<input type="hidden" id="total" name="variable" readonly value="{{ student_advices_num_pages }}">
<main class="animated fadeIn row">
    <div class="col-md-8 col-sm-12">
        <div class="card" style="margin-top: 10px">
            <div class="card-header">
                <h3 class="card-title mb-0">Courses Performance</h3>
                <div class="small text-muted">{{ student_info.term__name }} - {{ student_info.year__name }}</div>
            </div>
            <div class="card-body">
                <div class="chart-wrapper">
                    <canvas id="canvas-1" class="chart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-12">
        <div class="card" style="margin-top: 10px">
            <div class="card-header">
                <h4 class="card-title mb-0">To Increase Your Performance</h4>
            </div>
            <div class="card-body pre-scrollable" style="height: calc(70vh + 20px)">
                <table class="table table-responsive-sm">
                    <tbody>
                        {% for rec_gen in student_recommendations.general_recommendations.0 %}
                        <tr>
                            <td>{{ rec_gen }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% for rec_co in student_recommendations.courses %}
                <h5 class="font-weight-bold">{{ rec_co.name }}:</h5>
                <table class="table table-responsive-sm">
                    <tbody>
                        {% for rec in rec_co.recommendations %}
                        <tr>
                            <td>{{ rec }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="col-md-12" id="advices">
        {% include "student/pagination/index.html" %}
    </div>
</main>
<script>
    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;
            }
            $.ajax({
                type: "GET",
                url: "{% url 'dashboard:student_advices_paginator' %}?page=" + page,
                success: function (data) {
                    $('#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 %}