<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">
      <i class="fas fa-plus-circle" (click)="addRoute()" mdTooltip="{{'Add route' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
      <h4>{{'Route name' | translate}}</h4>
  
    </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">
          <div class="row" style="margin: 0;">
            <div class="col-6" style="padding-top: 18px;">
            <p style="font-weight: 600; color: #a6a6a6;">Route by status :</p>
            </div>
            <div class="col-6" style="padding:0">
              <md-select style="text-align: center;width: 90%;" placeholder="{{'Route status' | translate}}"
              [(ngModel)]="state_1" (change)="getRoutebyStatus(state_1)">
              <md-option *ngFor="let state_1 of statusValue" [value]="state_1">{{state_1}}</md-option>
            </md-select>
              </div>
        </div>
        </div>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" 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;">{{'Route name' | translate}} </th>
                        <th style="text-align:left;">{{'Source' | translate}}</th>
                        <th style="text-align:left;">{{'Destination' |translate}}</th>
                        <th style="text-align:left;">{{'Route status' | translate}}</th>
                        <th style="text-align:left;">{{'Speed Alert (Kms.)' | translate}}</th>
                        <th style="text-align:left;">{{'Delete' | translate}}</th>
                        <th style="text-align:left;">{{'Tracked Vehicles' | translate}}</th>
                        <th style="text-align:left;">{{'View route' | 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%;">
    <div class="loading" *ngIf="Load">Loading&#8230;</div>
    <p class="headStyle">{{'Ignition Report' | translate}}</p>
    <div class="InputStyle" style="padding-bottom:30px">
      <div class="row">
        <div class="col-md-3" style="padding-top: 17px; padding-left: 50px; ">
       
          <select id="select" multiple="multiple">
            <option *ngFor="let option_1 of options" value={{option_1.value}}>{{ 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" class="btn btn-primary w3-button/" md-raised-button (click)="ignition_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
         
            <button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'Export to excel' | translate}}</button>
         
          </div>
      </div>
    </div>

    <p *ngIf="errorDialog" style="text-align:center;color:red">{{errorMsg}}</p>
    <table 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">{{'Vehicle' | translate}}</th>
           <th style="text-align: center">{{'On/Off' | translate}}</th>
           <th style="text-align: center">{{'Date Time' | translate}}</th>
           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
     
      </thead>
      <tbody>
        <tr *ngFor="let report of ignition_data">
          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
          <td style="cursor:pointer ;text-align: center ">{{report.timestamp| date:'short'}}</td>
          <td style="cursor:pointer ;text-align: center ; width:50% ">
            <p *ngIf="report.address != undefined">{{report.address}}</p>
            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
      
          </td>
        </tr>
      </tbody>
    </table>
    <table id="test" class="table table-striped table-hover" style="display:none;">
      <thead style="background-color:#A2C523;color: white;">
        <tr>
          <th style="text-align: center">{{'Vehicle' | translate}}</th>
           <th style="text-align: center">{{'On/Off' | translate}}</th>
           <th style="text-align: center">{{'Date Time' | translate}}</th>
           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
      </thead>
      <tbody>
        <tr *ngFor="let report of ignition_data">
          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
          <td style="cursor:pointer ;text-align: centser ">{{report.timestamp| date:'short'}}</td>
          <td style="cursor:pointer ;text-align: center ; width:50% ">
            <p *ngIf="report.address != undefined">{{report.address}}</p>
            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(report)}} target="_blank">Click here to get address</a></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  -->

<!-- <app-all-menus></app-all-menus>


<div style="padding-top: 5%;">

<div class="route">
  <h2>{{'Routes' | translate}}</h2>
  <div class="row">
    <div class="col-sm-4 col-md-4" style="padding-top: 2%;float:let;">
      <button style="background: white;border: 0px;" color="blue" (click)="addRoute()">
        <md-icon style="color:black">add</md-icon>
      </button>
    </div>
    <div class="col-sm-6 col-md-6" style="padding-left: 65px;padding-top: 6px;text-align: right;">
      <span>{{'Route by status' | translate}} : </span>
      <md-select style="width: 29%;text-align: center;" placeholder="{{'Route status' | translate}}"
        [(ngModel)]="state_1" (change)="getRoutebyStatus(state_1)">
        <md-option *ngFor="let state_1 of statusValue" [value]="state_1">{{state_1}}</md-option>
      </md-select>
    </div>
    <div class="col-sm-2 col-md-2" style="padding-top:22px;">
      <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="myInput2" name="myInput" type="text" [(ngModel)]="myInput"
          (ngModelChange)="table1ch()" placeholder="{{'Device Search' | translate}}" />
      </div>
    </div>
  </div>
</div>
<table class="table table-striped table-hover" id="myTable" style="overflow-y: hidden;
    overflow-x: hidden;font-size:12px">
  <thead style="background-color:#A2C523;color: white;">
    <th>Route name</th>
    <th style="text-align: center">{{'Source' | translate}}</th>
    <th style="text-align: center">{{'Destination' | translate}}</th>
    <th>{{'Route Status' | translate}}</th>
    <th>{{'Delete' | translate}}</th>
  </thead>
  <tbody>
    <tr *ngFor="let route of route_detail_show">
      <td style="cursor:pointer" (click)="vehiclePath(route)">{{route.name}}</td>
      <td style="cursor:pointer" (click)="vehiclePath(route)">{{route.source}}</td>
      <td style="cursor:pointer" (click)="vehiclePath(route)">{{route.destination}}</td>
      <td>
        <md-select style="padding-left: 16%;width: 69%" placeholder="Route status" [(ngModel)]="route.status"
          (change)="updateStatus($event,route)">
          <md-option *ngFor="let state of statusValue" [value]="state">{{state}}</md-option>
        </md-select>
      </td>
      <td>
        <p>
          <button md-tooltip="Delete route"
            style="border:1px solid transparent; background-color: transparent;float:right"
            (click)="deleteRoute(route._id)">
            <md-icon>delete</md-icon>
          </button>
        </p>
      </td>
    </tr>
  </tbody>
</table>
</div> -->