

      <app-all-menus></app-all-menus>
<div style="padding-top: 6%;">
<div class="route">
    <p class="headStyle">{{'Manage Trips' | translate}}</p>
  <div class="row">
    <div class="col-sm-2 col-md-2" style="text-align:center;padding: 16px;">
        <button md-raised-button color="blue" style="background: white;
        border-radius: 0px;box-shadow: 0px 0px white;  
        min-width: 0;" (click)="addRoute()">
            <md-icon style="color:black">add</md-icon>          
        </button>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-top:19px">
      <flash-messages style="float: center;margin:0px 1px;height:-6px;text-align:center"></flash-messages>
    </div>
 
    <div class="col-sm-4 col-md-4" style="padding-top:19px">       
      <div style="float: right;padding-right: 1%;">
        <input  style="border-radius: 6px;
        border: 1px solid #c7c7c7;
        padding: 12px;
        width: 175px;
        height: 7px;
        background-color: red;
        font-size: 12px;
        background: #fffcfc;" type="search" id="myInput" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "{{'Device Search' | translate}}"/>
      </div>  
    </div>
    <div class=col-sm-2 style="margin-top:20px;">
      <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_route' 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>{{'Route name' | translate}}</th>
  <th>{{'Vehicle name' | translate}}</th>
  <th>{{'LR Number' | translate}}</th>
  <th>{{'Driver' | translate}}</th>
  <!-- <th >{{'Loading site' | translate}}</th>
  <th>{{'Unloading site' | translate}}</th> -->
  <th>{{'Start time' | translate}}</th>
  <th>{{'End time' | translate}}</th>
  <th>{{'Actual start time' | translate}}</th>
  <th>{{'Actual end time' | translate}}</th>
  <!-- <th>{{'ETA' | translate}}</th> -->
  <th>{{'Status' | translate}}</th>
  <th>{{'Trip type' | translate}}</th>
  <th>{{'Trip History' | translate}}</th>
  <th>{{'Edit' | translate}}</th>
  <th>{{'ADD EXPENSES' | translate}}</th>   
  <th>{{'EXPENSES LIST'  | translate}}</th>   
</thead>
<tbody>
<tr *ngFor="let route of route_detail">
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Route_Name}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Device_Name}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.lrNumber?route.lrNumber:""}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Driver}}</td>
 <!-- <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Loading_Site}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Unloading_Site}}</td> -->
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Planned_Start_Time|date:'short'}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Planned_End_Time|date:'short'}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Actual_Start_Time|date:'short'}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Actual_End_Time|date:'short'}}</td>
 <!-- <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Trip_Status_Reached}} {{route.Trip_Status_Reached?'by':''}} {{route.End_Duration}}</td> -->
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Status}}</td>
 <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.tripType==0?"Round":route.tripType==1?"One way ":route.tripType==2?"Two way":""}}</td>
 <td>
  <md-icon style="margin-left:15px; cursor: pointer" (click)="tripHistory(route)">history</md-icon>
</td>
<td>
  <md-icon style="margin-left:15px; cursor: pointer" (click)="editRouteMap(route)">edit</md-icon>
</td>
<td>
  <i class="fas fa-wallet" (click)="addExpense(route)" style="font-size: 20px;cursor: pointer"></i>
</td>
<td>
  <i class="fas fa-list" (click)="expenseList(route)" style="font-size: 20px;cursor: pointer"></i>
</td>
</tr>
</tbody>
</table>
</div>