<app-all-menus></app-all-menus>
<div class="topDiv">
  <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>{{'Summary Report' | translate}}</h4>
    </div>
  </div>  
  <!-- <div class="row rowStyle" >
    <div class="col-sm-12 col-md-12 col-lg-12">
      <app-report-filter></app-report-filter>
    </div>
  </div> -->
  <div class="row rowStyle">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
    
      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" 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>
          <div style="height:84vh;">
            <table id="deviceTable" cellspacing="0" style="font-size: 14px;">
                <thead style="background-color:#e0e0e0;color: #444444;font-size: 12px;">
                    <tr>
                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
                      <th style="text-align: left;">{{'Start Point' | translate}}</th>
                      <th style="text-align: left;">{{'End Point' | translate}}</th>
                      <th style="text-align: left;">{{'Total KM' | translate}}</th>
                      <th style="text-align: left;" title="Fuel Consumption (Litre)">{{'Fuel (Litre)' | translate}}</th>
                      <th style="text-align: left;">{{'Trips' | translate}}</th>
                      <th style="text-align: left;" title="Running Time (HH:MM)">{{'Running (HH:MM)' | translate}}</th>    
                      <th style="text-align: left;" title="Stop Time (HH:MM)">{{'Stop (HH:MM)' | translate}}</th>
                      <th style="text-align: left;" title="Idle Time (HH:MM)">{{'Idle (HH:MM)' | translate}}</th>
                      <th style="text-align: left;" title="Out of reach Time (HH:MM)">{{'OFR (HH:MM)' | translate}}</th>
                      <!-- <th style="text-align: left;" title="Engine on time (HH:MM)">{{'Engine on time' | translate}}</th> -->
                      <th style="text-align: left;" title="No gps Time (HH:MM)">{{'No gps (HH:MM)' | translate}}</th>        
                      <th style="text-align: left;" title="Overspeeding (HH:MM)">{{'Overspeeding' | translate}}</th>
                      <th style="text-align: left;" title="Max Speed (kmph)">{{'Max Speed (kmph)' | translate}}</th>
                      <th style="text-align: left;" title="Engine on time (HH:MM)">{{'Engine on time' | translate}}</th>
                      <th style="text-align: left;" title="Engine off time (kmph)">{{'Engine off time' | translate}}</th>
                  

                      <th style="text-align: left;">{{'Route Violation' | translate}}</th>
                    </tr>
                </thead>  
            </table>
        </div> 
        </div>
      </div> 
    </div>
  </div>
</div>



<!-- <app-all-menus></app-all-menus>
<div style="min-height:100vh;padding-top: 6%;">
    <div class="loading" *ngIf="Load">Loading&#8230;</div>
  <p class="headStyle">{{'Summary Report' | translate}}</p>
  <div class="InputStyle">
    <div class="row">
      <div  class="col-md-3" style="margin-top: 18px;">
       
          <select id="select" multiple="multiple">
            <option *ngFor="let option_1 of options" value={{option_1.did}} >{{ option_1.value }}</option>
          </select>
      </div>
      <div class="col-md-3">
        <span>{{'From Date' | translate}}</span>
        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [pickerType] = "'calendar'" [dateFormat]="'DD/MM/YYYY'" [autoClose]="true"></owl-date-time>
      </div>
      <div class="col-md-3">
        <span>{{'To Date' | translate}}</span>
        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [pickerType] = "'calendar'" [dateFormat]="'DD/MM/YYYY'" [autoClose]="true"></owl-date-time>
      </div>
      <div class="col-md-3" style="top: 16px;">
        <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="summary_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
        <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button [disabled]="!xlbutton" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
      </div>
      <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
    </div>
  </div>

  <table  class="table table-striped table-hover " style="overflow-y: hidden;
           overflow-x: hidden;font-size:12px">

    <thead style="background-color:#A2C523;color: white;">
      <tr>
        <th>{{'Device Name' | translate}}</th>
        <th>{{'Start Point' | translate}}</th>
        <th>{{'End Point' | translate}}</th>
        <th>{{'Total KM' | translate}}</th>
        <th>{{'Fuel Consumption (Litre)' | translate}}</th>
        <th>{{'Trips' | translate}}</th>
        <th>{{'Total Running Time (HH:MM)' | translate}}</th>    
        <th >{{'Total Stop Time (HH:MM)' | translate}}</th>
        <th>{{'Total Idle Time (HH:MM)' | translate}}</th>
        <th>{{'Total Out of reach Time (HH:MM)' | translate}}</th>
        <th>{{'Total No gps Time (HH:MM)' | translate}}</th>
    
        <th>{{'Overspeeding (HH:MM)' | translate}}</th>
        <th>{{'Route Violation' | translate}}</th>
      
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let device of device_summary ">
        <td style="cursor:pointer">{{device.devicename}}</td>
        <td style="cursor:pointer" >
          <a  href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank"></a></a>
        </td>
        <td style="cursor:pointer">
          <a href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank"></a></a>   
        </td>
        <td style="cursor:pointer">{{device.totalkm  | number : '1.2-2'}}</td>
        <td style="cursor:pointer">{{device.fuelConsumption}}</td>
        <td style="cursor:pointer">{{device.trip}}</td>
        <td style="cursor:pointer">{{device.TotalrunningTime }}</td>
     
        <td style="cursor:pointer">{{device.stopTime}}</td>
        <td style="cursor:pointer">{{device.idleTime}}</td>
        <td style="cursor:pointer">{{device.ourTime}}</td>
        <td style="cursor:pointer">{{device.nogps}}</td>
        
       
        <td style="cursor:pointer">{{device.overSpeed}}</td>
        <td style="cursor:pointer">{{device.routeViolation}}</td>
      </tr>
    </tbody>
  </table>


  <table id="test" class="table table-striped table-hover " style="display:none">

<thead style="background-color:#A2C523;color: white;">
<tr>
<th>Device Name</th>
<th>Start Point</th>
<th>End Point</th>
<th>Total KM</th>
<th>Fuel Consumption (Litre)</th>
<th>Trips</th>
<th>Total Running Time (HH:MM)</th>    
<th >Total Stop Time (HH:MM)</th>
<th >Total Idle Time (HH:MM)</th>
<th >Total Out of reach Time (HH:MM)</th>
<th >Total No gps Time (HH:MM)</th>
<th>Overspeeding (HH:MM)</th>
<th>Route Violation</th>

</tr>
</thead>
<tbody>
<tr *ngFor="let device of device_summary">
<td style="cursor:pointer">{{device.devicename}}</td>
<td style="cursor:pointer" >
  <a  href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
</td>
<td style="cursor:pointer">
  <a  href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank">Click here to get address</a></a> 
</td>
<td style="cursor:pointer">{{device.totalkm  | number : '1.2-2'}}</td>
<td style="cursor:pointer">{{device.fuelConsumption}}</td>
<td style="cursor:pointer">{{device.trip}}</td>
<td style="cursor:pointer">{{device.TotalrunningTime }}</td>
<td style="cursor:pointer">{{device.stopTime}}</td>
<td style="cursor:pointer">{{device.idleTime}}</td>
<td style="cursor:pointer">{{device.ourTime}}</td>
<td style="cursor:pointer">{{device.nogps}}</td>
<td style="cursor:pointer">{{device.overSpeed}}</td>
<td style="cursor:pointer">{{device.routeViolation}}</td>
</tr>
</tbody>
</table>

</div> -->
       
