{# This file is part of INGInious. See the LICENSE and the COPYRIGHTS files for #}
{# more information about the licensing of this file. #}

{% extends "layout.html" %}

{% block title %}{{ course.get_name(session.language) }}{% endblock %}

{% block head %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/libs/chart.min.js') }}"></script>
{% endblock %}

{% block column %}
    {% with current='stats' %}{% include 'course_admin/menu.html' %}{% endwith %}
{% endblock %}

{% set is_admin = user_manager.has_admin_rights_on_course(course) %}

{% block navbar %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{url_for('coursepage', courseid=course.get_id())}}">{{ course.get_name(session.language) }}</a></li>
            <li class="breadcrumb-item"><a href="{{url_for('courseredirect', courseid=course.get_id())}}" title="{{ _('Administration') }}" data-toggle="tooltip" data-placement="bottom">
                <i class="fa fa-user-secret"></i></a></li>
            <li class="breadcrumb-item active">
                <a href="#">
                    <i class="fa fa-area-chart"></i> {{_("Statistics")}} <span class="sr-only"> {{ _("(current)") }}</span>
                </a>
            </li>
        </ol>
    </nav>
{% endblock %}

{% block content %}
<h2>{{_("Statistics")}}</h2>
<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" role="tablist">
            <li role="presentation" class="nav-item">
                <a class="active nav-link" href="#tab_progress" role="tab" data-toggle="tab"><i class="fa fa-tasks fa-fw"></i>{{_("Student progress")}}</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="#tab_submissions" class="nav-link" role="tab" data-toggle="tab"><i class="fa fa-dashboard fa-fw"></i> {{ _("Submissions") }}</a>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <div role="tabpanel" class="card-body tab-pane active" id="tab_progress">
            <h3>{{ _("Tasks") }}</h3>
            <div style="overflow-x:auto;">
                <table class="table">
                    <tr>
                        <th>{{_("task name")}}</th>
                        <th>{{_("# student viewed")}}</th>
                        <th>{{_("# student attempted")}}</th>
                        <th>{{_("# student succeeded")}}</th>
                        <th>{{_("# attempts")}}</th>
                        <th>
                            <div class="btn-group btn-group-sm" role="group">
                                <a href="{{url_for('coursestatisticspage', courseid=course.get_id(), progress_csv='')}}" class="btn btn-info"
                                   title="{{_('Download CSV') }}" data-toggle="tooltip" data-placement="bottom"><i
                                    class="fa fa-table"></i></a>
                                <a href="{{url_for('coursesubmissionspage', courseid=course.get_id())}}"
                                   class="btn btn-secondary" title="{{ _('View all submissions') }}" data-toggle="tooltip"
                                data-placement="bottom"><i class="fa fa-files-o"></i></a>
                            </div>
                        </th>
                    </tr>
                    {% for taskid in stats_progress %}
                    <tr>
                        <td>
                            {{ stats_progress[taskid]["name"] }}
                            <input type="hidden" name="task" value="{{taskid}}">
                        </td>
                        <td>{{stats_progress[taskid]["viewed"]}}</td>
                        <td>{{stats_progress[taskid]["attempted"]}}</td>
                        <td>{{stats_progress[taskid]["succeeded"]}}</td>
                        <td>{{stats_progress[taskid]["attempts"]}}</td>
                            <td style="min-width:120px">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{url_for('coursesubmissionspage', courseid=course.get_id(), tasks=taskid)}}" class="btn btn-secondary" title="{{_('View submissions') }}" data-toggle="tooltip"
                                       data-placement="bottom"><i class="fa fa-file-code-o fa-fw"></i></a>
                                </div>
                            </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane card-body" id="tab_submissions">
            {% with target="stats#alerts", is_stats=True %}
                {% include "course_admin/submissions_query.html" %}
            {% endwith %}
            <!-- Alerts -->
            <div id="alerts">
                {% for msg in msgs %}
                <div class="alert alert-warning alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    {{msg}}
                </div>
                {% endfor %}
            </div>

            <!-- Statistics global -->
            <h3>{{_("Global statistics")}}</h3>
            <div class="row mb-3">
                <div class="col-sm-5">
                    <div class="card">
                        <div class="card-header">{{_("Submissions statistics")}}</div>
                        <div class="card-body ">
                            <table class="table table-sm table-borderless">
                                <tbody>
                                    {% for stat in stats_global[0] %}
                                        <tr>
                                            <td class="summary-heading">{{ stat[0] }}</td>
                                            <td class="summary-content">{{ stat[1] }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                {% if stats_global|length >= 2 and stats_global[1]|length > 0 %}
                    <div class="col-sm-7">
                        <div class="card">
                            <div class="card-header">{{ _("Tag statistics") }}</div>
                            <div class="card-body">
                                <table class="table table-sm table-borderless ">
                                    <thead>
                                        <tr>
                                            <th>{{ _("Tag") }}</th>
                                            <th>{{ _("All submissions") }}</th>
                                            <th>{{ _("Best submissions") }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for (tag, v_total, v_best) in stats_global[1] %}
                                            {% set color = "badge alert-danger" if tag.is_misconception() else "badge alert-info" %}
                                            <tr>
                                                <td><span class="{{color}}" id="{{tag.get_id()}}" data-toggle="tooltip" data-placement="left" title="{{ tag.get_description(session.language) }}"> {{ _(tag.get_name(session.language)) }}</span></td>
                                                {# The number of decimal digits. (10 for 1 decimal, 100 for two decimals, ...) #}
                                                {% set accuracy = 10 %}
                                                {% set val_displayed_total = ((v_total*accuracy)|int)/accuracy %}
                                                {% set val_displayed_best = ((v_best*accuracy)|int)/accuracy %}

                                                {# If the displayed value is 0 but in fact the value is not 0 (e.g. 0.00001), we display the '>' character because we need to know that there is at least one tag True. #}
                                                {% if val_displayed_total == 0 and v_total != 0 %}
                                                    {% set val_displayed_total = "> " + str(val_displayed_total) %}
                                                {% endif %}
                                                {% if val_displayed_best == 0 and v_best != 0 %}
                                                    {% set val_displayed_best = "> " + str(val_displayed_best) %}
                                                {% endif %}
                                                <td>{{val_displayed_total}} %</td>
                                                <td>{{val_displayed_best}} %</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
            <!-- Statistics End -->


            <h3>{{ _("Submissions") }}</h3>
            <canvas id="canvas"></canvas>
            <script type="text/javascript">"use strict";

                var color = Chart.helpers.color;
                var config = {
                    type: 'line',
                    data: {
                        datasets: [{
                            label: 'All submissions',
                            backgroundColor: color('rgb(255, 99, 132)').alpha(0.5).rgbString(),
                            borderColor: 'rgb(255, 99, 132)',
                            fill: false,
                            type: "line",
                            data: [
                                {% for entry in stats_graph[0] %}
                                    {
                                        x: "{{ entry[0] }}",
                                        y: "{{ entry[1] }}"
                                    },
                                {% endfor %}
                            ]
                        }, {
                            label: 'Valid submissions',
                            backgroundColor: color('rgb(54, 162, 235)').alpha(0.5).rgbString(),
                            borderColor: 'rgb(54, 162, 235)',
                            fill: true,
                            type: "line",
                            data: [
                                {% for entry in stats_graph[1] %}
                                    {
                                        x: "{{ entry[0] }}",
                                        y: "{{ entry[1] }}"
                                    },
                                {% endfor %}
                            ]
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            xAxes: [{
                                type: 'time',
                                distribution: 'series',
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Date'
                                },
                                ticks: {
                                    major: {
                                        fontStyle: 'bold',
                                        fontColor: '#FF0000'
                                    }
                                },
                                time: {
                                    displayFormats: {
                                        'hour': 'ddd H:mm'
                                    }
                                {% if not display_hour %}
                                    ,minUnit: 'day'
                                {% endif %}
                                }
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: '# submissions'
                                }
                            }]
                        }
                    }
                };

                window.onload = function() {
                    var ctx = document.getElementById('canvas').getContext('2d');
                    window.myLine = new Chart(ctx, config);
                };
            </script>
            <h3>{{ _("Tasks") }}</h3>
            <table class="table">
                <tr><th>Tasks</th><th># submissions</th><th># valid submissions</th></tr>
                {% for entry in stats_tasks %}
                    <tr>
                        <td>{{entry['name']}}</td>
                        <td>{{entry['submissions']}}</td>
                        <td>{{entry['validSubmissions']}}</td>
                    </tr>
                {% endfor %}
            </table>

            <h3>{{ _("Users") }}</h3>
            <table class="table">
                <tr><th>{{ _("user") }}</th><th>{{_("# submissions") }} </th><th> {{ _("# valid submissions") }}</th></tr>
                {% for entry in stats_users %}
                    <tr>
                        <td>{{ entry['name'] }}</td>
                        <td>{{ entry['submissions'] }}</td>
                        <td>{{ entry['validSubmissions'] }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>
</div>

<script>
    $(function() {
        var url = window.location.href;
        if(url.indexOf('alerts') >= 0){
            $('.nav-tabs a[href="#tab_submissions"]').tab('show');
        } else {
            dropdown(document.getElementById("query_header"))
        }

    });
</script>
{% endblock %}