{% extends "base/base.html" %}
{% load staticfiles %}

{% block title %} Totalizers {% endblock title %}

{% block stylesheets %}
    {{ block.super}}
{% endblock %}


{% block content %}
        <div class="col-md-3 col-sm-3 col-xs-12" style="">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Popis uređaja
                        {% else %}
                            Device list
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="max-height: 300px;overflow-y: scroll">
                    <div id="treeview" style="font-size: 10px">

                    </div>
                </div>
            </div>

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Opcije
                        {% else %}
                            Options
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="max-height: 300px;">
                    {% if lang == 'hr'%}
					    <label for="usr">INTERVAL PROMATRANJA:</label>
					{% else %}
					    <label for="usr">DATE INTERVAL:</label>
					{% endif %}
                    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; margin-bottom: 5pt; border: 1px solid #ccc; width: 100%; text-align: center">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                        <span></span> <b class="caret"></b>
                    </div>
                    {% if lang == 'hr'%}
					    <label for="usr">EXPORT PODATAKA:</label>
					{% else %}
					    <label for="usr">DATA EXPORT:</label>
					{% endif %}
                    <form id = "ExcelDownloadForm" method = "post" hidden>
                        {% csrf_token %}
                    </form>
                    <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding-bottom: 10px">
                        <div class="btn-group" role="group">
                            <button id="ExportToExcel" type="button" onclick="exportToExcel(this)" class="btn btn-default">
                                {% if lang == 'hr'%}
                                    Izvoz podataka u Excel
                                {% else %}
                                    Export to excel
                                {% endif %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-9 col-sm-9 col-xs-12" style="">
            <div class="row">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            {% if lang == 'hr'%}
                                Graf ukupnog broja impulsa
                            {% else %}
                                Pulse total chart
                            {% endif %}
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content" style="">
                        <div id="highplot" style="min-width: 310px; height: 70%; margin: 0 auto; "></div>
                    </div>
                </div>
            </div>
            <div class="row" style="height: 20%;overflow: auto;">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            {% if lang == 'hr'%}
                                Tablica ukupnog broja impulsa
                            {% else %}
                                Pulse total table
                            {% endif %}
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content" style="">
                        <table id="_totalizerTable" style="font-size: 10pt;" class="table table-bordered table-hover table-condensed table-responsive" cellspacing="0" width="100%" align="center" >
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

{% endblock %}

{% block right_sidebar %}

{% endblock %}

{% block javascripts %}
    {{ block.super}}
    <script type="text/javascript" src="{%static "js/daterangepicker.js" %}"></script>
    <script type="text/javascript" src="{%static "js/moment.min.js" %}"></script>
    <script type="text/javascript" src="{%static "js/bootstrap-treeview.js" %}"></script>
    <script type="text/javascript" src="{%static "js/dateformat.js" %}"></script>

    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>

    <script>
        {% include "ll_js/totalizers.js" %}
    </script>

{% endblock %}