<div *ngIf="editTemplate">
<h1 style="text-align: center;font-size: 24px;background: #ececec;padding: 11px;">{{'Edit Device' | translate}}</h1>
<div class="row">
  <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
    {{'Device Name' | translate}} :
  </div>
  <div class="col-sm-8">
    <md-form-field  class="example-full-width width" style="display: initial;">
      <input mdInput [(ngModel)]="devName" type="text" name="dname" required>
      <md-error class="pattern">{{'Enter Device Name' | translate}}</md-error>
    </md-form-field>
  </div>
</div>
<div class="row">
    <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
      {{'Phone' | translate}} :
    </div>
    <div class="col-sm-8">
      <md-form-field  class="example-full-width width" style="display: initial;">
        <input mdInput [(ngModel)]="phNum" type="number" name="dname" required>
        <md-error class="pattern">{{'Phone' | translate}}</md-error>
      </md-form-field>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
      {{'Email' | translate}} :
    </div>
    <div class="col-sm-8">
      <md-form-field  class="example-full-width width" style="display: initial;">
        <input mdInput [(ngModel)]="emailId" type="text" name="email" >
    
      </md-form-field>
    </div>
  </div>
  <div class="row" style="padding-bottom: 16px;">
      <div class="col-sm-4" style="padding-left: 50px">
        {{'Created On' | translate}} :
     </div>
      <div class="col-sm-8">
          <owl-date-time [(ngModel)]="createdOn" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
      </div>
    </div>
    <div class="row">
        <div class="col-sm-4" style="padding-left: 50px">
          {{'Expired On' | translate}} :
    </div>
        <div class="col-sm-8">
            <owl-date-time [(ngModel)]="expOn" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        </div>
      </div>
      <!-- change below method to get Distributer -->
      <!-- <div class="row" *ngIf="organisationFlag">
          <div class="col-sm-4" style="margin-top: 15px;padding-left: 50px">
            <span>Distributer:</span>
          </div>
          <div class="col-sm-8" style="padding-right: 12%;">
            <md-input-container style="padding-right: 12%;">
              <input mdInput placeholder="Search Distributer..." [mdAutocomplete]="tdAuto5" name="state" #state="ngModel" [(ngModel)]="distributerName"
                (ngModelChange)="filterDistStates(distributer)">
              <md-autocomplete #tdAuto5="mdAutocomplete">
                <md-option *ngFor="let distr of distSelect" [value]="distr.dealer_firstname">
                  <span>{{ distr.dealer_firstname }} {{ distr.dealer_lastname }}</span>
                </md-option>
                
              </md-autocomplete>
            </md-input-container>
          </div>
        </div> -->
        <div class="row">
            <div class="col-sm-4" style="margin-top: 15px;padding-left: 50px">
              <span>{{'Dealer' | translate}}:</span>
            </div>
            <div class="col-sm-8" style="padding-right: 12%;margin-top: 15px;">
              <!-- <md-input-container style="padding-right: 12%;">
                <input mdInput placeholder="{{'Search Dealer' | translate}}" [mdAutocomplete]="tdAuto2" name="state" #state="ngModel" [(ngModel)]="dealerName"
                  (ngModelChange)="filterDealerStates(dealerName)">
                <md-autocomplete #tdAuto2="mdAutocomplete">
                  <md-option *ngFor="let dealer of dealerSelect" [value]="dealer.dealer_firstname">
                    <span>{{ dealer.dealer_firstname }} {{ dealer.dealer_lastname }}</span>
                  </md-option>
                </md-autocomplete>
              </md-input-container> -->
              <select id="dbselect" multiple="multiple">
                <option *ngFor="let option_1 of dealers_info" [value]="option_1.dealer_id" [selected] = "option_1.dealer_id === dealerId">{{ option_1.dealer_firstname  }} {{option_1.dealer_lastname ? option_1.dealer_lastname :''}}</option>
              </select>
            </div>
          </div>
        <div class="row">
          <div class="col-sm-4" style="margin-top: 15px;padding-left: 50px">
            <span>{{'User' | translate}}:</span>
          </div>
          <div class="col-sm-8" style="padding-right: 12%; margin-top: 15px;">
            <!-- <md-input-container>
              <input mdInput placeholder="{{'Search' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
              #state="ngModel" [(ngModel)]="userName"
             (ngModelChange)="filteruserStates(userName)">
             <md-autocomplete #tdAuto="mdAutocomplete">
                <md-option *ngFor="let option of userSelect" [value]="option.user_type">
                  <span>{{ option.user_type }}</span>
                </md-option>
              </md-autocomplete>   
            </md-input-container> -->
            <select id="dbselect_1" multiple="multiple" >
              <option *ngFor="let cust of costumers" [value]="cust._id" [selected] = "cust._id === initialUser">{{ cust.first_name }} {{cust.last_name ? cust.last_name : ''}} </option>
            </select>
          </div>              
        </div>
    
        <div class="row">
            <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
              {{'SIM Number' | translate}} :
            </div>
            <div class="col-sm-8">
              <md-form-field class="example-full-width width" style="display: initial;">
                <input mdInput [(ngModel)]="simNum" type="number" name="dname" required>
                <md-error class="pattern">{{'Phone' | translate}}</md-error>
              </md-form-field>
            </div>
          </div>
          <div class="row">
              <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
                Today's ODO :
              </div>
              <div class="col-sm-8">
                <md-form-field class="example-full-width width" style="display: initial;">
                  <input [(ngModel)]="todayODO" mdInput type="number" name="dname" required>
                  <md-error class="pattern">{{'Phone' | translate}}</md-error>
                </md-form-field>
              </div>
            </div>
            <div class="row">
                <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
                  {{'Total ODO' | translate}} :
                </div>
                <div class="col-sm-8">
                  <md-form-field class="example-full-width width" style="display: initial;">
                    <input mdInput [(ngModel)]="totalODO" type="number" name="dname" required>
                    <md-error class="pattern">{{'Phone' | translate}}</md-error>
                  </md-form-field>
                </div>
              </div>
<!-- last_ping,device_time -->
              <div class="row" style="padding-bottom: 16px;">
                <div class="col-sm-4" style="padding-left: 50px">
                  {{'Last Ping' | translate}} :
                </div>
                <div class="col-sm-8">
                  <owl-date-time [(ngModel)]="lastPingOn" disabled [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
                  </owl-date-time>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4" style="padding-left: 50px">
                  {{'Device Time' | translate}} :
                </div>
                <div class="col-sm-8">
                  <owl-date-time [(ngModel)]="lastDeviceTime" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
                  </owl-date-time>
                </div>
              </div>


              <footer>
                <div class="row" style="padding-left: 26%;margin-top: 8px;">      
                      <button (click)="editDetails()" style=" width: 171px;height: 43px;letter-spacing: 5px;margin-right: 6px;" class="btn btn-primary btn-block">{{'Edit' | translate}}</button>
                      <button (click)="cancelEdit()" style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #ff0f0f; border: 0px;">{{'Cancel' | translate}}</button>           
                </div>
              </footer>
             </div>

             <div id='pdf' *ngIf="ExportPdf" style="height: 90vh;">
                <div>
                    <button type="button" class="btn btn-primary" style="background: #595454;;border:0px;float: right" (click)="exportAsPdf()">{{'Export Pdf' | translate}}</button>
                    <!-- <button type="button" class="btn btn-primary" style="background: #595454;;border:0px;float: right" (click)="qrCodeGenerator()">Qrcode</button> -->
                 </div>            
              <table id="testPdf" style="font-weight: 600;" >            
                <tr>   
                  <td></td>
                  <td style="text-align: center;font-weight: 700"> 
                      {{devicetype}} GPS DEVICE<br>
                      (AIS-140 COMPLIANT)<br>
                      INSTALLATION/FITMENT CERTIFICATE<br>
                      {{companyName}}<br>
                      {{companyAddress}}                           
                  </td>  
                  <td style="text-align:center" >  
                    <div>
                      <img src="{{imgURL}}" width="150px" height="150px">
                    </div>                   
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    To,<br>
                    The Regional Transport Officer,<br>
                    {{transportOfficeCity}}<br>
                    {{transportOfficeState}}<br>
                  </td>
                  
                  <td>Fitment Date : {{fitmentDate | date:'dd-MM-yyyy'}}</td>
                </tr>
                <tr>
                  <td colspan="3">
                      <h6 style="font-size:18px;">Vehicle Details :-</h6>
                  </td>       
                </tr>          
                <tr>
                    <td>
                     Vehicle no. : {{devName}}<br>
                     Engine no. :   {{engineNo}}<br>
                     Chassis no. : {{ChassisNo}}<br>
                     <!-- Vehicle Model : <br> -->
                    </td>
                    <td>
                      Type of Vehicle : {{typeOfVehicle}}<br>
                      Manufacturing Company : {{manufacturingCompany}}<br>
                      Last fitness date : {{lastFitnessDate | date :'dd-MM-yyyy'}}
                    </td>
                    <td>
                      Registration Date : {{vehicleRegDate | date:'dd-MM-yyyy'}}<br>
                      Date of Manufaturing year : {{vehicleManufacturingDate | date:'dd-MM-yyyy'}}
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                        <h6 style="font-size:18px;margin: 20px 0 10px 0px;">Vehicle owner Details : - </h6>
                    </td>             
                  </tr>           
                <tr>
                  <td>
                    Owner Name : {{userName}}<br>
                  </td>
                  <td>
                    Owner Address : {{userAddress}}               
                  </td>
                  <td>
                  </td>
                </tr>
                <tr>
                  <td colspan="3">
                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">  Dealer Details :- </h6>
                  </td>
                </tr>           
                <tr>
                    <td>
                      Dealer Name : {{dealerName}}
                    </td>
                    <td>
                      Dealer Address : {{dealerAddress}}
                      </td>
                </tr>
                <tr>
                  <td colspan="3">
                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;"> VTS Details :- </h6>  
                  </td>         
                </tr>        
                <tr>
                  <td>
                    VTS Model : {{devicetype}}<br>
                    Device IMEI : {{devID}}<br>
                    ICCID No. : {{ICCICD}}
                  </td>
                  <td>
                    Invoice Date : {{InvoiceDate | date:'dd-MM-yyyy'}}<br>
                  
                    IMSI : {{IMSI}}<br>
                    Unique ID : {{uniqueID}}
                  </td>
                  <td>
                    Invoice No. : {{invoiceNum}}<br>
                    No. of SOS : {{numberOfSOS}} <br>
                    CID No. :{{CID_No}}<br>
                    Expiration Date : {{expiration_date | date:'dd-MM-yyyy'}}<br>
                  </td>
                </tr>
                <tr>
                  <td colspan="3">
                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;"> Vehicle Current Detail :- </h6> 
                  </td>            
                </tr>   
                <tr>
                  <td>
                    Timestamp : <br>
                    Location : <br>
                  </td>
                  <td>
                    Lattitude : {{lattitude}}
                  </td>
                  <td>
                    Longitude : {{longitude}}
                  </td>                  
                </tr>
                <tr>
                  <td colspan="3">
                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">Fitment Images :- </h6>
                  </td>  
                  <!-- {{deviceImage |json}} -->
                  <td style="margin-left: -155px;" *ngIf="deviceImage.length && deviceImage[0]">
                    <img style="    margin-left: -91px;" src="{{deviceImage[0]}}" width="90px" height="90px">
                  </td>
                  <td *ngIf="deviceImage.length && deviceImage[1]"> 
                    <img src="{{deviceImage[1]}}" width="90px" height="90px">
                  </td>              
                    <td *ngIf="deviceImage.length && deviceImage[2]">
                    <img src="{{deviceImage[2]}}" width="90px" height="90px">
                    </td>
                </tr>         
                <tr>
                  <td colspan="2">
                      Authorised Dealer<br>               
                      (Seal & Sign)
                  </td>                
                  <td>
                      Department of Transport<br>
                      Checked & Verified<br>
                      Signature of MVI/RTO<br>
                  </td>            
                </tr >   
                <tr>
                  <td colspan="3" style="text-align:center;margin-top: 10px">
                      (PRODUCT SATISFACTION BY VEHICLE OWNER)<br>
                      1.This is to ackknowledge and confirmed that we have got our vehicle bearing and registration number..<br>
                      fitted with GPS device (Model No.  {{devicetype}},AIS 140 Compliant) Manufatured by {{deviceManufacturer}})
                  </td>
                </tr >   
            </table>  
           
            <div id="editor"></div>
             </div>
         
