<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 Plan' | translate}}</h4>
      <div id="toast">
        <div id="desc">{{data_descip}}</div>
      </div>
    </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>
  </div>
  <div class="row" style="padding:0px">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0px;height: 85vh;overflow-y: scroll; overflow-x: hidden;">
      <form [formGroup]="routePlanForm">
      <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">{{'Start Point' | translate}}</p>
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
                <select formControlName="startPoint" class="form-control" (change)="selectPoint('startPoint')">
                  <option value="" disabled>Select Start Point</option>
                  <option *ngFor="let poiname of poiArray" [value]="poiname.id">{{ poiname.poiname }}</option>
                </select>
            </div>
          </div>
          <div class="row" style="margin: 0;">
            <div class="col-4" style="padding: 0;">
              <p style="font-size: 12px">{{'Add Hault' | translate}}</p>
            </div>
            <div class="col-6">
              <i class="fas fa-plus" style="float: left;margin-top: 2px;" (click)="addItem()"></i>
            </div>
          </div>
          <div>
            <div class="row" style="margin: 0;margin-bottom: 10px;" formArrayName="haultFormArray" *ngFor="let a of routePlanForm.get('haultFormArray')['controls']; 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;">
                
                    <div [formGroupName]="i" style="margin-bottom: 10px;">
                      <select formControlName="name"  class="form-control" (change)="getClickEvent(i)">
                        <option value="" disabled>Select Poi</option>
                        <option *ngFor="let poiname of poiArray" [value]="poiname.id">{{ poiname.poiname }}</option>
                      </select>
                    
                    </div>

              </div>
             
            </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">{{'End Point' | translate}}</p>
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
                <select formControlName="endPoint" class="form-control" (change)="selectPoint('endPoint')">
                  <option value="" disabled>Select End Point</option>
                  <option   *ngFor="let poiname of poiArray" [value]="poiname.id">{{ poiname.poiname }}</option>
                </select>
            </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">{{'Name' | translate}}</p>
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
             <input type="text" class="form-control" formControlName="name" placeholder="Please Enter Name">
            </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">Vehicle :</p>
              </div>
              <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
                <div style="width: auto;">
                  <select formControlName="vehicle" id="vehicles" multiple="multiple" >
                    <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
                  </select>
                </div>
              </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;" [disabled]="disabled" md-raised-button
                (click)="saveRoute()">{{'Create' | translate}}</button>
            </div>
          </div>
        </div>
      </div>

  </form>
</div>
    
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
      <div id="mapp" style="width: 100%; height: 85vh"></div>
    </div>
</div>





