{% extends "base.html" %}
{% load i18n waffle_tags %}

{% block head %}
    <link rel="stylesheet" href="{{ STATIC_URL }}stats/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}stats/css/dataTables.bootstrap.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}stats/css/daterangepicker-bs3.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}stats/css/stats.css">

    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/modernizr-2.8.3.min.js"></script>

    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/moment.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/daterangepicker.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/Chart.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/underscore.min.js"></script>

    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/dashboardStats.js"></script>
{% endblock %}

{% block subtitle %}
    {% trans 'Analytics' %}
{% endblock %}

{% block actions %}
    {% comment "Since we dont have the exports contents, we hide this button." %}
    <a href="" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" role="button" aria-expanded="false">{% trans 'Export' %} <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#"><i class="fa fa-print"></i> {% trans 'Print' %}</a></li>
        <li><a href="#"><i class="fa fa-file-pdf-o"></i> {% trans 'Save as PDF' %}</a></li>
        <li><a href="#"><i class="fa fa-file-excel-o"></i> {% trans 'Export to Excel' %}</a></li>
    </ul>
    {% endcomment %}
{% endblock %}

{% block main %}
    <div class="container">
        <div role="tabpanel">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#overview" aria-controls="home" role="tab" data-toggle="tab">{% trans 'Overview' %}</a></li>
                <li role="presentation"><a href="#survey" aria-controls="profile" role="tab" data-toggle="tab">{% trans 'Survey' %}</a></li>
                <li class="pull-right button-calendar">
                    <span class="spinner pull-left" style="display:none;"></span>
                    <button class="btn btn-primary pull-right" id="reportrange">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                        <span></span>
                    </button>
                </li>
            </ul>
            <div class="tab-content">
                <!-- Tab "OVERVIEW" CONTENT -->
                <div role="tabpanel" class="tab-pane fade in active" id="overview">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="block  block-chart" id="chart-connections">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="block  block-chart" id="chart-users">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="block  block-chart" id="chart-downloaded_files">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <form class="padded-top">
                                <div class="form-group">
                                    <label>{% trans 'Select a training' %}</label>
                                    <select id="training-select" class="form-control">
                                        <option value="">
                                            {% blocktrans with nbr_trainings=trainings|length %}All ({{ nbr_trainings }}){% endblocktrans %}
                                        </option>
                                        {% for training in trainings %}
                                            <option value="{{ training.id }}">{{ training }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="block  block-chart" id="chart-sessions">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="block  block-chart" id="chart-trained_students">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="block  block-chart" id="chart-session_durations">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="panel panel-default panel-chart panel-table">
                                <div class="panel-body">
                                    <h3>{% trans 'By trainer' %}</h3>
                                    <div>
                                        <table class="table-data" id="table-trainer_list">
                                            <thead>
                                                <tr>
                                                    <th>{% trans 'Trainer' %}</th>
                                                    <th>{% trans 'Sessions' %}</th>
                                                    <th>{% trans 'Trainees' %}</th>
                                                    <th>{% trans 'Session duration' %}</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="panel panel-default panel-chart">
                                <div class="panel-body">
                                    <h3>{% trans 'By group' %}</h3>
                                    <div>
                                        <table class="table-data" id="table-group_list">
                                            <thead>
                                                <tr>
                                                    <th>{% trans 'Group' %}</th>
                                                    <th>{% trans 'Sessions' %}</th>
                                                    <th>{% trans 'Trainees' %}</th>
                                                    <th>{% trans 'Session duration' %}</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% switch "enable_surveys" %}
                <div role="tabpanel" class="tab-pane" id="survey">
                    <div class="row">
                        <div class="col-md-12 select-training">
                            <div class="form-group">
                                <label>{% trans 'Select a training' %}</label>
                                <select id="training-select" class="form-control">
                                    <option value="">
                                        {% blocktrans with nbr_trainings=trainings|length %}All ({{ nbr_trainings }}){% endblocktrans %}
                                    </option>
                                    {% for training in trainings %}
                                        <option value="{{ training.id }}">{{ training }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="block  block-chart" id="chart-survey_results">
                            </div>
                        </div>s
                    </div>
                    <!-- <div class="row">
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="block  block-chart">
                                        <p>Pool 1 name
                                            <span>Satisfaisant</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="block block-content">
                                        <table class="table">
                                            <tr>
                                                <td>Question 1 label</td>
                                                <td>Peu satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 2 label</td>
                                                <td>Assez satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 3 label</td>
                                                <td>Satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 4 label</td>
                                                <td>Satisfaisant</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="block  block-chart">
                                        <p>Pool 2 name
                                            <span>Peu satisfaisant</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="block block-content">
                                        <table class="table">
                                            <tr>
                                                <td>Question 1 label</td>
                                                <td>Peu satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 2 label</td>
                                                <td>Assez satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 3 label</td>
                                                <td>Satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 4 label</td>
                                                <td>Satisfaisant</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="block  block-chart">
                                        <p>Pool 3 name
                                            <span>Insatisfaisant</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="block block-content">
                                        <table class="table">
                                            <tr>
                                                <td>Question 1 label</td>
                                                <td>Peu satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 2 label</td>
                                                <td>Assez satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 3 label</td>
                                                <td>Satisfaisant</td>
                                            </tr>
                                            <tr>
                                                <td>Question 4 label</td>
                                                <td>Satisfaisant</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="bloc-white">
                                <div class="bloc-white-head">
                                    <div class="bloc-white-title">
                                        <h3>Par formateur</h3>
                                    </div>
                                </div>
                                <div class="bloc-white-body">
                                    <table class="table-data">
                                        <thead>
                                            <tr>
                                                <th>Formateur</th>
                                                <th>Pool 1 name</th>
                                                <th>Pool 2 name</th>
                                                <th>Pool 3 name</th>
                                                <th><span>Total</span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th><img src="http://placehold.it/30x30" alt=""> <span class="name">Brian</span></th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="bloc-white">
                                <div class="bloc-white-head">
                                    <div class="bloc-white-title">
                                        <h3>Par CFR</h3>
                                    </div>
                                </div>
                                <div class="bloc-white-body">
                                    <table class="table-data">
                                        <thead>
                                            <tr>
                                                <th>Formateur</th>
                                                <th>Pool 1 name</th>
                                                <th>Pool 2 name</th>
                                                <th>Pool 3 name</th>
                                                <th><span>Total</span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th>CFR 1</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th>CFR 2</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th>CFR 3</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th>CFR 4</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th>CFR 5</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th>CFR 6</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th>CFR 7</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                            <tr>
                                                <th>CFR 8</th>
                                                <th>Peu satisfaisant</th>
                                                <th>Satisfaisant</th>
                                                <th>Insatisfaisant</th>
                                                <th>Peu satisfaisant</th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
                {% endswitch %}
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            /*FIXME:    When the page is load for the fist time,
                        dates appear in english , despite the next line.
                        When the date picker is refreshed, dates appear in french
                        as they should.
            */
            moment.locale('fr');
            new DashboardStats({
                dataUrl: '{% url 'stats:compute_analytics' %}',
                charts: {
                    graphType: {
                        connections: {
                            title: 'Connexions',
                            icon: 'sign-in',
                        },
                        downloaded_files: {
                            title: 'Documents téléchargés',
                            icon: 'files-o',
                        },
                        sessions: {
                            title: 'Sessions',
                            subtitle: 'session / formateur',
                            icon: 'calendar',
                        },
                        trained_students: {
                            title: 'Personnes formées',
                            subtitle: 'en moyenne / session',
                            icon: 'trophy'
                        },
                        session_durations: {
                            title: 'Temps de session',
                            icon: 'clock-o'
                        },
                        users: {
                            title: 'Utilisateurs',
                            icon: 'users'
                        },
                        survey_results: {
                            title: 'Moyenne globale de satisfaction',
                            icon: 'check-square'
                        }
                    },
                    tableType: {
                        trainer_list: {
                            columns: [ 'username', 'nb_sessions', 'nb_trainees', 'avg_session_duration' ],
                            format: {
                                avg_session_duration: function(value){
                                    return moment.duration(value, 'seconds').hours();
                                }
                            }
                        },
                        group_list: {
                            columns: ['group_name', 'nb_sessions', 'nb_trainees', 'avg_session_duration'],
                            format: {
                                avg_session_duration: function(value){
                                    return moment.duration(value, 'seconds').hours();
                                }
                            }
                        }
                    }
                }
            }).init().render();
        });
    </script>

    {% verbatim %}
    <script type="text/template" id="graph-template">
        <div class="row">
            <div class="col-xs-4">
                <i class="fa fa-{{ chart.icon }}"></i>
            </div>
            <div class="col-xs-8">
                <h3>{{ chart.title }}</h3>
                <span class="block-stat">{{ chart.subtitle }}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="chart">
                    <div class="chart-location">
                        <canvas></canvas>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <script type="text/template" id="date-template">
        {{ startDate }} - {{ endDate }} <b class="caret"></b>
    </script>
    {% endverbatim %}

{% endblock %}