<app-all-menus></app-all-menus>
<div class="container">
   <div class="headerStyle">
      <span>{{'Device Inventory' | translate}}</span>
   </div>
   <div class="formStyle">
      <form [formGroup]="Inventory">
         <div class="entryFields">
            <div class="row">
               <div class="col-6">
                 <md-form-field>
                  <!-- <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" id="today_date" mdInput placeholder="mm/dd/yyyy" formControlName="systemDate" type="date">   -->
                  <input id="today_date" bsDatepicker [bsConfig]="bsConfig" class="form-control form-control-sm" style="display: inline-grid;" name="Expiration date" placeholder="{{'System Date' | translate}}" formControlName="systemDate" mdInput  type="text" >
                </md-form-field>
               </div>
               <div class="col-6">
                  <md-form-field>
                  <input placeholder="{{'Device IMEI' | translate}}" type = "Number" formControlName="Device_ID" minlength="15" maxlength="15" mdInput>
                 </md-form-field>
               </div>
            </div>
            <div class="row">
               <div class="col-6">
                  <md-form-field>
                  <input placeholder="{{'Vehicle Number' | translate}}" type = "text" formControlName="Device_Name" mdInput>
                  </md-form-field>
               </div>
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'Chesis Number (Last 5 digits)' | translate}}" type = "text" formControlName="chessisNumber" mdInput>
                </md-form-field>
               </div>
            </div>
            <div class="row">
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'SIM Number 1' | translate}}" type = "Number" mdInput formControlName="sim_number_1">
                  </md-form-field>
               </div>
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'SIM Provider 1' | translate}}" type = "text" mdInput formControlName="sim_provider_1">
                  </md-form-field>
               </div>
            </div>
            <div class="row">
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'SIM Number 2' | translate}}" type = "Number" mdInput formControlName="sim_number_2">
                  </md-form-field>
               </div>
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'SIM Provider 2' | translate}}" type = "text" mdInput formControlName="sim_provider_2">
                  </md-form-field>
               </div>
            </div>
            <div class="row">
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'RTO' | translate}}" type = "text" mdInput formControlName="approvingRTO">
                  </md-form-field>
               </div>
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'Owner Number (OTP)' | translate}}" type = "Number" mdInput formControlName="ownerNumber">
                  </md-form-field>
               </div>
            </div>
            <div class="row">
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'Alternate Number' | translate}}" type = "Number" mdInput formControlName="Alternatenumber">
                  </md-form-field>
               </div>
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="{{'Email' | translate}}" type = "text" mdInput formControlName="email">
                  </md-form-field>
               </div>
            </div>
            <div class="row">
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="Costumer's First name" type = "text" mdInput formControlName="costumer_first_name">
                  </md-form-field>
               </div>
               <div class="col-6">
                 <md-form-field>
                  <input placeholder="Costumer's Last name" type = "text" mdInput formControlName="costumer_last_name">
                  </md-form-field>
               </div>
            </div>
            <div class="row">
               <div class="col-6">
                  <md-select formControlName="status" placeholder="--Status--" style="width: 202px;" >
                      <md-option *ngFor="let vhstat of vhStatus" [value]="vhstat">
                        {{vhstat}}
                      </md-option>
                    </md-select>
               </div>
               <div class="col-6">
                     <md-form-field>
                      <input placeholder="Dealer's name" type = "text" mdInput formControlName="dealerName">
                      </md-form-field>
                   </div>
               <!-- <div class="col-6">
                  <md-select formControlName="dealerName" placeholder="--Dealers--" style="width: 202px;">
                      <md-option *ngFor="let dealer of DealerName" [value]="dealer._id">
                        {{dealer.first_name}}   {{dealer.last_name}}
                      </md-option>
                    </md-select>        
               </div> -->
            </div>
            <div class="row">
               <div class="col-6">
                  <md-select formControlName="trackingSoft" placeholder="--{{'Tracking Software' | translate}}--" style="width: 202px;">
                     <md-option *ngFor="let track of tracking_software" [value]="track">
                       {{track}}
                     </md-option>
                   </md-select>
               </div>
               <div class="col-6">              
                  <md-form-field>
                     <input placeholder="{{'Engine Number' | translate}}" type="text" mdInput formControlName="engine_number">
                  </md-form-field>
               </div>
            </div>    
         </div>
      </form>
      <div class="row">
         <div class="col-6" style="text-align: center">
               <md-input-container>
                     <input mdInput placeholder="{{'Device Model*' | translate}}" [mdAutocomplete]="tdAutoDevModel" name="state" #state="ngModel"
                       [(ngModel)]="deviceModel" (ngModelChange)="filterDeviceModelState(deviceModel)">
                     <md-autocomplete #tdAutoDevModel="mdAutocomplete">
                       <md-option *ngFor="let model of dataDevModel" [value]="model.device_type" (click)="selectedDevModel(model)">
                         <span>{{model.device_type}}</span>
                       </md-option>
                     </md-autocomplete>
                   </md-input-container>
         </div>
      </div>
      <div class="row">
            <div class="col-12" style="margin-top: 50px;text-align: center;">
               <button *ngIf="!buttonToggle" md-raised-button style="width: 190px; background: #31428c; color: white;" (click)="submitData()"> {{'Save' | translate}} </button>
               <button *ngIf="buttonToggle" md-raised-button style="width: 190px; background: #31428c; color: white;" (click)="updateData()"> {{'UPDATE' | translate}} </button>
            </div>
         </div>
   </div>
</div>