<app-all-menus></app-all-menus>
<div style="float:left; width: 100%; padding-top: 6%;">
  <div class="loading" *ngIf="Load">Loading&#8230;</div>
<!-- <md-card style="opacity: .9;margin-top: 30px;background: #fcfbfb;">
  <h4 style="float:left;color:#855353">{{'Create Trip' | translate}}</h4>
  <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' | translate}}" [(ngModel)]="route">
        <md-option *ngFor="let route of route_detail_show" [value]="route">
          {{route.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)]="grp" (ngModelChange)="getDevName($event)">
        <md-option *ngFor="let grp of grpName" [value]="grp">
          {{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)]="route_1">
        <md-option *ngFor="let route_1 of deviceName" [value]="route_1">
          {{route_1.Device_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)]="driverName">
        <md-option *ngFor="let driverName of driver" [value]="driverName">
            {{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' | translate}}" [(ngModel)]="loading">
        <md-option *ngFor="let load of geofenceName" [value]="load">
          {{load.geoname}}
        </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)]="unloading">
        <md-option *ngFor="let unload of geofenceName" [value]="unload">
          {{unload.geoname}}
        </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="padding-bottom:10px;padding-top:2%;"> 
      <md-radio-group style="float:left;" [(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-button value="0">{{'Round 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)="saveMap()">{{'SAVE' | translate}}</button>
  </div>
  <br>
  <flash-messages style="float: center;"></flash-messages>
  </md-card> -->
  <!-- </div> -->

<!-- 
<div class ="form-group">   
  <md-select  name="neww" placeholder="Route name" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="route">
    <md-option *ngFor="let route of route_detail_show" [value]="route">
      {{route.name}}
    </md-option>
  </md-select> 
  <md-select  name="neww" placeholder="Select group" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="route">
    <md-option *ngFor="let grp of grpName" [value]="route">
       {{grp.name}}
    </md-option>
  </md-select> 
  <md-select  name="neww" placeholder="Vehicles name" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="route_1">
    <md-option *ngFor="let route_1 of deVIceName" [value]="route_1" >
      {{route_1.Device_Name}}
    </md-option>
  </md-select> 
<md-form-field class="example-full-width width" style="float:left;width: 30%;padding-left:2%">
 <input mdInput type="text" [(ngModel)]="routeRadius" name="devicename"placeholder="Radius (in meter)" required/> 
 <md-error class="required"></md-error>
</md-form-field>
<md-select  name="neww" placeholder="Driver name" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="driverName">
  <md-option *ngFor="let route_1 of route_detail_show" [value]="route_1" >
  </md-option>
</md-select> 
<br><br>
</div> 
<div class="row" style="display:inherit">
  <div class="col-sm-6 col-md-6" style="width: 312px;margin-left: 19px;">
  <span style="padding-bottom: 5px;">Start Date/Time</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-6 col-md-6" style="position:absolute;left:338px;top:180px;width: 315px;">
  <span>End Date/Time</span>
  <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
</div>
</div>
<div style="padding-top:5%;"> 
    <button class="btn btn-primary btn-block/"(click)="saveMap()" style="cursor:pointer;width: 159px;height: 44px;">SAVE</button>
</div><br>
<flash-messages style="float: center;"></flash-messages>  -->
<flash-messages style="float: center;"></flash-messages>
<div class="card m-4 p-2">
  <div class="card-header">
    <h3>Add Trip</h3>
  </div>
  <div class="card-body" style="height: 70vh;">
    <!-- <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._id">
            {{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._id">
            {{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>


</div>