<!-- <div style="opacity: .9;text-align: center;padding-top: 100px;background: #fcfbfb;">

  <span style="color:#855353;font-size:20px;font-weight: 500;">{{'Edit trip details' | translate}}</span>
  <br>
  <hr>

  <div class="row" style="padding:25px;">
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
      <md-select style="display: grid;text-align:left" name="neww" placeholder="Route name" [(ngModel)]="selectedvalue._id" (ngModelChange)="changeRouteName($event)">
        <md-option *ngFor="let route_edit1 of routeNameArr" [value]="route_edit1._id" >
          {{route_edit1.name}}
        </md-option>
      </md-select>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Select group' | translate}}" [(ngModel)]="existingGrp._id" (ngModelChange)="getDevName($event)">
        <md-option *ngFor="let grp of grpArr" [value]="grp._id">
          {{grp.name}}
        </md-option>
      </md-select>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Vehicles name' | translate}}" [(ngModel)]="selectedValue1._id">
        <md-option *ngFor="let route_1 of vehArr" [value]="route_1._id">
          {{route_1.name}}
        </md-option>
      </md-select>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:center">
      <md-form-field style="display:initial;text-align:left;" class="example-full-width width">
        <input mdInput style="padding-bottom:9px;" type="text" [(ngModel)]="routeRadius" name="devicename" placeholder="{{'Radius (in meter)' | translate}}" required/>
        <md-error class="required"></md-error>
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Driver name' | translate}}" [(ngModel)]="driverDetail._id">
        <md-option *ngFor="let driverName of driverArr" [value]="driverName._id">
            {{driverName.name}}
        </md-option>
      </md-select>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
      <md-select style="display: grid;text-align:left;" name="neww" placeholder="Loading site" [(ngModel)]="geofenceload._id">
        <md-option *ngFor="let load of geofenceObj" [value]="load._id">
          {{load.name}}
        </md-option>
      </md-select>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
      <md-select  style="display: grid;text-align:left" name="neww" placeholder="{{'Unloading site' | translate}}" [(ngModel)]="geofenceUnload._id">
        <md-option *ngFor="let unload of geofenceObj" [value]="unload._id">
          {{unload.name}}
        </md-option>
      </md-select>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
        <span>{{'Start Date/Time' | 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-sm-4 col-md-4" style="padding-bottom:10px;" >
      <span>{{'End Date/Time' | 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-sm-4 col-md-4" style="padding-bottom:10px;text-align:center">
      <md-form-field style="display:initial;text-align:left;" class="example-full-width width">
        <input mdInput style="padding-bottom:9px;" type="text" [(ngModel)]="lrNumber" name="lrnumber" placeholder="{{'LR Number' | translate}}" />      
      </md-form-field>
    </div>
    <div class="col-sm-7 col-md-7" style="margin-top:2%;"> 
      <md-radio-group  style="float:left;margin-left:25px;" [(ngModel)]="allow_reverse">
          <md-radio-button value="1">{{'One way trip' | translate}}</md-radio-button>
          <md-radio-button value="2">{{'Two way trip' | translate}}</md-radio-button>
        </md-radio-group>
  </div>
  </div>

  <div style="padding-top:5%;">
    <button style=" width: 171px;height: 43px;letter-spacing: 5px;" class="btn btn-primary btn-block/" (click)="editDetails()">{{'SAVE' | translate}}</button>
    <button style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #ff0f0f; border: 0px;" class="btn btn-primary btn-block/" (click)="onCloseCancel()">{{'Cancel' | translate}}</button>
  </div>
  <br>
  <flash-messages style="float: center;"></flash-messages>
</div> -->

<flash-messages style="float: center;"></flash-messages>
<div class="card">
  <div class="card-header">
    <h3>Edit Trip</h3>
    <div class="float-right">
      <button class="btn btn-danger" style="border-radius: 50%;margin-top: -32px;float: right;" (click)="dialogRef.close()"><i class="fa fa-times"></i></button>
    </div>
  </div>
  <div class="card-body" style="height: 50vh;">
    <!-- <div class="row" style="padding:25px;">
      <div class="col-sm-4 col-md-4" style="padding-bottom:10px;"> -->
    <form class="form" [formGroup]="tripForm" (ngSubmit)="Submit()">
      <div class="row">
        <div class="col-sm-4 col-md-4 mt-2">
          <label>Route Name</label>
          <select class="form-control" placeholder="Enter Route Name" formControlName="routeName">
            <option disabled selected value="">Select Route Name</option>
            <option *ngFor="let route of route_detail_show" [value]="route._id">
              {{route.name}}
            </option>
          </select>
          <!-- <input type="text" class="form-control" placeholder="Enter Route Name" formControlName="routeName">  -->
        </div>
        <div class="col-sm-4 col-md-4 mt-2">
          <label>Vehicle Name</label>
          <select class="form-control" placeholder="Enter Vehicle Name" formControlName="vehicleName">
            <option disabled selected value="">Select Vehicle Name</option>
            <option *ngFor="let route_1 of devices" [value]="route_1._id">
              {{route_1.Device_Name}}
            </option>
          </select>
          <!-- <input type="text" class="form-control" placeholder="Enter Vehicle Name" formControlName="vehicleName"> -->
        </div>
        <div class="col-sm-4 col-md-4 mt-2">
          <label>Driver Name</label>
          <input type="text" class="form-control" placeholder="Enter Driver Name" formControlName="driverName">
        </div>
        <div class="col-sm-4 col-md-4 mt-2">
          <label>Loading Site</label>
          <select class="form-control" formControlName="loadingSite">
            <option disabled selected value="">Select Loading Site</option>
            <option *ngFor="let load of geofenceName" [value]="load">
              {{load.geoname}}
            </option>
          </select>

          <!-- <input type="text" class="form-control" formControlName="loadingSite"> -->
        </div>
        <div class="col-sm-4 col-md-4 mt-2">
          <label>Unloading Site</label>
          <select class="form-control" formControlName="unloadingSite">
            <option disabled selected value="">Select UnLoading Site</option>
            <option *ngFor="let unload of geofenceName" [value]="unload">
              {{unload.geoname}}
            </option>
          </select>
          <!-- <input type="text" class="form-control" formControlName="unloadingSite"> -->
        </div>

        <div class="col-sm-4 col-md-4 mt-2">
          <label>Start Date/Time</label>
          <owl-date-time class="form-control datep" formControlName="startTime" [hourFormat]="'12'"
            [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
          </owl-date-time>
          <!-- <input type="text" class="form-control" formControlName="startTime"> -->
        </div>

        <div class="col-sm-4 col-md-4 mt-2">
          <label>End Date/Time</label>
          <owl-date-time class="form-control datep" formControlName="endTime" [hourFormat]="'12'"
            [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
          </owl-date-time>
          <!-- <input type="text" class="form-control" formControlName="endTime"> -->
        </div>

        <div class="col-sm-4 col-md-4 mt-2">
          <label>LR Number</label>
          <input type="text" class="form-control" formControlName="lrNumber">
        </div>

        <div class="col-sm-4 col-md-4 mt-2">
          <md-radio-group formControlName="allow_reverse">
            <md-radio-button style="margin-top: 39px;" value='1'>{{'One way trip' | translate}}</md-radio-button>
            <md-radio-button value="2">{{'Two way trip' | translate}}</md-radio-button>
            <!-- <md-radio-button value="0">{{'Round trip' | translate}}</md-radio-button> -->
          </md-radio-group>
        </div>
      </div>
      <div class="card-footer text-center mt-4">
        <button type="submit" class="btn btn-primary btn-md">Save</button>
      </div>


    </form>
  </div>

</div>