{##
 # @file status_info_history.html
 # Copyright (C) 2015 Pressa. All rights reserved.
 #}

<div class="col-lg-12">
 <div class="row">
       <div class="col-lg-4">
   <div class="panel panel-default panel-primary">
    <div class="panel-heading text-center">
     {{ lang['dashboard']['status']['info']['history_details_title'] }}
    </div>
    <table class="table table-hover table-condensed">
     <tbody>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_comm_datetime'] }}
      </td>
      {% set ctime = date().timestamp %}

      {## Set css clas for commDatetime 
      #}
      {% set difcommDatetime   = ctime - history['commDatetime'] %}

      {% if difcommDatetime <= 1800 %}
        {% set commDatetimeClass = 'bg-success' %}
      {% endif %} 

      {% if difcommDatetime > 1800 and difDatetime <= 5400 %}
        {% set commDatetimeClass = 'bg-warning' %}
      {% endif %} 

      {% if difcommDatetime > 5400 %}
        {% set commDatetimeClass = 'bg-danger' %}
      {% endif %} 
      <td class="{{ commDatetimeClass }}">
       {{ history['commDatetime']|date("d/m/Y H:i:s") }}
      </td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_datetime'] }} 
      </td>
      {## Set css clas for datetime 
      #}
      {% set difdatetime   = ctime - history['datetime'] %}

      {% if difdatetime <= 1800 %}
        {% set datetimeClass = 'bg-success' %}
      {% endif %} 

      {% if difdatetime > 1800 and difDatetime <= 5400 %}
        {% set datetimeClass = 'bg-warning' %}
      {% endif %} 

      {% if difdatetime > 5400 %}
        {% set datetimeClass = 'bg-danger' %}
      {% endif %} 
      <td class="{{ datetimeClass }}">
       {{ history['datetime']|date("d/m/Y H:i:s") }}
      </td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_event_code_name'] }}
      </td>
      <td><div style="background-color: #{% if ec['id'] %}{{ ec['color'] }} {% else %}000 {% endif %};
               width: 20px; height: 20px; float: left; margin: 2px"></div>
      {% if ec['id']%}{{ ec['description'] }} (# {{ ec['id'] }}){% else %} REPORTE POSICION {% endif %}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_location_coords'] }}
      </td>
      <td>
       {% set lat = history['location']['lat'] %}
       {% set lng = history['location']['lng'] %}
       <a href="http://maps.google.com/maps?q={{ lat }},{{ lng }}&ll={{ lat }},{{ lng }}&z=17&t=h"
          target="_blank">
        {{ lat }}, {{ lng }}
       </a>
      </td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_speed'] }}
      </td>
      <td>{{ history['speed'] }} Km/h</td>
     </tr>
     <tr {% if history['age'] > 200 %} class="blink"
       style="background-color: #ebccd1;font-weight: bold" {% endif %}>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_age'] }}
      </td>
      <td>{{ history['age'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_orientation'] }}
      </td>
      <td><span class="icon-orientation glyphicon glyphicon-arrow-up" aria-hidden="true"
                style = "--angle:{{ history['orientation'] }}deg"></span>{{ history['orientation'] }}°</td>
     </tr>
     {% if history['vehicleInfo']['sensors'][12] and stat['driverName']|length > 0%}
     <tr>
       <td class="status-info-table-name">
         {{ lang['dashboard']['status']['info']['driver'] }}
       </td>
       <td>
         {{stat['driverName']}}
       </td>
     </tr>
     {% endif %}
<!--     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['history_state'] }}
      </td>
      <td>{{ history['status'] }}</td>
     </tr>-->
     </tbody>
    </table>
   </div>
    <div class="panel panel-default panel-primary">
      <div class="panel-heading text-center">
        {{lang['dashboard']['status']['info']['sensors_title']}}
      </div>
      <table class="table table-hover table-condensed">
        <tbody>
          <tr>
          {% for i in 0..1 %}
          {% if history['gpioBin'][i] == '1' %}
          <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">
          {% else %}
            <td class="status-sensor" style="background-color: #f2dede; color: #a94442;">
          {% endif %}
          {{ history['vehicleInfo']['sensors'][i] }}
            </td>
          {% endfor %}
          </tr>
          <tr>
          {% for i in 2..3 %}
          {% if history['gpioBin'][i] == '1' %}
            <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">
          {% else %}
            <td class="status-sensor" style="background-color: #f2dede; color: #a94442;">
          {% endif %}
          {{ history['vehicleInfo']['sensors'][i] }}
            </td>
          {% endfor %}
          </tr>
          <tr>
          {% for i in 4..5 %}
          {% if history['gpioBin'][i] == '1' %}
            <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">
          {% else %}
            <td class="status-sensor" style="background-color: #f2dede; color: #a94442;">
          {% endif %}
          {{ history['vehicleInfo']['sensors'][i] }}
            </td>
          {% endfor %}
          </tr>
          <tr>
          {% for i in 6..7 %}
          {% if history['gpioBin'][i] == '1' %}
            <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">
          {% else %}
            <td class="status-sensor" style="background-color: #f2dede; color: #a94442;">
          {% endif %}
          {{ history['vehicleInfo']['sensors'][i] }}
            </td>
          {% endfor %}
          </tr>
          <tr>
            {% if stat['mainBatteryVolt'] <= 11 or  (stat['mainBatteryVolt'] >=
              15 and stat['mainBatteryVolt'] <= 22) or  stat['mainBatteryVolt'] > 30 %}
            <td class="status-sensor blink" style="background-color: #f2dede; color: #a94442;
                    font-weight: bold;"">BAT PPAL: {{ stat['mainBatteryVolt'] }} V</td>
            {% else %}
            <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">
                    BAT PPAL: {{ stat['mainBatteryVolt'] }} V</td>
            {% endif %}
            {% if stat['auxBatteryVolt'] <= 3.3 or  (stat['auxBatteryVolt'] >=
              5 and stat['auxBatteryVolt'] <= 11) or (stat['auxBatteryVolt'] >=
              15 and stat['auxBatteryVolt'] <= 22) or stat['auxBatteryVolt'] > 30 %}
            <td class="status-sensor blink" style="background-color: #f2dede; color: #a94442;
                  font-weight: bold;"">BAT AUX: {{ stat['auxBatteryVolt'] }} V</td>
            {% else %}
            <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">
              BAT AUX: {{ stat['auxBatteryVolt'] }} V</td>
            {% endif %}
          </tr>
          <tr>
            <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">Litros:
              {%if history['vehicleInfo']['sensors'][13]%}{{ stat['liters'] }} L {% else %}  - {% endif %}</td>
            <td class="status-sensor" style="background-color: #dff0d8; color: #3c763d;">
                T1:{% if history['vehicleInfo']['sensors'][8] %} {{stat['currTemperature']}}°{%else%} - {% endif %},
                T2:{% if history['vehicleInfo']['sensors'][9] %} {{stat['currTemperature2']}}°{%else%} - {% endif %},
                T3:{% if history['vehicleInfo']['sensors'][10] %} {{stat['currTemperature3']}}°{%else%} - {% endif %}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
    <div class="col-lg-5">
   <div class="panel panel-default panel-primary">
    <div class="panel-heading text-center">
      <div class="pull-center">
        <span style="margin-left: 80px;">{{ lang['dashboard']['status']['info']['map_title'] }}</span>
          <div class="pull-right">
       <button type="submit" class="btn btn-xs btn-info"
               id="status-map-history"
               data-toggle="tooltip" data-placement="bottom"
               title="{{ lang['dashboard']['status']['info']['map_history'] }}">
         <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
         {{ lang['dashboard']['status']['info']['map_history'] }}
       </button>
       <button type="submit" class="btn btn-xs btn-warning"
               id="status-map-refs"
               data-toggle="tooltip" data-placement="bottom"
               title="{{ lang['dashboard']['status']['info']['map_refs'] }}">
         <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
         {{ lang['dashboard']['status']['info']['map_refs'] }}
       </button>
      <button type="submit" class="btn btn-xs btn-success"
               id="status-map-add-ref"
               data-toggle="tooltip" data-placement="bottom"
               title="Agregar Referencia">
         <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
         {{ lang['dashboard']['status']['info']['map_add_ref'] }}
       </button>
            <button type="submit" class="btn btn-xs btn-danger"
               id="status-map-clear"
               data-toggle="tooltip" data-placement="bottom"
               title="Limpiar">
              <span aria-hidden="true"><i class="fa fa-eraser"></i>Limpiar</span>
       </button>
     </div>
      </div>

    </div>
    <div id="status-map"></div>
    <div class="panel-footer text-center" id ="status-info-map-address">Cargando...</div>
   </div>
  </div>
    <div class="col-lg-3">
   <div class="panel panel-default panel-primary">
    <div class="panel-heading text-center">
     {{ lang['dashboard']['status']['info']['vehicle_details_title'] }}
    </div>
    <table class="table table-hover table-condensed">
     <tbody>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_name'] }}
      </td>
      <td>{{ history['vehicleInfo']['name'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_alias'] }}
      </td>
      <td>{{ history['vehicleInfo']['alias'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_brand'] }}
      </td>
      <td>{{ history['vehicleInfo']['brand'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_model'] }}
      </td>
      <td>{{ history['vehicleInfo']['model'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_license_plate'] }}
      </td>
      <td>{{ history['vehicleInfo']['licensePlate'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_year'] }}
      </td>
      <td>{{ history['vehicleInfo']['year'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_engine'] }}
      </td>
      <td>{{ history['vehicleInfo']['engine'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_chassis'] }}
      </td>
      <td>{{ history['vehicleInfo']['chassis'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_company_name'] }}
      </td>
      <td>{{ history['vehicleInfo']['companyName'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_company_number3c'] }}
      </td>
      <td>{% if stat['number3c']|length > 0 %} {{ stat['number3c'] }}
          {% else %} - {% endif %}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_gps_id'] }}
      </td>
      <td>{{ history['gpsInfo']['id'] }}</td>
     </tr>
<!--     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_insurance_company'] }}
      </td>
      <td>{{ history['vehicleInfo']['insuranceCompany'] }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_insurance_policy'] }}
      </td>
      <td>{{ history['vehicleInfo']['insurancePolicy'] }}</td>
     </tr>-->
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_date_register'] }}
      </td>
      <td>{{ history['vehicleInfo']['dateRegister']|date("d/m/Y H:i:s") }}</td>
     </tr>
     <tr>
      <td class="status-info-table-name">
       {{ lang['dashboard']['status']['info']['vehicle_odometer'] }}
      </td>
      <td>{{ history['vehicleInfo']['odometer'] }}</td>
     </tr>
     </tbody>
    </table>
   </div>
  </div>

<!--  <div class="col-lg-4">
   <div class="panel panel-default panel-primary">
    <div class="panel-heading text-center">
     {{ lang['dashboard']['status']['info']['sensors_title'] }}
    </div>
    <table class="table table-hover table-condensed">
     <tbody>
     {% for i in 0..7 %}
     <tr class="text-center">
      {% if history['gpioBin'][i] == '1' %}
       <td class="alert-success">
      {% else %}
       <td class="alert-danger">
      {% endif %}
      {{ history['vehicleInfo']['sensors'][i] }}
      </td>
     </tr>
     {% endfor %}
     </tbody>
    </table>
   </div>
  </div>-->
 </div>
</div>