<!-- <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>{{'Trip 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">
            <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">{{'Vehicle Name' | translate}}</th>
                      <th style="text-align: left">{{'From Date' | translate}}</th>
                      <th style="text-align: left">{{'From Location' | translate}}</th>
                      <th style="text-align: left">{{'To date' | translate}}</th>
                      <th style="text-align: left">{{'To location' | translate}}</th>
                      <th style="text-align: left">{{'Distance (Km/hr)' | translate}}</th>
                      <th style="text-align: left">{{'Replay' | translate}}</th>
                    </tr>
                </thead>  
            </table>
        </div> 
        </div>
      </div> 
    </div>
  </div>
</div>

<table id="headerTable" style="border: 1px solid black;width: 100%;
            border-collapse: collapse;position: absolute;top: -62px;">
  <tr style="height:30px;border-top:1px solid black;">
    <td>
      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
      date:"medium"}}
    </td>
    <!-- <td>
            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
          </td> -->
  </tr>

</table>
<!-- 

<app-all-menus></app-all-menus>
<div style="min-height:100vh;padding-top:6%">
  <p class="headStyle">{{'Trips Report' | translate}}</p>
  <div class="InputStyle">
    <div class="row">
      <div class="col-md-3" style="padding-left: 70px; padding-top: 15px;">
  
          <select id="select" multiple="multiple" >
              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
            </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: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="tripReport(Fromdate,todate)">{{'Trip Report' | translate}}</button>
        <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
      </div>
    </div>
  </div>
  <table class="table table-striped table-hover " style="overflow-y: hidden;
           overflow-x: hidden;font-size:12px">
  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
    <thead style="background-color:#A2C523;color: white;">
      <tr>
        <th style="text-align: center">{{'Vehicle Name' | translate}}</th>
        <th style="text-align: center">{{'From Date' | translate}}</th>
        <th style="text-align: center">{{'From Location' | translate}}</th>
        <th style="text-align: center">{{'To date' | translate}}</th>
        <th style="text-align: center">{{'To location' | translate}}</th>
        <th style="text-align: center">{{'Distance (Km/hr)' | translate}}</th>
     
      </tr>
    </thead>
    <tbody>

      <tr *ngFor="let device of summary">
        <td style="cursor:pointer;text-align: center">{{device.device?device.device.Device_Name:""}}</td>
        <td style="cursor:pointer;text-align: center">{{device.start_time | date:'short'}}</td>
        <td style="cursor:pointer;text-align: center">
       
            <p *ngIf="device.startAddress != undefined">{{device.startAddress}}</p>
            <a *ngIf="device.startAddress == undefined" href={{addressLink}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank"></a></a>
       
        
        </td>
        <td style="cursor:pointer;text-align: center">{{device.end_time | date:'short'}}</td>
        <td style="cursor:pointer;text-align: center">
          <p *ngIf="device.endAddress != undefined">{{device.endAddress}}</p>
          <a *ngIf="device.endAddress == undefined" href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank"></a></a>
        
        </td>
        <td style="cursor:pointer;text-align: center">{{device.distance/1000 ? (device.distance/1000 | number: '1.2-2' ): 0}}</td>
      </tr>
    </tbody>
  </table>
  <table id="test"class="table table-striped table-hover " style="display: none">
  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
    <thead style="background-color:#A2C523;color: white;">
      <tr>
        <th style="text-align: center">Vehicle Name</th>
        <th style="text-align: center">From Date</th>
        <th style="text-align: center">From Location</th>
        <th style="text-align: center">To date</th>
        <th style="text-align: center">To location</th>
        <th style="text-align: center">Distance (Km/hr)</th>
     
      </tr>
    </thead>

    <tbody>

      <tr *ngFor="let device of summary">
        <td style="cursor:pointer;text-align: center">{{device.device?device.device.Device_Name:""}}</td>
        <td style="cursor:pointer;text-align: center">{{device.start_time | date:'short'}}</td>
        <td style="cursor:pointer;text-align: center">
      
            <p *ngIf="device.startAddress != undefined">{{device.startAddress}}</p>
            <a *ngIf="device.startAddress == undefined" href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
       
        
        </td>
        <td style="cursor:pointer;text-align: center">{{device.end_time | date:'short'}}</td>
        <td style="cursor:pointer;text-align: center">
          <p *ngIf="device.endAddress != undefined">{{device.endAddress}}</p>
          <a *ngIf="device.endAddress == undefined" href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank">Click here to get address</a></a>
        
        </td>
        <td style="cursor:pointer;text-align: center">{{device.distance/1000 ? (device.distance/1000 | number: '1.2-2' ): 0}}</td>
      </tr>
    </tbody>
  </table>
</div> -->
