<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>{{'Daily 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="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;" title="Vehicle Name">{{'Vehicle'| translate}}</th>
                    <th style="text-align:left;" title = "Device IMEI">{{'IMEI' | translate}}</th>
                    <th style="text-align:left;" title="Total Distance (Km)">{{'Total Distance' | translate}}</th>
                    <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
                    <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
                    <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF' | translate}}</th>
                    <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
                    <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
                    <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{'No GPS' | translate}}</th>
                    <th style="text-align:left;">{{'Trips' | translate}}</th>
                    <th style="text-align:left;" title="Max Speed (Km/hr)">{{'Max Speed'| translate}}</th>  
                    <th style="text-align:left;" >{{'Start Location' | translate}}</th>  
                    <th style="text-align:left;">{{'End Location' | translate}}</th>
                    <th style="text-align: left;">{{'Details' | 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%;">
          <p class="headStyle">{{'Daily Report' | translate}}</p>
          <div class="loading" *ngIf="Load">Loading&#8230;</div> 
          <div class="InputStyle">
            <div class="row">
              <div class="col-4" style="padding-top: 18px;padding-left: 150px;" >
              <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-4" >
                <span>{{'Select Date' | translate}}</span>
                <owl-date-time [(ngModel)]="date1" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
              </div>
            
              <div class="col-4" style="top: 16px;text-align: center">
                <button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" md-raised-button (click)="callfunction()">{{'SEARCH' | translate}}</button>
                <button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'Export to excel' | translate}}</button>
              </div>
            </div>
          </div>      
     
         <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
          <thead style="background-color:#A2C523;color: white;">
              <tr>
                  <th style="text-align:center;">Device Name</th>
                  <th style="text-align:center;">Device ID</th>
                  <th style="text-align:center;">Total Distance (Km)</th>
                  <th style="text-align:center;">Fuel consumption (Litre)</th>
                  <th style="text-align:center;">Ignition ON Time (Hr:Min)</th>
                  <th style="text-align:center;">Ignition OFF Time (Hr:Min)</th>
                  <th style="text-align:center;">Idle Time (Hr:Min)</th>
                  <th style="text-align:center;">Out of reach (Hr:Min)</th>
                  <th style="text-align:center;">No GPS (Hr:Min:Sec)</th>
                  <th style="text-align:center;">Trips</th>
                  <th style="text-align:center;">Max Speed (Km/hr)</th>                
              </tr>
          </thead>  
      </table>
</div>
        -->