<app-all-menus></app-all-menus>
<div class="container-fluid" style="padding-top: 6%;">
  <div class="headerStyle">
    <span>{{'TRIP REPORT' | translate}}</span>
    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
  </div>
  <div class="filterDiv">
    <div class="row" style="margin-bottom: 20px;">
      <div class="col-12" style="text-align: center;margin-top: 30px;">
        <div style="display: inline-flex; width: 60%;padding-bottom: 3px;">
          <label style="margin-top: 11px;width: inherit;">{{'Select Vehicle' | translate}}</label>
          <div style="width: inherit; margin-top: 9px;text-align: left">
            <select id="select" multiple="multiple" style="text-align: left">
              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
            </select>
          </div>
          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
            [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
          <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
            [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
        </div>
        <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;"
          (click)="tripListList()"> {{'SEARCH' | translate}} </button>
        <!-- <button md-raised-button style="width: 190px; background: #1d8216; color: white;" (click)="exportExcel()">Export
          To Excel</button> -->
      </div>
    </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>{{'TRIP ID' | translate}}</th>
          <th>{{'VEHICLE NAME' | translate}}</th>
          <th>{{'IMEI' | translate}}</th>
          <th>{{'SOURCE ADDRESS' | translate}}</th>
          <th>{{'DESTINATION ADDRESS' | translate}}</th>
          <th>{{'DISTANCE' | translate}}</th>
          <th>{{'DURATION' | translate}}</th>
          <th>{{'TRIP STATUS' | translate}}</th>
          <th>{{'MILEAGE' | translate}}</th> 
          <th>{{'ADD EXPENSES' | translate}}</th>   
          <th>{{'EXPENSES LIST' | translate}}</th>   
      </thead>
      <tbody>
        <tr *ngFor="let report of tripReport">
          <td style="cursor:pointer">{{report.trip_id}}</td>
          <td style="cursor:pointer">{{report.device.Device_ID}}</td>
          <td style="cursor:pointer">{{report.device.Device_Name}}</td>
          <td style="cursor:pointer">
            <!-- {{report.start_lat?report.start_lat:0}}{{quomaseprate}}{{report.start_long?report.start_long:0}} -->
            <a href={{addressLink}} target="_blank" (click)= "getAddress(report,'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">
              <a href={{addressLink1}} target="_blank" (click)= "getAddress(report,'end')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
            <!-- {{report.end_lat?report.end_lat:0}}{{quomaseprate}}{{report.end_long?report.end_long:0}} -->
          </td>
          <td style="cursor:pointer">{{report.distance?((report.distance/1000) | number : '1.2-2') : 0}}</td>
          <td style="cursor:pointer">{{report.duration ? report.duration : "Trip Ongoing"}}</td>
          <td style="cursor:pointer">{{report.trip_status}}</td>
          <td style="cursor:pointer">NA</td>
          <td>
            <i class="fas fa-wallet" (click)="addExpense(report)" style="font-size: 20px;cursor: pointer"></i>
          </td>
          <td>
            <i class="fas fa-list" (click)="expenseList(report)" style="font-size: 20px;cursor: pointer"></i>
          </td>
       
        </tr>
      </tbody>
    </table>
  </div>
</div>