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

{% block main_js_exlude %}
{% endblock main_js_exlude %}


{% block scripts %}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart'], 'language': '{{ LANGUAGE_CODE }}'});

    {% if data %}
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          {% autoescape off %}
            [{type: 'date', label: '{% trans "Дата" %}'}, '{% trans "Просмотры" %}'],
            {% for item in data %}
              {{ item }},
            {% endfor %}
          {% endautoescape %}
          ]);
        var options = {
          title: '{% trans "Статистика событий" %}',
          legend: { position: 'bottom' },
          vAxis: {
            title: '{% trans "Просмотры" %}'
          },
          width: 900,
          height: 500,
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
      
      google.charts.setOnLoadCallback(drawChart);
    {% endif %}

    {% if data_summary %}
      function drawSummaryChart() {
        var data = google.visualization.arrayToDataTable([
          {% autoescape off %}
            ['name', '{% trans "Просмотры" %}', { role: 'annotation' }],
            ['{% trans "События" %}', {{ data_summary }}, {{ data_summary }}],
          {% endautoescape %}
          ]);
        var options = {
          title: '{% trans "Сумарные данные" %}',
          // legend: { position: 'bottom' },
          // xAxis: {
          //   title: '{% trans "Просмотры" %}'
          // },
          legend: { position: "none" },
          width: 900,
          height: 500,
        };

        var rchart = new google.visualization.BarChart(document.getElementById('bar_chart'));

        rchart.draw(data, options);
      }

      google.charts.setOnLoadCallback(drawSummaryChart);
    {% endif %}

    $(document).ready(function(){
      $('#id_date_begin').datetimepicker({
          todayHighlight: true,
          format : 'dd.mm.yyyy',
          minView: 2,
          language: '{{ LANGUAGE_CODE }}'
      });
      $('#id_date_end').datetimepicker({
          todayHighlight: true,
          format : 'dd.mm.yyyy',
          minView: 2,
          language: '{{ LANGUAGE_CODE }}'
      });

      $('select').select2('destroy');
      $('select:not(#id_event)').select2({width: "element"});

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

{% block body %}
  <div class="box span8">
    <div class="box-header well">
        <h2><i class="icon-arrow-down"></i>Фильтр</h2>
    </div>
    <div class="box-content">
      <form id="stat_filter_form" action="." method="POST">
        {% csrf_token %}

        <div class="span8">
          <div class="span4" style="margin-left: 0px;">
            {# date_begin #}
            <div class="control-group {% if form.date_begin.errors %}error{% endif %}">
                <label class="control-label"><b>{{ form.date_begin.label }}:</b></label>
                    <div class="controls">{{ form.date_begin }}
                        <span class="help-inline">{{  form.date_begin.errors }}</span>
                    </div>
            </div>

            {# event #}
            <div class="control-group {% if form.event.errors %}error{% endif %}">
                <label class="control-label"><b>{{ form.event.label }}:</b></label>
                    <div class="controls">{{ form.event }}
                        <span class="help-inline">{{  form.event.errors }}</span>
                    </div>
            </div>
          </div>
          
          <div class="span4" style="margin-left: 0px;">
            {# date_end #}
            <div class="control-group {% if form.date_end.errors %}error{% endif %}">
                <label class="control-label"><b>{{ form.date_end.label }}:</b></label>
                    <div class="controls">{{ form.date_end }}
                        <span class="help-inline">{{  form.date_end.errors }}</span>
                    </div>
            </div>
          </div>
        </div>

        <div class="span8 params_form">
            {% include "c_admin/stats/event_params_form.html" %}
        </div>

        <div class="span7">
          {% if form.errors %}
            <div class="alert alert-error">
                {% for key, value in form.errors.items %}
                    <p>{{ value }}</p>
                {% endfor %}
            </div>
          {% endif %}
          <button type="submit">{% trans "Применить" %}</button>
        </div>
      </form>
    </div>
  </div>

  <div class="span9">
    {% if not data %}
      {% trans "Нет данных" %}
    {% endif %}
    <div id="curve_chart"></div> 
    <div id="bar_chart"></div> 
  </div>
{% endblock body %}