

      <app-all-menus></app-all-menus>

  <div style="min-height:420px;padding-top: 6%;">
    <p class="headStyle">{{"Driver Performance Report" | translate}}</p>
    <div class="InputStyle">
      <div class="row">
        <!-- <div class="col-md-3">
          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="groupVal" placeholder="--Select Group--"  ngDefaultControl>
            <md-option *ngFor="let groupVal of grpName" [value]="groupVal">
              {{ option.value }}
            </md-option>
          </md-select>
        </div> -->
        <div class="col-md-3">
          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="driverVal" placeholder="--{{'Select Driver' | translate}}--"  ngDefaultControl>
            <md-option *ngFor="let driverVal of getDrivers" [value]="driverVal">
              {{ driverVal.name }}
            </md-option>
          </md-select>
        </div>
        <div class="col-md-3">
          <span>{{'From Date' | translate}}</span>
          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        </div>
        <div class="col-md-3">
          <span>{{'To Date' | translate}}</span>
          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        </div>
        <div class="col-md-3" style="top: 16px;">
            <button style="background-color: #3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="driverReport()">{{'SEARCH' | translate}}</button>
            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
          </div>
      </div>
    </div>
    <table id="test" 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>{{'Driver Name' | translate}}</th>
          <th >{{'Total trip' | translate}}</th>
          <th >{{'Total Ontime trip' | translate}}</th>
          <th>{{'Ontime vehicles' | translate}}</th>
          <th >{{'Total Delayed trip' | translate}} </th>
          <th>{{'Delayed vehicles' | translate}}</th>        
          <!-- <th>Performance</th>      -->
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let report of reportArr">
          <td style="cursor:pointer">{{report.name}}</td>
          <td style="cursor:pointer">{{report.tripCount}}</td>
          <td style="cursor:pointer">{{report.onTimeCount}}</td>
          <td style="cursor:pointer">{{report.Ontime}}</td>
          <td style="cursor:pointer">{{report.delayCount}}</td>
          <td style="cursor:pointer">{{report.Delay}}</td>
          <!-- <td style="cursor:pointer"></td> -->
        </tr>
      </tbody>
    </table>
  </div>
