<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;width: 100%">
          <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" >
            <% if current_user.user_admin %>
              <a href="<%= new_group_path %>" class="btn-filter btn btn-light btn-sm fuse-ripple-ready"><%= t("main.utils.add") %> <%= t("activerecord.models.group") %></a>
            <% end %>
            <%= render "shared/loading" %>
          </div>
        </div>
      </div>
      <br>
      <div style="margin: 0px;" class="row">
        <table 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-11 p-3">
                      <a class ="dashboard-group-header-link" href="<%= edit_group_path group %>"><%= group.name %></a> - <span class="time-format-dashboard"><%= group.updated_at %></span>
                    </div>
                    <div class="col-1">
                      <a class ="dashboard-group-header-link" href="<%= edit_group_path group %>"><i style="color: #045784;font-size: 14px" class="fas fa-edit"></i></a>
                    </div>
                  </div>
                  <div style="margin: 0px;" class="row p3">
                    <div align="left" class="col-12">
                      <ul class="dashboard-items-group" style="">
                        <li>
                          <a href="<%= group_vehicles_path group %>"><%= _("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="<%= points_interest_index_path(group) %>"><%= _("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" style="margin: 0px;">
        <div class="col-12">
          <div class="row" style="margin: 0px;border: 1px solid #ddd;" >
            <div class="col-12">
              <div style="font-weight: bold;">
                <%= _("Announcements") %>
              </div>
              <div style="height: 200px;" id="announcements">
                <div id="announcements-content" align="center">
                    <%= @site_configuration.announcement.html_safe if @site_configuration.announcement.present? %>
                    <%= @client.announcement.html_safe  if @client.announcement.present? %>
                  </div>
              </div>
            </div>
          </div>
          <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>
