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

  </div>
  <ng-container *ngIf="!data.isTag">
    <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>
            <td class="d-none">
              {{imageDoc | json }}
            </td>
          </tr>
          <tr *ngFor="let item of imageDoc">

            <td *ngIf="hasPdfFile(item.image); else pdfSection11">
              <a target="_blank" [href]="'https://www.oneqlik.in'+item.image.substring(6)">
                <i class="fas fa-file-pdf fa-3x pl-4"></i>
              </a>
            </td>
            <ng-template #pdfSection11>

              <td>
                <img *ngIf="item.image ; else notAvaillableImg" style="width: 100px;"
                  [src]="'https://www.oneqlik.in'+item.image.substring(6)" (click)="openModal(template,item,data)">
                <ng-template #notAvaillableImg>Not Available</ng-template>

              </td>
            </ng-template>

            <td>{{item.phone}}</td>
            <td>{{item.doctype}}</td>
          </tr>
        </tbody>
      </table>

    </div>
  </ng-container>
  <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 class="db-71">
            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>
        <!-- <tr>
          <td>Renewal Certificate</td>


          <td>
            <input type="file" (change)="onFileChanged($event,'renew')">
          </td>

          <td>
            <button class="btn btn-primary btn-sm" (click)="onUpload('renew')"><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 && !data.isTag">
      <table class="table table-striped">

        <thead>
          <tr>
            <th>Name</th>
            <th>Image</th>
            <th>Date</th>
            <th>Upload</th>
          </tr>
        </thead>
        <tr>
          <td class="db-101">State RTO Certificate</td>



          <td *ngIf="hasPdfFile(statePic); else pdfSection7">
            <a target="_blank" [href]="'https://www.oneqlik.in'+statePic.substring(6)">
              <i class="fas fa-file-pdf fa-2x pl-4"></i>
            </a>
          </td>
          <ng-template #pdfSection7>

            <td>
              <img *ngIf="statePic ; else notAvaillableImg" style="width: 100px;"
                [src]="'https://www.oneqlik.in'+statePic.substring(6)"
                (click)="openModal1(template,statePic.substring(6))">
              <ng-template #notAvaillableImg>Not Available</ng-template>

            </td>
          </ng-template>

          <td>
            {{state_certifcate_date |date:"medium"}}
          </td>
          <td>
            <input type="file" (change)="onFileChanged($event,'state')">
            <button class="btn btn-primary btn-sm" (click)="onUpload('state')"><i class="fas fa-upload"></i></button>

          </td>

        </tr>
   
        <tr>
          <td>Vahan Certificate</td>


          <td *ngIf="hasPdfFile(vahanPic); else pdfSection9">
            <a target="_blank" [href]="'https://www.oneqlik.in'+vahanPic.substring(6)">
              <i class="fas fa-file-pdf  fa-2x pl-4 "></i>
            </a>
          </td>
          <ng-template #pdfSection9>

            <td>
              <img *ngIf="vahanPic ; else notAvaillableImg" style="width: 40px;height: 35px;"
                [src]="'https://www.oneqlik.in'+vahanPic.substring(6)"
                (click)="openModal1(template,vahanPic.substring(6))">
              <ng-template #notAvaillableImg>Not Available</ng-template>

            </td>
          </ng-template>

          <td>
            {{vaahan_certifcate_date |date:"medium"}}
          </td>

          <td>
            <input type="file" (change)="onFileChanged($event,'vahan')">
            <button class="btn btn-primary btn-sm" (click)="onUpload('vahan')"><i class="fas fa-upload"></i></button>

          </td>
        </tr>
        <!-- <tr>
          <td>Renewal Certificate</td>


          <td *ngIf="hasPdfFile(renewPic); else pdfSection5">
            <a target="_blank" [href]="'https://www.oneqlik.in'+renewPic.substring(6)">
              <i class="fas fa-file-pdf fa-2x pl-4 "></i>
            </a>
          </td>
          <ng-template #pdfSection5>

            <td>
              <img *ngIf="renewPic ; else notAvaillableImg" style="width: 40px;height: 35px;"
                [src]="'https://www.oneqlik.in'+renewPic.substring(6)"
                (click)="openModal1(template,renewPic.substring(6))">
              <ng-template #notAvaillableImg>Not Available</ng-template>

            </td>
          </ng-template>

          <td>
            {{renew_certificate_date |date:"medium"}}
          </td>

          <td>
            <input type="file" (change)="onFileChanged($event,'renew')">
            <button class="btn btn-primary btn-sm" (click)="onUpload('renew')"><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>
  <ng-container *ngIf="!data.isTag">
    <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 class="db-170">State RTO Certificate </td>


          <td *ngIf="hasPdfFile(statePic); else pdfSection1">
            <a target="_blank" [href]="'https://www.oneqlik.in'+statePic.substring(6)">
              <i class="fas fa-file-pdf fa-2x"></i>
            </a>
          </td>
          <ng-template #pdfSection1>

            <td>
              <img *ngIf="statePic ; else notAvaillableImg" style="width: 40px;height: 35px;"
                [src]="'https://www.oneqlik.in'+statePic.substring(6)"
                (click)="openModal1(template,statePic.substring(6))">
              <ng-template #notAvaillableImg>Not Available</ng-template>

            </td>
          </ng-template>

          <td class="db-170">
            {{state_certifcate_date |date:"medium"}}
          </td>
          <td *ngIf="hasPdfFile(statePic); else pdfSection2">
            <a target="_blank" [href]="'https://www.oneqlik.in'+statePic.substring(6)">
              <i class="fas fa-download"></i>
            </a>
          </td>
          <ng-template #pdfSection2>

            <td>
              <a (click)="downloadImage('https://www.oneqlik.in'+statePic.substring(6),'State_RTO_Certificate.jpg')"><i
                  class="fas fa-download"></i></a>
            </td>
          </ng-template>

          <td>
        </tr>
        <tr>
          <td class="db-170">Vahan Certificate</td>


          <td *ngIf="hasPdfFile(vahanPic); else pdfSection3">
            <a target="_blank" [href]="'https://www.oneqlik.in'+vahanPic.substring(6)">
              <i class="fas fa-file-pdf fa-2x "></i>
            </a>
          </td>
          <ng-template #pdfSection3>

            <td>
              <img *ngIf="vahanPic ; else notAvaillableImg" style="width: 40px;height: 35px;"
                [src]="'https://www.oneqlik.in'+vahanPic.substring(6)"
                (click)="openModal1(template,vahanPic.substring(6))">
              <ng-template #notAvaillableImg>Not Available</ng-template>

            </td>
          </ng-template>

          <td>
            {{vaahan_certifcate_date |date:"medium"}}
          </td>

          <td *ngIf="hasPdfFile(vahanPic); else pdfSection4">
            <a target="_blank" [href]="'https://www.oneqlik.in'+vahanPic.substring(6)">
              <i class="fas fa-download"></i>
            </a>
          </td>
          <ng-template #pdfSection4>

            <td>
              <a (click)="downloadImage('https://www.oneqlik.in'+vahanPic.substring(6),'Vahan_Certificate.jpg')"><i
                  class="fas fa-download"></i></a>
            </td>
          </ng-template>
        </tr>
        <!-- <tr *ngIf="renewPic">
          <td>Renewal Certificate</td>


          <td *ngIf="hasPdfFile(renewPic); else pdfSection10">
            <a target="_blank" [href]="'https://www.oneqlik.in'+renewPic.substring(6)">
              <i class="fas fa-file-pdf fa-2x "></i>
            </a>
          </td>
          <ng-template #pdfSection10>

            <td>
              <img *ngIf="renewPic ; else notAvaillableImg" style="width: 40px;height: 35px;"
                [src]="'https://www.oneqlik.in'+renewPic.substring(6)"
                (click)="openModal1(template,renewPic.substring(6))">
              <ng-template #notAvaillableImg>Not Available</ng-template>

            </td>
          </ng-template>

          <td>
            {{renew_certificate_date |date:"medium"}}
          </td>

          <td *ngIf="hasPdfFile(renewPic); else pdfSection6">
            <a target="_blank" [href]="'https://www.oneqlik.in'+renewPic.substring(6)">
              <i class="fas fa-download"></i>
            </a>
          </td>
          <ng-template #pdfSection6>

            <td>
              <a (click)="downloadImage('https://www.oneqlik.in'+renewPic.substring(6),'Renewal_Certificate.jpg')"><i
                  class="fas fa-download"></i></a>
            </td>
          </ng-template>
        </tr> -->
      </table>

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

      <h4>Documents Not Uploaded</h4>
    </div>
  </ng-container>

  <div class="card-footer float-right">
    <ng-container *ngIf="!data.isTag">
      <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>
    </ng-container>
    <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 db-283">
    <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 db-289">
    <!--   <div class="col-md-6">
      <img style="width: -webkit-fill-available;" src={{image}}>

    </div> -->
    <div class="col-md-6">
      <div class="zoom" [attr.aria-label]="image" [attr.data-imgurl]="image" (mousemove)="zoom($event)"
        style="background-image: url({{image}})">
        <img [src]="image" />
      </div>
    </div>

    <div class="col-md-6" style="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 *ngFor="let item of value;index as i">
              <th>
                {{key[i]}}
              </th>
              <td>
                {{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>