{% extends 'reports/base_index.html' %}
{% load course_filter %}
{% block title %}Отчет по прохождению{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
      <!-- Tab panes -->
        <div>
          <div class="input-group date" style="width: 40%;float: left;">
              <input type="text" class="form-control" placeholder="ОТ" name="fday" 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: 40%;float: left;">
              <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 style="text-align: center; width: 20%;display: none;    padding: 5px;
    background: #ffc;float: left;" name="preloader">
                <img src="/static/img/preloader.gif" style="margin-right: 5px;">
                <b><span name="preload_status"></span></b>
            </div>

          <button name="load_button" style="float: left;width: 20%;    border-radius: 0;" class="btn btn-green" onclick="start_load()">Выгрузить</button>
    </div>
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
          {% for course, values in courses.items %}
             <li role="presentation" 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" 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 %}<tr>
                    {% for token in values.map %}<td course="{{ values.id }}" s_date="" f_date="" tp="" point="{{ values.id }}_{{ user }}_{{ 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 %}