<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>{{'Create route' | translate}}</h4> -->
      <md-icon style="float: left;font-size: 30px;cursor:pointer;" (click)="goback()">keyboard_arrow_left</md-icon>
    </div>  
  </div> 
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div id="toast">
        <div id="desc">{{data_descip}}</div>
      </div>
    </div>
    <!-- [(ngModel)]="routeSource" -->
    <!-- [(ngModel)]="routeDest" -->
  </div>
  <div class="row" style="padding:0px">
    <div  class="col-sm-3 col-md-3 col-lg-3" style="padding:0px">
      <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 25px; padding-right: 0px;">
          <div class="row"  style="margin: 0;margin-bottom: 10px;">
            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
              <p  style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Source' | translate}}</p>
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
              <input id="txtSource" class="form-control" [(ngModel)]="routeSource"  type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Source Address">  
            </div>
          </div>
          <div class="row"  style="margin: 0;margin-bottom: 10px;">
            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
              <p  style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Destination' | translate}}</p>
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
              <input id="txtDestination" class="form-control" [(ngModel)]="routeDest" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="{{routeDest}}">  
            </div>
          </div>
          <div class="row" style="margin: 0;">
            <div class="col-6" style="padding: 0;">
              <p style="font-size: 12px">{{'Waypoints' | translate}}</p>
            </div>
            <div class="col-6">
              <i class="fas fa-plus" style="float: right;" (click)="addField()"></i>
            </div>
          </div>
          <div class="row" style="margin: 0;margin-bottom: 10px;" *ngFor="let inputField of fieldArr ; let i = index">
            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;"> 
              <i class="fas fa-trash" (click)="deleteAddressField(i)"></i>
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
              <input id="{{inputField.aid}}" class="form-control"  type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="{{inputField.astring}}" (change)="getClickEvent(i)">  
            </div>   
        </div>
          <div class="row"  style="margin: 0;margin-bottom: 10px;">
            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;width: auto;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Route Name' | translate}}</p>
            </div>
          <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
            <input type="text" style="height: 28px;" class="form-control" name="routename" type="text" [(ngModel)]="rName" placeholder="{{'Route Name' | translate}}" />
           </div>
          </div>
              <div class="row" style="margin: 0;margin-bottom: 10px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0;font-size: 12px;">{{'Speed Alert' | translate}}</p>          
                </div>
                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
                  <md-checkbox [(ngModel)]="speed_alert" style="float:left;margin-top: 4px;"></md-checkbox>           
                  <input [disabled] = "speed_alert === false" style="height: 28px;width: 60%;display: inline;float: right;" class="form-control" name="halt" type="number" [(ngModel)]="speedAlert" (change)="changeDetactor($event)" placeholder="00" />             
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
                  <p>Km/hr</p>
                 </div>
              </div>
              <div class="row"  style="margin: 0;margin-bottom: 10px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0;font-size: 12px;">{{'Total Distance' | translate}}</p>          
                </div>
                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
                  <p id=total></p>
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
                  <p>Kms</p>
                 </div>
              </div>
              <div class="row"  style="margin: 0;margin-top: 20px;">
                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0;">
                  <button style="background-color: red; color: white; float: right;" md-raised-button (click)="getRoute()">{{'Show route' | translate}}</button>   
                  <button style="background-color: #0e6cfb; color: white; float: right;margin-right: 10px;" md-raised-button (click)="updateRoute()">{{'Update' | translate}}</button>   
                </div>
              </div>
    </div>
  </div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
      <div *ngIf="!show" id="showMap" style="width: 100%; height: 85vh"></div>
    </div>
    <div>
      <div *ngIf="show" id="map2" style="width: 100%; height: 85vh"></div>
    </div>
  </div>
  </div> 










<!-- <html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
    
      </head>
    <body>
  
  <app-all-menus></app-all-menus>
  <div class="small">
    <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;">
      <i class="material-icons">list</i>
    </button>
    <md-menu #menu="mdMenu">
      <a href="#">
        <h6>DASHBOARD
          <md-icon style="float:right">dashboard</md-icon>
        </h6>
      </a>
      <a href="#">
        <h6>RULES
          <md-icon style="float:right">dock</md-icon>
        </h6>
      </a>
    </md-menu>
  </div> 
  <div style="height:50px;">
    <md-icon style="float: left;font-size: 42px;padding-top: 6px;cursor:pointer;" (click)="goback()">keyboard_arrow_left</md-icon>
  </div> 
  <div id="showMap" style="padding: 0px;width: 100%;display: flex;height: 80vh;"></div>
  </body>
  </html>
 -->
