<div class="container" style="padding-top: 5%;">
    
    <div class="row" style="background: #5e669d; color: white; font-size: 20px; padding-top: 10px; padding-left: 30px;">
      <div class="12">
        <p>{{'REMINDER' | translate}}</p>
      </div>
    </div>
    <div class="row" >
      <div class="col-6">
          <label style="width: inherit;margin-top: 11px;font-weight: 600; color: #727b84;">{{'Select Vehicle' | translate}}</label>
          <!-- <div style="width: inherit; margin-top: 4px;text-align: left" *ngIf="vehicleOption">
            <select id="select" multiple="multiple" style="text-align: left">
              <option *ngFor="let option_1 of options" value={{option_1.id}}>{{ option_1.value }}</option>
            </select>
          </div> -->
          <div style="width:inherit; margin-top: 4px;text-align: left">
            <select id="select_1" multiple="multiple" style="text-align: left" >
              <option *ngFor="let option_1 of options"  value={{option_1.id}} [selected] = "option_1.id === device_id">{{ option_1.value }}</option>
            </select>
          </div>
      </div> 
      <div class="col-6" style="padding-right: 8px;"  >
          <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">Date</label>
          <input id="reminder_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;width: 75%;" [bsConfig]="bsConfig" name="reminder_date" [(ngModel)]="reminderDate" type="text">
        </div>   
    </div>

    <div *ngIf="UpdateTemplate === false" class="row" style="padding-top: 20px;">
      <div class="col-6">
        <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">{{'Select no of Days to get reminder for your services' | translate}}</label>
        <input [(ngModel)]="priorReminder" class="form-control form-control-sm" style="margin-top: 4px;width: 200px;"
          name="minIdleTime" min="0" placeholder="00" type="number">
      </div>
      <div class="col-6">
        <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">Set Target Odometer</label>
        <!-- <label style="margin-right: 20px; font-size: 13px; font-weight: 500; color: #727b84;">Set Target Odometer</label> -->
        <input [(ngModel)]="odometer" placeholder="00" style="margin-top: 4px;width: 200px;"
          class="form-control form-control-sm">
      </div>
    </div>

    <div *ngIf="UpdateTemplate === true" class="row" style="padding-top: 20px;">
      <div class="col-6" style="display: inherit;">
       <label style="margin-right: 20px; font-size: 13px; font-weight: 500; color: #727b84;">{{'Select no of Days to get reminder for your services' | translate}}</label>    
      </div>
      <div class="col-6" style="display: inherit;">
          <input [(ngModel)]="priorReminder" class="form-control form-control-sm" style="width: 80px;height: 60%;" name="minIdleTime" min="0" placeholder="00"  type="number">
      </div>
    </div>
    <div class="row" style="padding-top: 20px">
        <div class="col-6">
            <!-- <label style="width: inherit;margin-top: 11px;margin-left: 10px;">Reminder Type</label> -->
            <md-select style="padding-top: 0;width: 70%;" [(ngModel)]="reminder" placeholder="--{{'Job type' | translate}}--"  ngDefaultControl>
                <md-option *ngFor="let reminder of reminderType" [value]="reminder.viewValue">
                  {{reminder.value}}
                </md-option>
              </md-select>  
        </div> 
        <!-- <div class="col-6">
            <label style="width: inherit;margin-top: 11px; font-weight: 600; color: #727b84;">Notification Type</label>
            <div class="btn-group btn-group-toggle" data-toggle="buttons" (click)="notitype($event)">
                <label class="btn btn-secondary  btn-default blue" > <input type="radio" name="options" id="option1"  > SMS </label>
                <label class="btn btn-secondary  btn-default blue" > <input type="radio" name="options" id="option2"   > PUSH NOTIFICATION </label>
                <label class="btn btn-secondary  btn-default blue" > <input type="radio" name="options" id="option3"  > EMAIL </label>
              </div>
          </div>  -->
          <div class="col-6">
              <md-select [(ngModel)]="notificatinType" placeholder="--Notification type--" multiple style="padding-top:0px;width: 75%;"  ngDefaultControl>
                  <md-option *ngFor="let notif of notifType" [value]="notif.value">
                    {{notif.view}}
                  </md-option>
                </md-select>  
          </div>      
      </div>
      <div class="row" *ngIf="UpdateTemplate === true" style="padding-top: 20px">
        <div class="col-6" style="padding-top: 20px;">
            <!-- <label style="width: inherit;margin-top: 11px;margin-left: 10px;">Reminder Type</label> -->
            <md-select style="padding-top: 0;width: 70%;" [(ngModel)]="jobStatus" placeholder="--{{'Job status' | translate}}--"  ngDefaultControl>
                <md-option *ngFor="let Jstatus of typeStatus" [value]="Jstatus.viewValue">
                  {{Jstatus.value}}
                </md-option>
              </md-select>  
        </div> 
   
          <div class="col-6">
            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">{{'Updated On' | translate}}</label>
            <input id="status_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;width: 75%;" [bsConfig]="bsConfig" name="status_Change_date" [(ngModel)]="statusChangeDate" type="text">
          </div>      
      </div>
      <div class="row" *ngIf="UpdateTemplate === true" style="padding-top: 20px">
        <div class="col-6">
            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">ODO</label>
            <input [(ngModel)]="totalodo" class="form-control form-control-sm" name="odo" placeholder="00"  type="text">
        </div> 
   
          <div class="col-6">
            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">{{'Date of service' | translate}}</label>
            <input id="date_of_service" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;width: 75%;" [bsConfig]="bsConfig" name="service_date" [(ngModel)]="date_of_service" type="text">
          </div>      
      </div>
      <div class="row" *ngIf="UpdateTemplate === true">
        <div class="col-6" >
            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">Performed By</label>
            <input [(ngModel)]="performed_by" class="form-control form-control-sm" name="performed_by"  type="text">
        </div> 
      </div>
      <div class="row"  >
        <div class="col-12">
          <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">{{'Additional Notes' | translate}}</label>
          <textarea id="additional_notes" class="form-control form-control-sm"  name="additional notes" [(ngModel)]="additionalNote" type="text"></textarea>
        </div>
      </div>
      <div class="row" style="margin-top: 40px; text-align: center;">
        <div class="col-12">
            <button *ngIf="UpdateTemplate === false" md-raised-button style="background: #31428c; color: white;" (click)="save()">{{'Save' | translate}}</button>
            <button *ngIf="UpdateTemplate === true" md-raised-button style="background: #31428c; color: white;" (click)="updateReminder()">{{'Update' | translate}}</button>
            <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'Cancel' | translate}}</button>
        </div>
         </div>
  </div> 