<!-- <app-all-menus></app-all-menus> -->
<div class="container-fluid" style="padding-top: 6%;min-height: 100vh;">
  <div class="row" style="width:100%; text-align: center; font-weight: 500; font-size: 24px;">
    <div class="col-12">
      <div class="loading" *ngIf="Load">Loading&#8230;</div>
      <p class="headStyle">{{'TEMPERATURE REPORT' | translate}}</p>
      <flash-messages style="float: center;"></flash-messages>
    </div>
  </div>
  <div class="row" style=" width: 100%; padding-bottom: 10px; padding-top: 10px; background: #e5e5e5;">
    <div class="col-2" style="text-align: right">
      <md-select  [(ngModel)]="travelPat_duration.interval" placeholder="--{{'Duration' | translate}}--" ngDefaultControl>
        <md-option *ngFor="let path of pathDuration" [value]="path.interval" >
          {{path.label}}
        </md-option>
      </md-select>
    </div>
    <div class="col-2" style="text-align: center;margin-top:5px;">
        <md-input-container>
            <input mdInput placeholder="{{'Devices' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
            #state="ngModel" [(ngModel)]="option" 
           (ngModelChange)="filterStates(option)">
           <md-autocomplete #tdAuto="mdAutocomplete">
              <md-option *ngFor="let option_1 of dataSelect" [value]="option_1.value" >
                <span>{{ option_1.value }}</span>
              </md-option>
            </md-autocomplete> 
          </md-input-container>    
    </div>  
    <div class="col-4" style="margin-top: 5px">
      <div class="row">
        <div class="col-6">
            <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-6">
            <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>
    </div>
    <div class="col-4" style="margin-top: 20px; text-align: center; padding-left: 0; padding-right: 0;">
        <!-- <md-checkbox type=”checkbox” [disabled] = "!disable_pdf_button" style= "margin-right:10px;margin-bottom:0px;" md-tooltip= "Show address" (change)="selectedStatus($event)"></md-checkbox> -->
        <button style="background-color: #2d4262;color:#fdfdfd;" md-raised-button (click)="travelPathReport()">{{'SEARCH' | translate}}</button>
        <button [disabled] = "!disable_pdf_button" style="background-color: #d81111;color:#fdfdfd;" md-raised-button (click)="export_pdf()">{{'EXPORT PDF' | translate}}</button>
        <button style="background-color: #308411;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'EXPORT EXCEL' | translate}}</button>
        <!-- <span [ngClass]="" (click)="selectedStatus('showAdd')" style="margin-right: 10px;font-size: 14px;cursor: pointer;" class="badge badge-pill badge-primary">{{devStatus.name}}</span> -->       
    </div>

  </div>
  <div *ngIf="shownote" class="row" style="text-align: center;color: red">
    <div class="col-12" >
      <p>{{noteForpdf}}</p>
    </div>
  </div>  

    <div class="row" style="width: 100%" > 
      <div class="col-12" style="padding-left: 0;">
          <table id="deviceTable" 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">{{'Device' | translate}}</th>
        <th style="text-align: center">{{'IMEI' | translate}}</th>
        <th style="text-align: center">{{'Date' | translate}}</th>
        <th style="text-align: center">{{'ODO (K.M.)' | translate}}</th>
        <th style="text-align: center">{{'Distance (K.M.)' | translate}}</th>
        <th style="text-align: center">{{'Speed (Km/hr)' | translate}}</th>
        <th style="text-align: center">{{'External Battery' | translate}}</th>
        <th style="text-align: center">{{'Temprature' | translate}}</th>
        <th style="text-align: center">{{'Cumulative Distance (K.M.)' | translate}}</th>
        <th style="text-align: center">{{'Location' | translate}}</th>     
      </tr>
    </thead> 
    <!-- {{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}} -->
    <!-- {{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}} -->
    <tbody>
      <tr *ngFor = "let gps_report of pathReport ; let i = index">
        <td style="cursor:pointer ; text-align: center">{{gps_report.Device_name}}</td>   
        <td style="cursor:pointer ; text-align: center">{{(gps_report.imei) ? gps_report.imei : "NA"}}</td>   
        <td style="cursor:pointer ; text-align: center">{{gps_report.date  | date :  'd/M/yyyy, h:mm a'}}</td> 
        <td style="cursor:pointer ; text-align: center">{{gps_report.odo ?(gps_report.odo | number : '1.2-2' ): "NA"}}</td>  
        <td style="cursor:pointer ; text-align: center">{{get_distance(pathReport,i)}}</td>  
        <td style="cursor:pointer ; text-align: center">{{gps_report.speed ? (gps_report.speed  | number : '1.2-2' ) : "0"}}</td>
        <td style="cursor:pointer ; text-align: center">{{gps_report.external_Battery?  (gps_report.external_Battery  | number : '1.2-2' ) : "0"}}</td>
        <td style="cursor:pointer ; text-align: center">{{gettempExac(gps_report.temp)}}</td>
        <td style="cursor:pointer ; text-align: center">{{getcummulative_distance(pathReport,i)}}</td>
        <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "locationOnDemand">
          <a href={{addressLink}} target="_blank" (click)= getlink(gps_report) 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;width:40%" >{{gps_report.address}}</td>
      </tr>
    </tbody>
  </table>
      </div>
    </div>
  </div>

  <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "!locationOnDemand">{{gps_report.address}}</td> -->
