<app-all-menus></app-all-menus>

<div class="limiter">
  <app-all-menus></app-all-menus>
  <div id="toast">
   <div id="desc">{{data_descip}}</div>
 </div>
   <div class="container-table100">
     <div class="wrap-table100">
      <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86;margin-left: 0px;margin-right: 0px; padding-top: 10px; padding-bottom: 10px; color: white;">
        <div class="col-12">
          <md-select [(ngModel)]="limit" ngDefaultControl (change)="callDataTable()" style="float: right;background: #efecec;margin-right: 5px;">
          <md-option *ngFor="let page of pageLengthArr; let i = index" [value]="page">
            {{page}}
          </md-option>
        </md-select>
          <h4 style="display: inline-block;">{{'Vehicles' | translate}}</h4>
          <i  style="margin-left: 20px;padding-top: 5px;cursor: pointer;float: left;" title="Add Device" class="fas fa-plus" (click)="adddev()" *ngIf="(bussinessType=='0' || bussinessType==undefined)" ></i>
          <!-- *ngIf="((custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin) && (bussinessType!=0 || bussinessType==undefined)"></i>  -->
          <!-- (custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn -->
          <i style="margin-left: 20px;padding-top: 5px;cursor: pointer;float: left;" title="Add Device" class="fas fa-plus-circle" (click)="adddevnew()" *ngIf="(bussinessType=='1')"></i>
          <!-- *ngIf="((custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn) && bussinessType=='1'"></i> -->
          <i  style="margin-left: 15px;padding-top: 5px;float: left;" class="fas fa-file-export" title="Export to Excel" (click)="exportExcel()" *ngIf="(bussinessType=='0' || bussinessType==undefined)"></i>
          <i  style="margin-left: 15px;padding-top: 5px;float: left;" class="fas fa-file-export" title="Export to Excel" (click)="exportExcel1()" *ngIf="(bussinessType=='1')"></i>
           
          <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="float: left;;margin-left: 15px;padding-top: 5px;cursor: pointer;color:white"title="Video tutorial" target="_blank"> <i class="fas fa-video"></i> </a>
         
         
          <md-select [(ngModel)]="devStatus" multiple style="padding-top: 0;float: right; margin-right: 10px; width: 150px;background: #efecec;"
          placeholder="--{{'Status' | translate}}--" ngDefaultControl (change)="selectedStatus($event,devStatus.name)">
          <md-option *ngFor="let devStatus of statusArray; let i = index" style="padding-left: 20px;" [value]="devStatus.name">
            {{devStatus.name}}
          </md-option>
        </md-select>
        </div>
      </div>
      <div class="row" style="background: #7ba8b7;padding-top: 5px;padding-bottom: 5px;color: black;font-weight: 500;box-shadow:1px 1px white">
        <div class="col-sm-12 col-md-6 col-lg-10">
          <div class="s002">
            <form>
              <div class="inner-form">
                <div class="input-field first-wrap">
                  <div class="icon-wrap">     
                    <i class="fas fa-search" width="24" height="24" viewBox="0 0 24 24"></i>
                  </div>
                  <input type="text" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Device Search' | translate}}" />   
                </div>
                <div class="input-field second-wrap">
                  <div class="icon-wrap">
                    <i class="far fa-calendar-alt" width="24" height="24" viewBox="0 0 24 24"></i>
                  </div>
                  <input id="from_date" bsDatepicker class="datepicker" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" name="fDate" (ngModelChange)="dateChange('fdate')" placeholder="From Date"> 
                </div>
                <div class="input-field third-wrap">
                  <div class="icon-wrap">
                    <i class="far fa-calendar-alt" width="24" height="24" viewBox="0 0 24 24"></i>
                  </div>
                  <input id="to_date" bsDatepicker placeholder="To Date" class="datepicker" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" (ngModelChange)="dateChange('todate')">
                </div>
                <!-- <div class="input-field ">
                  <div class="icon-wrap">
                   
                  </div>
                </div> -->
              </div>
            </form>
          </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-2" style="padding-top: 2px;">
          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 120px;float: left;color:white;background: #035096; border-right-color: #2d4262;line-height: 2.6;"><< {{'Previous' | translate}}</button>   
          <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="width: 100px;float: left;color:white;margin-right: 10px;line-height: 2.6;background: #035096;">{{'Next' | translate}} >></button>  
        </div>
      </div>
       <div class="table100 ver1">
         <div class="wrap-table100-nextcols js-pscroll" style="height: 77vh;overflow-y: hidden;">
           <div class="table100-nextcols">
            <table id="deviceTable1" class="display order-column" cellspacing="0" style="font-size:15px;text-align: center;" >
              <thead style="background:#add8e6">
                <tr>
                  <th style="width: 150px;text-align: left"></th>
                  <th style="width: 150px;text-align: left">{{'Reg. Number' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'Group' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'IMEI' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'Int. ID' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'SIM 1' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'SIM Provider' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'SIM 2' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'SIM Provider 2' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{'Device Model' | translate}}</th>      
                  <th style="width: 150px;text-align: left">{{'Vehicle Type' | translate}}</th>
                  <th style="width: 300px;text-align: left">{{'Status' | translate}}</th>
                  <th style="width: 200px;text-align: left">{{'User' | translate}}</th>
                  <th style="width: 200px;text-align: left">{{'Owner' | translate}}</th>
                  <th style="width: 200px;text-align: left">{{'Dealer' | translate}}</th>
                  <th style="width: 200px;text-align: left">{{'Created On' | translate}}</th>
                  <th style="width: 200px;text-align: left">{{'Exp. Date' | translate}}</th>
                  <th style="width: 200px;text-align: left">{{'Renew at' | translate}}</th>
                  <th style="width: 200px;text-align: left">{{'Renew by' | translate}}</th>
                  <th style="width: 150px;text-align: left">{{"Driver's Name" | translate}}</th>
                  <th style="width: 150px;text-align: left">{{"Driver's Contact" | translate}}</th>
                  <th style="width: 150px;text-align: left">{{"Sells Person" | translate}}</th>
                  <th style="width: 150px;text-align: left">{{"Installer" | translate}}</th>
                  <th style="width: 100px;text-align: center">Last Ping</th>
                  <th style="width: 150px;text-align: center">{{'Device Setting' | translate}}</th>
                  <th style="width: 100px;text-align: center">{{'Share Device' | translate}}</th>
                  <th style="width: 100px;text-align: center">{{'Share User' | translate}}</th>
                  <!-- *ngIf="superAdmin||custtype||(dealerTocust=='ON')" -->
                  <!-- *ngIf="superAdmin||custtype||(dealerTocust=='ON')" -->
                  <th style="text-align: center;">{{'Renewal History' | translate}}</th>
                  <th style="text-align: center;">{{'Edit' | translate}}</th>
                  <th style="text-align: center;">{{'Delete' | translate}}</th>
                  <th style="text-align: center;">{{'E Chalan' | translate}}</th>
                  <th style="text-align: center;">{{'Documents' | translate}}</th>
                  <th style="text-align: center;">{{'Cert. Download' | translate}}</th>
                  <th style="text-align: center;">{{'Remark' | translate}}</th>
                  <th style="text-align: center;">{{'KYC Status' | translate}}</th>
                </tr>
              </thead>
            </table>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 


 <!-- <div class="col-3">
  <i style="margin-left: 5px;cursor: pointer;" title="Add Device" class="fas fa-plus" (click)="adddev()"
    *ngIf="(custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn"></i>
  <i style="margin-left: 15px" class="fas fa-file-export" title="Export to Excel" (click)="exportExcel()"></i>
  <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="margin-left: 15px;cursor: pointer;color:black"
    title="Video tutorial" target="_blank"> <i class="fas fa-video"></i> </a>
  <md-select [(ngModel)]="devStatus" multiple style="padding-top: 0;float: right; margin-right: 40px;; width: 150px;"
    placeholder="--{{'Status' | translate}}--" ngDefaultControl (change)="selectedStatus($event,devStatus.name)">
    <md-option *ngFor="let devStatus of statusArray; let i = index" [value]="devStatus.name">
      {{devStatus.name}}
    </md-option>
  </md-select>
</div>
<div class="col-5" style="scroll-padding-left: 0px;scroll-padding-right: 0px">         
  <div class="row">         
       <div class="col-md-6" style="padding-left: 0px;padding-right: 0px">
         <div class="row">
           <div class="col-4" style="padding:0;text-align: center;">
              <label style="width: inherit;margin-top: 7px">{{'From Date' | translate}}</label>
           </div>
           <div class="col-8" style="padding-left: 0">
              <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 35px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" (ngModelChange)="dateChange('fdate')" placeholder="Select Date"> 
           </div>
         </div>         
       </div> 
       <div class="col-md-6">
         <div class="row">
           <div class="col-4" style="text-align: center;">
              <label style="width: inherit;margin-top: 7px">{{'To Date' | translate}}</label>
           </div>
           <div class="col-8" style="padding-left: 0">
              <input id="to_date" bsDatepicker placeholder="Select Date" class="form-control form-control-sm" style="height: 35px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" (ngModelChange)="dateChange('todate')">
           </div>
         </div>      
       </div>      
  </div>
  </div>
<div class="col-md-4">
      <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="color:white;margin-right: 10px;line-height: 1.7;background: #035096;">Next >></button>
      <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="color:white;background: #035096; border-right-color: #2d4262;line-height: 1.7;"><< Previous</button>
      <input type="search" style="margin-right: 10px;width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: white;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);line-height: 2.3;" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Device Search' | translate}}" />   
  </div> -->