<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">
        <div class="col-sm-12">
          <div class="content-wrapper">
            <div class="header-content">

              <svg (click)="cancelDomain()" 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="font-family: Roboto; font-size: 24px;">Application Details</h3>
            </div>
            <div class="details-container">
              <div class="detail-item">
                <p style="font-family: Roboto; font-size: 20px;">Organisation Id</p>
                <div class="box-content">{{domainsList?.domainId}}</div>
              </div>
              <div class="detail-item">
                <p style="font-family: Roboto; font-size: 20px;">Application Status</p>
                <div class="box-content">
                  <p [ngStyle]="{'color': getStatusColor(domainsList?.applicationStatus)}">
                    {{domainsList?.applicationStatus}}</p>
                </div>
              </div>
              <div class="detail-item">
                <p style="font-family: Roboto; font-size: 20px;">Submission Date</p>
                <div class="box-content">{{domainsList?.submissionDate|date:'MMM d, y, h:mm a'}}</div>
              </div>
            </div>

            <div class="row">
              <div class="main col-6 pe-3">
                <div class="card card-equal-height">
                  <div class="row">
                    <div class="col-sm-9">
                      <h4 style="font-family: Roboto; font-size: 20px; color:#000000"> Entity Details</h4>
                    </div>
                    <div class="col-sm-3 justify-content-end d-flex">
                    </div>
                  </div>
                  <div class="first">
                    <h5 style="font-size: 16px; color:#000000">Entity Id </h5>

                    <div class="input-group">
                      <input type="text" [value]="organizationsList?.organisationDetailsId" class="form-control"
                        disabled="true" />
                    </div>
                    <h5 style="font-size: 16px; color:#000000">Entity Name </h5>

                    <div class="input-group">
                      <input type="text" [value]="organizationsList?.institutionName"
                        placeholder="Enter your Entity Name" class="form-control" disabled="true" />
                    </div>
                    <div class="pin-page" style="display: flex; gap: 10px; align-items: center; ">
                      <!-- Pincode Input Section -->
                      <div style="flex: 3;">
                        <h5 style="font-size: 16px; color:#000000;">Pincode</h5>
                        <input type="text" class="form-control"
                          [ngStyle]="{ 'margin-bottom': (pincode?.invalid && (pincode?.touched || pincode?.dirty)) && !pincodeError  ? '0px' : '0px' }"
                          placeholder="Enter a pin code" [(ngModel)]="organizationsList.pincode"
                          (input)="onPincodeChange()" maxlength="6" name="pincode" #pincode="ngModel" required
                          pattern="^\d{6}$" disabled="true" />
                      </div>

                      <!-- City Input Section -->
                      <div style="flex: 3;">
                        <h5 style="font-size: 16px; color:#000000">Location</h5>
                        <select class="form-control"
                          [ngStyle]="{ 'margin-bottom': styleForCityAndState? '0px' : '0px' }"
                          [(ngModel)]="organizationsList.city" [disabled]="true">
                          <!-- [disabled]="!cityOptions.length" -->
                          <option value="" disabled>Select a location</option>
                          <option *ngFor="let city of cityOptions" [value]="city.name">
                            {{ city.name }}
                          </option>
                        </select>
                      </div>

                      <div style="flex: 3;">
                        <h5 style="font-size: 16px; color:#000000">City/District</h5>
                        <select class="form-control"
                          [ngStyle]="{ 'margin-bottom': styleForCityAndState? '0px' : '0px' }"
                          [(ngModel)]="organizationsList.district" [disabled]="true">
                          <!-- [disabled]="!cityOptions.length" -->
                          <option value="" disabled>Select a location</option>
                          <option *ngFor="let city of getUniqueDistricts()" [value]="city">
                            {{ city }}
                          </option>
                        </select>
                      </div>

                      <!-- State Input Section -->
                      <div style="flex: 3;">
                        <h5 style="font-size: 16px; color:#000000">State</h5>
                        <input type="text" class="form-control"
                          [ngStyle]="{ 'margin-bottom': styleForCityAndState ? '0px' : '0px' }"
                          placeholder="Enter a state" [(ngModel)]="organizationsList.state" [disabled]="true" readonly
                          required />
                        <!-- [disabled]="!cityOptions.length" -->
                      </div>
                    </div>

                    <div *ngIf="pincodeError" class="error-message" style="margin-top: 5px;">
                      <p>{{ pincodeError }}</p>
                    </div>

                    <!-- Default Angular Form Validation Errors -->
                    <div *ngIf="pincode.invalid && (pincode.touched || pincode.dirty) && !pincodeError"
                      class="error-message" style="margin-top: 5px; color: red;">
                      <p *ngIf="pincode.errors?.['required']">Pincode is required.</p>
                      <p *ngIf="pincode.errors?.['pattern']">Pincode must be exactly 6 digits.</p>
                    </div>
                    <h5 style="font-size: 16px; color:#000000;padding-top:15px;">Address</h5>
                    <div class="input-group">
                      <input type="text" [disabled]="true" placeholder="Enter your Address 1" class="form-control"
                        [ngStyle]="{ 'margin-bottom': address.invalid || address.touched ? '0px' : '0px' }"
                        [(ngModel)]="organizationsList.address" name="address"
                        (keypress)="preventConsecutiveSpacesAndSpecialChar($event, address)" minlength="5"
                        maxlength="300" required #address="ngModel" />

                      <div *ngFor="let organization of organizationsList">
                        <p>{{ organization?.address }}</p>
                      </div>
                    </div>
                    <div *ngIf="address.invalid && (address.touched || address.dirty)" class="error-message"
                      style="padding-top: 5px;">
                      <p *ngIf="address.errors?.['required']">Address is required.</p>
                      <p *ngIf="address.errors?.['minlength']">Address must be at least 5 characters long.</p>
                      <p *ngIf="address.errors?.['maxlength']">Address cannot exceed 300 characters.</p>
                      <p *ngIf="address.errors?.['startWithSpecialChar']">Address cannot start with a special character.
                      </p>
                    </div>

                    <h5 style="font-size: 16px; color:#000000; padding-top: 15px;">Entity Email ID</h5>
                    <div>
                      <input type="email" placeholder="Enter your Email id" class="form-control"
                        (input)="onEmailInput($event)" [disabled]="true"
                        [(ngModel)]="organizationsList.organisationEmail"
                        [ngStyle]="{ 'margin-bottom': orgEmailError ? '5px' : '24px' }" />
                      <div *ngFor="let organization of organizationsList">
                        <p>{{ organization?.organisationEmail }}</p>
                      </div>
                    </div>
                    <div *ngIf="orgEmailError" class="error-message">
                      <div>{{ orgEmailError }}</div>
                    </div>
                    <div class="row">
                      <div class="col-6">
                        <label style="font-size: 14px;">STD Telephone</label>

                        <div class="std-input-wrapper">
                          <!-- STD Code (read-only) -->
                          <input type="text" class="form-control std-code-input"
                            [value]="organizationsList.stdCode || '—'" disabled
                            style="border-top-right-radius: 0; border-bottom-right-radius: 0;" />

                          <!-- Telephone number (read-only) -->
                          <input type="text" class="form-control std-phone-input"
                            [value]="organizationsList.stdTelephone || '—'" disabled
                            style="border-top-left-radius: 0; border-bottom-left-radius: 0;" />
                        </div>
                      </div>

                      <div class="col-6">
                        <label style="font-size: 14px;">Mobile Number</label>

                        <div class="mobile-input-wrapper">
                          <!-- Country code (read-only box) -->
                          <input type="text" class="form-control" [value]="organizationsList.countryCode || '—'"
                            disabled
                            style="flex: 0 0 110px; border-top-right-radius: 0; border-bottom-right-radius: 0;" />

                          <!-- Mobile number (read-only box) -->
                          <input type="text" class="form-control" [value]="organizationsList.mobileNumber || '—'"
                            disabled style="flex: 1; border-top-left-radius: 0; border-bottom-left-radius: 0;" />
                        </div>
                      </div>
                    </div>

                    <div *ngFor="let admin of usersList; let i = index">
                      <div>


                        <div class="admin-details-container">

                          <div class="user-field-group">
                            <label class="font-size"> Super Admin {{ i + 1 }}</label>
                            <input class="form-control text-input" disabled [value]="admin.userName" readonly>
                          </div>
                          <div class="user-field-group">
                            <label class="font-size">Mobile Number</label>
                            <input class="form-control text-input" disabled [value]="admin.mobileNumber" readonly>
                          </div>

                          <div class="user-field-group">
                            <label class="font-size">Email</label>
                            <input class="form-control text-input" disabled [value]="admin.userId" readonly>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="input-group">
                      <div style="display:flex;justify-content: left;gap: 10px;" *ngIf="domainsList.isOnboardingDomain && domainsList.applicationStatus=='Submitted' && 
      (domainsList.paymentStatus !=='Payment Completed' && 
     domainsList.paymentStatus !=='Payment Approved' 
     && domainsList.paymentStatus != 'Payment Under Review')">
                        <div style="padding-top: 10px; padding-bottom: 10px;">
                          <span style="color: #28a745;font-size: 14px;">Please Check for Tier 1 or Tier 2 Cooperative
                            Bank for Charge deduction</span>

                        </div>
                        <div style="padding-top: 12px;">
                          <input type="checkbox" [(ngModel)]="domainsList.isCooperativeBank"
                            (change)="updateDomainBasedOnisCoOperativeBank()">
                        </div>
                      </div>


                    </div>

                  </div>
                </div>
                <br />
                <!-- <div class="card">
                  <div class="row">
                    <div class="col-4">
                      <h5 style="font-size: 16px; color:#000000">Payment Status</h5>
                      <div>
                        <select class="form-control" [disabled]="paymentButtonDisabled"
                          [(ngModel)]="domainsList.paymentStatus" (ngModelChange)="onPaymentStatusChange()">
                          <option value="" disabled selected>Select Status</option>
                          <option hidden value="Payment Completed">Payment Completed</option>
                          <option hidden value="Payment Not Done">Payment Not Done</option>
                          <option hidden value="Payment Rejected">Payment Rejected</option>
                          <option hidden value="Payment Approved">Payment Approved</option>
                          <option hidden value="Payment Under Review">Payment Under Review</option>
                          <option value="Ready For Payment">Ready For Payment</option>
                          <option value="Payment Failed">Payment Failed</option>
                          <option value="Payment Cancelled">Payment Cancelled</option>
                          <option value="Payment Aborted">Payment Aborted</option>
                        </select>
                      </div>

                    </div>



                    <div class="col-4">
                      <h5 style="font-size: 16px; color:#000000">NS Status</h5>
                      [disabled]="domainsList.paymentStatus !== 'Payment Approved'"
                      <select class="form-control " (change)="updateDomainStatus(domainsList.nsRecordStatus)"
                        [(ngModel)]="domainsList.nsRecordStatus" disabled>
                        <option value="" disabled selected>Select Status</option>
                        <option value="OnHold">On Hold</option>
                        <option value="Inprogress">Inprogress</option>
                        <option value="Approved">Approved</option>
                        <option value="Rejected">Rejected</option>
                      </select>
                    </div>

                    <div class="col-4">
                      <h5 style="font-size: 16px; color:#000000">Domain Status</h5>
                      <div>
                        <select class="form-control" [(ngModel)]="domainsList.status" disabled>
                          <option value="" disabled selected>Select Status</option>
                          <option *ngFor="let status of status" [value]="status">{{ status }}</option>
                          <option value="Active">Active</option>
                          <option value="Inactive">Inactive</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="domainsList?.paymentStatus === 'Payment Failed' || 
                                        domainsList?.paymentStatus === 'Payment Aborted'||
                                        domainsList?.paymentStatus === 'Payment Cancelled'||
                                        domainsList?.paymentStatus === 'Ready For Payment' ||
                                        domainsList?.paymentStatus === 'Payment Rejected'">
                    <input type="checkbox" [checked]="domainsList.markPaymentCompleted"
                      (change)="markPaymentCompleted($event, domainsList)">
                    &nbsp;Mark as Payment Completed

                  </div>
                  <div class="card"
                    *ngIf="domainsList?.paymentStatus=='Payment Under Review'||domainsList?.paymentStatus=='Payment Approved'">
                    <div>
                      <div style="display:flex;flex-direction:row">
                        <div>
                          <svg width="30" height="30" viewBox="0 0 40 40" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                              d="M34 0H6C4.4087 0 2.88258 0.632141 1.75736 1.75736C0.632141 2.88258 0 4.4087 0 6V34C0 35.5913 0.632141 37.1174 1.75736 38.2426C2.88258 39.3679 4.4087 40 6 40H34C34.329 39.9954 34.6569 39.962 34.98 39.9L35.58 39.76H35.72H35.82L36.56 39.48L36.82 39.34C37.02 39.22 37.24 39.12 37.44 38.98C37.7071 38.7835 37.9609 38.5697 38.2 38.34L38.34 38.16C38.5364 37.961 38.7169 37.747 38.88 37.52L39.06 37.26C39.1997 37.0373 39.3201 36.8032 39.42 36.56C39.4749 36.464 39.5217 36.3637 39.56 36.26C39.66 36.02 39.72 35.76 39.8 35.5V35.2C39.9134 34.8092 39.9805 34.4064 40 34V6C40 4.4087 39.3679 2.88258 38.2426 1.75736C37.1174 0.632141 35.5913 0 34 0ZM6 36C5.46957 36 4.96086 35.7893 4.58579 35.4142C4.21071 35.0391 4 34.5304 4 34V25.38L10.58 18.78C10.7659 18.5925 10.9871 18.4438 11.2308 18.3422C11.4746 18.2407 11.736 18.1884 12 18.1884C12.264 18.1884 12.5254 18.2407 12.7692 18.3422C13.0129 18.4438 13.2341 18.5925 13.42 18.78L30.62 36H6ZM36 34C35.9981 34.2466 35.9507 34.4907 35.86 34.72C35.8143 34.8175 35.7608 34.9111 35.7 35C35.6465 35.0847 35.5863 35.1649 35.52 35.24L24.82 24.54L26.58 22.78C26.7659 22.5925 26.9871 22.4438 27.2308 22.3422C27.4746 22.2407 27.736 22.1884 28 22.1884C28.264 22.1884 28.5254 22.2407 28.7692 22.3422C29.0129 22.4438 29.2341 22.5925 29.42 22.78L36 29.38V34ZM36 23.72L32.24 20C31.0954 18.914 29.5778 18.3086 28 18.3086C26.4222 18.3086 24.9046 18.914 23.76 20L22 21.76L16.24 16C15.0954 14.914 13.5778 14.3086 12 14.3086C10.4222 14.3086 8.90456 14.914 7.76 16L4 19.72V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H34C34.5304 4 35.0391 4.21071 35.4142 4.58579C35.7893 4.96086 36 5.46957 36 6V23.72ZM23 8C22.4067 8 21.8266 8.17595 21.3333 8.50559C20.8399 8.83524 20.4554 9.30377 20.2284 9.85195C20.0013 10.4001 19.9419 11.0033 20.0576 11.5853C20.1734 12.1672 20.4591 12.7018 20.8787 13.1213C21.2982 13.5409 21.8328 13.8266 22.4147 13.9424C22.9967 14.0581 23.5999 13.9987 24.1481 13.7716C24.6962 13.5446 25.1648 13.1601 25.4944 12.6667C25.8241 12.1734 26 11.5933 26 11C26 10.2044 25.6839 9.44129 25.1213 8.87868C24.5587 8.31607 23.7956 8 23 8Z"
                              fill="#747474" />
                          </svg>
                        </div>
                        <div style="margin-left: 10px;">
                          <p style="text-decoration: underline;cursor: pointer;color:rgba(0, 124, 248, 1);font-size: 1rem;padding-top:5px"
                            (click)="viewThePaymentReceipt(domainsList.paymentReceipt,domainsList.paymentReceiptName)">
                            View Payment Receipt
                          </p>
                        </div>
                        <div data-toggle="modal" id="viewThePaymentRecipt" hidden data-target="#viewThePaymentReciept">
                        </div>
                      </div>

                    </div>
                  </div>


                </div> -->
              </div>

              <div class="main col-6 ps-3">

                <div *ngIf="domainsList.bankName.length === 2">
                  <div class="card">
                    <h4 style="font-family: Roboto; font-size: 20px; color:#000000"> Two Letter Domain Board Approval
                      Document</h4>
                    <!-- <img *ngIf="domainsList?.twoLetterDomainDocumentProof"
                     [src]="'data:image/png/jpg/jpeg;base64,'+domainsList.twoLetterDomainDocumentProof" alt="Document Proof" width="200"
                      height="200"> -->
                    Domain Board Approval Document
                    <div class="card" style="margin-bottom: 10px;padding: 10px;">
                      <div style="display:flex;justify-content: space-between;">
                        <div style="text-align: center;">
                          <svg width="16" height="16" viewBox="0 0 22 25" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                              d="M20.3749 5.58929C20.6249 5.83929 20.8392 6.17857 21.0178 6.60714C21.1964 7.03571 21.2857 7.42857 21.2857 7.78571V23.2143C21.2857 23.5714 21.1607 23.875 20.9107 24.125C20.6607 24.375 20.3571 24.5 19.9999 24.5H1.99995C1.6428 24.5 1.33923 24.375 1.08923 24.125C0.839233 23.875 0.714233 23.5714 0.714233 23.2143V1.78571C0.714233 1.42857 0.839233 1.125 1.08923 0.875C1.33923 0.625 1.6428 0.5 1.99995 0.5H13.9999C14.3571 0.5 14.7499 0.589286 15.1785 0.767857C15.6071 0.946429 15.9464 1.16071 16.1964 1.41071L20.3749 5.58929ZM14.4285 2.32143V7.35714H19.4642C19.3749 7.09821 19.2767 6.91518 19.1696 6.80804L14.9776 2.61607C14.8705 2.50893 14.6874 2.41071 14.4285 2.32143ZM19.5714 22.7857V9.07143H13.9999C13.6428 9.07143 13.3392 8.94643 13.0892 8.69643C12.8392 8.44643 12.7142 8.14286 12.7142 7.78571V2.21429H2.42852V22.7857H19.5714Z"
                              fill="#747474" />
                          </svg>
                          <!-- <div (click)="reuploadOrgDocs('Domain Board Approval')" class="tooltip-container"
                            style="cursor: pointer;color: #007CF8;text-decoration: underline; padding-left: 5px;"
                            onmouseover="showTooltip()" onmouseout="hideTooltip()">Reupload
                            <div class="tooltip" id="myTooltip">Click to reupload the document</div>
                          </div> -->
                          <!-- <span *ngIf="orgGstStatus != 'Rejected'" (click)="viewDocuments('GSTIN')"  class="ClickDisplayDoc" >GSTIN</span> -->
                          <span (click)="viewDocuments('Domain Board Approval')" class="ClickDisplayDoc">Domain Board
                            Approval Document</span>
                        </div>
                        <div class="status" [ngClass]="{
                                                            'rejected': domainsList.twoLetterDomainDocumentApprovalStatus === 'Rejected',
                                                            'approved':  domainsList.twoLetterDomainDocumentApprovalStatus === 'Approved',
                                                            'notReviewed':  domainsList.twoLetterDomainDocumentApprovalStatus === 'Not Reviewed'
                                                            || domainsList.twoLetterDomainDocumentApprovalStatus === null
                                                          }">
                          {{domainsList.twoLetterDomainDocumentApprovalStatus?
                          domainsList.twoLetterDomainDocumentApprovalStatus:'Not Reviewed'}}
                        </div>

                      </div>


                    </div>
                  </div><br />

                </div>

                <div class="card">
                  <h4 style="font-family: Roboto; font-size: 20px; color:#000000"> Entity Documents</h4>

                  GSTIN
                  <div class="card" style="margin-bottom: 10px;padding: 10px;">
                    <div style="display:flex;justify-content: space-between;">
                      <div style="text-align: center;">
                        <svg width="16" height="16" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M20.3749 5.58929C20.6249 5.83929 20.8392 6.17857 21.0178 6.60714C21.1964 7.03571 21.2857 7.42857 21.2857 7.78571V23.2143C21.2857 23.5714 21.1607 23.875 20.9107 24.125C20.6607 24.375 20.3571 24.5 19.9999 24.5H1.99995C1.6428 24.5 1.33923 24.375 1.08923 24.125C0.839233 23.875 0.714233 23.5714 0.714233 23.2143V1.78571C0.714233 1.42857 0.839233 1.125 1.08923 0.875C1.33923 0.625 1.6428 0.5 1.99995 0.5H13.9999C14.3571 0.5 14.7499 0.589286 15.1785 0.767857C15.6071 0.946429 15.9464 1.16071 16.1964 1.41071L20.3749 5.58929ZM14.4285 2.32143V7.35714H19.4642C19.3749 7.09821 19.2767 6.91518 19.1696 6.80804L14.9776 2.61607C14.8705 2.50893 14.6874 2.41071 14.4285 2.32143ZM19.5714 22.7857V9.07143H13.9999C13.6428 9.07143 13.3392 8.94643 13.0892 8.69643C12.8392 8.44643 12.7142 8.14286 12.7142 7.78571V2.21429H2.42852V22.7857H19.5714Z"
                            fill="#747474" />
                        </svg>
                        <span class="ClickDisplayDoc" (click)="viewDocuments('GSTIN')">GSTIN</span>
                      </div>
                      <div class="status" [ngClass]="{
                                                'rejected': orgGstStatus === 'Rejected',
                                                'approved': orgGstStatus === 'Approved',
                                                'notReviewed': orgGstStatus === 'Not Reviewed'||orgGstStatus === null
                                              }">
                        {{orgGstStatus?orgGstStatus:'Not Reviewed'}}
                      </div>

                    </div>


                  </div>
                  PAN
                  <div class="card" style="margin-bottom: 10px;padding: 10px;">
                    <div style="display:flex;justify-content: space-between;">
                      <div>
                        <svg width="16" height="16" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M20.3749 5.58929C20.6249 5.83929 20.8392 6.17857 21.0178 6.60714C21.1964 7.03571 21.2857 7.42857 21.2857 7.78571V23.2143C21.2857 23.5714 21.1607 23.875 20.9107 24.125C20.6607 24.375 20.3571 24.5 19.9999 24.5H1.99995C1.6428 24.5 1.33923 24.375 1.08923 24.125C0.839233 23.875 0.714233 23.5714 0.714233 23.2143V1.78571C0.714233 1.42857 0.839233 1.125 1.08923 0.875C1.33923 0.625 1.6428 0.5 1.99995 0.5H13.9999C14.3571 0.5 14.7499 0.589286 15.1785 0.767857C15.6071 0.946429 15.9464 1.16071 16.1964 1.41071L20.3749 5.58929ZM14.4285 2.32143V7.35714H19.4642C19.3749 7.09821 19.2767 6.91518 19.1696 6.80804L14.9776 2.61607C14.8705 2.50893 14.6874 2.41071 14.4285 2.32143ZM19.5714 22.7857V9.07143H13.9999C13.6428 9.07143 13.3392 8.94643 13.0892 8.69643C12.8392 8.44643 12.7142 8.14286 12.7142 7.78571V2.21429H2.42852V22.7857H19.5714Z"
                            fill="#747474" />
                        </svg>
                        <span class="ClickDisplayDoc" (click)="viewDocuments('PAN')">PAN</span>
                      </div>
                      <div class="status" [ngClass]="{
                                                'rejected': orgPanStatus === 'Rejected',
                                                'approved': orgPanStatus === 'Approved',
                                                'notReviewed': orgPanStatus === 'Not Reviewed'||orgPanStatus === null
                                              }">
                        {{orgPanStatus?orgPanStatus:'Not Reviewed'}}
                      </div>

                    </div>


                  </div>
                  Licence From Regulator
                  <div class="card" style="margin-bottom: 10px;padding: 10px;">
                    <div style="display:flex;justify-content: space-between;">
                      <div>
                        <svg width="16" height="16" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M20.3749 5.58929C20.6249 5.83929 20.8392 6.17857 21.0178 6.60714C21.1964 7.03571 21.2857 7.42857 21.2857 7.78571V23.2143C21.2857 23.5714 21.1607 23.875 20.9107 24.125C20.6607 24.375 20.3571 24.5 19.9999 24.5H1.99995C1.6428 24.5 1.33923 24.375 1.08923 24.125C0.839233 23.875 0.714233 23.5714 0.714233 23.2143V1.78571C0.714233 1.42857 0.839233 1.125 1.08923 0.875C1.33923 0.625 1.6428 0.5 1.99995 0.5H13.9999C14.3571 0.5 14.7499 0.589286 15.1785 0.767857C15.6071 0.946429 15.9464 1.16071 16.1964 1.41071L20.3749 5.58929ZM14.4285 2.32143V7.35714H19.4642C19.3749 7.09821 19.2767 6.91518 19.1696 6.80804L14.9776 2.61607C14.8705 2.50893 14.6874 2.41071 14.4285 2.32143ZM19.5714 22.7857V9.07143H13.9999C13.6428 9.07143 13.3392 8.94643 13.0892 8.69643C12.8392 8.44643 12.7142 8.14286 12.7142 7.78571V2.21429H2.42852V22.7857H19.5714Z"
                            fill="#747474" />
                        </svg>
                        <span class="ClickDisplayDoc" (click)="viewDocuments('LICENCE')">Licence From Regulator</span>
                      </div>
                      <div class="status" [ngClass]="{
                                                'rejected': orgLicenceStatus === 'Rejected',
                                                'approved': orgLicenceStatus === 'Approved',
                                                'notReviewed': orgLicenceStatus === 'Not Reviewed'||orgLicenceStatus===null
                                              }">
                        {{orgLicenceStatus?orgLicenceStatus:'Not Reviewed'}}
                      </div>

                    </div>


                  </div>
                  Board Resolution
                  <div class="card" style="margin-bottom: 10px;padding: 10px;">
                    <div style="display:flex;justify-content: space-between;">
                      <div>
                        <svg width="16" height="16" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M20.3749 5.58929C20.6249 5.83929 20.8392 6.17857 21.0178 6.60714C21.1964 7.03571 21.2857 7.42857 21.2857 7.78571V23.2143C21.2857 23.5714 21.1607 23.875 20.9107 24.125C20.6607 24.375 20.3571 24.5 19.9999 24.5H1.99995C1.6428 24.5 1.33923 24.375 1.08923 24.125C0.839233 23.875 0.714233 23.5714 0.714233 23.2143V1.78571C0.714233 1.42857 0.839233 1.125 1.08923 0.875C1.33923 0.625 1.6428 0.5 1.99995 0.5H13.9999C14.3571 0.5 14.7499 0.589286 15.1785 0.767857C15.6071 0.946429 15.9464 1.16071 16.1964 1.41071L20.3749 5.58929ZM14.4285 2.32143V7.35714H19.4642C19.3749 7.09821 19.2767 6.91518 19.1696 6.80804L14.9776 2.61607C14.8705 2.50893 14.6874 2.41071 14.4285 2.32143ZM19.5714 22.7857V9.07143H13.9999C13.6428 9.07143 13.3392 8.94643 13.0892 8.69643C12.8392 8.44643 12.7142 8.14286 12.7142 7.78571V2.21429H2.42852V22.7857H19.5714Z"
                            fill="#747474" />
                        </svg>
                        <span class="ClickDisplayDoc" (click)="viewDocuments('BOARD')">Board Resolution</span>
                      </div>
                      <div class="status" [ngClass]="{
                                                'rejected': orgBoardStatus === 'Rejected',
                                                'approved': orgBoardStatus === 'Approved',
                                                'notReviewed': orgBoardStatus === 'Not Reviewed'||orgBoardStatus === null
                                              }">
                        {{orgBoardStatus?orgBoardStatus:'Not Reviewed'}}
                      </div>

                    </div>


                  </div>
                </div>
                <div class="card" style="margin-top: 20px;">
                  <table>
                    <thead>
                      <tr>
                        <th>Officers</th>
                        <th>Status</th>
                        <th>Links</th>
                      </tr>
                    </thead>
                    <tr>
                      <td colspan="3">
                        <hr>
                      </td>
                    </tr>
                    <tbody id="officerTbody">
                      <tr style="padding-bottom: 20px;">
                        <td style="padding-bottom: 15px;">Administrative Officer</td>
                        <td class="status" [ngClass]="{
                                                'rejected': adminStatus === 'Rejected',
                                                'approved': adminStatus === 'Approved',
                                                'notReviewed': adminStatus === 'Not Reviewed'
                                              }">{{adminStatus}}</td>
                        <td>
                          <p class="ClickDisplayDoc" (click)="navigateToRegistrantOfficersApprove('Administrative')">
                            View</p>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding-bottom: 15px">Technical Officer</td>
                        <td class="status" [ngClass]="{
                                                'rejected': technicalOfficerStatus === 'Rejected',
                                                'approved': technicalOfficerStatus === 'Approved',
                                                'notReviewed': technicalOfficerStatus === 'Not Reviewed'
                                              }">{{technicalOfficerStatus}}</td>
                        <td>
                          <p class="ClickDisplayDoc" (click)="navigateToRegistrantOfficersApprove('Technical')">View</p>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding-bottom: 15px">Financial Officer</td>
                        <td class="status" [ngClass]="{
                                                'rejected': billingOfficerStatus === 'Rejected',
                                                'approved': billingOfficerStatus === 'Approved',
                                                'notReviewed': billingOfficerStatus === 'Not Reviewed'
                                              }">{{billingOfficerStatus}}</td>
                        <td>
                          <p class="ClickDisplayDoc" (click)="navigateToRegistrantOfficersApprove('Billing')">View</p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- <div class="col-"></div> -->

            </div>

            <div style="margin-left: 95px;margin-top: 15px;margin-bottom: 15px;">
              <!-- <div class="card col-12"> -->
              <div>
                <div class="button-group">
                  <button type="button" id="btnCncl" (click)="cancelDomain()">Cancel</button>
                  <button type="button" id="btnReview" (click)="navigateToReviewPage()">Review</button>
                  <button type="button" id="btnSub" (click)="updateDomain()">Submit</button>
                </div>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="modal fade" id="viewThePaymentReciept" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-md">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header" id="modalHeader">
            <h5 class="modal-title" id="xlModalLabel" style="font-size: 20px;">{{modalTitle}} Document View</h5>
            <button id="closeButtonForPayment" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"
                style="background-color: none; color: black;font-size: 20px; padding: 5px; padding-top: 0px;">&times;</span>
            </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
            <div *ngIf="openReciptasPdf==true">
              <iframe [src]="paymentRecieptPdf" width="100%" height="500px"></iframe>
            </div>

            <div *ngIf="openReciptasPdf==false" class="image-Container">
              <img [src]="'data:image/png/jpg/jpeg;base64,'+domainsList.paymentReceipt " width="100%" height="100%">
            </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer"
            *ngIf="domainsList.paymentStatus!='Payment Approved'&&domainsList.paymentStatus!='Payment Rejected'"
            role="alert">
            <button class="btn btn-primary" data-dismiss="modal" (click)="getDscResponse('Approve')">Approve</button>
            <button class="btn btn-danger" data-dismiss="modal" (click)="getDscResponse('Reject')">Reject</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="viewTheOrgPanDocs" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <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 class="close" id="panDocViewModalClose" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"
                style="background-color: none; color: black;font-size: 20px; padding: 5px; padding-top: 0px;">&times;</span>
            </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
            <p style="font-size: 16px; font-weight: 400; padding-bottom: 20px;"><span style="color:red">*</span> Check
              the Entity details and the document details</p>
            <br />
            <p><b>Comments :</b>{{ orgPanDocComment && orgPanDocComment !== '' ? orgPanDocComment : 'NA' }}
            </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;">Entity Details</h3>
                <p style="font-size: 16px; color:#000000; font-weight: 600; padding-top: 10px;">
                  {{modalTitle}}
                  <span style="font-weight: 600; font-size: 16px; color:#000000;padding-top: 10px; ">
                    Number : <span style="font-weight: normal;">{{orgPanNumber}}</span>
                  </span>
                </p>



              </div>


              <div *ngIf="OrgPanImage==false">
                <iframe [src]="panDocPdf" width="100%" height="500px"></iframe>
              </div>

              <div *ngIf="OrgPanImage==true" class="image-Container">
                <img [src]="'data:image/png/jpg/jpeg;base64,'+panDoc" width="100%" height="100%">
              </div>


            </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
            <button class="btn btn-primary" (click)="approvalComment('PAN')">Approve</button>
            <button class="btn btn-danger" (click)="rejectionComment('PAN')">Reject</button>
          </div>
        </div>
      </div>
    </div>
    <div id="gstModal" hidden data-toggle="modal" data-target="#viewTheOrgGstDocs"></div>
    <div id="panModal" hidden data-toggle="modal" data-target="#viewTheOrgPanDocs"></div>
    <div id="licenceModal" hidden data-toggle="modal" data-target="#viewTheOrgLicenceDocs"></div>
    <div id="boardModal" hidden data-toggle="modal" data-target="#viewTheBoardDocs"></div>
    <div id="approveComment" hidden data-toggle="modal" data-target="#approveCommentModal"></div>

    <div id="boardApprovalModal" hidden data-toggle="modal" data-target="#viewTheBoardApprovalDocs"></div>

    <div id="rejectComment" hidden data-toggle="modal" data-target="#rejectCommentModal"></div>
    <div class="modal fade" id="viewTheOrgGstDocs" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <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 class="close" id="gstDocViewModalClose" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"
                style="background-color: none; color: black;font-size: 20px; padding: 5px; padding-top: 0px;">&times;</span>
            </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
            <p style="font-size: 16px; font-weight: 400; padding-bottom: 20px;"><span style="color:red">*</span> Check
              the Entity details and the document details</p>
            <br />
            <p><b>Comments :</b> {{ orgGSTDocComment && orgGSTDocComment !== '' ? orgGSTDocComment : 'NA' }}</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;">Entity Details</h3>
                <p style="font-size: 16px; color:#000000; font-weight: 600; padding-top: 10px;">
                  {{modalTitle}}
                  <span style="font-weight: 600; font-size: 16px; color:#000000;padding-top: 10px; ">
                    Number : <span style="font-weight: normal;">{{organisationGstinNumber}}</span>
                  </span>
                </p>



              </div>



              <div *ngIf="OrgGstDocImage==false">
                <iframe [src]="gstDocPdf" width="100%" height="500px"></iframe>
              </div>

              <div *ngIf="OrgGstDocImage==true" class="image-Container">
                <img [src]="'data:image/png/jpg/jpeg;base64,'+gstDoc" width="100%" height="100%">
              </div>


            </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
            <button class="btn btn-primary" (click)="approvalComment('GST')">Approve</button>
            <button class="btn btn-danger" (click)="rejectionComment('GST')">Reject</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="viewTheOrgLicenceDocs" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <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 class="close" id="licenseDocViewModalClose" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"
                style="background-color: none; color: black;font-size: 20px; padding: 5px; padding-top: 0px;">&times;</span>
            </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
            <p style="font-size: 16px; font-weight: 400; padding-bottom: 20px;"><span style="color:red">*</span> Check
              the Entity details and the document details</p>
            <br />
            <p><b>Comments :</b> {{ orgLicenceDocComment && orgLicenceDocComment !== '' ? orgLicenceDocComment : 'NA' }}
            </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;">Entity Details</h3>
                <p style="font-size: 16px; color:#000000; font-weight: 600;">
                  {{modalTitle}}
                  <span style="font-weight: 600; font-size: 16px; color:#000000;">
                    Number : <span style="font-weight: normal;">{{orgLicenseNumber}}</span>
                  </span>
                </p>
              </div>
              <div *ngIf="OrgLicenceImage==false">
                <iframe [src]="licenceDocPdf" width="100%" height="500px"></iframe>
              </div>

              <div *ngIf="OrgLicenceImage==true" class="image-Container">
                <img [src]="'data:image/png/jpg/jpeg;base64,'+licenseDoc" width="100%" height="100%">
              </div>


            </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
            <button class="btn btn-primary" (click)="approvalComment('LICENCE')">Approve</button>
            <button class="btn btn-danger" (click)="rejectionComment('LICENCE')">Reject</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="viewTheBoardApprovalDocs" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-md">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header" id="modalHeader">
            <h5 class="modal-title" id="xlModalLabel" style="font-size: 18px; font-weight: 500;">{{modalTitle}} Document
              View</h5>
            <button id="domainBoardDocViewModalClose" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"
                style="background-color: none; color: black;font-size: 20px; padding: 5px; padding-top: 0px;">&times;</span>
            </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
            <p><b>Comments :</b>{{ domainsList.twoLetterDomainDocumentStatusComment &&
              domainsList.twoLetterDomainDocumentStatusComment !== '' ? domainsList.twoLetterDomainDocumentStatusComment
              : 'NA' }}

            <div *ngIf="BoardApprovalDocImage==false">
              <iframe [src]="boardApprovalDocPdf" width="100%" height="500px"></iframe>
            </div>

            <div *ngIf="BoardApprovalDocImage==true" class="image-Container">
              <img [src]="'data:image/png/jpg/jpeg;base64,'+boardApprovalDoc" width="100%" height="100%">
            </div>


          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
            <button class="btn btn-primary" (click)="approvalComment('DomainBoardDoc')">Approve</button>
            <button class="btn btn-danger" (click)="rejectionComment('DomainBoardDoc')">Reject</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="viewTheBoardDocs" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-md">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header" id="modalHeader">
            <h5 class="modal-title" id="xlModalLabel" style="font-size: 16px; font-weight: 500;margin-bottom: 0px; ">
              {{modalTitle}} Document View</h5>
            <button class="close" id="boardDocViewModalClose" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"
                style="background-color: none; color: black;font-size: 20px; padding: 5px; padding-top: 0px;">&times;</span>
            </button>
          </div>
          <br />
          <!-- Modal body -->
          <div class="modal-body">
            <p><b>Comments :</b> {{ orgBoardDocComment && orgBoardDocComment !== '' ? orgBoardDocComment : 'NA' }}
            </p><br />

            <div *ngIf="BoardDocImage==false">
              <iframe [src]="boardResolutionDocPdf" width="100%" height="500px"></iframe>
            </div>

            <div *ngIf="BoardDocImage==true" class="image-Container">
              <img [src]="'data:image/png/jpg/jpeg;base64,'+boardResolutionDoc" width="100%" height="100%">
            </div>


          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
            <button class="btn btn-primary" (click)="approvalComment('BOARD')">Approve</button>
            <button class="btn btn-danger" (click)="rejectionComment('BOARD')">Reject</button>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-info" id="btnpaymentApproval" hidden data-toggle="modal"
      data-target="#paymentApprovalPopup">
    </button>
    <div class="modal fade" id="paymentApprovalPopup" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header" id="modalHeader">
            <h5 class="modal-title" id="xlModalLabel">Payment Approved!</h5>
          </div>
          <div class="modal-body">
            <p style="color: rgba(64, 64, 64, 1);font-size: 16px;">Are you sure you want to confirm domain submission?
            </p>
            <p style="color:rgba(89, 89, 89, 1);font-size: 14px;">Once you click submit, the domain will update to NIXI.
            </p>
          </div>
          <div class="modal-footer">
            <div>
              <button class="btn btn-primary" (click)="submitDomainToNIXIOnPaymentApproval()">Submit</button>
            </div>
            <div>
              <button class="btn btn-danger" id="closetheNixiApproval" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  -->
    <button type="button" class="btn btn-info" id="btnDomainApproval" hidden data-toggle="modal"
      data-target="#domainApprovalPopup">
    </button>

    <div class="modal fade" id="domainApprovalPopup" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header" id="modalHeader">
            <svg width="125" height="124" viewBox="0 0 125 124" fill="none" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink">
              <rect x="0.5" width="124" height="124" fill="url(#pattern0_7418_525)" />
              <path d="M70.3447 48.3105H54.6553L58.5234 75.994H66.4812L70.3447 48.3105Z" fill="#FF0000" />
              <path d="M56.6229 91.3706V83.3492L68.4383 83.2964V91.3706H56.6229Z" fill="#FF0000" />
              <path
                d="M50.8595 52.1694V91.4776C39.6382 91.0884 17.1956 90.5435 17.1956 91.4776V52.1672C28.545 52.0376 50.8595 51.8599 50.8595 52.1694Z"
                fill="white" />
              <path d="M77.9091 55.0884C78.2335 67.2181 78.6875 91.4776 77.9091 91.4776H109.044V53.337L77.9091 55.0884Z"
                fill="white" />
              <defs>
                <pattern id="pattern0_7418_525" patternContentUnits="objectBoundingBox" width="1" height="1">
                  <use xlink:href="#image0_7418_525" transform="scale(0.00195312)" />
                </pattern>
                <image id="image0_7418_525" width="512" height="512" preserveAspectRatio="none"
                  xlink:href="data:image/png;base64, " />
              </defs>
            </svg>
            <br />
            <h2 class="modal-title" id="xlModalLabel" style="color: red;">Domain Confirmation!</h2>
          </div>
          <div class="modal-body">
            <p style="color:black;font-size: 16px;font-weight: 500;">You are going to approve 2 letter domain, please
              confirm</p>
            <p style="color:rgba(89, 89, 89, 1);font-size: 14px;">This domain <span
                style="color:red;font-size: 14px">{{domainsList.bankName}}{{domainsList.domainName}}</span> contains
              only 2 characters and requires additional confirmation.</p>
          </div>
          <div class="modal-footer">
            <div>
              <button class="btn btn-primary"
                (click)="submitDomainToNIXIOnDoubleVerificationApproval()">Approve</button>
            </div>
            <div>
              <button class="btn btn-danger" id="closeDomainApproval" data-dismiss="modal">Cancel</button>
            </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-style: bold;font-size:14px;margin-bottom: 0px ;">
              Approval comment</h5>
            <button type="button" id="closeApproveCommentModal" 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)="approveOrgDocs(commentModalType)"
              data-dismiss="modal">Save
              changes</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <!-- comments modal -->
    <div class="modal" id="rejectCommentModal" 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-style: bold;font-size:14px;margin-bottom: 0px ;">
              Rejection comment</h5>
            <button type="button" 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)="rejectOrgDocs(commentModalType)"
              data-dismiss="modal">Save
              changes</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <!-- DSC code -->
    <!-- Password Modal -->
    <div *ngIf="isLoading" class="spinner-container">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <div class="modal" tabindex="-1" role="dialog" [ngClass]="{ show: isPasswordModalOpen }"
      style="display: block;padding-top: 60px;" *ngIf="isPasswordModalOpen" id="dscModal">
      <div class="modal-dialog" role="document" style="max-width:550px; width:100%">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title">Sign Using DSC</h1>

            <button type="button" class="btn-close" (click)="closePasswordModal()"></button>

          </div>

          <div class="modal-body">

            <div *ngIf="tokens.length >= 0" style="margin-bottom: 20px; margin-top: 10px;">
              <label for="tokenSelect">Select DSC Token</label><span class="text-danger">*</span>
              <div style="display: flex; gap: 5px; align-items: center;">
                <select id="tokenSelect" class="form-control" [(ngModel)]="selectedToken" placeholder="Select Token"
                  (change)="onTokenSelect()">
                  <option value="" disabled selected>Select Token</option>
                  <option *ngFor="let token of tokens" [ngValue]="token">
                    {{ token }}
                  </option>
                </select>
                <button class="btn btn-primary btn-sm" (click)="getDscResponse(chosenPaymentStatus)"
                  style="margin-left: 10px;">
                  <span><i class="fas fa-sync-alt"></i></span>
                </button>
              </div>
            </div>
            <div *ngIf="certificates.length >= 0" style=" margin-bottom: 20px;">
              <label for="certificateSelect">Select Certificate</label><span class="text-danger">*</span>
              <select id="certificateSelect" class="form-control" [(ngModel)]="selectedCertificate"
                aria-placeholder="Select Certificate">
                <option value="" disabled selected>Select Certificate</option>
                <option *ngFor="let certificate of certificates" [ngValue]="certificate">
                  {{ certificate.commonName }} - {{ certificate.validTill }}
                </option>
              </select>
            </div>

            <label for="passwordInput" class="form-label">Token Pin</label><span class="text-danger">*</span>
            <div *ngIf="assetService.isChrome()" style="position: relative; width: 100%;">
              <input id="passwordInput" [type]="showPassword ? 'text' : 'password'" class="form-control rounded-input"
                placeholder="Enter token pin" [(ngModel)]="tokenPassword"
                style="width: 100%; padding-right: 40px; margin-bottom: 10px;" />
              <i class="fa" [ngClass]="showPassword ? 'fa-eye' : 'fa-eye-slash'"
                style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"
                (click)="togglePasswordVisibility()"></i>
            </div>

            <input *ngIf="assetService.isEdge()" id="passwordInputEdge" type="password"
              class="form-control rounded-input" placeholder="Enter token pin" [(ngModel)]="tokenPassword"
              style="width: 100%; margin-bottom: 10px;" />

            <div *ngIf="passwordErrorMessage" class="text-danger mt-2">
              {{ passwordErrorMessage }}
            </div>
          </div>

          <div style="display:flex; justify-content: flex-end; margin: 20px; margin-bottom: 15px;">
            <button type="button" class="btn btn-primary" (click)="onSubmit()">Submit</button>
            <button type="button" class="btn btn-danger" (click)="closePasswordModal()" style="margin-left: 10px">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>