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

{% block title %}
    Maps
{% endblock title %}

{% block stylesheets %}
    {{ block.super}}
    <link rel="stylesheet" href="{%static "css/daterangepicker.css" %}" />
    <link rel="stylesheet" href="{%static "css/maps.css" %}" />
{% endblock %}

{% block content %}

    <div class="container tile_count" style="">

        <form id = "ExcelDownloadForm" method = "post" hidden>
            {% csrf_token %}
        </form>
        <div class="row" style="">
            <div class="col-md-3 col-sm-3 col-xs-12" style="">
                <div class="x_panel tile">
                    <div class="x_title">
                        <h2>
                            {% if lang == 'hr'%}
                                Odabrani uređaj
                            {% else %}
                                Selected device
                            {% endif %}
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li class="dropdownDeviceSelectMenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu  pull-right" aria-labelledby="dropdownDeviceSelect" role="menu">
                                    {% for device in device_list %}
                                    <li>
                                        <a id="deviceDropdownSelect{{ forloop.counter0 }}" href="#" title="{{ device.id }}">
                                            {{ device.id|slice:":4" }}...{{ device.id|slice:"-4:" }} [{{ device.identifier }}]
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </li>
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content container" style="">
                        <div class="row">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-addon side-label" id="basic-addon3">
                                        {% if lang == 'hr'%}
                                            KOD:
                                        {% else %}
                                            CODE:
                                        {% endif %}
                                    </span>
                                    <input type="text" class="form-control" name='device_id' id="device_id" aria-describedby="sizing-addon3" readonly />
                                </div>

                                <div class="input-group input-group-sm">
                                    <span class="input-group-addon side-label">
                                        {% if lang == 'hr'%}
                                            IME:
                                        {% else %}
                                            NAME:
                                        {% endif %}
                                    </span>
                                    <input type="text" class="form-control" name='device_identifier' id="device_identifier" aria-describedby="sizing-addon3" readonly />
                                </div>

                                <div class="input-group input-group-sm">
                                    <span class="input-group-addon side-label">
                                        {% if lang == 'hr'%}
                                            STATUS:
                                        {% else %}
                                            STATUS:
                                        {% endif %}
                                    </span>
                                    <input type="text" class="form-control" name='device_info' id="device_info" aria-describedby="sizing-addon3" readonly />
                                </div>

                                <div class="input-group input-group-sm">
                                    <span class="input-group-addon side-label" id="basic-addon3">
                                        {% if lang == 'hr'%}
                                            VERZIJA:
                                        {% else %}
                                            FIRMWARE:
                                        {% endif %}
                                    </span>
                                    <input type="text" class="form-control" name='device_firmware' id="device_firmware" aria-describedby="sizing-addon3" readonly />
                                </div>

                                <div class="input-group input-group-sm">
                                    <span class="input-group-addon side-label" id="basic-addon3">
                                        {% if lang == 'hr'%}
                                            TIP:
                                        {% else %}
                                            TYPE:
                                        {% endif %}
                                    </span>
                                    <input type="text" class="form-control" name='device_type' id="device_type" aria-describedby="sizing-addon3" readonly />
                                </div>

                                <div class="btn-group btn-group-justified" data-toggle="buttons" style="margin-top: 10px; margin-bottom: 10px">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary btn-sm"  onclick="viewDeviceInformation(this)">
                                            {% if lang == 'hr'%}
                                                Informacije
                                            {% else %}
                                                Information
                                            {% endif %}
                                        </button>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary btn-sm"  onclick="viewStatusPlot(this)">
                                            {% if lang == 'hr'%}
                                                Prikaz statusa
                                            {% else %}
                                                Status plot
                                            {% endif %}
                                        </button>
                                    </div>
                                </div>
                        </div>

                        <div class="row">
                            {% if lang == 'hr'%}
                                <label for="usr">INTERVAL PREGLEDA:</label>
                            {% else %}
                                <label for="usr">MONITOR 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 class="row">
                            <div id="CSV_Options" style="display: none">
                              {% include "maps/CSV_options.html" %}
                            </div>
                            <div id="SOFREL_Options" style="display: none">
                              {% include "maps/SOFREL_options.html" %}
                            </div>
                            <div id="MAG8000_Options" style="display: none">
                              {% include "maps/MAG8000_options.html" %}
                            </div>
                            <div id="PDLAG_Options" style="display: none">
                              {% include "maps/PDLAG_options.html" %}
                            </div>
                            <div id="PDLHG_Options" style="display: none">
                              {% include "maps/PDLHG_options.html" %}
                            </div>
                        </div>
                        <div class="row">
                            {% if lang == 'hr'%}
                                <label for="usr" >DODATNE OPCIJE:</label>
                            {% else %}
                                <label for="usr" >ADDITIONAL OPTIONS:</label>
                            {% endif %}
                            <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding-bottom: 1px">
                                {% if lang == 'hr'%}
                                    <div class="btn-group" role="group">
                                        <label class="btn btn-default btn-sm">
                                            <input id="MarkerDragEnable" type="checkbox" value="" onchange="disableEnableDeviceDrag(this)"> Micanje markera
                                        </label>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button id="ChangeLocationButton" type="button" onclick="changeDeviceLocation(this)" class="btn btn-default btn-sm" disabled>Promijeni lokaciju</button>
                                    </div>
                                {% else %}
                                    <div class="btn-group" role="group">
                                        <label class="btn btn-default btn-sm">
                                            <input id="MarkerDragEnable" type="checkbox" value="" onchange="disableEnableDeviceDrag(this)"> Drag markers
                                        </label>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button id="ChangeLocationButton" type="button" onclick="changeDeviceLocation(this)" class="btn btn-default btn-sm" disabled>Change location</button>
                                    </div>
                                {% endif %}
                                <input title="latitudeField" style="display: none" type="text" class="form-control" id="latitudeField" disabled>
                                <input title="longitudeField" style="display: none" type="text" class="form-control" id="longitudeField" disabled>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-12" style="">
                <div class="x_panel tile">
                    <div class="x_title">
                        <h2>
                            {% if lang == 'hr'%}
                                Mapa uređaja
                            {% else %}
                                Map
                            {% 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 container" style="">
                        <div id="googleMap" style="height: 500px;width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>


        {% if user_device_type == "desktop" %}
        <div class="row" style="">
            <div class="col-md-12 col-sm-12 col-xs-12" style="">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            {% if lang == 'hr'%}
                                Lista uređaja
                            {% else %}
                                Device list
                            {% endif %}
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li class="dropdownDeviceSelectMenu">
                                <button class="btn btn-default" onclick="deviceInfoTableShow(this)" type="button">
                                    <i class="glyphicon glyphicon-refresh"></i>
                                </button>
                            </li>
                            <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="DeviceInfoTable" style="z-index:1000;width: 100%;height: 235px; bottom: 0;">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

    </div>


{% endblock %}

{% block right_sidebar %}
    <div class="btn-group-vertical" style="width: 100%;padding: 10px">
        <button class="btn btn-default" onclick="viewMapLayers()" type="button">
            Edit layers
        </button>
    </div>

    <div class="panel panel-primary " style="margin: 10px" >
        <div class="panel-heading">
            {% if lang == 'hr'%}
                Slojevi
            {% else %}
                Layers
            {% endif %}
        </div>
        <div class="panel-body" style="max-height: 300px;overflow-y: scroll;">

            <div id="map_layer_treeview" style="">

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

    <div id="panel_layer_visual_properties" style="margin: 10px">


    </div>


    <div id="panel_feature_properties" class="panel panel-primary" hidden>
        <div id="panel_feature_properties_header" class="panel-heading">
        </div>
        <div id="panel_feature_properties_body" class="panel-body" style="max-height: 300px;overflow-y: scroll">
        </div>
        <div id="panel_feature_properties_footer" class="panel-footer">
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ block.super}}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb2CSybVst2wVMmc6q7Dt4ga3v5LFPf7c"></script>
    <script type="text/javascript" src="{%static "dygraph/dygraph-custom-labels.js" %}"></script>
    <script type="text/javascript" src="{%static "dygraph/dygraph-export.js" %}"></script>
    <script type="text/javascript" src="{%static "dygraph/dygraph-synchronize.js" %}"></script>
    <script type="text/javascript" src="{%static "js/bootstrap-touchspin.min.js" %}"></script>
    <script type="text/javascript" src="{%static "js/dateformat.js" %}"></script>
    <script type="text/javascript" src="{%static "js/bootstrap-treeview.js" %}"></script>

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