<!-- <app-all-menus></app-all-menus> -->
<div class="topDiv">
  <div id="toast">
    <div id="desc">{{data_descip}}</div>
  </div>
  <div class="row"
    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <h4>{{'Performance Report' | translate}}</h4>
    </div>
  </div>

  <div class="row rowStyle">

    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row"
        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
    
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="loading" *ngIf="Load">Loading&#8230;</div>
              <div style="width: 100%;height:84vh;">
                <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
                  <thead style="background-color:#e0e0e0;color: #444444;">
                    <tr>
                      <th style="text-align: left;">{{'Device Name' | translate}}</th>
                      <th style="text-align: left;">{{'Total Dist.' | translate}}</th>
                      <th style="text-align: left;">{{'Avg. Dist.' | translate}}</th>
                      <th style="text-align: left;">{{'Driven Hours' | translate}}</th>
                      <th style="text-align: left;">{{'Stationary Hours' | translate}}</th>
                      <th style="text-align: left;">{{'Excess Idle' | translate}}</th>
                      <th style="text-align: left;">{{'Max Speed' | translate}}</th>
                      <th style="text-align: left;">{{'Speed Violation' | translate}}</th>
                      <!-- <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
                      <th style="text-align: left;">{{'Details' | translate}}</th> -->

                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
    
      <div class="row"
        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
          <div style="width: 100%;height:75vh;">
            <canvas id="cartForKMDriven" style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
    
      <div class="row"
        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
          <div style="width: 100%;height:75vh;">
            <canvas id="cartForHoursDriven"
              style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
    
      <div class="row"
        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
          <div style="width: 100%;height:75vh;">
            <canvas id="cartForMaxSpeed"
              style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<table id="headerTable" style="border: 1px solid black;width: 100%;
    border-collapse: collapse;position: absolute;
    top: -33px;">
 
  <tr style="height:30px;border-top:1px solid black">
    <td>
      <span style="font-weight: 700;">Report Period</span>: {{reportPeriod}}
    </td>
    <td>
      <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
    </td>
  </tr>
  <tr>
    <td>
      <span style="font-weight: 700;">Report Date</span>: {{reportDate}}
    </td>
    <td>
      <span style="font-weight: 700;">Total Fleet Size</span>: {{finalArr?finalArr.length:0}}
    </td>
  </tr>
  <tr style="height:30px;border-top:1px solid black">
    <td>
      <span style="font-weight: 700;"> Total Distance Travelled (km)</span>: {{totalDistanceTraveled}}
    </td>
    <td>
      <span style="font-weight: 700;">Avg. Distance Travelled (km)</span>: {{avgDistTraveled}}
    </td>
    <td>
      <span style="font-weight: 700;">Total Driven Hours</span>: {{totalHours}}
    </td>
  </tr>
</table>