<app-all-menus></app-all-menus>
  <div style="min-height:100vh;padding-top: 5%;">
    <p class="headStyle">{{'AC Report' | translate}}</p>
    <div class="InputStyle">
      <div class="row" style="margin-left: 50px;">
        <div class="col-md-3">
            <md-input-container>
            <input mdInput placeholder="{{'Search Device' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
            #state="ngModel" [(ngModel)]="option"
           (ngModelChange)="filterStates(option)">
           <md-autocomplete #tdAuto="mdAutocomplete">
              <md-option *ngFor="let option of dataSelect" [value]="option.value">
                <span>{{ option.value }}</span>
              </md-option>
            </md-autocomplete>   
          </md-input-container>
        </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)="ac_report()">{{'SEARCH' | translate}}</button>
            <!-- <a id="download" href="{{XLurl}}" target="_blank" download style="text-decoration:none;"> -->
            <!-- <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">Export to excel</button> -->
            <!-- </a> -->
          </div>
      </div>
    </div>
    <div class="loading" *ngIf="Load">Loading&#8230;</div>
    <p *ngIf="errorDialog" style="text-align:center;color:red">{{errorMsg}}</p>
    <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 style="text-align: center">{{'Vehicle' |  translate}}</th>
          <!-- <th>Action</th> -->
          <th style="text-align: center">{{'ON Time' | translate}}</th>
          <!-- <th>Action</th> -->
          <th style="text-align: center">{{'OFF Time' | translate}}</th>
      </thead>
      <tbody >
        <tr *ngFor="let report of acObject" >
          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{report.vehicleNumber?report.vehicleNumber:""}}</td>
          <!-- <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{report.action1?report.action1:""}}</td> -->
          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{timeconversion(report.actionOnDuration?report.actionOnDuration:0)}}</td>
          <!-- <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{report.action2?report.action2:""}}</td> -->
          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{timeconversion(report.actionoffDuration?report.actionoffDuration:0)}}</td>
        </tr>
      </tbody>
    </table>
  </div>