<!-- <app-all-menus></app-all-menus> -->
  <div style="min-height:420px;padding-top: 6%;">
    <p class="headStyle">Fuel Report</p>
    <div class="InputStyle">
      <div class="row">
        <div class="col-md-3">
            <md-input-container>
            <input mdInput placeholder="Search Device" [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</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</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)="fuel_report(Fromdate,todate,option)">SEARCH</button>
      
            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">Export to excel</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>{{'On/Off' | translate}}</th>
          <th>{{'Date Time' | translate}}</th>
          <th>{{'Location' | translate}}</th>
          <th>{{'Vehicle' | translate}}</th>
      </thead>
      <tbody>
        <tr *ngFor="let report of ignition_data">
          <td style="cursor:pointer">{{report.switch}}</td>
          <td style="cursor:pointer">{{report.timestamp| date:'short'}}</td>
          <td style="cursor:pointer">{{report.address}}</td>
          <td style="cursor:pointer">{{report.vehicleName}}</td>
        </tr>
      </tbody>
    </table>
  </div>

