

<div class="card" style="height: 90vh;">
  <div class="card-header">
    <h4>Documents</h4>

  </div>
  <div *ngIf="!hide" class="card-body" style="height: 80vh;
    overflow-y: scroll;">
    <div id="toast">
      <div id="desc">{{ data_descip }}</div>
    </div>
    <div class="loading" *ngIf="Load">Loading&#8230;</div>
    <table  class="table table-striped">
      <thead>
        <tr>
          <th>Image</th>
          <th>Doc Number</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of imageDoc">
          <td><img style="width: 100px;" [src]="'https://www.oneqlik.in'+item.image.substring(6)" (click)="openModal(template,item)"></td>
          <td>{{item.phone}}</td>
          <td>{{item.doctype}}</td>
        </tr>
      </tbody>
    </table>

  </div>
  <div  class="collapse" id="collapseExample">
    <div class="card card-body" *ngIf="!show">
     <table>
       <tr>
        <td>
          Vahan Certificate
        </td>
         <td>
           <input type="file" (change)="onFileChanged($event,'vahan')">
         </td>
        <!-- <td>
          <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" style="background: grey;height: 30px"
            placeholder="mm/dd/yyyy" [(ngModel)]="vaahan_certifcate_date" type="text" style="width: 40%">
        </td> -->
        <td>
          <button class="btn btn-primary btn-sm"  (click)="onUpload('vahan')"><i class="fas fa-upload"></i></button>
        </td>
       </tr>
        <tr>
          <td>
            State RTO Certificate
          </td>
          <td>
            <input type="file" (change)="onFileChanged($event,'state')">
          </td>
          <!-- <td>
            <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" style="background: grey;height: 30px"
              placeholder="mm/dd/yyyy" [(ngModel)]="state_certifcate_date" type="text" style="width: 40%">
          </td> -->
          <td>
            <button class="btn btn-primary btn-sm" (click)="onUpload('state')"><i class="fas fa-upload"></i></button>
          </td>
        </tr>
     </table>
     <div class="text-center">
      <button class="btn btn-primary" (click)="submit()">Submit</button>
     </div>
    </div>
    <div class="card card-body" *ngIf="show"> 
      <table  class="table table-striped">
        
          <thead>
            <tr>
              <th>Name</th>
              <th>Image</th>
              <th>Date</th>
            </tr>
          </thead>
          <tr>
            <td>State RTO Certificate</td>
            <td>
              <img style="width: 100px;" [src]="'https://www.oneqlik.in'+statePic.substring(6)"
                (click)="openModal1(template,statePic.substring(6))">
              </td>
            <td>
             {{state_certifcate_date |date:"medium"}}
            </td>
          
          </tr>
          <tr>
            <td>Vahan Certificate</td>
            <td>
              <img style="width: 100px;" [src]="'https://www.oneqlik.in'+vahanPic.substring(6)"
                (click)="openModal1(template,vahanPic.substring(6))">
            </td>
            <td>
              {{vaahan_certifcate_date |date:"medium"}}
            </td>
          </tr>
       
      </table>
    </div>
  </div>
<div *ngIf="hide && show" class="card-body">
  <table class="table table-striped">
   
      <thead>
        <tr>
          <th>Name</th>
          <th>Image</th>
          <th>Date</th>
          <th>Download</th>
        </tr>
      </thead>
      <tr>
        <td>State RTO Certificate</td>
        <td>
          <img style="width: 100px;" [src]="'https://www.oneqlik.in'+statePic.substring(6)"
            (click)="openModal1(template,statePic.substring(6))">
        </td>
        <td>
          {{state_certifcate_date |date:"medium"}}
        </td>
        <td>
          <a (click)="downloadImage('https://www.oneqlik.in'+statePic.substring(6),'State_RTO_Certificate.jpg')" class="btn btn-primary btn-sm"><i class="fas fa-download"></i></a>
        </td>
  
      </tr>
      <tr>
        <td>Vahan Certificate</td>
        <td>
          <img style="width: 100px;" [src]="'https://www.oneqlik.in'+vahanPic.substring(6)"
            (click)="openModal1(template,vahanPic.substring(6))">
        </td>
        <td>
          {{vaahan_certifcate_date |date:"medium"}}
        </td>
        <td>
          <a (click)="downloadImage('https://www.oneqlik.in'+vahanPic.substring(6),'Vahan_Certificate.jpg')" class="btn btn-primary btn-sm" ><i class="fas fa-download"></i></a>
        </td>
      </tr>
    
  </table>

</div>
<div *ngIf="hide && !show" class="text-center">
  <h4>Documents Not Uploaded</h4>
</div>

  <div class="card-footer float-right">
    <button *ngIf="!hide" class="btn btn-primary" [disabled]='disabled' (click)="submit1('approved')">Approve</button>
    <button *ngIf="!hide" class="btn btn-danger" [disabled]='disabled' (click)="submit1('reject')">Reject</button>
    <button class="btn btn-warning" md-dialog-close>Cancel</button>
    <button *ngIf="!hide" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
      aria-expanded="false" aria-controls="collapseExample">
      {{title}}
    </button>
  </div>

</div>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">{{titleForDoc}}</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 row">
    <div class="col-md-6">
      <img style="width: -webkit-fill-available;" src={{image}}>

    </div>
    <div class="col-md-6" style="padding: 64px;font-size: larger;">
      <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr >
            <th *ngFor="let item of key;">
              {{item}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr >
            <td *ngFor="let item of value;index as i">
              {{value[i]}}
            </td>
          </tr>
        </tbody>

      </table>
      </div>
      <!-- <div class="col" *ngFor="let item of key; let i = index">
        <b>{{ key[i]}}</b> : {{value[i]}}
      </div> -->
    
    </div>


  </div>
</ng-template>

