<!-- <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>{{'Fuel Consumption 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">
          <flash-messages style="float: center;width: 100%"></flash-messages> 
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div> -->
    <div class="col-sm-12 col-md-12 col-lg-12" 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="Veicle Name">{{'Vehicle' | translate}}</th>
                      <th style="text-align:left;">{{'Start Time' | translate}}</th>
                      <th style="text-align:left;">End Time</th>    
                      <th style="text-align:left;" title="Fuel Consumed (L)">{{'Fuel Consumed(Lt)' | translate}}</th>
                      <th style="text-align:left;">{{'Distance(Kms)' | translate}}</th>
                      <th style="text-align:left;" title="Fuel Fill Count">{{'Fill Count' | translate}}</th>
                      <th style="text-align:left;" title="Fuel Theft Count">{{'Theft Count' | translate}}</th>
                      <th style="text-align:left;">{{'Start Location' | translate}}</th>      
                      <th style="text-align:left;">{{'End Location' | 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">{{'Fuel Consumption Report' | translate}}</p>
  <div class="loading" *ngIf="Load">Loading&#8230;</div>
  <div class="InputStyle">
      <div class="row">
          <div class="col-md-2" style="text-align: center">
              <md-input-container>
              <input mdInput placeholder="{{'Search' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
              #state="ngModel" [(ngModel)]="deviceName" 
              (ngModelChange)="filterDevices(deviceName)">
             <md-autocomplete #tdAuto="mdAutocomplete">
                <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
                  <span>{{device.viewValue}}</span>
                </md-option >
              </md-autocomplete>   
            </md-input-container>
          
          </div>
          <div class="col-md-2">
            <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-2">  
            <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-3" style="text-align: center; padding-top: 17px; font-size: 20px;">
            <label id="example-radio-group-label">{{'Report Type' | translate}} :</label>
            <md-radio-group
              aria-labelledby="example-radio-group-label"
              class="example-radio-group"
              [(ngModel)]="filterRtype">
              <md-radio-button class="example-radio-button" *ngFor="let rtype of reportType" [value]="rtype" style="margin-left: 5px">
                {{rtype}}
              </md-radio-button>
            </md-radio-group>
          </div>
          <div class="col-md-3" style="padding-left: 65px;padding-top:17px;">
              <button style="background-color: #484848;color:#fdfdfd;width: 120px;" md-raised-button class="btn btn-primary w3-button/" (click)="devicefuelreport()">{{'SEARCH' | translate}}</button>       
       
            </div>
          </div>
       
          <div class="row">
            <div class="col-12">
              <flash-messages style="float: center;width: 100%"></flash-messages> 
            </div>
          </div>
        </div>
  <table id="deviceTable" class="table " cellspacing="0" style="width:100%;font-size:15px;text-align: center">
  
      <thead style="background-color:#A2C523;color: white;">
          <tr>
              <th style="text-align:center;">{{'Vehicle name' | translate}}</th>
              <th style="text-align:center;">{{'Start Time' | translate}}</th>
              <th style="text-align:center;">End Time</th>    
              <th style="text-align:center;">{{'Fuel Consumed (L)' | translate}}</th>
              <th style="text-align:center;">{{'Distance(Kms)' | translate}}</th>
              <th style="text-align:center;">{{'Fuel Fill Count' | translate}}</th>
              <th style="text-align:center;">{{'Fuel Theft Count' | translate}}</th>
              <th style="text-align:center;">{{'Start Location' | translate}}</th>      
              <th style="text-align:center;">{{'End Location' | translate}}</th>               
          </tr>
      </thead>  
      <tbody  >
        <tr *ngFor="let fuelval of fuelDataArr" >
            <td style="text-align: center">{{((fuelval.vehicle_name != undefined)&&(fuelval.vehicle_name)&&(fuelval.vehicle_name.trim().length != 0))?fuelval.vehicle_name:tempVehName}}</td>
          <td style="text-align: center" >{{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}}</td>
          <td style="text-align: center" >{{fuelval.end_time | date:  'd/M/yyyy, h:mm a'}}</td>
          <td style="text-align: center">{{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}}</td>
          <td style="text-align: center">{{(fuelval.distance != "NaN")?(fuelval.distance | number : '1.2-2') : "NA"}}</td>
          <td style="cursor:pointer" (click)="showinoutReport(fuelval,'in')">{{fuelval.in_event_count}}</td>
          <td style="cursor:pointer" (click)="showinoutReport(fuelval,'out')">{{fuelval.out_event_count}}</td>
          <td style="cursor:pointer;text-align:center">     
            <a href={{addressLink}} target="_blank" (click)= "getAddress(fuelval,'start')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
          </td>
          <td style="cursor:pointer;text-align:center">
            <div>        
              <a href={{addressLink1}} target="_blank" (click)= "getAddress(fuelval,'end')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
            </div>       
          </td>
        </tr>
      </tbody>
  </table>
</div>



 -->
