{% extends 'reports/base_index.html' %}
{% load course_filter %}
{% block title %}Отчет по прохождению{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
      <!-- Tab panes -->
        <div style="    position: absolute;
    top: 10px;
    z-index: 2000;
    right: 10px;">
        <div style="float: left;display: none;" name="date_block">
          <div class="input-group date" style="width: 200px;float: right;">
              <input type="text" class="form-control" placeholder="ДО" name="sday" style="    border-radius: 0;"><span class="input-group-addon" style="    border-radius: 0;"><i class="glyphicon glyphicon-th" style="    border-radius: 0;"></i></span>
          </div>
          <div class="input-group date" style="width: 200px;float: right;">
              <span class="input-group-addon" style="    border-radius: 0;"><i class="glyphicon glyphicon-th" style="    border-radius: 0;"></i></span>
              <input type="text" class="form-control" placeholder="ОТ" name="fday" style="    border-radius: 0;">
          </div>

        </div>
            <button name="load_button" style="float: left;width: 20%;    border-radius: 0;min-width: 200px;" class="btn btn-green" onclick="start_load()">Выгрузить</button>
            <div style="float: left;">
                <div style="text-align: center; display: none;    padding: 5px 15px;
        background: #ffc; width: 80%; float: left;    white-space: nowrap;" name="preloader">
                    <img src="/static/img/preloader.gif" style="margin-right: 5px;">
                    <b><span name="preload_status"></span></b>
                </div>


              <button name="stop_button" style="float: left;width: 20%;    border-radius: 0;display: none;" class="btn btn-danger" onclick="stop_load()"><i class="glyphicon glyphicon-remove"></i> </button>
          </div>
    </div>
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
          {% for course, values in courses.items %}
             <li role="presentation" {% if values.id == 1 %}class="active"{% endif %} onclick="window.course_id = {{ values.id }};"><a href="#{{ values.id }}" aria-controls="{{ values.id }}" role="tab" data-toggle="tab">
                 {{ course }}
                 <span class="label label-info" style="margin-left: 10px;" name="course_{{ values.id }}_length">{{ values.users|length }}</span></a> </li>
          {% endfor %}
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
          {% for course, values in courses.items %}
            <div role="tabpanel" class="tab-pane {% if values.id == 1 %}active{% endif %}" id="{{ values.id }}">
            <table width="100%">
                <tr>{% for token in values.map %}<a href=""><td style="height: 5px;background: #ffc;border-right: 1px solid #333;"></td></a>{% endfor %}</tr>
                <script>window.course_{{ values.id }} = {{ values.users|length }}</script>
                {% for user in values.users %}
    <script>
        if (!window.last_month){
            window.last_month = 0
        }
        if (!window.last_year){
            window.last_year = 0
        }
        if (window.last_month != {{ user.user.date_joined.month }} || window.last_year != {{ user.user.date_joined.year }}){
            document.write('<tr><td colspan="{{ values.map|length }}" style="width: 125px;text-align: left;padding-left: 10px;font-weight: bold;background: #999;color:#fff;border-bottom: 2px solid #ff1;">{{ user.user.date_joined|date:"F Y" }}</td></tr>');
        }
                    window.last_month = {{ user.user.date_joined.month }};
                    window.last_year = {{ user.user.date_joined.year }};
    </script><tr>{% for token in values.map %}<td course="{{ values.id }}" s_date="" f_date="" tp="" point="{{ values.id }}_{{ user.user.id }}_{{ token.token }}" style="height: 2px;background: #ccc;display: none;border-right: 1px solid #999;"></td>{% endfor %}</tr>{% endfor %}
            </table>
            </div>
          {% endfor %}
      </div>
    </div>


{% endblock %}
{% block js %}
                <script>
                $(function () {
                    $('.input-group.date').datepicker({
                        todayBtn: true,
                        language: "ru",
                        orientation: "top center",
                        keyboardNavigation: false,
                        autoclose: true,
                        toggleActive: true,
                        format: 'yyyymmdd',
                        defaultViewDate: { year: 1990, month: 11, day: 18 }
                    });

                    $( document.body ).on( "change", "[name=fday]", function( event ) {
                        console.log($('[name=fday]').val());
                        window.from_date = $('[name=fday]').val().split(".").join("");
                        change_progress_color()
                    });

                    $( document.body ).on( "change", "[name=sday]", function( event ) {
                        console.log($('[name=sday]').val());
                        window.to_date = $('[name=sday]').val().split(".").join("");
                        change_progress_color()
                    });
                })


    </script>
    <script src="/static/js/tools.js"></script>
    <script src="/static/js/apis/progress.js"></script>
{% endblock %}