{% extends 'base.html.twig' %}
{% block body_id 'location' %}


    {% block body_class 'bg-28 no-zoom' %}
        {% block title %}
            {{ "Location"|trans }}
        {% endblock %}

        {% block stylesheets_last %}
            {{ parent() }}
            <link rel="stylesheet" href="{{ asset('static/css/location.css?v=20191230') }}">
            <link rel="stylesheet" href="{{ asset('static/css/sim7600-modules.css') }}">
            <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css') }}">

        {% endblock %}

        {% block c4rg0_menuleft %}
        {% endblock %}

        {% block body %}

            <div class="col-md-12">
                <section
                class="tile transparent" id="id-search-block" style="margin-top: 55px;">
                <!-- tile widget -->


                <div class="tile-widget color transparent-black rounded-top-corners">
                    <div class="block-menu-filter menu-start">
                        <div class="btn-group btn-w100">
                            <h1>
                                <a href="{{ path('management_pannel_page') }}">
                                    <i class="fa fa-briefcase"></i>
                                </a>
                                {{ 'Management'|trans }}
                            </h1>
                        </div>
                    </div>
                    <div class="block-menu-filter menu-center">
                        <div class="btn-group btn-w100"></div>
                    </div>
                    <div class="block-menu-filter menu-end">
                        <div class="btn-group">
                            <a class="on-close-btn" href="javascript:window.history.back();" title="Back">
                                <div class="user-close">
                                    <i class="fas fa-chevron-circle-left"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

            </section>
            </div>

            <div id="wrap">

                <div class="row">

                    <div id="content" class="col-md-12" style="overflow: hidden; outline: none;">


                        <div
                        class="col-md-12">
                        <!-- col 12 -->
                        <div class="col-md-12">


                            <section
                            class="tile color transparent-black">


                            <!-- tile header -->
                            <div class="tile-header">
                                <h1>
                                    <strong>{{ 'Location'|trans }}</strong>
                                </h1>
                                <div class="controls">
                                    <a href="#" class="minimize">
                                        <i class="fa fa-chevron-down"></i>
                                    </a>
                                    <a href="#" class="refresh">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="#" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <!-- /tile header -->

                            <!-- tile body -->
                            <div class="tile-body">


                                <div align="center">
                                    <span class="container text-center">
                                        <a href="{{ path('welcome_page') }}" alt="welcome page">
                                            <img class="logo" src="{{ asset(logoUrl) }}" alt="{{ logoazienda }}" height="auto" alt="My Company" style="max-height:3vw;"/>
                                        </a>
                                        <div style="margin-top: 1em;">
                                            <font size="5em" color="#ffffff">DS-C<span style="color:#66ccff">4</span>RGO
                                            {{ luogo.Descrizione }}
                                            &nbsp;&nbsp;
                                        </font>
                                    </div>
                                </span>
                            </div>


                            <!-- tile -->
                            <section class="tile transparent">

                                <div id="iframe-maps" class="location-position jumbotron bg-transparent-black-3">


                                    <div class="map" data-lat="{{ luogo.lat }}" data-lng="{{ luogo.lon }}" data-zoom="4"></div>


                                </div>


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


                    <br>

                    <section
                    id="location-info" class="tile color transparent-black">


                    <!-- tile header -->
                    <div class="tile-header">
                        <h1>
                            <strong>{{ 'Location'|trans }}</strong>
                        </h1>
                        <div class="controls">
                            <a href="#" class="minimize">
                                <i class="fa fa-chevron-down"></i>
                            </a>
                            <a href="#" class="refresh">
                                <i class="fa fa-refresh"></i>
                            </a>
                            <a href="#" class="remove">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <!-- /tile header -->

                    <!-- tile body -->
                    <div class="tile-body">

                        <div class="panel-group accordion location-accordion" id="location-accordion-{{ azienda.id }}">
                            {% for loc in luoghi %}
                                <div class="panel panel-accordion-item panel-transparent">


                                    <a data-toggle="collapse" data-parent="#location-accordion-{{ azienda.id }}" href="#id-location-{{ loc.id }}" class="collapsed">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <strong>{{ loc.descrizione }}</strong>
                                            </h4>
                                        </div>
                                    </a>

                                    <div id="id-location-{{ loc.id }}" class="panel-collapse collapse" style="height: 0px;">
                                        <div class="panel panel-transparent">
                                            <div class="loc-map">
                                                <div class="location-position-2">
                                                    <div class="map-22" data-lat="{{ loc.Latitudine }}" data-lng="{{ loc.Longitudine }}" data-zoom="14"></div>
                                                </div>
                                            </div>


                                            <div class="panel-group accordion datascan-accordion" id="datascan-accordion-{{ loc.id }}">


                                                {% for macchina in loc.Macchines %}
                                                    {% set macgps = false %}
                                                    {% if macchina.lastgps != null and macchina.lastgps|length > 0 %}
                                                        {% set macgps = macchina.lastgps|first %}
                                                        {% if macchina.lastgps|length > 1 and (macgps.locked == null or macgps.locked == 0) %}
                                                            {% set macgps = macchina.lastgps|last %}
                                                        {% endif %}

                                                    {% endif %}

                                                    {% if macchina.RemoteInfo != null and macchina.RemoteInfo != '' %}
                                                        {% set macinfo = macchina.RemoteInfo|json_decode %}
                                                    {% else %}
                                                        {% set macinfo = false %}
                                                    {% endif %}
                                                    <div class="panel panel-accordion-item panel-transparent">


                                                        <a data-toggle="collapse" data-parent="#datascan-accordion-{{ loc.id }}" href="#id-datascan-{{ macchina.id }}" class="collapsed">
                                                            <div class="panel-heading">
                                                                <h4 class="panel-title">
                                                                    <strong>{{ macchina.Modello.Nome|raw }}</strong>
                                                                    -
                                                                    {{ macchina.NumeroSeriale }}
                                                                    {% if macchina.scaduta %}
                                                                        <img src="/static/c4rg0_themes/assets/images/icons/warning.png" alt="" height="32"/>
                                                                    {% else %}
                                                                        <i class="fas fa-check-circle fa-2x" style="color: green"></i>
                                                                    {% endif %}
                                                                    <font color="#ffffff">
                                                                        <span style="color:#66ccff">
                                                                            &nbsp;&nbsp;
                                                                            {{ 'End of Assistance'|trans }}
                                                                            :
                                                                            {{ macchina.Scadenza }}
                                                                        </font>
                                                                    </h4>
                                                                </div>
                                                            </a>
                                                            <div id="id-datascan-{{ macchina.id }}" class="datascan panel-collapse collapse" style="height: 0px;">
                                                                <div class="panel panel-transparent">
                                                                    <div class="panel-body">

                                                                        {# Blocco sinistra #}
                                                                        <div class="col-md-2">

                                                                            {# Blocco immagine #}
                                                                            <div class="device-image">
                                                                                <div style="text-align: left;" class="change-info-mac">
                                                                                    <i class="fa fa-info-circle fa-4x"></i>
                                                                                </div>
                                                                                <div class="modello-img blocco-info">
                                                                                    <img src="{{ asset('static/images/devices/' ~ macchina.Modello.Immagine) }}">
                                                                                </div>
                                                                                <div class="os-info blocco-info">
                                                                                    <section class="tile color transparent-black text-center">
                                                                                        <div class="tile-header">
                                                                                            <div>
                                                                                                <h1>os</h1>
                                                                                            </div>
                                                                                            <div>
                                                                                                <h3>
                                                                                                    domainname:
                                                                                                    {% if macinfo != false %}
                                                                                                        {{ macinfo.status.os.domainname }}
                                                                                                    {% endif %}
                                                                                                </h3>
                                                                                            </div>
                                                                                            <div>
                                                                                                <h3>
                                                                                                    machine:
                                                                                                    {% if macinfo != false %}
                                                                                                        {{ macinfo.status.os.machine }}
                                                                                                    {% endif %}
                                                                                                </h3>
                                                                                            </div>
                                                                                            <div>
                                                                                                <h3>
                                                                                                    nodename:
                                                                                                    {% if macinfo != false %}
                                                                                                        {{ macinfo.status.os.nodename }}
                                                                                                    {% endif %}
                                                                                                </h3>
                                                                                            </div>
                                                                                            <div>
                                                                                                <h3>
                                                                                                    release:
                                                                                                    {% if macinfo != false %}
                                                                                                        {{ macinfo.status.os.release }}
                                                                                                    {% endif %}
                                                                                                </h3>
                                                                                            </div>
                                                                                            <div>
                                                                                                <h3>
                                                                                                    sysname:
                                                                                                    {% if macinfo != false %}
                                                                                                        {{ macinfo.status.os.sysname }}
                                                                                                    {% endif %}
                                                                                                </h3>
                                                                                            </div>
                                                                                            <div>
                                                                                                <h3>
                                                                                                    version:
                                                                                                    {% if macinfo != false %}
                                                                                                        {{ macinfo.status.os.version }}
                                                                                                    {% endif %}
                                                                                                </h3>
                                                                                            </div>
                                                                                        </div>
                                                                                    </section>
                                                                                </div>
                                                                            </div>
                                                                            {# FINE Blocco immagine #}

                                                                            {# Blocco comandi #}
                                                                            <div class="col-md-12 btn-group btn-w100">
                                                                                <h1>
                                                                                    {{ 'Available Command'|trans }}
                                                                                </h1>
                                                                            </div>

                                                                            {% for comando in macchina.Comandi %}
                                                                                <div class="col-md-12 btn-group btn-w100 btn-cmd">
                                                                                    <button id="cmd-{{ comando.Cmd }}" data-mac="{{ macchina.id }}" data-cmd="{{ comando.Cmd }}" type="button" class="btn btn-blue margin-left-20 class-cmd">
                                                                                        <div>{{ comando.Nome }}</div>
                                                                                        {% if comando.Icona is defined and comando.Icona is not null and comando.Icona != "" %}
                                                                                            <i class="{{ comando.Icona }} fa-2x"></i>
                                                                                        {% endif%}
                                                                                    </button>
                                                                                </div>
                                                                            {% endfor %}
                                                                            {# FINE Blocco comandi #}
                                                                        </div>


                                                                        <div class="col-md-10">

                                                                            <section class="session-device-track tile color transparent-black" data-macid="{{ macchina.id }}">
                                                                                <div class="tile-header">
                                                                                    <h1>
                                                                                        <strong>{{ 'Location'|trans }}</strong>
                                                                                    </h1>
                                                                                    <input autocomplete="off" type="text" class="form-control datepicker datapicker-da" id="datepickerda-{{ macchina.id }}" style="width: 14vw; float: left; background-color: #d3d3d369; margin-right: 6px;" placeholder="{{ "Select date"|trans }}"/>
                                                                                    <label for="datepickerda-{{ macchina.id }}" class="control-label" style="float: left;">
                                                                                        <i class="fa fa-calendar fa-2x"></i>
                                                                                    </label>
                                                                                    <input autocomplete="off" type="text" class="form-control datepicker datapicker-a" id="datepickera-{{ macchina.id }}" style="width: 14vw; float: left; background-color: #d3d3d369; margin-right: 6px;" placeholder="{{ "Select date"|trans }}"/>
                                                                                    <label for="datepickera-{{ macchina.id }}" class="control-label" style="float: left;">
                                                                                        <i class="fa fa-calendar fa-2x"></i>
                                                                                    </label>

                                                                                    <div class="controls">
                                                                                        <a href="#" class="minimize">
                                                                                            <i class="fa fa-chevron-down"></i>
                                                                                        </a>
                                                                                        <a href="#" class="refresh">
                                                                                            <i class="fa fa-refresh"></i>
                                                                                        </a>
                                                                                        <a href="#" class="remove">
                                                                                            <i class="fa fa-times"></i>
                                                                                        </a>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="tile-body">
                                                                                    <div class="device-track">
                                                                                        {% if macgps != false %}
                                                                                            <div class="map-track" data-lat="{{ macgps.latitudine }}" data-macid="{{ macchina.id }}" data-lng="{{ macgps.longitudine }}" data-zoom="14"></div>
                                                                                        {% endif %}
                                                                                    </div>
                                                                                </div>
                                                                            </section>


                                                                            <div class="col-md-12">


                                                                                <!-- tile -->
                                                                                <section
                                                                                class="tile transparent mac-info">

                                                                                <!-- tile widget -->
                                                                                <div
                                                                                class="tile-widget nopadding color transparent-black rounded-top-corners">
                                                                                <!-- Nav tabs -->
                                                                                <ul class="nav nav-tabs tabdrop">
                                                                                    <li class="active">
                                                                                        <a href="#info-tab-{{ macchina.id }}" data-toggle="tab">{{ 'Information'|trans }}</a>
                                                                                    </li>
                                                                                    <li class="">
                                                                                        <a href="#status-tab-{{ macchina.id }}" data-toggle="tab">{{ 'Status'|trans }}</a>
                                                                                    </li>
                                                                                    <li class="">
                                                                                        <a href="#eth-tab-{{ macchina.id }}" data-toggle="tab">{{ 'Ethernet'|trans }}</a>
                                                                                    </li>
                                                                                    <li class="">
                                                                                        <a href="#wifi-tab-{{ macchina.id }}" data-toggle="tab">{{ 'WIFI'|trans }}</a>
                                                                                    </li>
                                                                                    <li class="">
                                                                                        <a href="#mobile-tab-{{ macchina.id }}" data-toggle="tab">{{ 'Mobile'|trans }}</a>
                                                                                    </li>
                                                                                    <li class="">
                                                                                        <a href="#gps-tab-{{ macchina.id }}" data-toggle="tab">{{ 'GPS'|trans }}</a>
                                                                                    </li>
                                                                                    <li class="">
                                                                                        <a href="#sms-tab-{{ macchina.id }}" data-toggle="tab">{{ 'SMS'|trans }}</a>
                                                                                    </li>
                                                                                    {% if macinfo != false %}
                                                                                        {% for wiz in macinfo.status.wizsetup %}
                                                                                            <li class="">
                                                                                                <a href="#tab-{{ wiz.name }}-{{ macchina.id }}" data-toggle="tab">{{ wiz.name|trans }}</a>
                                                                                            </li>
                                                                                        {% endfor %}
                                                                                    {% endif %}
                                                                                </ul>
                                                                                <!-- / Nav tabs -->
                                                                            </div>
                                                                            <!-- /tile widget -->

                                                                            <!-- tile body -->
                                                                            <div class="tile-body tab-content rounded-bottom-corners">
                                                                                <!-- Tab panes -->

                                                                                {% if macinfo != false %}
                                                                                    {% for wiz in macinfo.status.wizsetup %}
                                                                                        <div id="tab-{{ wiz.name }}-{{ macchina.id }}" class="tab-pane fade in info-tab">
                                                                                            <div style="text-align: left;" class="btn-edit edit-mac">
                                                                                                <i class="fa fa-pencil fa-4x"></i>
                                                                                            </div>
                                                                                            <div style="text-align: left;" class="btn-confirm edit-mac-cancel">
                                                                                                <i class="fa fa-close fa-4x"></i>
                                                                                            </div>
                                                                                            <div style="text-align: left;" class="btn-confirm edit-mac-confirm">
                                                                                                <i class="fa fa-check fa-4x"></i>
                                                                                            </div>
                                                                                            <div>
                                                                                                {% for field in wiz.fields %}
                                                                                                    <div class="field-editable" id="field.key" data-tipoedit="T">
                                                                                                        <h3>
                                                                                                            <div class="field-label">{{ field.name }}</div>
                                                                                                            <div class="field-edit">{{ field.value }}</div>
                                                                                                        </h3>
                                                                                                    </div>
                                                                                                    {% if field.name == 'GPS' %}
                                                                                                        <div class="col-md-4">
                                                                                                            <div>
                                                                                                                <h1>GPS</h1>
                                                                                                            </div>
                                                                                                            {% if macgps != false %}
                                                                                                                <div>
                                                                                                                    <h3>
                                                                                                                        Status:
                                                                                                                        {{ macgps.status }}
                                                                                                                    </h3>
                                                                                                                </div>
                                                                                                                <div>
                                                                                                                    <h3>
                                                                                                                        Timestamp:
                                                                                                                        {{ macgps.creation_date }}
                                                                                                                    </h3>
                                                                                                                </div>
                                                                                                                <div>
                                                                                                                    <h3>
                                                                                                                        Latitude:
                                                                                                                        {{ macgps.latitudine }}
                                                                                                                    </h3>
                                                                                                                </div>
                                                                                                                <div>
                                                                                                                    <h3>
                                                                                                                        Longitude:
                                                                                                                        {{ macgps.longitudine }}
                                                                                                                    </h3>
                                                                                                                </div>
                                                                                                                <div>
                                                                                                                    <h3>
                                                                                                                        Altitude:
                                                                                                                        {{ macgps.altitudine }}
                                                                                                                    </h3>
                                                                                                                </div>
                                                                                                                <div>
                                                                                                                    <h3>
                                                                                                                        Speed:
                                                                                                                        {{ macgps.speed }}
                                                                                                                    </h3>
                                                                                                                </div>
                                                                                                                <div>
                                                                                                                    <h3>
                                                                                                                        Travel Angle:
                                                                                                                        {{ macgps.angolo }}
                                                                                                                    </h3>
                                                                                                                </div>
                                                                                                                {#<div>
                                                                                                                <h3>
                                                                                                                Tracking Satellites:
                                                                                                                {{ macgps.trackingSatellites }}</h3>
                                                                                                                </div>
                                                                                                                <div>
                                                                                                                <h3>
                                                                                                                Visible Satellites
                                                                                                                {{ macgps.visibleSatellites }}</h3>
                                                                                                                </div>#}
                                                                                                            </div>

                                                                                                            <div class="device-position col-md-4">
                                                                                                                {% if macgps != false %}
                                                                                                                    <div class="map-position" data-lat="{{ macgps.latitudine }}" data-lng="{{ macgps.longitudine }}" data-zoom="14"></div>
                                                                                                                {% endif %}
                                                                                                            </div>

                                                                                                            <div class="col-md-4">
                                                                                                                <div class="blocco-gps">
                                                                                                                    {% if macgps != false %}

                                                                                                                        <section class="tile color transparent-black minimized">
                                                                                                                            <div class="tile-header">
                                                                                                                                <h1>
                                                                                                                                    <strong>{{ 'Location'|trans }}</strong>
                                                                                                                                </h1>
                                                                                                                                <div class="controls">
                                                                                                                                    <a href="#" class="minimize">
                                                                                                                                        <i class="fa fa-chevron-down"></i>
                                                                                                                                    </a>
                                                                                                                                    <a href="#" class="refresh">
                                                                                                                                        <i class="fa fa-refresh"></i>
                                                                                                                                    </a>
                                                                                                                                    <a href="#" class="remove">
                                                                                                                                        <i class="fa fa-times"></i>
                                                                                                                                    </a>
                                                                                                                                </div>
                                                                                                                            </div>
                                                                                                                            <div class="tile-body">
                                                                                                                                <h3>{{ macgps.remote_info }}</h3>
                                                                                                                            </div>
                                                                                                                        </section>



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

                                                                            {# info tab #}
                                                                            <div id="info-tab-{{ macchina.id }}" class="tab-pane fade in active info-tab">
                                                                                <div class="col-md-3">
                                                                                <!-- tile -->
                                                                                    <section class="tile color transparent-black text-center">

                                                                                        <!-- tile header -->
                                                                                        <div class="tile-header">
                                                                                            <span>
                                                                                                <a href="{{ macchina.UrlSistema }}" target="_blank">
                                                                                                    <font color="#ffffff">{{ 'System'|trans }} : {{ macchina.Sistema|raw }}
                                                                                                    </font>&nbsp;&nbsp;<i class="fa fa-connectdevelop fa-rotate-90 fa-2x" aria-hidden="true"></i>&nbsp;
                                                                                                </a>
                                                                                            </span>
                                                                                        </div>
                                                                                        <!-- /tile header -->

                                                                                    </section>

                                                                                </div>


                                                                            <div class="col-md-3">

                                                                                <section
                                                                                class="tile color transparent-black text-center">

                                                                                <!-- tile header -->
                                                                                <a href="{{ macchina.UrlModello }}" target="_blank">
                                                                                    <div class="tile-header">
                                                                                        <font color="#ffffff">{{ 'Model'|trans }}:
                                                                                            {{ macchina.Modello.Nome }}
                                                                                        </font>

                                                                                    </div>
                                                                                </a>
                                                                                <!-- /tile header -->
                                                                            </section>
                                                                        </div>


                                                                        <div class="col-md-3">

                                                                            <section
                                                                            class="tile color transparent-black text-center">

                                                                            <!-- tile header -->
                                                                            <div class="tile-header">
                                                                                <font color="#ffffff">{{ 'Production year'|trans }}:
                                                                                    {{ macchina.DataProduzione|date('m/y') }}
                                                                                </font>

                                                                            </div>
                                                                            <!-- /tile header -->
                                                                        </section>
                                                                    </div>

                                                                    <div
                                                                    class="col-md-3">
                                                                    <!-- tile -->
                                                                    <section
                                                                    class="tile color transparent-black text-center">

                                                                    <!-- tile header -->
                                                                    <div class="tile-header">
                                                                        <font color="#ffffff">{{ 'Serial number'|trans }}:
                                                                            {{ macchina.NumeroSeriale }}
                                                                        </font>
                                                                        <br>
                                                                    </div>
                                                                    <!-- /tile header -->

                                                                </section>

                                                            </div>

                                                            <div
                                                            class="col-md-3">
                                                            <!-- tile -->
                                                            <section
                                                            class="tile color transparent-black text-center">

                                                            <!-- tile header -->
                                                            <div class="tile-header">
                                                                <span>
                                                                    <a href="{{ macchina.UrlDataSheet }}" target="_blank">
                                                                        <font color="#ffffff">DATA-SHEET&nbsp;&nbsp;</font>
                                                                        <i class="fa fa-gears fa-2x" style=""></i>&nbsp;</a>
                                                                    </span>
                                                                </div>
                                                                <!-- /tile header -->

                                                            </section>

                                                        </div>

                                                        <div class="col-md-3">

                                                            <section
                                                            class="tile color transparent-black text-center">

                                                            <!-- tile header -->
                                                            <div class="tile-header">
                                                                <img src="/static/c4rg0_themes/assets/images/icons/Start-Up.png" alt="" width="29" height="32"/>
                                                                <font color="#ffffff">{{ 'Software Version' }}:
                                                                    {{ macchina.VersioneSw }}
                                                                </font>

                                                            </div>
                                                            <!-- /tile header -->
                                                        </section>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <section
                                                        class="tile color transparent-black text-center">

                                                        <!-- tile header -->
                                                        <div class="tile-header">
                                                            <i class="fa fa-paper fa-2x"></i>
                                                            <font color="#ffffff">{{ 'User License'|trans }}:
                                                                {{  macchina.UserLic }}
                                                            </font>

                                                        </div>
                                                        <!-- /tile header -->
                                                    </section>
                                                </div>
                                                <div class="col-md-3">

                                                    <section
                                                    class="tile color transparent-black text-center">

                                                    <!-- tile header -->
                                                    <div class="tile-header">

                                                        {% if macchina.scaduta %}
                                                            <img src="/static/c4rg0_themes/assets/images/icons/warning.png" alt="" height="32"/>
                                                        {% else %}
                                                            <i class="fas fa-check-circle fa-2x" style="color: green"></i>
                                                        {% endif %}
                                                        <font color="#ffffff">
                                                            <span style="color:#66ccff">
                                                                &nbsp;&nbsp;
                                                                {{ 'Assistance'|trans }}
                                                                :
                                                                {{ macchina.Scadenza }}
                                                            </font>
                                                        </div>
                                                        <!-- /tile header -->
                                                    </section>
                                                </div>
                                            </div>
                                            {# FINE info tab #}



                                            <div id="status-tab-{{ macchina.id }}" class="tab-pane fade in status-tab"></div>
                                            <div id="eth-tab-{{ macchina.id }}" class="tab-pane fade in">

                                                <div style="text-align: left;" class="btn-edit edit-mac">
                                                    <i class="fa fa-pencil fa-4x"></i>
                                                </div>
                                                <div style="text-align: left;" class="btn-confirm edit-mac-cancel">
                                                    <i class="fa fa-close fa-4x"></i>
                                                </div>
                                                <div style="text-align: left;" class="btn-confirm edit-mac-confirm">
                                                    <i class="fa fa-check fa-4x"></i>
                                                </div>


                                                <div>
                                                    <h1>enx00e04c360706</h1>
                                                </div>
                                                <div class="field-editable" data-tipoedit="T">
                                                    <h3>
                                                        <div class="field-label">IPV4:</div>
                                                        {% if macinfo != false and macinfo.status.IF_enx00e04c360706_IPV4_IP|default %}
                                                            <div class="field-edit">{{ macinfo.status.IF_enx00e04c360706_IPV4_IP }}</div>
                                                        {% endif %}
                                                    </h3>
                                                </div>
                                                <div class="field-editable" data-tipoedit="T">
                                                    <h3>
                                                        <div class="field-label">IPV4 NETMASK:</div>
                                                        {% if macinfo != false and macinfo.status.IF_enx00e04c360706_IPV4_NETMASK|default %}
                                                            <div class="field-edit">{{ macinfo.status.IF_enx00e04c360706_IPV4_NETMASK }}</div>
                                                        {% endif %}
                                                    </h3>
                                                </div>
                                                <br/>
                                                <div>
                                                    <h1>eth0</h1>
                                                </div>
                                                <div class="field-editable" data-tipoedit="T">
                                                    <h3>
                                                        <div class="field-label">IPV4:</div>
                                                        {% if macinfo != false %}
                                                            <div class="field-edit">{{ macinfo.status.IF_eth0_IPV4_IP }}</div>
                                                        {% endif %}
                                                    </h3>
                                                </div>
                                                <div class="field-editable" data-tipoedit="T">
                                                    <h3>
                                                        <div class="field-label">IPV4 NETMASK:</div>
                                                        {% if macinfo != false %}
                                                            <div class="field-edit">{{ macinfo.status.IF_eth0_IPV4_NETMASK }}</div>
                                                        {% endif %}
                                                    </h3>
                                                </div>


                                            </div>

                                            <div id="wifi-tab-{{ macchina.id }}" class="tab-pane fade in">

                                                <div style="text-align: left;" class="btn-edit edit-mac">
                                                    <i class="fa fa-pencil fa-4x"></i>
                                                </div>
                                                <div style="text-align: left;" class="btn-confirm edit-mac-cancel">
                                                    <i class="fa fa-close fa-4x"></i>
                                                </div>
                                                <div style="text-align: left;" class="btn-confirm edit-mac-confirm">
                                                    <i class="fa fa-check fa-4x"></i>
                                                </div>


                                                <div>
                                                    <h1>wlan0</h1>
                                                </div>
                                                <div class="field-editable" data-tipoedit="T">
                                                    <h3>
                                                        <div class="field-label">IPV4:</div>
                                                        {% if macinfo != false %}
                                                            <div class="field-edit">{{ macinfo.status.IF_wlan0_IPV4_IP|default }}</div>
                                                        {% endif %}
                                                    </h3>
                                                </div>
                                                <div class="field-editable" data-tipoedit="T">
                                                    <h3>
                                                        <div class="field-label">IPV4 NETMASK:</div>
                                                        {% if macinfo != false %}
                                                            <div class="field-edit">{{ macinfo.status.IF_wlan0_IPV4_NETMASK|default }}</div>
                                                        {% endif %}
                                                    </h3>
                                                </div>

                                            </div>
                                            <div id="mobile-tab-{{ macchina.id }}" class="tab-pane fade in mobile-tab">
                                            {# Modulo mobile #}

                                                {% if macchina.MQTTDeviceId %}
                                                    {% include 'block/_mobile_module.html.twig' with {
                                                        'macchina': macchina,
                                                        'deviceId': macchina.MQTTDeviceId
                                                    } %}
                                                {% else %}
                                                    <div class="alert alert-warning">
                                                        <i class="fas fa-exclamation-triangle"></i>
                                                        {{ 'No device configured for this machine'|trans }}
                                                    </div>
                                                {% endif %}

                                            </div>
                                            <div id="gps-tab-{{ macchina.id }}" class="tab-pane fade in gps-tab">
                                            {# Modulo gps #}
                                                {% if macchina.MQTTDeviceId %}
                                                    {% include 'block/_gps_module.html.twig' with {
                                                        'macchina': macchina,
                                                        'deviceId': macchina.MQTTDeviceId,
                                                        'lastGps': macgps
                                                    } %}
                                                {% else %}
                                                    <div class="alert alert-warning">
                                                        <i class="fas fa-exclamation-triangle"></i>
                                                        {{ 'No device configured for this machine'|trans }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <div id="sms-tab-{{ macchina.id }}" class="tab-pane fade in sms-tab">
                                            {# Modulo sms #}
                                                {% if macchina.MQTTDeviceId %}
                                                    {% include 'block/_sms_module.html.twig' with {
                                                        device_id: macchina.MQTTDeviceId,
                                                        machine_id: macchina.id
                                                    } %}
                                                {% else %}
                                                    <div class="alert alert-warning">
                                                        <i class="fas fa-exclamation-triangle"></i>
                                                        {{ 'No device configured for this machine'|trans }}
                                                    </div>
                                                {% endif %}
                                            </div>





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


                            </div>


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

                    </div>
                {% endfor %}


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

                </div>
            {% endfor %}
            </div>
            </div>
            <!-- /tile body -->


            </section>

            <!-- /tile -->

            <div align="center">
                <img src="{{ asset('static/c4rg0_themes/assets/images/Consitech_p.png') }}" width="auto" height="35vw" alt=""/>
                <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

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

            </div>
            </div>


        {% endblock %}

        {% block javascripts %}
            {{ parent() }}
            <script type="text/javascript" src="{{ asset('static/js/moment/moment.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/momentjs/moment-with-langs.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/bootstrap-datetimepicker.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('static/js/jquery-dateformat.min.js') }}"></script>
            <!-- SIM7600 Modules - DEVE essere dopo Google Maps -->
            <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" defer></script>
            <script type="text/javascript" src="{{ asset('static/js/mappe/googlemaps.js') }}"></script>
            <script type="text/javascript" src="{{ versioned_asset('static/js/sim7600-modules.js') }}"></script>
            <script type="text/javascript" src="{{ versioned_asset('js/sim7600-sms-module.js') }}"></script>


            <script type="text/javascript">
                let g_Luoghi = [
                    {% for luogo in luoghi %}
                    [{{ luogo.id }}, "{{ luogo.nome }}", '<div class="popup-mappa">{{ luogo.descrizione|e('js') }}</div>', {{ luogo.lat }}, {{ luogo.lon }}]{% if not loop.last %},{% endif %}
                    {% endfor %}
                ];
                var coord_lat = 45.9;
                var coord_long = 9.45;

                $("#devices-accordion .panel-heading .panel-title a").click(function () {
                    var $previous = $("#devices-accordion .panel.active");

                    $previous.removeClass("active");
                    $(this).parent().parent().parent().stop().addClass("active");

                    if ($(this).parent().parent().parent().hasClass("active")) {
                        $previous.removeClass("active");
                    }
                });
                /*
                $('#accordion > .panel-accordion-item > a').click(function() {

                    var $previous = $( '#location-accordion .panel.active' );

                    $previous.removeClass('active');
                    $(this).parent().stop().addClass('active');

                    if($(this).parent().hasClass('active')) {
                        $previous.removeClass('active');
                    }
                });


                $('#datascan-accordion > .panel-accordion-item > a').click(function() {

                    var $previous = $( '#datascan-accordion .panel.active' );

                    $previous.removeClass('active');
                    $(this).parent().stop().addClass('active');

                    if($(this).parent().hasClass('active')) {
                        $previous.removeClass('active');
                    }
                });
                */

                $(".location-accordion > .panel-accordion-item > a").click(function () {
                    var $previous = $(this).parent().parent().children(".panel.active");

                    $previous.removeClass("active");
                    $(this).parent().stop().addClass("active");

                    if ($(this).parent().hasClass("active")) {
                        $previous.removeClass("active");
                    }
                });

                $(".datascan-accordion > .panel-accordion-item > a").click(function () {
                    var $previous = $(this).parent().parent().children(".panel.active");

                    $previous.removeClass("active");
                    $(this).parent().stop().addClass("active");

                    if ($(this).parent().hasClass("active")) {
                        $previous.removeClass("active");
                    }
                });

                $(".change-info-mac").click(function () {
                    $(".device-image").toggleClass("mac-info");
                });

                $(".edit-mac").click(function () {
                    $(this)
                    .parent()
                    .find("div.field-editable")
                    .each(function (idx, s) {
                        let _campo = $(this).find("h3 > div.field-edit");
                        let v = _campo.html();
                        let _tipo = $(this).data("tipoedit");
                        switch (_tipo) {
                            case "S":
                            let _select =
                            '<select class="edit-mac-field form-control" data-originalval="' +
                            v +
                            '" value="' +
                            v +
                            '" style="display: inherit; width: fit-content; font-size: 1vw;">';
                            let _options = $(this).data("options");
                            let _vOptions = _options.split(";");
                            _vOptions.forEach((a_El) => {
                                let _o = a_El.split(",");
                                if (_o.length === 2) {
                                    let _sel = "";
                                    if (_o[0] === v) {
                                        _sel = " selected ";
                                    }
                                    _select =
                                    _select +
                                    '<option value="' +
                                    _o[0] +
                                    '"' +
                                    _sel +
                                    ">" +
                                    _o[1] +
                                    "</option>";
                                }
                            });
                            _select = _select + "</select>";
                            _campo.html(_select);
                            break;
                            default:
                            _campo.html(
                            '<input class="edit-mac-field form-control" type="text" data-originalval="' +
                            v +
                            '" value="' +
                            v +
                            '">'
                            );
                        }
                    });
                });

                $(".edit-mac-confirm").click(function () {
                    $(this)
                    .parent()
                    .find("div.field-editable > h3 > div.field-edit")
                    .each(function (idx, s) {
                        let i = $(this).find("input, select");
                        let val = i.val();
                        // let oval = i.data("originalval");
                        $(this).html(val);
                    });
                });

                $(".edit-mac-cancel").click(function () {
                    $(this)
                    .parent()
                    .find("div.field-editable > h3 > div.field-edit")
                    .each(function (idx, s) {
                        let i = $(this).find("input, select");
                        // let val = i.val();
                        let oval = i.data("originalval");
                        $(this).html(oval);
                    });
                });

                $(".btn-edit, .btn-confirm").click(function () {
                    $(this).parent().toggleClass("mac-edit");
                });

                /**************************/
                /* block element function */
                /**************************/

                function myElBlock(el) {
                    $(el).block({
                        message: '<div class="el-reloader"></div>',
                        overlayCSS: {
                            opacity: 0.6,
                            cursor: "wait",
                            backgroundColor: "#000000",
                        },
                        css: {
                            padding: "5px",
                            border: "0",
                            backgroundColor: "transparent",
                        },
                    });
                }
                function myElUnblock(el) {
                    $(el).unblock();
                }

                $(".session-device-track .tile-header .controls .refresh").click(function () {
                    var el = $(this).parent().parent().parent();
                    let macid = el.data("macid");
                    let _url = "{{ path('location_gettrack', {'id':'::ID'}) }}".replace(
                    "::ID",
                    macid
                    );
                    myElBlock(el);
                    $.ajax({ type: "GET", url: _url, data: {} })
                    .done(function (v) {
                        setMarker(macid, v);
                    })
                    .fail(function (err) {})
                    .always(function () {
                        myElUnblock(el);
                    });

                    return false;
                });

                var today = new Date();
                var dd = today.getDate();

                var mm = today.getMonth() + 1;
                var yyyy = today.getFullYear();
                if (dd < 10) {
                    dd = "0" + dd;
                }

                if (mm < 10) {
                    mm = "0" + mm;
                }

                today = mm + "/" + dd + "/" + yyyy;

                $(".datepicker-da").datetimepicker({
                    format: "DD/MM/YYYY",
                    defaultDate: today,
                    icons: {
                        time: "fa fa-clock-o",
                        date: "fa fa-calendar",
                        up: "fa fa-arrow-up",
                        down: "fa fa-arrow-down",
                    },
                });

                $(".datepicker-da").on("dp.show", function (e) {
                    var newtop = $(".bootstrap-datetimepicker-widget").position().top - 45;
                    $(".bootstrap-datetimepicker-widget").css("top", newtop + "px");
                });

                $(".datepicker-da").on("dp.change", function (e) {
                    var mese = e.date.month() + 1;
                    var datasel =
                    e.date.year().toString() +
                    "-" +
                    mese.toString().padStart(2, "0") +
                    "-" +
                    e.date.date().toString().padStart(2, "0");
                    $(this).blur();
                    // searchByDate(datasel, false, true);
                    //    location.href="{{ path('stat_page', {'id':2,'data':'DATASELEZIONATA'}) }}".replace('DATASELEZIONATA', datasel);
                    // alert();
                });

                $(".datepicker-a").datetimepicker({
                    format: "DD/MM/YYYY",
                    defaultDate: today,
                    icons: {
                        time: "fa fa-clock-o",
                        date: "fa fa-calendar",
                        up: "fa fa-arrow-up",
                        down: "fa fa-arrow-down",
                    },
                });

                $(".datepicker-a").on("dp.show", function (e) {
                    var newtop = $(".bootstrap-datetimepicker-widget").position().top - 45;
                    $(".bootstrap-datetimepicker-widget").css("top", newtop + "px");
                });

                $(".datepicker-a").on("dp.change", function (e) {
                    var mese = e.date.month() + 1;
                    var datasel =
                    e.date.year().toString() +
                    "-" +
                    mese.toString().padStart(2, "0") +
                    "-" +
                    e.date.date().toString().padStart(2, "0");
                    $(this).blur();
                    // searchByDate(datasel, false, true);
                    //    location.href="{{ path('stat_page', {'id':2,'data':'DATASELEZIONATA'}) }}".replace('DATASELEZIONATA', datasel);
                    // alert();
                });


                $('.class-cmd').on('click', function(v) {
                    let _cmd = $(this).data('cmd');
                    let _mac = $(this).data('mac');
                    let _url = "{{ path('api_set_mac_cmd') }}";
                    let _dom = $(this);
                    if (!$(this).hasClass('btn-green')) {
                        $(this).removeClass('btn-blue');
                        $(this).removeClass('btn-red');
                        $(this).addClass('btn-green');

                        $.ajax({ type: "PUT", url: _url, data: {"mac": _mac, "cmd": _cmd}, dataType: 'json', })
                        .done(function (v) {
                            _dom.removeClass('btn-red');
                            _dom.removeClass('btn-green');
                            _dom.addClass('btn-blue');
                        })
                        .fail(function (err) {
                            _dom.removeClass('btn-blue');
                            _dom.removeClass('btn-green');
                            _dom.addClass('btn-red');
                        })
                        .always(function () {
                        });
                    }
                });

            </script>
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvknuD3dQrqFqq6QUh0MWHYA3YNSwUADo&callback=initMap&v=weekly" defer></script>
            <script type="text/javascript" src="{{ asset('static/js/mappe/googlemaps.js') }}"></script>
        {% endblock %}