{% extends "base.html.twig" %}

{% block title %}Device detail{% endblock %}

{% form_theme fwForm 'bootstrap_4_layout.html.twig' %}

{% block body %}
<div class="container-fluid">
<div class="row">
  <div class="col-md-6" style="padding-left:0px;">
    <div class="bgc-white bd bdrs-3 p-10 mB-20">
      <div class="peers fxw-nw@lg+ ai-s">
        <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
          <div class="layers">
            <div class="layer w-100 mB-10">
              <h5 class="lh-1">Device detail</h5>
              <hr class="mB-10">
            </div>
            <div class="layer w-100">
              Name: <b>{{ device.name()|default("None") }}</b>
              {% if(device.snmpName is not null) %}<div class="pt-3">SNMP Name: <b>{{ device.snmpName()|default("None") }}</b></div>{% endif %}
              <div class="layer w-100">
                {{ form_start(customModuleDownloadForm, {'attr': {'class': 'form-inline'}}) }}
                <div class="form-group mr-2" style="margin-top: 14px;">
                <p>Device ID: <b>{{ device.devId() }}</b></p>
                </div>

                  <div class="form-group mr-2" style="padding-left: 10px;">
                    {{ form_widget(customModuleDownloadForm.download) }}
                  </div>
                {{ form_end(customModuleDownloadForm) }}
              </div>
              {% if(device.devType.id == 1) %}
                <p>
                  Hostname: <b>{{ device.hostname()|default("None") }}</b> {% if(device.hostnameDesired) %}(to be updated: {{ device.hostnameDesired }}){% else %}{% endif %}
                </p>
                <div class="layer w-100" style="padding-bottom: 10px;">
                  {{ form_start(hostnameForm, {'attr': {'class': 'form-inline'}}) }}
                  <div class="form-group mr-2">
                    {{ form_widget(hostnameForm.hostname) }}
                  </div>
                  <div class="form-group mr-2">
                    {{ form_widget(hostnameForm.save) }}
                  </div>
                  {{ form_end(hostnameForm) }}
                </div>
              {% endif %}
              <p>Status: <b>{{ device.stats.syncStatus.description }}</b></p>
              <p>Type: <b>{{ device.devType.name }}</b></p>
              <p>Data age: <b>{{ device.stats.liveTime.description }}</b></p>
              <p>Missed contacts: <b>{{ device.stats.liveMissCount.description }}</b></p>
              {# Advantech and Teltonika #}
              {% if(device.devType.id == 2 or device.devType.id == 4 or device.devType.id == 5) %}
                <p>Current OS/FW
                    version: <b>{{ device.osVer.version|default("Unknown") }}</b> {% if(device.osVerDesired) %}(desired: <b>{{ device.osVerDesired.version }}</b>){% else %}(NO specific){% endif %}
                </p>
              {% endif %}

            </div>

            {% include 'device/part/form/setFwVersionForm.html.twig' with
              {'device': device, 'osVersions': osVersions, 'fwForm': fwForm} only
            %}

            {% include 'device/part/form/setAgentProfileForm.html.twig' with
              {'agentProfilesForm': agentProfilesForm} only
            %}

            {% include 'device/part/form/setAuthProfileForm.html.twig' with
              {'authProfilesForm': authProfilesForm} only
            %}

            {% include 'device/part/form/setMonitoringGroupForm.html.twig' with
              {'monitoringGroupsForm': monitoringGroupsForm} only
            %}

            {% include 'device/part/form/setCustomLabelForm.html.twig' with
              {'labelsForm': labelsForm} only
            %}

            {% include 'device/part/form/setSystemLabelForm.html.twig' with
              {'systemLabelsForm': systemLabelsForm} only
            %}

            {% include 'device/part/form/setCloneConfigProfileForm.html.twig' with
              {'device': device, 'isDevicesToCloneFromEmpty': isDevicesToCloneFromEmpty,
                'configProfileCloneFromForm': configProfileCloneFromForm,
                'configProfileCloneToForm': configProfileCloneToForm} only
            %}

            <div class="layer w-100">
              <div class="form-inline">
                <div class="form-group mr-2">
                  <a href="{{ path('admin_devices') }}" type='primary' class='btn btn-primary'><span class="fas fa-arrow-left "></span> Back to devices</a>
                </div>
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
                  <span class="fas fa-trash"></span> Delete
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

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

    {% include 'device/part/statistics.html.twig' with
      {'device': device} only
    %}

    {% include 'device/part/notes.html.twig' with
      {'device': device} only
    %}

    {% include 'device/part/packages.html.twig' with
      {'packages': packages} only
    %}

    {% include 'device/part/simCards.html.twig' with
      {'device': device} only
    %}

    {% include 'device/part/customFields.html.twig' with
      {'device': device} only
    %}

  </div>

</div>
</div>
  <style>
    .table td,
    .table th {
      border-top:1px solid #dee2e6;
      padding:.75rem;
      vertical-align:middle;
    }
  </style>
  <div class="row">
    <div class="col-md-12">
      <div class="bgc-white bd bdrs-3 p-20 mB-20">
        <div class="layers">
          <div class="layer w-100 mB-10">
            <h4> Network Interfaces</h4>
            {{ form_start(netDevicesForm, {'attr': {'class': 'form-inline'}}) }}

          </div>
          {% if(device.netDevices|length != 0) %}
          <table class="table" style="color: #72777a; margin-bottom: 0;">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">MAC</th>
              <th scope="col">IP Address</th>
              <th scope="col">IPv6 Address</th>
              <th scope="col">Collisions</th>
              <th scope="col">Active</th>
              <th scope="col">Cellular</th>
              <th scope="col">Linkable</th>
              <th scope="col">Rx/Tx Packets</th>
              <th scope="col">Rx/Tx Bytes</th>
              <th scope="col">Rx/Tx Errors</th>
            </tr>
            </thead>
            <tbody>
            {% for netDevice in device.netDevices %}
              <tr>
                <td rowspan="2">{{ loop.index }}</td>
                <td rowspan="2"><b>{{ netDevice.label }}</b></td>
                <td rowspan="2">{{ netDevice.mac }}</td>
                <td rowspan="2">{% if(netDevice.ipAddr) %}{{ netDevice.ipAddr }}/{{ netDevice.ipMask }}{% else %} --- {% endif %}</td>
                <td rowspan="2">{% if(netDevice.ip6Addr) %}{{ netDevice.ip6Addr }}/{{ netDevice.ip6Pref }}{% else %} --- {% endif %}</td>
                <td rowspan="2">{{ netDevice.collisions }}</td>
                <td rowspan="2">{% if(netDevice.active == '1') %}<b>Yes</b>{% else %}No{% endif %}</td>
                {% set inputName = 'cellular_' ~ netDevice.getId() %}
                <td rowspan="2">{{ form_widget(attribute(netDevicesForm, (inputName))) }}</td>
                {% set inputName = 'linkable_' ~ netDevice.getId() %}
                <td rowspan="2">{{ form_widget(attribute(netDevicesForm, (inputName))) }}</td>
                <td>{{ netDevice.rxPackets }}</td>
                <td>{{ netDevice.rxBytes }}</td>
                <td>{{ netDevice.rxErrors }}</td>
              </tr>
              <tr>
                <td>{{ netDevice.txPackets }}</td>
                <td>{{ netDevice.txBytes }}</td>
                <td>{{ netDevice.txErrors }}</td>
              </tr>

            {% endfor %}

            {% else %}
              <p>No active network interfaces found.</p>
            {% endif %}

            </tbody>
          </table>
          <div class="layer w-100 mB-10">
            <hr class="dotted">
            {{ form_widget(netDevicesForm.save) }}
          </div>

          {{ form_end(netDevicesForm) }}
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="bgc-white bd bdrs-3 p-20 mB-20">
        <div class="layers">
          <div class="layer w-100 mB-10">
            <h4>History data</h4>
            <hr class="mB-20">
          {% if(historyData == '[]') %}
            <p>No data available yet.</p>
          {% else %}
          <div id="history-charts" class="layer w-100 mB-10">
            {# <canvas id="myChart" width="100" height="30"></canvas> #}
          </div>
          {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

      <!-- Modal -->
      <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Delete device</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Do you really want to delete this device?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fas fa-arrow-left"></span> Back</button>
              {{ form_start(deleteForm, {'attr': {'class': 'form-inline'}}) }}
                {{ form_widget(deleteForm.delete) }}
              {{ form_end(deleteForm) }}
            </div>
          </div>
        </div>
      </div>

{% endblock body %}

{% block javascripts %}

    {{ parent() }}

    <script>

      $(document).ready(function(){

        var SelectFieldLabels  = tail("#device_custom_label_labels", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: true,
          hideDisabled: true,
          multiSelectAll: true,
          multiShowCount: false,
          multiContainer: ".custom-labels-container",
          placeholder: 'Select device labels',
          text_empty: "No Custom Label available",
        });

        var SelectFieldSystemLabels  = tail("#device_system_label_labels", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: true,
          hideDisabled: true,
          multiSelectAll: true,
          multiShowCount: false,
          multiContainer: ".system-labels-container",
          placeholder: 'Select device labels',
          text_empty: "No System Label available",
        });

        var SelectFieldMonitoringGroups  = tail("#monitoring_group_monitoringGroups", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: true,
          hideDisabled: true,
          multiSelectAll: true,
          multiShowCount: false,
          multiContainer: ".monitoring-groups-container",
          placeholder: 'Select Monitoring groups',
          text_empty: "No Monitoring group available",
        });

        var SelectCloneDeviceFromField = tail("#config_profile_clone_from_device_config_profile", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: false,
          hideDisabled: true,
          deselect: true,
          placeholder: 'Select device',
          text_empty: "No Device available",
        });

        var SelectField  = tail("#config_profile_clone_device_to_devices", {
          search: true,
          classNames: "default white",
          descriptions: true,
          //deselect: true,
          //hideSelected: true,
          //items: items,
          multiple: true,
          hideDisabled: true,
          //deselect: true,
          multiSelectAll: true,
          //multiLimit: 15,
          multiShowCount: false,
          text_empty: "No Options available",
          multiContainer: ".devices-cloned-to-container",
          placeholder: 'Select devices to be cloned to',
        });

        if ($('.custom-labels-container').is(':empty')){
          $( ".custom-labels-container" ).append( $( "<div id='empty-custom-labels'>No Custom Label Assigned.</div>" ) );
        }

        $('#device_custom_label_labels').on('change', function() {
          if (SelectFieldLabels.options.selected.length === 0){
            $( ".custom-labels-container" ).append( $( "<div id='empty-custom-labels'>No Custom Label Assigned.</div>" ) );
          }else{
            $("#empty-custom-labels").remove();
          }
        });

        if ($('.system-labels-container').is(':empty')){
          $( ".system-labels-container" ).append( $( "<div id='empty-system-labels'>No System Label Assigned.</div>" ) );
        }

        $('#device_system_label_labels').on('change', function() {
          if (SelectFieldSystemLabels.options.selected.length === 0){
            $( ".system-labels-container" ).append( $( "<div id='empty-system-labels'>No System Label Assigned.</div>" ) );
          }else{
            $("#empty-system-labels").remove();
          }
        });

        if ($('.devices-cloned-to-container').is(':empty')){
          $( ".devices-cloned-to-container" ).append( $( "<div id='no-cloned'>No Device Cloned.</div>" ) );
        }

        $('#config_profile_clone_device_to_devices').on('change', function() {
          if (SelectField.options.selected.length === 0){
            $( ".devices-cloned-to-container" ).append( $( "<div id='no-cloned'>No Device Cloned.</div>" ) );
          }else{
            $("#no-cloned").remove();
          }
        });

      });

      var chartColors = {
        red: 'rgb(255, 99, 132)',
        blue: 'rgb(54, 162, 235)'
      };

      var historyData = {{ historyData|raw }};
      var historyTimeLegend = [{{ historyTimeLegend|raw }}];

      $.each(historyData, function(key,value){

        var elementID = 'chart_' + key; // Unique ID
        var rectWidth = 100;
        var rectHeight = 30;

        $('<canvas>').attr({
          id: elementID
        }).css({
          width: rectWidth + 'px',
          height: rectHeight + 'px'
        }).appendTo('#history-charts');

        var labels = historyTimeLegend;
        var inputData = value.data;
        var canvasId = elementID;

        //console.log(value.min + ',' + value.max);

        var settings = {
          title: key,
          backgroundColors: chartColors.blue,
          scale_min: parseInt(value.min),
          scale_max: parseInt(value.max),
          text_x: 'Time',
          text_y: value.description + ' ' + value.unit,
          unit: value.unit,
        };

        if(value.type === 'Bars'){

          if (!dwarfgChart.MakeBar(canvasId, labels, inputData, settings)) {
            console.error("MakeBar : Error While building Chart for "+key+"!");
          }

        }else if(value.type === 'Line'){

          if (!dwarfgChart.MakeLine(canvasId, labels, inputData, settings)) {
            console.error("MakeLine : Error While building Chart for "+key+"!");
          }

        }

        //console.log('Key = ' + k + '\n' + 'Value = ' + v.description);
      });


    </script>

{% endblock javascripts%}