<div id="contacts" class="page-layout simple left-sidebar-floating">

  <div class="page-content-wrapper">
    <aside class="col-sm-12 col-md-4 col-lg-4 col-xl-4" data-fuse-bar="contacts-sidebar" data-fuse-bar-media-step="md" style="padding: 0; max-height: 100%">
      <div class="page-sidebar-card" style="max-height: 100%">
        <!-- SIDENAV CONTENT -->
        <div class="content" style="overflow-y: auto;position: absolute;height: 100%;width: 100%;">
          <table id="monitoring" class="simple clickable table-striped table-hover">
            <thead>
            <tr>
              <th class="text-center">
                <%= _("Vehicle") %>
                <img class="loading-image" style="width: 10px;visibility: hidden;" src="<%= asset_path("others/loading.gif") %>">
              </th>
              <th class="text-center"><%= _("Last") %></th>
              <th class="text-center"><%= _("Details") %></th>
            </tr>
            </thead>
            <tbody>
            <% @vehicles.each do |vehicle| %>
              <% if vehicle.device %>
                <% position = vehicle.device.last_position %>
                <% temperature = position.get_temperature if position.present? %>

                <% @vechicles_by_id[vehicle.tc_device_id] = vehicle.name + (temperature.present? ? " - "+ temperature + "°" : '') %>
                <tr data-marker="<%= vehicle.marker_url %>" id="device_id_<%= vehicle.tc_device_id %>">
                  <td title="offline" class="name_vehicle_event name_vehicle offline">
                    <a href="javascript:void(0)"><%= vehicle.name %><span class="temperature"><%= temperature.present? ? " - "+ temperature + "°" : ''  %></span></a>
                  </td>
                  <td class="last_update text-center">--</td>
                  <td class="text-center">
                    <div class="text-center" style="display: flex;">
                      <img class="img-vehicle-direction" style='width: 24px;height: 24px;' src='/assets/images/logos/logo_compass.svg'>
                      <% if position.present? %>
                        <% if position.speed > 3 %>
                          <div class="move-indicator ng-star-inserted" style="background-color: green;" title="moving"></div>
                        <% elsif position.ignition %>
                          <div class="move-indicator ng-star-inserted" style="background-color: blue;" title="ignition_on"></div>
                        <% else %>
                          <div class="move-indicator ng-star-inserted" style="background-color: red;" title="stopped"></div>
                        <% end %>
                        <a class="btn-details" onclick="loadModalWithVechicleId(<%= vehicle.id %>, 'session')" href="javascript:void(0)" style="margin-left: 10px" title="details">
                          <i class="icon s-4 icon-library-books"></i>
                        </a>
                        <a class="btn-details" onclick="loadModalWithVechicleId(<%= vehicle.id %>, 'alerts')" href="javascript:void(0)" style="margin-left: 10px" title="notifications">
                          <i class="icon s-4 icon-bell-outline"></i>
                        </a>
                        <a class="btn-details" onclick="loadModalWithVechicleId(<%= vehicle.id %>, 'commands')" href="javascript:void(0)" style="margin-left: 10px" title="commands">
                          <i class="icon s-4 icon-email"></i>
                        </a>
                        <% if !@mobile %>
                          <a class="btn-details" href="https://www.instantstreetview.com/@<%= position.latitude %>,<%= position.longitude %>,10.5h,-19.38p,1z" target="_blank" style="margin-left: 10px" title="Street view">
                            <i class="fas fa-street-view s-4"></i>
                          </a>
                        <% end %>
                      <% end %>
                    </div>
                  </td>
                </tr>
              <% end %>
            <% end %>
            </tbody>
          </table>
          <hr>
          <%= _("Make your payment with:") %>
          <a href="https://www.psepagos.co/PSEHostingUI/ShowTicketOffice.aspx?ID=8050" target="_blank"><img src="/assets/images/logos/pse.jpeg", style="width: 150px"/></a>
        </div>
        <!-- / SIDENAV CONTENT -->
      </div>
    </aside>

    <!-- CONTENT -->
    <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8 content-map" style="margin: 0px;padding: 0px">
      <div class="row map-content-header" style="margin: 0px;height: 37px;border-bottom: 1px solid #045784;">
        <div class="col-2" style="padding-top: 8px;background-color: #eee;">
          <button style="margin-top: -12px;" type="button" class="sidebar-toggle-button btn btn-icon d-inline-block d-lg-none mr-2" data-fuse-bar-toggle="contacts-sidebar">
            <i class="icon icon-menu"></i>
          </button>
        </div>
        <div class="col-10" style="padding-top: 8px;border-right: 1px solid #045784;background-color: #eee;">
          <div align="right" style="positon: flex;">
            <button onclick="location.reload();" style="background-color: #039be5;bottom: 10px;color: whitesmoke;">
              <i class="icon-refresh s-6" style="color: whitesmoke;font-size: 12pt !important;"></i>
              Refrescar
            </button>
            <button onclick="centerMap();"><%= _("Center map") %></button>
          </div>
        </div>
      </div>
      <div class="row map-content-row" style="margin: 0px;">
        <div class="col-12" style="padding: 0px; height: 100%;">
          <div id="map" class="map"></div>
        </div>
      </div>
    </div>
    <!-- / CONTENT -->
  </div>
</div>
<%= render "details_vehicle" %>

<%= stylesheet_link_tag  'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css' %>
<%= stylesheet_link_tag  'https://unpkg.com/ol-layerswitcher@3.5.0/src/ol-layerswitcher.css' %>
<%= stylesheet_link_tag  'routing' %>

<%= javascript_include_tag 'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js' %>
<%= javascript_include_tag 'https://unpkg.com/ol-layerswitcher@3.5.0' %>
<%= javascript_include_tag 'map' %>
<%= javascript_include_tag 'routing' %>
<script>
  var markerVectorLayer;
  var map;
  var global_positions = {};
  var global_geofences = <%= @geofences.to_json.html_safe %>;
  var global_colors = {
    "unknown": "yellow",
    "offline": "red",
    "online": "green"
  };

  var global_actual_vehicle;
  var global_vehicles = <%= @vehicles.to_json(include: {device: {include: :last_position}}).html_safe %>
  var global_vehicles_by_device_id = <%= @vechicles_by_id.to_json.html_safe %>;
  var global_audio = [];
  var URL_SERVER_TRACKING = "<%= ENV["TRACCAR_SERVER_URI"] %>";
  var SERVER_TRACKING_TOKEN = "<%= current_user.token %>";
  var CURRENT_USER_ADMIN = <%= current_user.user_admin? %>;
  $(function(){
    var tf = new TableFilter('monitoring', filtersConfig);
    try{ tf.init();  }catch (e) {}
    init();
  });
</script>
