<app-all-menus></app-all-menus>
<div class="container-fluid" style="padding-top: 5%;">
  <div class="headerStyle">
    <span>{{'MAINTENANCE REMINDERS' | translate}}</span>
    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
  </div>
  <div class="filterDiv">
    <div class="row">
      <div class="col-12" style="padding-left: 0;padding-right: 0">
          <button  md-tooltip="Add Reminder" style="border:1px solid transparent;float:left; background-color: transparent;" (click)="reminderComponent()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>     
      </div>
    </div>
    <div class="row" style="width: 100%; padding-bottom: 25px; background: #efefef;">
      <div class="col-12" style="text-align: center;margin-top: 30px;">
        <div style="display: inline-flex; width: 95%;padding-bottom: 3px;">
            <!-- <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>  
          <label style="margin-top: 11px;width: inherit;">{{'Select Vehicle' | translate}}</label>
          <div style="width: inherit; margin-top: 9px;text-align: left">
            <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>
          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
            [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
          <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
          <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;" (click)="callfunction()"> {{'SEARCH' | translate}} </button>    
        </div>    
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
        <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
            <thead style="background-color:#A2C523;color: white;">
                <tr>
                    <th style="text-align:center;">{{'Device Name' | translate}}</th>
                    <th style="text-align:center;">{{'Reminder Date' | translate}}</th>
                    <th style="text-align:center;">{{'Notification Type' | translate}}</th>
                    <th style="text-align:center;">{{'Reminder Type' | translate}}</th>
                    <th style="text-align:center;">{{'Prior Notification (Days)' | translate}}</th>    
                    <th style="text-align:center;">{{'Odo' | translate}}</th>
                    <th style="text-align:center;">{{'Additional notes' | translate}}</th>
                    <th style="text-align:center;">{{'Status' | translate}}</th>
                    <th style="text-align:center;">{{'Edit' | translate}}</th>
                    <th style="text-align:center;">{{'Deleted' | translate}}</th>
                </tr>
            </thead>  
        </table>
    </div>

    
  </div>
</div>