<div class="col-12 px-0 py-0 content-principal-main">
  <div style="margin: 0px;" class="row">
    <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
      <div style="margin: 0px;" class="row">
        <div class="filter-select" style="position:relative;display: flex;margin-top: 10px;">
          <div style="padding: 0;padding-left: 10px;" class="col-8" >
            <%= render "shared/loading" %>
          </div>
          <div style="padding: 0;padding-left: 10px;" align="right" class="col-sm-12 col-md-4 col-lg-4 col-xl-4" >
            <%= render "shared/loading" %>
          </div>
        </div>
      </div>
      <div style="margin: 0px;" class="row">
        <table style="margin-left: 0px" class="dashboard-table-group table table-hover table-striped">
          <tbody>
          <% @groups.each do |group| %>
            <tr>
              <td>
                <% if group.avatar? %>
                  <%= image_tag(group.avatar_url, class: "img-round") %>
                <% else %>
                  <img class="img-round" src="<%= asset_path("images/avatars/profile.jpg")  %>">
                <% end %>
              </td>
              <td>
                <div style="margin: 0px;" class="row p3">
                  <div class="col-12 p-3">
                    <a class ="dashboard-group-header-link" href="javascript:void(0)"><%= group.name %></a> - <span class="time-format-dashboard"><%= group.updated_at %></span>
                  </div>
                </div>
                <div style="margin: 0px;" class="row p3">
                  <div align="left" class="col-12">
                    <ul class="dashboard-items-group" style="">
                      <li>
                        <a href="javascript:void(0)"><%= _("Vehículos") %> (<%= group.vehicles.joins('INNER JOIN tc_user_device ON tc_user_device.deviceid = vehicles.tc_device_id').where('tc_user_device.userid = ?', current_user.id).distinct.count %>)</a>
                      </li>
                      <li>
                        <a href="javascript:void(0)"><%= _("Points of interest") %> (<%= group.points_of_interests.count %>)</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
          <% end %>
          </tbody>
          <tfoot>
          <tr>
            <td colspan="100%" style="">
              <div class="row" style="">
                <div class="col-md-12 p-3" align="right">
                  <%= t("count") %>: <%= @groups.count %> &nbsp;&nbsp;&nbsp;
                </div>
              </div>
            </td>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
      <div class="col-12" style="border: 1px solid #ddd;">
        <div class="row" style="margin: 0px;">
          <div class="col-12">
            <span style="font-weight: bold;"><%= _("Summary") %></span>
          </div>
        </div>
        <div class="row" style="margin: 0px;">
          <div class="col-12">
            <div id="graph-summary">
              <svg></svg>
            </div>
          </div>
        </div>
        <hr>
        <div class="row" style="margin: 0px;">
          <div class="col-12">
            <span style="font-weight: bold;"><%= _("Average Downtime") %></span>
          </div>
        </div>
        <div class="row" style="margin: 0px;">
          <div class="col-12">
            <div id="graph-idle">
              <svg></svg>
            </div>
          </div>
        </div>
        <hr>
        <div class="row" style="margin: 0px;">
          <div class="col-12">
            <span style="font-weight: bold;"><%= _("Average speed (Km / h)") %></span>
          </div>
        </div>
        <div class="row" style="margin: 0px;">
          <div class="col-12">
            <div id="graph-speed">
              <svg></svg>
            </div>
          </div>
        </div>
        <!--<div class="row" style="margin: 0px;">
          <div class="col-12">
            <span style="font-weight: bold;">Alerts</span>
          </div>
        </div>
        <div class="row" style="margin: 0px;">
          <div class="col-12">
            <div id="graph-alerts">
              <svg></svg>
            </div>
          </div>
        </div>-->
      </div>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
      <div class="row">
        <div class="col-12">
          <div class="row" style="max-height: 500px;margin: 0px;margin-top:10px;border: 1px solid #ddd;">
            <div class="col-12 p-0" style="overflow: auto;">
              <table class="table table-hover table-striped">
                <tbody>
                <tr>
                  <td style="background-color: white" colspan="100%">
                    <p style="margin-top: 10px;font-weight: bold;"><%= _("Recent Alerts") %></p>
                  </td>
                </tr>
                <% if @recent_alerts.count == 0 %>
                  <tr>
                    <td align="center"><%= t("dashboard.no_alerts_show") %></td>
                  </tr>
                <% end %>
                <% @recent_alerts.each do |alert| %>
                  <tr>
                    <td style="width: 40px;" align="center">
                      <% if alert.color_alert == "error" %>
                        <img style="height: 30px;" src="<%= asset_path('others/alert.png') %>">
                      <% elsif alert.color_alert == "notice" %>
                        <img style="height: 30px;" src="<%= asset_path('others/warning.png') %>">
                      <% else %>
                        <img style="height: 30px;" src="<%= asset_path('others/position-icon-9.jpg') %>">
                      <% end %>
                    </td>
                    <td>
                      <p style="font-weight: bold;color: #c11d35;"><%= alert.device.hardware_profile.name.upcase %> - <%= alert.name.upcase %></p>
                      <p style="font-size: 8pt;"><%= alert.device.get_vehicle.name %> - <%= l alert.date, format: :long_full %></p>
                    </td>
                  </tr>
                <% end %>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div>

      </div>
    </div>

  </div>
</div>

<script>

    var summary_graph_data = null;
    var speed_graph_data = null;
    var alerts_graph_data = null;
    var idle_graph_data = null;

    function generateGHorizontalGraph(data, content_id){
        // Multi Bar Horizontal Chart
        nv.addGraph(function ()
        {
            var chart = nv.models.multiBarHorizontalChart()
                .options({
                    type              : 'multiBarHorizontalChart',
                    height            : 150,
                    x                 : function (d)
                    {
                        return d.label;
                    },
                    y                 : function (d)
                    {
                        return d.value;
                    },
                    showControls      : false,
                    showValues        : true,
                    transitionDuration: 500
                });

            chart.xAxis     //Chart x-axis settings
                .showMaxMin(false);

            chart.yAxis     //Chart y-axis settings
                .axisLabel('Values')
                .tickFormat(function (d)
                {
                    return d3.format(',.2f')(d);
                });

            var chartd3 = d3.select('#' + content_id + ' svg');
            var chartData;

            function initChart()
            {
                chartData = data.data;
                chartd3.datum(chartData).call(chart);
            }

            initChart();

            nv.utils.windowResize(chart.update);
            return chart;
        });
    }

    /*    var opts = {
            angle: -0.2, // The span of the gauge arc
            lineWidth: 0.2, // The line thickness
            radiusScale: 1, // Relative radius,
            pointer: {
                length: 0.6, // // Relative to gauge radius
                strokeWidth: 0.035, // The thickness
                color: '#000000' // Fill color
            },
            staticZones: [
                {strokeStyle: "rgb(46, 204, 113)", min: 0, max: 1000}, // Red from 100 to 130
                {strokeStyle: "rgb(241, 196, 15)", min: 1000, max: 2000}, // Yellow
                {strokeStyle: "rgb(230, 126, 34)", min: 2000, max: 3000}, // Green
            ],
            limitMax: false,     // If false, max value increases automatically if value > maxValue
            limitMin: false,     // If true, the min value of the gauge will be fixed
            colorStart: '#6FADCF',   // Colors
            colorStop: '#8FC0DA',    // just experiment with them
            strokeColor: '#E0E0E0',  // to see which ones work best for you
            generateGradient: true,
            highDpiSupport: true,     // High resolution support

        };
        var target = document.getElementById('gauge'); // your canvas element
        var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
        gauge.maxValue = 3000; // set max gauge value
        gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
        gauge.animationSpeed = 32; // set animation speed (32 is default value)
        gauge.set(2650); // set actual value*/

    $.ajax({
        url: "<%= ENV["TRACCAR_SERVER_URI"] %>/api/session?token=<%= current_user.token %>",
        data: {},
        dataType: 'json',
        xhrFields: {
            withCredentials: true
        },
        success: function(data){
            $(".loading-image").css("visibility", "hidden");
        }
    });

    $(function(){

        $.get("<%= site_user_data_graph_summary_url %>", function(data){
            generateGHorizontalGraph(data, "graph-summary");
        });

        $.get("<%= site_user_data_graph_idle_time_url %>", function(data){
            generateGHorizontalGraph(data, "graph-idle");
        });

        $.get("<%= site_user_data_graph_average_speed_url %>", function(data){
            generateGHorizontalGraph(data, "graph-speed");
        });

        /*        $.get("<%= site_user_data_graph_alerts_url %>", function(data){
            generateGHorizontalGraph(data, "graph-alerts");
        });*/
    });

</script>

<style>
  #gauge{
    width: 100%;
    margin-right: 10px;
    text-align:center;
    margin-top: 10px;
  }
</style>
