{% extends "base.html" %}
{% block content %}

    {% load staticfiles %}

    <link rel="stylesheet" href="{%static "css/daterangepicker.css" %}"/>

    <style xmlns="http://www.w3.org/1999/html">
        {% include "ll_css/measurement_groups.css" %}
    </style>

    <div id="hairline-template" class="hairline-info" style="display:none">
        <button class='hairline-kill-button'>Kill</button>
        <div class='hairline-legend'></div>
    </div>
    <div class="container-fluid" style="height: 100%;">
        <div class="row" style="margin-top: 30px">
            <div class="col-sm-3" style="margin-top: 20px">


                <div class="panel panel-primary" style="max-height: 50%;overflow-y: scroll">
                    {% if lang == 'hr'%}
                        <div class="panel-heading">Popis grupa</div>
                    {% else %}
                        <div class="panel-heading">Group list</div>
                    {% endif %}


                    <div class="panel-body">
                        <div id="treeview" style="">

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

                <div class="panel panel-primary">
                    {% if lang == 'hr'%}
                        <div class="panel-heading">Opcije</div>
                    {% else %}
                        <div class="panel-heading">Options</div>
                    {% endif %}

                    <div class="panel-body">


                        {% if lang == 'hr'%}
                            <label for="usr">OPCIJE GRUPA:</label>
                        {% else %}
                            <label for="usr">GROUP OPTIONS:</label>
                        {% endif %}

                        <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding: 5px">
                            <div class="btn-group" role="group">
                                <button id="AddNewMeasurementGroup" type="button" onclick="showAddNewMeasurementGroup(this)" class="btn btn-primary btn-sm">
                                    {% if lang == 'hr'%}
                                        Dodaj
                                    {% else %}
                                        Add
                                    {% endif %}
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button id="EditMeasurementGroup" type="button" onclick="showEditMeasurementGroup(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Izmjeni
                                    {% else %}
                                        Edit
                                    {% endif %}
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button id="DeleteMeasurementGroup" type="button" onclick="showDeleteMeasurementGroup(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Briši
                                    {% else %}
                                        Delete
                                    {% endif %}
                                </button>
                            </div>
                        </div>

                        {% if lang == 'hr'%}
                            <label for="usr">OPCIJE MJERENJA:</label>
                        {% else %}
                            <label for="usr">MEASUREMENT OPTIONS:</label>
                        {% endif %}

                        <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding: 5px">
                            <div class="btn-group" role="group">
                                <button id="AddNewMeasurement" type="button" onclick="showAddNewMeasurementGroupMeasurement(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Dodaj
                                    {% else %}
                                        Add
                                    {% endif %}
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button id="EditMeasurement" type="button" onclick="showEditMeasurementGroupMeasurement(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Izmjeni
                                    {% else %}
                                        Edit
                                    {% endif %}
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button id="DeleteMeasurement" type="button" onclick="showDeleteMeasurementGroupMeasurement(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Briši
                                    {% else %}
                                        Delete
                                    {% endif %}
                                </button>
                            </div>
                        </div>

                        {% if lang == 'hr'%}
                            <label for="usr">OPCIJE PRORACUNA:</label>
                        {% else %}
                            <label for="usr">CALCULATION OPTIONS:</label>
                        {% endif %}

                        <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding: 5px">
                            <div class="btn-group" role="group">
                                <button id="AddNewCalculation" type="button" onclick="showAddNewMeasurementGroupCalculation(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Dodaj
                                    {% else %}
                                        Add
                                    {% endif %}
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button id="EditCalculation" type="button" onclick="showEditMeasurementGroupCalculation(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Izmjeni
                                    {% else %}
                                        Edit
                                    {% endif %}
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button id="DeleteCalculation" type="button" onclick="showDeleteMeasurementGroupCalculation(this)" class="btn btn-primary btn-sm" disabled>
                                    {% if lang == 'hr'%}
                                        Briši
                                    {% else %}
                                        Delete
                                    {% endif %}
                                </button>
                            </div>
                        </div>

                        {% if lang == 'hr'%}
                            <label for="usr">OSTALO:</label>
                        {% else %}
                            <label for="usr">OTHER:</label>
                        {% endif %}



                        <input id="spinAvg" type="text" value="1" >
                        <button type="button" class="btn btn-default" onclick="printMeasurementPlot()" style="width: 100%; margin-bottom: 5pt">
                            <span class="glyphicon glyphicon-print" ></span>
                        </button>
                        {% 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>
                    </div>
                </div>
            </div>
            <div class="col-sm-9" style="margin-top: 20px; ">
                <div class="row">
                    <div id="highplot" style="min-width: 310px; height: 70%; margin: 0 auto; "></div>
                    <div id="legend" style="width: 100%; height: 10%; margin-top: 15px; text-align: center "></div>
                    <img id="exportedImage" style="width:0;height:0;"/>
                    <div id="hiddenDiv" style="display:none"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="myModalAddNewMeasurementGroup">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="AddNewMeasurementGroupDialog">
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="myModalDeleteMeasurementGroup">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="DeleteMeasurementGroupDialog">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <p><img class="media-object" src="{%static "img/info-128.png" %}" alt="..." style="width: 30px;float:left;margin-right: 10px">
                            {% if lang == 'hr'%}
                                Obrisi mjernu grupu?
                            {% else %}
                                Delete measurement group?
                            {% endif %}
                        </p>
                    </h4>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="modal-body" id="DeleteMesurementGroupText" style="text-align: center;font-size: 20pt">
                        </div>
                        <div class="modal-footer">
                            <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary" onclick="deleteMeasurementGroup()">
                                        {% if lang == 'hr'%}
                                            Da
                                        {% else %}
                                            Yes
                                        {% endif %}
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary" onclick="hideDeleteMeasurementGroup()">
                                        {% if lang == 'hr'%}
                                            Ne
                                        {% else %}
                                            No
                                        {% endif %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <div class="modal fade" tabindex="-1" role="dialog" id="myModalEditMeasurementGroup">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="EditMeasurementGroupDialog">

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

    <div class="modal fade" tabindex="-1" role="dialog" id="myModalAddMeasurementGroupMeasurement">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="AddMeasurementGroupMeasurementDialog">

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


    <div class="modal fade" tabindex="-1" role="dialog" id="myModalDeleteMeasurementGroupMeasurement">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="DeleteMeasurementGroupMeasurementDialog">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <p><img class="media-object" src="{%static "img/info-128.png" %}" alt="..." style="width: 30px;float:left;margin-right: 10px">
                            {% if lang == 'hr'%}
                                Obrisi mjerenje iz grupe?
                            {% else %}
                                Delete measurement from group?
                            {% endif %}
                        </p>
                    </h4>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="modal-body" id="DeleteMesurementGroupMeasurementText" style="text-align: center;font-size: 20pt">
                        </div>
                        <div class="modal-footer">
                            <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary" onclick="deleteMeasurementGroupMeasurement()">
                                        {% if lang == 'hr'%}
                                            Da
                                        {% else %}
                                            Yes
                                        {% endif %}
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary" onclick="hideDeleteMeasurementGroupMeasurement()">
                                        {% if lang == 'hr'%}
                                            Ne
                                        {% else %}
                                            No
                                        {% endif %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <div class="modal fade" tabindex="-1" role="dialog" id="myModalEditMeasurementGroupMeasurement">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="EditMeasurementGroupMeasurementDialog">

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

    <div class="modal fade" tabindex="-1" role="dialog" id="myModalAddMeasurementGroupCalculation">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="AddMeasurementGroupCalculationDialog">

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


    <div class="modal fade" tabindex="-1" role="dialog" id="myModalDeleteMeasurementGroupCalculation">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="DeleteMeasurementGroupCalculationDialog">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <p><img class="media-object" src="{%static "img/info-128.png" %}" alt="..." style="width: 30px;float:left;margin-right: 10px">
                            {% if lang == 'hr'%}
                                Obrisi proracun iz grupe?
                            {% else %}
                                Delete calculation from group?
                            {% endif %}
                        </p>
                    </h4>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="modal-body" id="DeleteMesurementGroupCalculationText" style="text-align: center;font-size: 20pt">
                        </div>
                        <div class="modal-footer">
                            <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary" onclick="deleteMeasurementGroupCalculation()">
                                        {% if lang == 'hr'%}
                                            Da
                                        {% else %}
                                            Yes
                                        {% endif %}
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary" onclick="hideDeleteMeasurementGroupCalculation()">
                                        {% if lang == 'hr'%}
                                            Ne
                                        {% else %}
                                            No
                                        {% endif %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <div class="modal fade" tabindex="-1" role="dialog" id="myModalEditMeasurementGroupCalculation">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="EditMeasurementGroupCalculationDialog">

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



    <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/math.js" %}"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

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

{% endblock %}