<div id="container" class="container-fluid" style="background: #f9f9f9;padding:0px;height:60vh">
<div class="dealer_edit" *ngIf="pageId == 'edit'">
  <!-- <p style="font-size: 24px;color: #615f5f;">{{'Edit Customer' | translate}}</p> -->
<div
    style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
    <p style="margin-bottom: 0px;">{{'Edit Customer' | translate}}</p>
</div>
  <p *ngIf="showError" style="text-align: center;color: red;font-weight: 500">{{errorMsg}}</p>
  <div class="row" style="margin-top: 8px;">
      <div class="col-md-6">
          <!-- <span style="padding: 17px 0px 0px 10px;">{{'User ID' | translate}}</span> -->
              <md-form-field class="example-full-width width">
                      <input mdInput class="no-spin" [(ngModel)]="userId" name="userId" placeholder="User Id" required/>
                      <md-error class="required">{{'Enter User Id' | translate}}</md-error>
                  </md-form-field>
      </div>
        <div class="col-md-6">
<!-- <span style="padding: 17px 0px 0px 10px;">{{'First name' | translate}}</span> -->
<md-form-field class="example-full-width width"
    >
    <input mdInput class="no-spin" [(ngModel)]="firstName" name="firstname" placeholder="First name" required />
    <md-error class="required">{{'Enter First name' | translate}}</md-error>
</md-form-field>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
        <!-- <span style="padding: 17px 0px 0px 10px;">{{'Last name' | translate}}</span> -->
        <md-form-field class="example-full-width width"
            >
            <input mdInput class="no-spin" [(ngModel)]="lastName" name=" lastname"
                placeholder="{{'Enter Last name' | translate}}" required />
            <md-error class="required">{{'Enter Last name' | translate}}</md-error>
        </md-form-field>
        </div>
        <div class="col-md-6">
<!-- <span style="padding: 17px 0px 0px 10px;">{{'Email' | translate}} </span> -->
<md-form-field class="example-full-width width" >
    <input mdInput class="no-spin" [(ngModel)]="email" name="email" placeholder="Email" required />
    <md-error class="required">{{'Enter email' | translate}}</md-error>
</md-form-field>
            </div>
    </div>
    <div class="row">
        <div class="col-md-6">
        <!-- <span style="padding: 17px 0px 0px 10px;">{{'Mobile number' | translate}}</span> -->
        <md-form-field class="example-full-width width" >
            <input mdInput class="no-spin" [(ngModel)]="PhoneNum" name=" phoneNum"
                placeholder="{{'Mobile number' | translate}}" required />
            <md-error class="required">{{'Enter mobile number' | translate}}</md-error>
        </md-form-field>
        </div>
        <div class="col-md-6">
<div style="display: inline-flex;width: 75%;" *ngIf="((superadminAccess == 'ON')||(this.superAdmin==true))">
    <span >{{'Expiration date' | translate}}</span>
    <owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
    </owl-date-time>
</div>
            </div>
        
    </div>

    <div class="row">
        <div class="col-md-6">
        <!-- <span style="padding: 17px 0px 0px 10px;">{{'Address' | translate}}</span> -->
        <md-form-field class="example-full-width width"
           >
            <input mdInput class="no-spin" [(ngModel)]="address" name=" address"
                placeholder="{{'Address' | translate}}" required />
            <md-error class="required">{{'Enter Address' | translate}}</md-error>
        </md-form-field>
        </div>
        <div class="col-md-6">
        </div>
    </div>

    <span data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" (click)="expand(is_expand=!is_expand)" aria-controls="collapseExample"
        style="font-size: 15px;font-weight: 500;color: #615c5c;text-align: left; ">{{'EMERGENCY CONTACT' |
        translate}}</span>
    
    <div class="collapse" id="collapseExample">
        <form [formGroup]="emergencyForm">
            <div class="row" style="margin:10px">
                <div class="col-6" style="border: solid 1px black;
        margin-top: 8px;">
                    <h6 style="text-align: center;margin-top: 10px;">Contact Details 1</h6>
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_name1" placeholder="{{'name' | translate}}"
                            name="name">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_cell1"
                            placeholder="{{'Mobile Number 1' | translate}}" name="emg_cell1">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_cell2"
                            placeholder="{{'Mobile Number 2' | translate}}" name="emg_cell2">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_phone1"
                            placeholder="{{'Phone Number 1' | translate}}" name="emg_phone1">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_phone2"
                            placeholder="{{'Phone Number 2' | translate}}" name="emg_phone2">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
                </div>
                <div class="col-6" style="border: solid 1px black;
        margin-top: 8px;">
                    <h6 style="text-align: center;margin-top: 10px;">Contact Details 2</h6>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_name2" placeholder="{{'name' | translate}}"
                            name="name">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_cell3"
                            placeholder="{{'Mobile Number 1' | translate}}" name="emg_cell1">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_cell4"
                            placeholder="{{'Mobile Number 2' | translate}}" name="emg_cell2">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_phone3"
                            placeholder="{{'Phone Number 1' | translate}}" name="emg_phone1">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" formControlName="emg_phone4"
                            placeholder="{{'Phone Number 2' | translate}}" name="emg_phone2">
                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
                    </md-form-field>
    
    
                </div>
    
    
            </div>
        </form>
    </div>

<div class="row" style="padding-left:38%">
    <button class="btn btn-primary btn-block/" (click)="editCustmer()"
        style="background:green;cursor:pointer;width: 159px;height: 44px;">EDIT CUSTOMER</button>
</div>
    <!-- </div> -->
  <!-- <div class="row">
      <span style="padding: 17px 0px 0px 10px;">{{'First name' | translate}}</span>
          <md-form-field class="example-full-width width" >
                  <input mdInput class="no-spin" [(ngModel)]="firstName" name="firstname" placeholder="Enter First name" required/>
                  <md-error class="required">{{'Enter First name' | translate}}</md-error>
              </md-form-field>
  </div> -->
  <!-- <div class="row">
          <span style="padding: 17px 0px 0px 10px;">{{'Last name' | translate}}</span>
          <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 67px;display: inline-block;">
                  <input mdInput class="no-spin" [(ngModel)]="lastName" name=" lastname" placeholder="{{'Enter Last name' | translate}}" required/>
                  <md-error class="required">{{'Enter Last name' | translate}}</md-error>
              </md-form-field>
  </div> -->
  <!-- <div class="row">
          <span style="padding: 17px 0px 0px 10px;">{{'Email' | translate}} </span>
          <md-form-field class="example-full-width width" style="float:left;width: 84%;padding-left: 98px;display: inline-block;">
                  <input mdInput class="no-spin" [(ngModel)]="email" name="email" placeholder="Enter email" required/>
                  <md-error class="required">{{'Enter email' | translate}}</md-error>
              </md-form-field>
  </div>
  <div class="row">         
          <span style="padding: 17px 0px 0px 10px;">{{'Mobile number' | translate}}</span>
          <md-form-field class="example-full-width width" style="float:left;width: 70%;padding-left: 30px;display: inline-block;">
                  <input mdInput class="no-spin" [(ngModel)]="PhoneNum" name=" phoneNum" placeholder="{{'Enter mobile number' | translate}}" required/>
                  <md-error class="required">{{'Enter mobile number' | translate}}</md-error>
              </md-form-field>
  </div> -->
  <!-- <div class="row">
          <span style="padding: 17px 0px 0px 10px;">Password </span>
          <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 69px;display: inline-block;">
                  <input mdInput class="no-spin" [(ngModel)]="password" name=" password" placeholder="Enter password" required/>
                  <md-error class="required">Enter password</md-error>
              </md-form-field>
  </div>

  <div class="row">
          <span style="padding: 17px 0px 0px 10px;">Confirm password </span>
          <md-form-field class="example-full-width width" style="float:left;width: 66%;padding-left: 30px;display: inline-block;">
                  <input mdInput class="no-spin" [(ngModel)]="cnfrmPass" name=" cnfrmPass" placeholder="Confirm password" required/>
                  <md-error class="required">Confirm password</md-error>
              </md-form-field>
  </div> -->
  <!-- <div style="display: inline-flex;width: 75%;" *ngIf="((superadminAccess == 'ON')||(this.superAdmin==true))">
        <span style="float: left;padding-bottom: 2px;margin-right: 58px;">{{'Expiration date' | translate}}</span>
        <owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
    </div>  -->
<!-- 
  <div class="row">
        <span style="padding: 17px 0px 0px 10px;">{{'Address' | translate}}</span>
        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 75px;display: inline-block;">
                <input mdInput class="no-spin" [(ngModel)]="address" name=" address" placeholder="{{'Enter Address' | translate}}" required/>
                <md-error class="required">{{'Enter Address' | translate}}</md-error>
            </md-form-field>
</div> -->
  <!-- <div class="row" style="padding-left:38%">  
              <button class="btn btn-primary btn-block/"(click)="editCustmer()" style="background:green;cursor:pointer;width: 159px;height: 44px;">EDIT CUSTOMER</button>
      </div> -->
      
  </div>  
  <div *ngIf="pageId == 'delete'">
        <h4 style="text-align: center;">{{alertLabel | translate}}</h4>
        <h5 style="text-align: center;margin-top: 5%;font-size: 1.8rem;">{{'Are you sure ?' | translate}}</h5>
        <p style="text-align: center;font-size: 1.5rem;">{{alertLabel_1 | translate}}</p>
        <button class="btn btn-primary btn-block/"(click)="deleteResponse('yes')" style="background:green;cursor:pointer;width: 159px;height: 44px;margin-left: 12%;">Yes, Delete it!</button>
        <button class="btn btn-primary btn-block/"(click)="deleteResponse('no')" style="background:red;cursor:pointer;width: 159px;height: 44px;margin-left: 6%;">{{'Cancel'}}</button>
 </div>
<div *ngIf="pageId == 'viewDoc'">
   <div class="loading" *ngIf="Load">Loading&#8230;</div> 
   <flash-messages></flash-messages>
    <h4 style="text-align: center;margin-bottom: 5%;">Documents
    <div class="float-right">
        <!-- <label style="font-size: medium;">KYC Status:</label>
        <select style="font-size:medium;" [(ngModel)]="data.dealer_payload.kycStatus" (ngModelChange)="changeKYC($event)">
            <option *ngFor="let item of kycStatus" [value]="item.Name">{{item.Name}}</option>
        </select> -->
        <!-- <button class="btn btn-danger" style="border-radius: 50%;background-color: red;font-size: small;" (click)="dialogRef.close()"><i class="fa fa-times" aria-hidden="true"></i></button> -->
    </div>
    </h4>
    <div [hidden]="doclist">
        <table id="test" class="table table-striped table-hover" style="overflow-y: hidden;overflow-x: hidden;font-size:12px">
            <thead style="background-color:#A2C523;color: white;">
                <tr>
                    <th>Document Name</th>
                    <th>Document number</th>
                    <th>Image</th>
                    <th style="text-align: center;padding-left: 10%;">Action</th>
            </thead>
            <tbody>
                <tr *ngFor="let doc of testDocuments; let i = index">
                    <td style="cursor:pointer">{{doc.doctype}}</td>
                    <td style="cursor:pointer">{{doc.phone}}</td>
                    <td>
                        <h4 *ngIf="doc.ext=='pdf'">
                            <a href={{doc.image}} target="_blank"><i class="fa fa-file-pdf"></i></a>
                        </h4>
                        <span *ngIf="doc.ext!='pdf'">
                            <img style="width: 100px;" [src]="'https://www.oneqlik.in/'+doc.image" (click)="openModal(template,doc)">
                        </span>
                        </td>
                    <td style="cursor:pointer">
                        <button class="btn btn-primary btn-block/" (click)="downloadDoc(doc)" style="background: green;cursor: pointer;float: right;border:none;">Download</button>
                        <!-- <button class="btn btn-primary btn-block/" [disabled]="disableDelete" (click)="SaveDocuments('deldoc',i)" style="background: #f90808;cursor: pointer;float: right;border-color: transparent;margin-right: 16px;border:none;">Delete</button> -->
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="row text-center mt-2" style="justify-content: center;">
            <!-- <button class="btn btn-primary m-1" (click)="Adddocuments(doc)">Add <i class="fa fa-plus-circle"></i></button> -->
            <button class="btn btn-success m-1" [disabled]="data.dealer_payload.kycStatus=='Approved'" (click)="changeKYC('Approved')">Approve <i class="fa fa-check-circle"></i></button>
            <button class="btn btn-danger m-1" [disabled]="data.dealer_payload.kycStatus=='Approved'" (click)="changeKYC('Reject')">Reject <i class="fa fa-times-circle"></i></button>

            <!-- <button class="btn btn-primary btn-block/" (click)="Adddocuments(doc)" style="background: green;cursor: pointer;border: none;width: 125px;margin-right: 43%;">Add</button>
            <button class="btn btn-primary btn-block/" (click)="changeKYC('Approved')"
                style="background: green;cursor: pointer;border: none;width: 125px;margin-right: 43%;">Approve</button>
                <button class="btn btn-primary btn-block/" (click)="changeKYC('Reject')"
                    style="background: green;cursor: pointer;border: none;width: 125px;margin-right: 43%;">Reject</button> -->
        </div>
    </div>
    <!-- <div [hidden]="!doclist">
        <button class="btn btn-primary btn-block/" (click)="Adddocuments(doc)" style="background: green;cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;">Add</button>
    </div> -->

   

    <!-- <div [hidden]="!showUpload" style="margin-top:12%">
    <div class="row">
            <div class = "col-sm-6">
                <p>Upload Documents * </p>
            </div>
            <div class = "col-sm-6">
                <button mdTooltip="upload Documents"  style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')"><md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button> 
            </div>
        </div>
        <div style="overflow: scroll;overflow-x: hidden;" [ngClass]="{'rowHeight':docRow}">
        <div class= "row" style="margin-bottom: 2%;" *ngFor="let data of imageuploadObject; let i = index">
            <div class="col-sm-2" >
                    <md-select (ngModelChange)="documentType($event)" [(ngModel)] = "data.doctype" placeholder = "Doc Type">
                      <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
                    </md-select>
            </div>
             <div class="col-sm-10" style="margin-top: 2%;">
                <input type="text" style ="margin-right: 2%;margin-left: 7px;" [(ngModel)]="data.phone" placeholder="Doc number">
                <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>
                <span><button mdTooltip="Delete field" style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="DeleteDocumentsField(i)"><md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon></button></span>
            </div>
        </div>
    </div>
    <button [disabled]="!ifuploadArr" class="btn btn-primary btn-block/" (click)="SaveDocuments(editdoc,null)" style="cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;">Save</button>
</div> -->
</div>
</div>


<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left">{{header}}</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        
        <img style="width: -webkit-fill-available;" src={{image}}>

    </div>
</ng-template>