{% extends 'reports/base_index.html' %}
{% block title %}Отчеты{% endblock %}
{% block head %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
{% endblock %}
{% block content %}
    <div class="col-lg-6" style="text-align: center;">
        <h2 style="text-align: right;font-weight: bold;">Д/З</h2>
        <select class="form-control" name="hw_report">
            <option value="0"> --- </option>
            {% for id, course in courses.items %}
                <option value="{{ id }}">{{ course }}</option>
            {% endfor %}
        </select>
        <img src="/static/img/preloader.gif" style="padding-top: 20px;display: none;" name="hw_preloader">
        <div name="hw_chart" class="radarChart"></div>
    </div>
    <div class="col-lg-6" style="text-align: center;">
        <h2 style="text-align: right;font-weight: bold;">Уроки</h2>
        <select class="form-control" name="les_report">
            <option value="0"> --- </option>
            {% for id, course in courses.items %}
                <option value="{{ id }}">{{ course }}</option>
            {% endfor %}
        </select>
        <img src="/static/img/preloader.gif" style="padding-top: 20px;display: none;" name="les_preloader">
        <div name="les_chart" class="radarChart2"></div>
    </div>
    <div class="col-lg-12">
    <h3 style="margin-left: 20px;margin-top:40px;font-weight: bold;border-top: 1px dotted #ccc;padding-top: 30px;text-align: right;">
       <i class="glyphicon glyphicon-equalizer"></i> Активность пользователей
    </h3>
    <table class="table table-hover" style="background: #ffc;">
        <tr style="font-weight: bold;background: #ccc;">
            <td>Всего пользователей</td>
            <td>Не активных</td>
            <td>Оплатившие</td>
            <td>Без активности <i>День</i></td>
            <td>Без активности <i>3 Дня</i></td>
            <td>Без активности <i>Неделю</i></td>
            <td>Без активности <i>Месяц</i></td>
        </tr>
        <tr>
            <td style="border-right: 1px dotted #ccc;">{{ users.all }}</td>
            <td style="border-right: 1px dotted #ccc;">{{ users.no_active.int }} <i>[{{ users.no_active.proc }}%]</i></td>
            <td style="border-right: 1px dotted #ccc;">{{ users.bought.all.int }} <i>[{{ users.bought.all.proc }}%]</i></td>
            <td style="border-right: 1px dotted #ccc;">{{ users.bought.day.int }} <i>[{{ users.bought.day.proc }}%]</i></td>
            <td style="border-right: 1px dotted #ccc;">{{ users.bought.three.int }} <i>[{{ users.bought.three.proc }}%]</i></td>
            <td style="border-right: 1px dotted #ccc;">{{ users.bought.week.int }} <i>[{{ users.bought.week.proc }}%]</i></td>
            <td style="border-right: 1px dotted #ccc;">{{ users.bought.month.int }} <i>[{{ users.bought.month.proc }}%]</i></td>
        </tr>
    </table>
    </div>

    <div class="col-lg-12" style="text-align: center;">
        <h2 style="text-align: right;font-weight: bold;">Отчет прохождения</h2>
        <select class="form-control" name="progress_report">
            <option value="0"> --- </option>
            {% for id, course in courses.items %}
                <option value="{{ id }}">{{ course }}</option>
            {% endfor %}
        </select>
        <img src="/static/img/preloader.gif" style="padding-top: 20px;display: none;" name="progress_preloader">
        <div name="progress_chart" class="radarChart"></div>
    </div>
{% endblock %}
{% block js %}
    <script src="/static/js/radarChart.js"></script>
    <script src="/static/js/reports.js"></script>
{% endblock %}