
 <app-all-menus></app-all-menus>
 <div class="mainClass">  
  <div style="background: #A2C523;text-align: center;font-size: 20px;border-radius: 3px;box-shadow: 2px 3px #ececec;">
      <p class="head_style">{{'ADD DEVICE' | translate}}</p>
      <div id="toast"><div id="desc">{{data_descip}}</div></div>
  </div>
  <div class="loading" *ngIf="Load">Loading&#8230;</div>
  <!-- <flash-messages style="float: center;"></flash-messages>  -->

  
  <ul class="nav nav-tabs" style="margin-top: 17px;" role="tablist">
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-0" role="tab">Add Customer</a>
      </li>
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">General Setting</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Additional Setting</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Document Upload Setting</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tabs-4" role="tab">Add Multiple Devices</a>
    </li>
  </ul><!-- Tab panes -->
  <div class="tab-content" style="margin-top: 13px;height: 90vh;margin: 20px;">
    <div class="tab-pane active" id="tabs-1" role="tabpanel">
    
      <div class="form-row">
        <div class="form-group col-md-4" *ngIf="!inventoryManagement">
          <label for="inputPassword4">{{"Device ID (IMEI No.)" | translate}}</label> <span>*</span>
          <input [(ngModel)]=" deviceid" name=" deviceid" placeholder="Please Enter Device ID (IMEI)" type="text" class="form-control">
          
        </div>
        <div class="form-group col-md-4" *ngIf="inventoryManagement">
          <label for="inputPassword4">{{"Device ID (IMEI No.)" | translate}}</label> <span>*</span>
          <select id="inventory" multiple="multiple">
            <option *ngFor="let option_1 of inventory" [value]="option_1.IMEI">{{ option_1.IMEI }}</option>
          </select>
        </div>
        
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{'Vehicle Registration No.' | translate}}</label> <span>*</span>
          <input [(ngModel)]="devicename"  type="text" class="form-control" id="inputEmail4" placeholder="Please Enter Registration number" >
          
        </div>

        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Description" | translate}}</label> 
          <input [(ngModel)]="des" type="text" class="form-control" id="inputEmail4"
            placeholder="Please Enter Description">
          </div>

      
      
      </div>

      <div class="form-row">
          <div class="form-group col-md-4">
            <label for="inputEmail4">{{"SIM Number" | translate}}</label> <span>*</span>
            <input (keypress)="click1($event)" onkeydown="call(event)"  type="number" minlength="10" maxlength="13"
                  [(ngModel)]="hrdwr" name="hrdwr" placeholder="{{'Please Enter SIM Number' | translate}}" class="form-control"
              id="inputEmail4">
          </div>
      
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{'SIM Provider' | translate}}</label> <span>*</span>
          <input [(ngModel)]="SIM_provider" name="hrdwr" placeholder="{{'Please Enter SIM Provider' | translate}}" class="form-control" id="inputEmail4">
        </div>
      
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"SIM Number 2" | translate}}</label>
          <input (keypress)="click1($event)" onkeydown="call(event)" type="text" maxlength="13" [(ngModel)]="hrdwr2"
                  name="hrdwr2" class="form-control" id="inputEmail4" placeholder="{{'Please Enter SIM Number 2' | translate}}">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"SIM Provider 2" | translate}}</label>
          <input  [(ngModel)]="SIM_provider2" placeholder="{{'Please Enter SIM Provider 2' | translate}}" class="form-control" id="inputEmail4">
        </div>
      
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{'Integration ID' | translate}}</label>
          <input  [(ngModel)]="IntegrationId" placeholder="{{'Please Enter Integration ID' | translate}}" class="form-control"
            id="inputEmail4">
        </div>
      
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{'Driver Name' | translate}}</label>
          <input [(ngModel)]="driver" name="driver" class="form-control" id="inputEmail4" placeholder="{{'Please Enter Driver Name' | translate}}">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Driver contact number" | translate}}</label>
          <input (keypress)="click1($event)" onkeydown="call(event)" type="text" minlength="10" maxlength="10"
            [(ngModel)]="dcontact" placeholder="{{'Driver contact number' | translate}}" class="form-control"
            id="inputEmail4">
        </div>
      
        <div *ngIf="showFieldsDealer && showFieldsUser" class="form-group col-md-8 row">
          <div class="col-md-6">
            <label for="inputEmail4">{{'Dealer' | translate}}</label>
            <!-- <md-input-container> -->
            <input placeholder="{{'Select dealer' | translate}}" class="form-control" [mdAutocomplete]="tdAuto0" name="state"
              #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
            <md-autocomplete #tdAuto0="mdAutocomplete">
              <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
                <span>{{ group.first_name }} {{ group.last_name }}</span>
              </md-option>
              <!-- <md-option *ngIf="dealers_info.length==0">
                                              <span>No Data Found</span>
                                            </md-option> -->
            </md-autocomplete>
            <!-- </md-input-container> -->
      
          </div>
      
          <!-- (click)="selectDealer(group._id)" -->
          <div class="form-group col-md-6">
            <label for="inputEmail4">{{'User' | translate}}</label>
            <!-- <md-input-container > -->
            <input placeholder="{{'Select User' | translate}}" class="form-control" [mdAutocomplete]="tdAuto" name="state"
              #state="ngModel" [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
            <md-autocomplete #tdAuto="mdAutocomplete">
              <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
                <!-- (click)="selectMainUser(userName)" -->
                <span>{{userName.full_name}}</span>
              </md-option>
              <md-option *ngIf="costumers.length==0">
                <span>No Data Found</span>
              </md-option>
            </md-autocomplete>
            <!-- </md-input-container> -->
          </div>
        </div>
      
        <div *ngIf="!showFieldsDealer && showFieldsUser && custtype" class="form-group col-md-4">
          <label for="inputEmail4">{{"User" | translate}}</label>
          <!-- <md-input-container style="width: 60%;"> -->
          <input placeholder="{{'Select User' | translate}}" class="form-control" [mdAutocomplete]="tdAuto" name="state"
            #state="ngModel" [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
          <md-autocomplete #tdAuto="mdAutocomplete">
            <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
              <!-- (click)="selectMainUser(userName)" -->
              <span>{{userName.full_name}}</span>
            </md-option>
            <md-option *ngIf="costumers.length==0">
              <span>No Data Found</span>
            </md-option>
          </md-autocomplete>
        </div>
      </div>

      <div class="form-row">
        <div class="col-md-4">
          <span>{{'Device model *' | translate}} :</span>
          <!-- <md-input-container style="width: 60%;"> -->
            <input class="form-control" 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.modelName">
                <span style="font-size:13px;">{{model.modelName}}</span>
              </md-option>
            </md-autocomplete>
          <!-- </md-input-container> -->
        </div>
        <!-- (click)="selectedDevModel(model)" -->
        <div class="col-md-4">
          <span>{{'Vehicle type *' | translate}} :</span>
          <!-- <md-input-container style="width: 60%;"> -->
            <input class="form-control" placeholder="{{'Select Vehicle type*' | translate}}" [mdAutocomplete]="tdAutoVehicleType"
              name="state" #state="ngModel" [(ngModel)]="vehType" (ngModelChange)="filterVehType(vehType)">
            <md-autocomplete #tdAutoVehicleType="mdAutocomplete">
              <md-option *ngFor="let vh of vehicle_Type" [value]="vh.vehicle_name">
                <span style="font-size: 13px;">{{vh.vehicle_name}}</span>
              </md-option>
            </md-autocomplete>
          <!-- </md-input-container> -->
        </div>

        <div class="col-sm-4">
          <span>{{'Installer' | translate}} :</span>
          <!-- <md-input-container style="width: 60%;"> -->
          <input class="form-control" placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
            #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
          <md-autocomplete #tdAuto0="mdAutocomplete">
            <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
              <span>{{ group.first_name }} {{ group.last_name }}</span>
            </md-option>
            <!-- <md-option *ngIf="dealers_info.length==0">
                                                                                <span>No Data Found</span>
                                                                              </md-option> -->
          </md-autocomplete>
          <!-- </md-input-container> -->
        </div>

      </div>

          <div class="form-row">
            <div class="form-group col-md-4">
              <lable>{{'Group' | translate}} :</lable>
              <!-- <md-input-container style="width: 60%;"> -->
                <input class="form-control" placeholder="{{'Select Group' | translate}}" [mdAutocomplete]="tdAuto1" name="state" #state="ngModel"
                  [(ngModel)]="groupInfo" (ngModelChange)="filtergrpStates(groupInfo)">
                <md-autocomplete #tdAuto1="mdAutocomplete">
                  <md-option *ngFor="let group of datagrpSelect" [value]="group.GroupName" (click)="selectMainGrp(group)">
                    <span>{{ group.GroupName }}</span>
                  </md-option>
                </md-autocomplete>
              <!-- </md-input-container> -->
            </div>
            <!-- for admin----------- -->
            <!-- <div class="form-group col-md-8 row"> -->
              <div class="form-group col-sm-4">
                <lable>{{'Fast tag Id' | translate}} :</lable>
                  <input class="form-control" type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
                
              </div>
            
              <div class="form-group col-sm-4">
                <lable>{{'License' | translate}} :</lable>
                <select [(ngModel)]="licenseVal" (ngModelChange)="changeLiecence($event)" class="form-control">
                  <option *ngFor="let license of licenseArr" [value]="license">{{license}}</option>
                </select>
              </div>
             <!-- </div> -->
            </div>
            <div class="form-row">
              <!-- -------------------------DEVICE DISTANCE VARIATION----------------------- -->
            
              <div class="col-md-4">
                  <span>{{'Device Distance Variation' | translate}}</span>
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <select style="height: 30px;" [(ngModel)]="selcetedSign">
                        <option value="+">+</option>
                        <option value="-">-</option>
                      </select>
                      <!-- <span class="input-group-text" id="inputGroup-sizing-default">Default</span> -->
                    </div>

                    <input type="number" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" [(ngModel)]="deviceDistanceVariation">
                    <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
                  </div>
                <!-- <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> -->
              </div>
              
              
              <div class="col-md-4">
                <span>{{'Installer' | translate}} :</span>
                <!-- <md-input-container style="width: 60%;"> -->
                  <input class="form-control" placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                    #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
                  <md-autocomplete #tdAuto0="mdAutocomplete">
                    <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
                      <span>{{ group.first_name }} {{ group.last_name }}</span>
                    </md-option>
              
                  </md-autocomplete>
                <!-- </md-input-container> -->
              </div>

              <div class="col-md-4">
                <label>{{'Expiration date' | translate}} <span style="color:red">*</span> :</label>
                <!-- <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;"> -->
                  <input id="expDate" [disabled]='showDate' bsDatepicker [bsConfig]="bsConfig" name="Expiration date" class="form-control"
                    [(ngModel)]="expDate" type="text">
                <!-- </md-form-field> -->
              </div>


            </div>

            <div class="form-row">
              <div class="col-md-4">
                <span>{{'Sells Person' | translate}} :</span>
               
                  <input class="form-control" type="text" [(ngModel)]="sellsPerson" name="sells person"
                    placeholder="{{'Sells Person' | translate}}">
                
              </div>

              <div class="col-md-4 mt-3">
                <span>{{'Ignition Wire connected' | translate}} :</span>
                <md-slide-toggle  style="float: right; padding: 8px 35.1px"
                  md-tooltip="Change status" [(ngModel)]="ignitionWire"></md-slide-toggle>
               
              
              </div>

              

            </div>




     


<!--      

          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
            <div *ngIf="!inventoryManagement" class="col-sm-6" style="text-align: right;">
              <span>{{"Device ID (IMEI No.) *" | translate}} :</span>
              <md-form-field style="width: 60%;" class="formfieldstyle">
                <input mdInput type="text" class="no-spin" [(ngModel)]=" deviceid" name=" deviceid" placeholder="Device ID (IMEI)"
                  required />
                <md-error class="required">{{'Enter Device ID' | translate}}</md-error>
              </md-form-field>
            </div>

            <div *ngIf="inventoryManagement" class="col-sm-6" style="text-align: end">
              <div style="width: 100%;" class="formfieldstyle">
                <span>{{"Device ID (IMEI No.) *" | translate}} :</span>
                  <select id="inventory" multiple="multiple">
                    <option *ngFor="let option_1 of inventory" [value]="option_1.IMEI">{{ option_1.IMEI }}</option>
                  </select>

                </div>
            </div>

            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Vehicle Registration No. *' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="devicename" name="devicename" placeholder="Registration number"
                  required />
                <md-error class="required">{{'Vehicle Registration No.' | translate}}</md-error>
              </md-form-field>
            </div>
          </div>
          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{"Description" | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="des" name="des" placeholder="{{'Description' | translate}}" />
              </md-form-field>
            </div>
            <div class="col-sm-6" style="text-align: right;">
              <span>{{"SIM Number *" | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="number" minlength="10" maxlength="13"
                  [(ngModel)]="hrdwr" name="hrdwr" placeholder="SIM Number" required>
              </md-form-field>
            </div>
          </div>
          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'SIM Provider' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="SIM_provider" name="hrdwr" placeholder="{{'SIM Provider' | translate}}"
                  required>
                <md-error class="required">{{'Enter SIM Provider' | translate}}</md-error>
              </md-form-field>
            </div>
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'SIM Number 2' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" maxlength="13" [(ngModel)]="hrdwr2"
                  name="hrdwr2" placeholder="{{'SIM Number 2' | translate}}">
              </md-form-field>
            </div>
          </div>
          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'SIM Provider 2' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="SIM_provider2" name="hrdwr2"
                  placeholder="{{'SIM Provider 2' | translate}}">
                <md-error class="required">{{'Enter SIM Provider 2' | translate}}</md-error>
              </md-form-field>
            </div>
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Integration ID' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="IntegrationId" placeholder="{{'Integration ID' | translate}}">
              </md-form-field>
            </div>
          </div>
          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Driver Name' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="driver" name="driver" placeholder="{{'Driver Name' | translate}}" />
              </md-form-field>
            </div>
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Driver contact number' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" minlength="10" maxlength="10"
                  [(ngModel)]="dcontact" name="dcontact" placeholder="{{'Driver Contact Number' | translate}}">
              </md-form-field>
            </div>
          </div>
          
         
          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Dealer' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select dealer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                  #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
                <md-autocomplete #tdAuto0="mdAutocomplete">
                  <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
                    <span>{{ group.first_name }} {{ group.last_name }}</span>
                  </md-option>
                
                </md-autocomplete>
              </md-input-container>
            </div>
           
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'User' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select User' | translate}}" [mdAutocomplete]="tdAuto" name="state" #state="ngModel"
                  [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
                <md-autocomplete #tdAuto="mdAutocomplete">
                  <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
                  
                    <span>{{userName.full_name}}</span>
                  </md-option>
                  <md-option *ngIf="costumers.length==0">
                    <span>No Data Found</span>
                  </md-option>
                </md-autocomplete>
              </md-input-container>
            </div>
          </div>
         
          <div *ngIf="!showFieldsDealer && showFieldsUser && custtype" class="row"
            style="padding-right: 15%;height:45px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'User' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select User' | translate}}" [mdAutocomplete]="tdAuto" name="state" #state="ngModel"
                  [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
                <md-autocomplete #tdAuto="mdAutocomplete">
                  <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
                    
                    <span>{{userName.full_name}}</span>
                  </md-option>
                  <md-option *ngIf="costumers.length==0">
                    <span>No Data Found</span>
                  </md-option>
                </md-autocomplete>
              </md-input-container>
            </div>
            
            
          
           
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Fast tag Id' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
              </md-form-field>
            </div>
          
          </div>
          
         
          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
          
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Device model *' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <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.modelName">
                    <span style="font-size:13px;">{{model.modelName}}</span>
                  </md-option>
                </md-autocomplete>
              </md-input-container>
            </div> -->
<!--           
            <div class="col-sm-6" style="text-align: right">
              <span>{{'Vehicle type *' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select Vehicle type*' | translate}}" [mdAutocomplete]="tdAutoVehicleType"
                  name="state" #state="ngModel" [(ngModel)]="vehType" (ngModelChange)="filterVehType(vehType)">
                <md-autocomplete #tdAutoVehicleType="mdAutocomplete">
                  <md-option *ngFor="let vh of vehicle_Type" [value]="vh.vehicle_name">
                    <span style="font-size: 13px;">{{vh.vehicle_name}}</span>
                  </md-option>
                </md-autocomplete>
              </md-input-container>
            </div>
          </div>
        
          <div class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right">
              <label>{{'Expiration date' | translate}} <span style="color:red">*</span> :</label>
              <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
                <input id="expDate" [disabled]='showDate' bsDatepicker [bsConfig]="bsConfig" name="Expiration date" mdInput [(ngModel)]="expDate"
                  type="text" style="width: 40%;height: 65%;background: #f2f2f2;border: none;margin-left: 2%">
              </md-form-field>
            </div>
         
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Group' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select Group' | translate}}" [mdAutocomplete]="tdAuto1" name="state"
                  #state="ngModel" [(ngModel)]="groupInfo" (ngModelChange)="filtergrpStates(groupInfo)">
                <md-autocomplete #tdAuto1="mdAutocomplete">
                  <md-option *ngFor="let group of datagrpSelect" [value]="group.GroupName" (click)="selectMainGrp(group)">
                    <span>{{ group.GroupName }}</span>
                  </md-option>
                </md-autocomplete>
              </md-input-container>
            </div>
          </div>
          
          
        
          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Fast tag Id' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
              </md-form-field>
            </div>
           
            <div class="col-sm-6" style="padding-top: 5px;text-align: right;margin-left: 74px;">
              <span>{{'License' | translate}} :</span>
              <md-select [(ngModel)]="licenseVal" (ngModelChange)="changeLiecence($event)" style="width: 72%;padding-right: 11%;float: right;padding-top: 0;">
                <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
              </md-select>
            </div>
          </div>
          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
           
           
            <div class="col-sm-6 row" style="text-align: right;margin-left: 74px;">
             
              <span>{{'Device Distance Variation' | translate}} :</span>
              <select style="height: 30px;" [(ngModel)]="selcetedSign">
                <option value="+">+</option>
                <option value="-">-</option>
              </select>
              <input mdInput
                style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
                type="number" id="name" [(ngModel)]="deviceDistanceVariation">
              <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
             
            </div>

            <div class="col-sm-6" style="text-align: right;margin-left: -55px;">
              <span>{{'Installer' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                  #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
                <md-autocomplete #tdAuto0="mdAutocomplete">
                  <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
                    <span>{{ group.first_name }} {{ group.last_name }}</span>
                  </md-option>
                
                </md-autocomplete>
              </md-input-container>
            </div>

           
          </div>

          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Sells Person' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="sellsPerson" name="sells person"
                  placeholder="{{'Sells Person' | translate}}">
              </md-form-field>
            </div>

            </div>
          
        
          <div *ngIf="!showFieldsDealer && showFieldsUser" class="row"
            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
           
            <div class="col-sm-6" style="padding-top: 5px;text-align: right;margin-left: 74px;">
              <span>{{'License' | translate}} :</span>
              <md-select [(ngModel)]="licenseVal" style="width: 72%;padding-right: 6%;float: right;padding-top: 0;">
                <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
              </md-select>
            </div>

            <div class="col-sm-6" style="text-align: right;margin-left: -55px;">
              <span>{{'Installer' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                  #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
                <md-autocomplete #tdAuto0="mdAutocomplete">
                  <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
                    <span>{{ group.first_name }} {{ group.last_name }}</span>
                  </md-option>
                
                </md-autocomplete>
              </md-input-container>
            </div>
          
          </div>
          
          <div *ngIf="!showFieldsDealer && showFieldsUser" class="row"
            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
            <div class="col-sm-6 row" style="text-align: right;margin-left: 74px;">
              <span>{{'Device Distance Variation' | translate}} :</span>
              <select style="height: 30px;" [(ngModel)]="selcetedSign">
                <option value="+">+</option>
                <option value="-">-</option>
              </select>
              <input mdInput
                style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
                type="number" id="name" [(ngModel)]="deviceDistanceVariation">
              <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
            </div>
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Sells Person' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="sellsPerson" name="sells person"
                  placeholder="{{'Sells Person' | translate}}">
              </md-form-field>
            </div>
          </div>
          
          <div *ngIf="!showFieldsDealer && !showFieldsUser && !custtype" class="row"
            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Fast tag Id' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
              </md-form-field>
            </div>
          
            <div class="col-sm-6" style="padding-top: 5px;text-align: right;margin-left: 74px;">
              <span>{{'License' | translate}} :</span>
              <md-select [(ngModel)]="licenseVal" style="width: 72%;padding-right: 6%;float: right;padding-top: 0;">
                <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
              </md-select>
            </div>
          </div>
          <div *ngIf="!showFieldsDealer && !showFieldsUser && !custtype" class="row"
            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
           
          
            <div class="col-sm-6 row" style="text-align: right;margin-left: 74px;">
              <span>{{'Device Distance Variation' | translate}} :</span>
              <select style="height: 30px;" [(ngModel)]="selcetedSign">
                <option value="+">+</option>
                <option value="-">-</option>
              </select>
              <input mdInput
                style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
                type="number" id="name" [(ngModel)]="deviceDistanceVariation">
              <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
            </div>

            <div class="col-sm-6" style="text-align: right;margin-left: -55px;">
              <span>{{'Installer' | translate}} :</span>
              <md-input-container style="width: 60%;">
                <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                  #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
                <md-autocomplete #tdAuto0="mdAutocomplete">
                  <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
                    <span>{{ group.first_name }} {{ group.last_name }}</span>
                  </md-option>
                  
                </md-autocomplete>
              </md-input-container>
            </div>
          </div>

          <div *ngIf="!showFieldsDealer && !showFieldsUser && !custtype" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
            <div class="col-sm-6" style="text-align: right;">
              <span>{{'Sells Person' | translate}} :</span>
              <md-form-field style="width: 60%;">
                <input mdInput type="text" [(ngModel)]="sellsPerson" name="sells person" placeholder="{{'Sells Person' | translate}}">
              </md-form-field>
            </div>

           

          </div> -->
          <div class="accordion" id="accordionExample">
            <div class="card" style="margin-left: 61px;margin-top: 23px;margin-right: 151px;">
              <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                  <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Upload Device Image
                  </button>
                </h2>
              </div>
          
              <div id="collapseOne" class="collapse collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">

                  <div class="row">
                    <div class="col-md-2">
                      <span>Device Image 1: </span>
                    </div>

                    <div class="col-md-4">
                    <input style="background: #ececec;width: 80%;margin-left: 5px;border: 1px solid #c1c1c1;" type="file"
                      (change)="onDeviceImageChanged($event)">
                    </div>

                    <div class="col-md-4">
                      <i class="fas fa-cloud-upload-alt"
                        style="color: #4c6ef5;float: left;font-size: 23px;line-height: 2.1rem;cursor: pointer;" title="Upload Image"
                        (click)="onDeviceImageUploadUpload()"></i>
                    </div>

                  </div>

                  <div class="row">
                    <div class="col-md-2">
                      <span>Device Image 2: </span>
                    </div>
                  
                    <div class="col-md-4">
                      <input style="background: #ececec;width: 80%;margin-left: 5px;border: 1px solid #c1c1c1;" type="file"
                        (change)="onDeviceImageChanged($event)">
                    </div>
                  
                    <div class="col-md-4">
                      <i class="fas fa-cloud-upload-alt"
                        style="color: #4c6ef5;float: left;font-size: 23px;line-height: 2.1rem;cursor: pointer;" title="Upload Image"
                        (click)="onDeviceImageUploadUpload()"></i>
                    </div>
                  
                  </div>

                  <div class="row">
                    <div class="col-md-2">
                      <span>Device Image 3: </span>
                    </div>
                  
                    <div class="col-md-4">
                      <input style="background: #ececec;width: 80%;margin-left: 5px;border: 1px solid #c1c1c1;" type="file"
                        (change)="onDeviceImageChanged($event)">
                    </div>
                  
                    <div class="col-md-4">
                      <i class="fas fa-cloud-upload-alt"
                        style="color: #4c6ef5;float: left;font-size: 23px;line-height: 2.1rem;cursor: pointer;" title="Upload Image"
                        (click)="onDeviceImageUploadUpload()"></i>
                    </div>
                  
                  </div>
                 

                </div>
              </div>
            </div>
            </div>
          
          
          
          <div class="row">
            <div class="col-sm-12" style="text-align:center;padding-top:3%">
              <button class="btn btn-primary btn-block/" (click)="devInformationUpdate(0)"
                style="cursor:pointer;width: auto;height: 30px;">{{'ADD DEVICE' | translate}}</button>
            </div>
          </div>
          <div style="position: absolute;right: 20%;top: 10%;" class="row" *ngIf="showError0">
            <div class="col-sm-12">
              <flash-messages style="float: center;"></flash-messages>
            </div>
          </div>



    </div>
    <div class="tab-pane" id="tabs-2" role="tabpanel">
    
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Engine number" | translate}}</label>
          <input [(ngModel)]="EngineNo" placeholder="{{'Please Enter Engine Number' | translate}}" class="form-control"
            id="inputEmail4">
        </div>
          <div class="form-group col-md-4">
            <label for="inputEmail4">{{"Type of Vehicle" | translate}}</label>
            <input [(ngModel)]="typeofVeh" placeholder="{{'Please Enter Type of Vehicle' | translate}}" class="form-control" id="inputEmail4">
          </div>
          <div class="form-group col-md-4">
            <label for="inputEmail4">{{"Manufacturing company" | translate}}</label>
          <select [(ngModel)]="manufacturingCompany" (ngModelChange)="selectModel($event)"
           class="form-control">
            <option value="" selected disabled>Please Manufacturing company</option>
            <option *ngFor="let item of manufacturingData" [value]="item">{{item}}</option>
          </select>
          </div>

      </div>
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Registration date" | translate}}</label>
          <input  id="vehRegDate" bsDatepicker [bsConfig]="bsConfig" name="VehicleRegDate" placeholder="mm/dd/yyyy"
            [(ngModel)]="vehRegDate" class="form-control" >
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Date of Manufacturing Year" | translate}}</label>
          <input id="vehManufacturingYear" bsDatepicker [bsConfig]="bsConfig" name="vehManufacturingYear"
            placeholder="mm/dd/yyyy" [(ngModel)]="vehManufacturingYear" type="text" class="form-control">
        </div>
        <div class="form-group col-md-4">
            <label for="inputEmail4">{{"Last fitness date" | translate}}</label>
            <input id="lastFitnessDate" bsDatepicker [bsConfig]="bsConfig" name="lastFitnessDate"
            placeholder="mm/dd/yyyy" [(ngModel)]="lastFitnessDate" type="text" class="form-control">
        </div>
      
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"ICCICD Number" | translate}}</label>
          <input  type="text" [(ngModel)]="iccidNo" placeholder="{{'Please Enter ICCICD Number' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Fitment Date" | translate}}</label>
          <input id="fitmentDate" bsDatepicker [bsConfig]="bsConfig" name="fitmentDate"
            placeholder="mm/dd/yyyy" [(ngModel)]="fitmentDate" type="text" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"RTO Number" | translate}}</label>
          <input class="form-control" placeholder="{{'Please Enter Select RTO Number' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
            #state="ngModel" [(ngModel)]="RTO" (ngModelChange)="filtergrpStatess2(RTO)">
          <md-autocomplete #tdAuto0="mdAutocomplete">
            <md-option *ngFor="let group of RTOSelect" [value]="group.RTO_Code">
              <span>{{ group.RTO_Code }}</span>
            </md-option>
          </md-autocomplete>
        </div>
      
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Unique ID" | translate}}</label>
          <input type="text" [(ngModel)]="UIDnumber" placeholder="{{'Please Enter Unique ID' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"CID number" | translate}}</label>
          <input type="text" [(ngModel)]="CIDNO" placeholder="{{'Please Enter CID number' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Chassis number" | translate}}</label>
          <input type="text" [(ngModel)]="chassisno" placeholder="{{'Please Enter Chassis number' | translate}}" class="form-control">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Comapny Name" | translate}}</label>
          <input type="text"  [(ngModel)]="companyName" placeholder="{{'Comapny Name' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Company Address" | translate}}</label>
          <input type="text"  [(ngModel)]="companyAddress" placeholder="{{'Please Enter Company Address' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Transport Office City" | translate}}</label>
          <input type="text" [(ngModel)]="transportOfficeCity" placeholder="{{'Please Enter Transport Office City' | translate}}" class="form-control">
        </div>
      
      
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Transport Office State" | translate}}</label>
          <input type="text"type="text" [(ngModel)]="transportOfficeState" placeholder="{{'Transport Office State' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Invoice Number" | translate}}</label>
          <input type="text"  [(ngModel)]="invoice_number" placeholder="{{'Invoice Number' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Invoice Date" | translate}}</label>
          <input type="text" bsDatepicker  [bsConfig]="bsConfig" name="invoice_date" placeholder="mm/dd/yyyy"
            [(ngModel)]="invoice_date" type="text"
            class="form-control">
        </div>
      
      
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"SOS" | translate}}</label>
          <select [(ngModel)]="numberOfSOS" class="form-control">
            <option value="" selected disabled>Please select SOS</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
          </select>
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"'T-pin" | translate}}</label>
          <input type="text" type="text" [(ngModel)]="tpin" placeholder="{{'T-pin' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Model company" | translate}}</label>
          <select [(ngModel)]="models" class="form-control">
            <option value="" selected disabled>Please select Model</option>
            <option *ngFor="let item of modelData" [value]="item.ModelName">{{item.ModelName}}</option>
          </select>
        </div>
      
      
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Colour" | translate}}</label>
          <input type="text" [(ngModel)]="colour" placeholder="{{'Colour' | translate}}" class="form-control">
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"Transmission" | translate}}</label>
          <select [(ngModel)]="transmission" class="form-control">
            <option value="" selected disabled>Please select transmission</option>
            <option value="auto">auto</option>
            <option value="manual">manual</option>
          </select>
        </div>
        <div class="form-group col-md-4">
          <label for="inputEmail4">{{"IMSI" | translate}}</label>
          <input type="text" [(ngModel)]="Imsi" placeholder="{{'IMSI'| translate}}" class="form-control">
        </div>
      
      
      </div>
      
      


      <!-- OLd -->
 
      <!-- <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Engine number' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="EngineNo" placeholder="{{'Engine Number' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Type of Vehicle' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="typeofVeh" placeholder="{{'Type of Vehicle' | translate}}">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height: 45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
      <span>{{'Manufacturing company' | translate}} :</span>
        <md-select [(ngModel)]="manufacturingCompany" (ngModelChange)="selectModel($event)" style="width: 60%;background: #f2f2f2;">
          <md-option value="" selected disabled>Please Manufacturing company</md-option>
          <md-option *ngFor="let item of manufacturingData" [value]="item">{{item}}</md-option>
        </md-select>
        </div>
     
      <div class="col-sm-6" style="text-align: right">
        <label>{{'Registration date' | translate}} :</label>
        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
          <input id="vehRegDate" bsDatepicker [bsConfig]="bsConfig" mdInput name="VehicleRegDate" placeholder="mm/dd/yyyy"
            [(ngModel)]="vehRegDate" type="text"
            style="width: 40%;height: 65%;background: #f2f2f2;border: none;margin-left: 2%">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right">
        <label>{{'Date of Manufacturing Year' | translate}} :</label>
        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
          <input id="vehManufacturingYear" bsDatepicker [bsConfig]="bsConfig" mdInput name="vehManufacturingYear"
            placeholder="mm/dd/yyyy" [(ngModel)]="vehManufacturingYear" type="text"
            style="width: 40%;height: 65%;background: #f2f2f2;">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right">
        <label>{{'Last fitness date' | translate}} :</label>
        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
          <input id="lastFitnessDate" bsDatepicker [bsConfig]="bsConfig" mdInput name="lastFitnessDate"
            placeholder="mm/dd/yyyy" [(ngModel)]="lastFitnessDate" type="text"
            style="width: 40%;height: 65%;background: #f2f2f2;">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right">
        <span>{{'ICCICD Number' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="iccidNo" placeholder="{{'ICCICD Number' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right">
  
        <label>{{'Fitment Date' | translate}} :</label>
        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
          <input id="fitmentDate" mdInput bsDatepicker [bsConfig]="bsConfig" name="fitmentDate" [(ngModel)]="fitmentDate"
            placeholder="mm/dd/yyyy" type="text" style="width: 40%;height: 65%;background: #f2f2f2;">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'RTO Number' | translate}} :</span>
        <md-input-container style="width: 60%;">
          <input mdInput placeholder="{{'Select RTO Number' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
            #state="ngModel" [(ngModel)]="RTO" (ngModelChange)="filtergrpStatess2(RTO)">
          <md-autocomplete #tdAuto0="mdAutocomplete">
            <md-option *ngFor="let group of RTOSelect" [value]="group.RTO_Code">
              <span>{{ group.RTO_Code }}</span>
            </md-option>
          </md-autocomplete>
        </md-input-container>
      </div>
      
     
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Unique ID' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="UIDnumber" placeholder="{{'Unique ID' | translate}}">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'CID number' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="CIDNO" placeholder="{{'CID number' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Chassis number' | translate}} :</span>
        <md-form-field style="width: 60%">
          <input mdInput type="text" [(ngModel)]="chassisno" placeholder="{{'Chassis number' | translate}}">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Comapny Name' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="companyName" placeholder="{{'Comapny Name' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Comapny Address' | translate}} :</span>
        <md-form-field style="width: 60%">
          <input mdInput type="text" [(ngModel)]="companyAddress" placeholder="{{'Company Address' | translate}}">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Transport Office City' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="transportOfficeCity"
            placeholder="{{'Transport Office City' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Transport Office State' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="transportOfficeState"
            placeholder="{{'Transport Office State' | translate}}">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Invoice number' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="invoice_number" placeholder="{{'Invoice Number' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <label>{{'Invoice Date' | translate}} :</label>
        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
          <input id="invoice_date" bsDatepicker mdInput [bsConfig]="bsConfig" name="invoice_date" placeholder="mm/dd/yyyy"
            [(ngModel)]="invoice_date" type="text" style="width: 40%;height: 65%;background: #f2f2f2;">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right; margin-top: 3px;">
        <span>{{'No. of SOS' | translate}} :</span>
        <md-select [(ngModel)]="numberOfSOS" style="width: 60%;background: #f2f2f2;">
          <md-option value="" selected disabled>Please select SOS</md-option>
          <md-option value="1">1</md-option>
          <md-option value="2">2</md-option>
          <md-option value="3">3</md-option>
          <md-option value="4">4</md-option>
          <md-option value="5">5</md-option>
          <md-option value="6">6</md-option>
          <md-option value="7">7</md-option>
          <md-option value="8">8</md-option>
          <md-option value="9">9</md-option>
          <md-option value="10">10</md-option>
          <md-option value="11">11</md-option>
          <md-option value="12">12</md-option>
          <md-option value="13">13</md-option>
          <md-option value="14">14</md-option>
          <md-option value="15">15</md-option>
        </md-select>
       
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'T-pin' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="tpin" placeholder="{{'T-pin' | translate}}">
        </md-form-field>
      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'E-pin' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="epin" placeholder="{{'E-pin' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right;margin-top: 3px;">
        <span>{{'Model company' | translate}} :</span>
        <md-select [(ngModel)]="models"
          style="width: 60%;background: #f2f2f2;">
          <md-option value="" selected disabled>Please select Model</md-option>
          <md-option *ngFor="let item of modelData" [value]="item.ModelName">{{item.ModelName}}</md-option>
        </md-select>
      </div>
    
    </div>
    
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'Colour' | translate}} :</span>
        <md-form-field style="width: 60%;">
          <input mdInput type="text" [(ngModel)]="colour" placeholder="{{'Colour' | translate}}">
        </md-form-field>
      </div>
      <div class="col-sm-6" style="text-align: right; margin-top: 3px;">

        <span>{{'Transmission' | translate}} :</span>
        <md-select [(ngModel)]="transmission" style="width: 60%;background: #f2f2f2;">
          <md-option value="" selected disabled>Please select transmission</md-option>
          <md-option  value="auto">auto</md-option>
          <md-option value="manual">manual</md-option>
        </md-select>

      </div>
    </div>
    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
      <div class="col-sm-6" style="text-align: right;">
        <span>{{'IMSI' | translate }} :</span>
        <md-form-field style="width: 60%">
          <input mdInput type="text" [(ngModel)]="Imsi" placeholder="{{'IMSI'| translate}}">
        </md-form-field>
      </div>
    </div> -->
    
    <div class="row">
      <div class="col-sm-12" style="text-align:center;padding-top:3%">
        <button class="btn btn-primary btn-block/" (click)="devInformationUpdate(1)"
          style="cursor:pointer;width: 170px;height: 30px;">{{'UPDATE DEVICE INFO' | translate}}</button>
      </div>
    </div>
    <div style="position: absolute;right: 0;" class="row" *ngIf="showError1">
      <div class="col-sm-12">
        <flash-messages style="float: center;"></flash-messages>
      </div>
    </div>
    </div>
    <div class="tab-pane" id="tabs-3" role="tabpanel">
    <div class="row">
      <div class="col-sm-6" style="display: inherit">
        <p style="padding-top:9px">{{'Add Document field' | translate}}</p>
        <button mdTooltip="{{'upload Documents' | translate}}"
          style="border:1px solid transparent; background-color: transparent;cursor:pointer;margin-left: 5px"
          (click)="AddDocumentsField('addedrow')">
          <i class="fas fa-plus" style="float: right;width:30px;height:30px;cursor:pointer"></i>
          <!-- <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon> -->
        </button>
      </div>
    </div>
    <div style="overflow: auto;overflow-x: hidden;min-height: 200px" [ngClass]="{'rowHeight':docRow}">
      <div class="row" *ngFor="let data of imageuploadObject; let i = index">
        <div class="col-sm-3" style="padding-top: 8px;">
          <md-select (ngModelChange)="documentType($event)" [(ngModel)]="data.doctype"
            placeholder="{{'Doc Type' | translate}}" style="width:40%">
            <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
          </md-select>
          <input type="text" style="margin-right: 2%;" [(ngModel)]="data.phone" placeholder="{{'Doc number' | translate}}">
        </div>
        <div class="col-sm-3" style="padding-top: 1.5%">
          <label>{{'Document issued date' | translate}} :</label>
          <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" style="background: grey;height: 30px"
            placeholder="mm/dd/yyyy" [(ngModel)]="data.docdate" type="text" style="width: 40%">
        </div>
        <div class="col-sm-5" style="padding-top: 1%">
          <span><input type="file" class="btn btn btn-success"
              style="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:36%;"
              (change)="onFileChanged($event)"></span>
          <span><button class="btn btn btn-success" (click)="onUpload(i)">{{uploadStatus}}</button></span>
          <a href="*">{{'view' | translate}}</a>
          <span><button mdTooltip="{{'Delete field' | translate}}"
              style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
              (click)="DeleteDocumentsField(i)">
              <i class="fas fa-trash-alt"style="float: right;width:50px;height:50px;color:red; cursor:pointer"></i>
              <!-- <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon> -->
            </button></span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12" style="text-align:center;padding-top:3%">
        <button class="btn btn-primary btn-block/" (click)="devInformationUpdate(2)"
          style="cursor:pointer;width: 156px;;height: 30px;">{{'UPDATE AND SAVE' | translate}}</button>
      </div>
    </div>
    <div style="position: absolute;right: 0;" class="col-sm-12">
      <div class="row" *ngIf="showError2">
      </div>
      <flash-messages style="float: center;"></flash-messages>
    </div>
    </div>
    <!-- tab-4 -->
    <div class="tab-pane" id="tabs-4" role="tabpanel">
      <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
        <div class="col-sm-12" style="text-align: left;font-size: initial;">
          <!-- <label >Choose an Excel File:</label>
                <input  style="margin-left: 30px;" type="file" id="excelFile"  multiple size="50"> -->

            <!-- <div class="row" style="text-align: center;">
              <div class="col-md-1"></div>
                <div class="form-group col-sm-4">
                  <lable>{{'Expire Validity' | translate}} :</lable>
                  <select [(ngModel)]="licenseVal" (ngModelChange)="changeLiecence($event)" class="form-control">
                    <option *ngFor="let license of licenseArr1" [value]="license">{{license}}</option>
                  </select>
                </div>

                <div class="form-group col-sm-4">
                  <lable>{{'Vehicle Category' | translate}} :</lable>
                  <select [(ngModel)]="vehicleCategory" class="form-control">
                    <option *ngFor="let license of vehicleCat" [value]="license">{{license}}</option>
                  </select>
                </div>

             
            </div> -->
            <!-- <div  style="width: 50%;height: 20px;position:absolute;top:-360px">
              <table id="sample" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
                <thead style="background-color:#e0e0e0;color: #444444;">
                  <tr>
                    <th>Device_Name</th>
                    <th>DeviceID</th>
                    <th>SimNumber</th>
                    <th>SimNumber2</th>
                    <th>SIMProvider</th>
                    <th>VehicleType</th>
                    <th>DeviceModel</th>
                    <th>phone</th>
                    <th>first_name</th>
                    <th>last_name</th>
                    <th>expire_validity</th>
                  </tr>
                </thead>
              </table>
            
            
            </div> -->

          <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
            <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;" class="file-upload btn btn-primary">Browse
              for Excel file ... <input type="file" id="excelFile" multiple size="50" />
            </label>
            <button type="button" style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
              class="btn btn-primary" (click)="uploadExcel()">Upload</button>
            <!-- <a type="button" download href="https://www.oneqlik.in/BulkDeviceAdd.ods"
              style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
              class="btn btn-primary">Download Excel</a> -->
              <a  type="button" (click)="exportExcel()" style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
              class="btn btn-primary">Download Excel</a>
          </div>
        </div>
      </div>
      <div class="row" *ngIf="showErrorupload_1">
        <div class=col-sm-12>
          <p style="color: red; text-align: center; font-size: 18px;">{{'Duplicate Entries' | translate}}</p>
          <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
            <thead>
              <tr>
                <th>{{'Device Name' | translate}}</th>
                <th>{{'Device ID' | translate}}</th>
                <th>{{'Reason' | translate}}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let failedDevices of faileduploadDevices">
                <td style="cursor:pointer">{{failedDevices.Device_Name}}</td>
                <td style="cursor:pointer">{{failedDevices.Device_ID}}</td>
                <td style="cursor:pointer">{{failedDevices.Reason}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row" style="position: absolute;right: 0;">
        <div class="col-sm-12">
          <flash-messages style="float: center;"></flash-messages>
        </div>
      </div>
    </div>

    <div class="tab-pane" id="tabs-0" role="tabpanel">
     <app-add-cust></app-add-cust>
    </div>
  </div>

  
  </div>