<app-dns-loading [isDnsLoading]="isLoadingData"></app-dns-loading>
<div class="layout-container">
  <app-side-menu></app-side-menu>
  <div class="content-area">
    <app-main-header></app-main-header>
    <div class="container-fluid">
      <div class="row" style="padding-top: 100px;">
        <div class="col-sm-12" style="display: flex;">
          <svg (click)="goBack()" style="cursor: pointer;" width="24" height="25" viewBox="0 0 24 25" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M19 12.5H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M12 19.5L5 12.5L12 5.5" stroke="black" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
          <h3 style="margin-left:10px;font-weight: 500;">Verify Documents</h3>
        </div>
        <div>
          <section class="example-container" style="margin-top: 10px;">

            <table id="table1" mat-table [dataSource]="documentsListDataSource" matSort matSortActive="id"
              class="mat-elevation-z8">
              <ng-container matColumnDef="contactDocumentId">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
                <td mat-cell *matCellDef="let document">
                  {{document.contactDocumentId}}</td>
              </ng-container>

              <ng-container matColumnDef="fileName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Document</th>
                <td (click)="viewCurrentData(
                      document.documentType === 'Aadhaar' ? document.aadharDocument : 
                    
                      document.organisationIdDocument, 
                      document.documentType === 'Aadhaar' ? document.aadharNumber : 
              
                      document.organisationIdNumber,
                    document.fileName,
                    document.documentType ,document)" 
                  style="cursor: pointer;text-decoration: underline;color: blue;" mat-cell *matCellDef="let document">
                  {{document.fileName}}</td>
              </ng-container>

              <ng-container matColumnDef="documentType">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Document Type</th>
                <td mat-cell *matCellDef="let document">{{document.documentType}}</td>
              </ng-container>

              <!-- <ng-container matColumnDef="approveOrReject">
                <th mat-header-cell *matHeaderCellDef >Approve/Reject</th>
                <td style="cursor: pointer;text-decoration: underline;color: blue;" mat-cell *matCellDef="let document">
                  <div>
                    <span class="approved" data-target="#approveCommentModal"
                    [class.disabled]="orgDetails?.documentPreviewCompleted"
                      (click)="storeCurrentDocumentDetails(document)" data-toggle="modal">
                      <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect y="0.5" width="24" height="24" rx="2" fill="#C3FFC3" fill-opacity="0.5" />
                        <path
                          d="M15 19.25V17.75C15 16.9544 14.6839 16.1913 14.1213 15.6287C13.5587 15.0661 12.7956 14.75 12 14.75H6.75C5.95435 14.75 5.19129 15.0661 4.62868 15.6287C4.06607 16.1913 3.75 16.9544 3.75 17.75V19.25"
                          stroke="#008000" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M9.375 11.75C11.0319 11.75 12.375 10.4069 12.375 8.75C12.375 7.09315 11.0319 5.75 9.375 5.75C7.71815 5.75 6.375 7.09315 6.375 8.75C6.375 10.4069 7.71815 11.75 9.375 11.75Z"
                          stroke="#008000" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M15.75 11.75L17.25 13.25L20.25 10.25" stroke="#008000" stroke-linecap="round"
                          stroke-linejoin="round" />
                      </svg>
                    </span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span [class.disabled]="orgDetails?.documentPreviewCompleted"
                    class="rejected" data-target="#rejectCommentModal"
                    
                      (click)="storeCurrentDocumentDetails(document)" data-toggle="modal">
                      <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect y="0.5" width="24" height="24" rx="2" fill="#FF9393" fill-opacity="0.5" />
                        <path
                          d="M15 19.25V17.75C15 16.9544 14.6839 16.1913 14.1213 15.6287C13.5587 15.0661 12.7956 14.75 12 14.75H6.75C5.95435 14.75 5.19129 15.0661 4.62868 15.6287C4.06607 16.1913 3.75 16.9544 3.75 17.75V19.25"
                          stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M9.375 11.75C11.0319 11.75 12.375 10.4069 12.375 8.75C12.375 7.09315 11.0319 5.75 9.375 5.75C7.71815 5.75 6.375 7.09315 6.375 8.75C6.375 10.4069 7.71815 11.75 9.375 11.75Z"
                          stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M16.5 9.5L20.25 13.25" stroke="#FF0000" stroke-linecap="round"
                          stroke-linejoin="round" />
                        <path d="M20.25 9.5L16.5 13.25" stroke="#FF0000" stroke-linecap="round"
                          stroke-linejoin="round" />
                      </svg>
                    </span>
                  </div>
                </td>
              </ng-container> -->
              <ng-container matColumnDef="documentStatus">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
                <td mat-cell *matCellDef="let document">{{document.documentStatus?document.documentStatus:"NA"}}</td>
              </ng-container>
              <ng-container matColumnDef="comment">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Comment</th>
                <td mat-cell *matCellDef="let document">
                  <div class="wrap-container">
                    <span class="wrap-text">
                      {{document.comment?document.comment:"NA"}}
                    </span>
                </div>
                  </td>
              </ng-container>
              <ng-container matColumnDef="reUpload">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Reupload Document</th>
                <td mat-cell *matCellDef="let document">
                  <button class="btn btn-primary" 
                 
                   (click)="openFileReupload(document)"  >
                    Reupload
                  </button>
                </td>
              </ng-container>

              <!-- Header Row -->
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <!-- Data Rows -->
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </section>
          <mat-paginator style="font-size: 13px;" [pageSizeOptions]="[5, 10, 20 ]" showFirstLastButtons [pageSize]="10"
            aria-label="Select page of periodic elements">
          </mat-paginator>
          <input hidden (change)="handleTheDocument($event)" type="file" id="reUploadDocument">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- comments modal -->
<div class="modal" id="approveCommentModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" style="font-weight: 500; font-size: 14px; margin-bottom: 0px;">Approval comment</h5>
        <button type="button" id="closeApproveCommentModal" (click)="openTheApproveRejectModal()" (click)="clearComments()" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <textarea rows="5" cols="40" [(ngModel)]="documentComment"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary mr-3" (click)="approveOrRejectDocument('Approved')"  data-dismiss="modal">Save
          changes</button>
        <button type="button" class="btn btn-danger"  (click)="openTheApproveRejectModal()" (click)="clearComments()" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- comments modal -->
<div class="modal" id="rejectCommentModal" tabindex="-1" role="dialog" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" style="font-weight: 500; font-size: 14px; margin-bottom: 0px;">Rejection comment</h5>
        <button type="button" (click)="openTheApproveRejectModal()" id="closeRejectCommentModal" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <textarea rows="5" cols="40" [(ngModel)]="documentComment"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary mr-3" (click)="approveOrRejectDocument('Rejected')">Save
          changes</button>
        <button type="button" class="btn btn-danger" (click)="openTheApproveRejectModal()" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div data-target="#documentView" hidden id="viewTheRgntDocs" data-toggle="modal" ></div>
  <div class="modal" id="documentView" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document" style="max-width: 700px;">
    <div class="modal-content">
      <div class="modal-header" style=" background: #EDECFC;">
        <h5 class="modal-title" style="font-size: 16px; font-weight: 500;">{{modalTitle}} Document View</h5>
        <button type="button" id="closeApproveRejectModal" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p style="font-size: 16px; font-weight: 400; padding-bottom: 20px;"><span style="color:red">*</span> Check the user details and the document details</p>
        <br />
        <div style="display: flex; gap:20px;">
          <!-- <div>
            <h3>Details</h3>
            <p>Number : {{documentNumber}}</p>
          </div> -->
          <div  class="details-box" style="width: 280px;padding-left: 10px; padding-top: 10px; box-shadow: 0px 0px 4px 0px #80808040;
; border-radius: 5px; height:100px">
            <h3 style="color:#000000; font-size: 20px; font-weight: 400; margin-top: 5px;">User Details</h3>
            <p style="font-size: 16px; color:#000000; font-weight: 600; padding-top: 10px;">
              {{modalTitle}}
              <span *ngIf="modalTitle !== 'Organisation Id'" style="font-weight: 600; font-size: 16px; color:#000000;padding-top: 10px; ">
                Number : <span style="font-weight: normal;">{{documentNumber}}</span>
              </span>
            </p>
            
            
            
 </div>
          <div *ngIf="showImage===true">
            <img [src]="'data:image/png/jpg/jpeg;base64,'+binaryData" width="370px" height="320px" alt="document" />
          </div>
          <div *ngIf="showImage===false">
            <iframe [src]="viewTheDocsPdf" width="100%" height="500px"></iframe>
          </div>
        </div>
      </div>
        <div class="modal-footer" *ngIf="role==IDRBTADMIN">
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
         <button class="btn btn-primary" (click)="closeTheApproveRejectModal('Approve')"  
                              >Approve</button>&nbsp;&nbsp;
            <button class="btn btn-danger"(click)="closeTheApproveRejectModal('Reject')" 
                           >Reject</button>
      </div>
    </div>
  </div>
</div>
<div id="contactApproveComment" hidden data-target="#approveCommentModal" data-toggle="modal"></div>
<div  id="contactRejectComment" hidden  data-target="#rejectCommentModal" data-toggle="modal"></div>
<!-- <div hidden data-toggle="modal" class="modal fade" id="reuploadModel" data-target="#reuploadModal" data-backdrop="static"></div> -->
 <!-- <button hidden id="reuploadModel"
        data-bs-toggle="modal"
        data-bs-target="#reuploadModal"
        type="button">
</button> -->
<button hidden id="reuploadModel"
        data-toggle="modal"
        data-target="#reuploadModal"
        type="button">
</button>

  <div class="modal" id="reuploadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header" style="background-color: rgba(237, 236, 252, 1);padding-bottom:0px">
          <h5 class="modal-title" style="font-size: 16px; font-weight: 500;">{{docName}} Document</h5>
        
            <span aria-hidden="true" id="closeUploadModal" (click)="clearTheinpuErrors()" class="close" data-dismiss="modal" style="cursor: pointer;"  aria-label="Close">&times;</span>
       
        </div>
        <div class="modal-body">
            <div >
                <div style="margin-bottom: 20px;">
                   
               
                </div>
                <div class="modalcontainer">
                    <div class="row">
                        <div class="col-sm-7">
                            <input style="width: 100%;" *ngIf="docName!='Organization Identity Card'"(input)="  handleInputChange($event)" type="text" id="inputForDocs" [(ngModel)]="inputValue"   [maxlength]="getMaxLength()"
                              [attr.maxLength]="docName === 'Aadhaar' ? 14 : docName === 'PAN' ? 10 : null" 
                            (keydown)="preventInvalidInput($event)"  placeholder="Enter {{docName}} Number">
                            <span style="color:red">{{inputFieldError.message}}</span>
                            <!-- <div *ngIf="docErrors" style="color: red; ">
                              <p>{{ docErrors }}</p>
                            </div> -->
                        </div>
                        <div class="col-sm-5">
                            <button style="width: 100%;"   [disabled]="!inputValue && docName  !== 'Organization Identity Card' && inputFieldError.message!=''" (click)="triggerFileInput()">Upload Document</button>
                            <input type="file" #filesInput id="file-upload" accept=".pdf, .jpg, .jpeg" (change)="handleFileInput($event)">
                            <span style="color:red">{{docErrors}}</span>
                        </div>
                        <div *ngIf="uploadSuccessMessage" style="color: green; margin-top: 10px;">
                          <p>{{ uploadSuccessMessage }}</p>
                        </div>
                    </div>
                   
                    
                </div>
               
                
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" (click)="handleTheDocument($event)" class="btn btn-primary">Save</button>
          &nbsp;&nbsp;&nbsp;
          <button type="button" class="btn btn-danger" (click)="clear()" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>