<app-dns-loading></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;">Application 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;">Tenure (yrs)</p>
                <div style="text-align: center;" class="box-content">{{domainsList?.numberOfYears}}</div>
              </div>
              <div class="detail-item">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                  Domain Name
                  <p *ngIf="isEditAllowed()"
                    style="font-family: Roboto; font-size: 20px; margin: 0;" (click)="setDomainName()">
                    <i class="fas fa-pencil-alt" style="cursor: pointer; margin-left: 10px;" *ngIf="!isEditing"
                      (click)="isEditing = true"></i>
                  </p>
                  <a *ngIf="isEditing"
                    style="cursor: pointer;font-size: 14px;text-decoration: underline;color: #0000FF;"
                    (click)="onKeyupDomainName()">Search</a>
                </div>

                <div class="box-content" *ngIf="!isEditing">
                  {{ domainsList?.bankName }}{{ domainsList?.domainName }}
                </div>

                <div *ngIf="isEditing" style="padding-top: 10px;">
                  <input type="text" [(ngModel)]="chosenDomainName" [maxlength]=domainMaxLength
                    placeholder="entity identifier name" (keyup)="validateDomainName()" />

                  <!-- <svg *ngIf="isDomainAvailable && domainsList?.domainName" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10" stroke="green" fill="none"/>
  <path d="M9 12l2 2l4 -4" />
</svg>
    
  <svg  *ngIf="!isDomainAvailable && domainsList?.domainName" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10" stroke="red" fill="none"/>
  <line x1="15" y1="9" x2="9" y2="15" />
  <line x1="9" y1="9" x2="15" y2="15" />
</svg> -->


                </div>
                <!-- <span style="color: red; font-size: 10px;">
      {{domainNameError}}
    </span> -->

              </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 style="margin-bottom: 20px;" 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">
                      <a style="cursor: pointer;color: blue;text-decoration: underline;" (click)="updateOrgDetails()">
                        Update Entity
                      </a>


                    </div>
                  </div>

                  <div class="first">
                    <h5 style="font-size: 16px; color:#000000">Entity Name </h5>
                    <div class="input-group">
                      <input type="text" placeholder="Enter your Entity Name" class="form-control"
                        [ngStyle]="{ 'margin-bottom': (organizationsList.institutionName == null || organizationsList.institutionName == '' ? '0px' : '20px' )}"
                        [(ngModel)]="organizationsList.institutionName" (ngModelChange)="convertToUpperCase()" />
                      <div *ngFor="let organization of organizationsList">
                        <p>{{ organization?.institutionName }}</p>
                      </div>
                    </div>
                    <div class="error-message"
                      *ngIf="organizationsList.institutionName == null || organizationsList.institutionName == '' ">
                      Enter Entity Name</div>
                    <!-- <h5 style="font-size: 16px; color:#000000">Pin Code</h5>
                                        <div class="pin-page">
                                            <input type="text" class="form-control" placeholder="Enter a pin code"
                                                [(ngModel)]="organizationsList.pincode" />
                                            <input type="text" class="form-control" placeholder="Enter a City"
                                                [(ngModel)]="organizationsList.city" />
                                            <input type="text" class="form-control" placeholder="Enter a state"
                                                [(ngModel)]="organizationsList.state" />
                                            <div *ngFor="let organization of organizationsList">
                                                <p>{{ organization.pincode }}</p>
                                                <p>{{ organization.city }}</p>
                                                <p>{{ organization.state }}</p>
                                            </div>
                                        </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}$" />
                      </div>




                      <!-- City Input Section -->
                      <div style="flex: 3;">
                        <h5 style="font-size: 16px; color:#000000">Location</h5>
                        <select class="form-control" [ngStyle]="{ 'margin-bottom': styleCityAndState? '0px' : '0px' }"
                          [(ngModel)]="organizationsList.city" [disabled]="!cityOptions.length">
                          <option value="" disabled>Select a city</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': styleCityAndState? '0px' : '0px' }"
                          [(ngModel)]="organizationsList.district" [disabled]="!cityOptions.length ||
                                                  (domainsList.applicationStatus !== 'Incomplete'
                                                   && domainsList.applicationStatus !== 'Resubmitted'
                                                    && domainsList.status !== 'Inactive')">
                          <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': styleCityAndState? '0px' : '0px' }" placeholder="Enter a state"
                          [(ngModel)]="organizationsList.state" [disabled]="!cityOptions.length" readonly required />
                      </div>
                    </div>
                    <div *ngIf="pincodeError" class="error-message" style="margin-top: 5px;">
                      <p>{{ pincodeError }}</p>
                    </div>
                    <div *ngIf="pincode.invalid && (pincode.touched || pincode.dirty) && !pincodeError"
                      class="error-message">
                      <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">Address</h5>
                                        <div class="input-group">
                                            <input type="text" placeholder="Enter your Address 1" class="form-control"
                                                [(ngModel)]="organizationsList.address" />
                                            <div *ngFor="let organization of organizationsList">
                                                <p>{{ organization.address }}</p>
                                            </div>
                                        </div> -->
                    <h5 style="font-size: 16px; color:#000000; padding-top: 15px;">Address</h5>
                    <div class="input-group">
                      <input type="text" placeholder="Enter your Address 1" class="form-control"
                        [ngStyle]="{ 'margin-bottom': address.invalid || address.touched ? '0px' : '0px' }"
                        [(ngModel)]="organizationsList.address" name="address" minlength="5"
                        (keypress)="preventConsecutiveSpacesAndSpecialChar($event, address)" maxlength="300" required
                        #address="ngModel" />

                      <div *ngFor="let organization of organizationsList">
                        <p>{{ organization.address }}</p>
                      </div>
                    </div>
                    <div *ngIf="address.invalid || address.touched" 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"
                        [(ngModel)]="organizationsList.organisationEmail" />
                      <div *ngFor="let organization of organizationsList">
                        <p>{{ organization.organisationEmail }}</p>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12">
                        <h5 style="font-size: 16px; color:#000000">Payment Receipt</h5>
                        <div style="position: relative;">

                          <!-- Input box bound to the fileName variable -->
                          <input type="text" class="form-control" [value]="fileName"
                            placeholder="Upload your payment document" [ngClass]="{
                                                                  'blue-border-input': domainsList?.paymentStatus !== 'Payment Not Done',
                                                                  'completed-payment-input': domainsList?.paymentStatus === 'Payment Completed',
                                                                  'pending-payment-input': domainsList?.paymentStatus !== 'Payment Completed'
                                                                }" style="padding-right: 30px; padding-left: 10px;"
                            readonly />

                          <!-- Modal trigger button to upload file -->
                          <!-- <span [ngClass]="domainsList.paymentStatus!='Payment Completed'?'disableUploadPayment':''" class="input-group-text" data-toggle="modal" 
                                                        data-target="#exampleModalCenter" 
                                                        style="background-color: transparent; color:black; border: none; cursor: pointer; position: absolute; right: 10px; top: 55%; transform: translateY(-50%);">
                                                        <i class="bi bi-upload"></i>
                                                    </span> -->
                          <span [ngClass]="isUploadEnabled()
                                                        ? '' : 'disableUploadPayment'
                                                    " class="input-group-text" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            style="background-color: transparent; color:black; border: none; cursor: pointer; position: absolute; right: 10px; top: 55%; transform: translateY(-50%);">
                            <i class="bi bi-upload"></i>
                          </span>
                        </div>
                      </div>

                      <!-- File input hidden inside the modal (to handle file upload) -->
                      <input type="file" id="fileInput" style="display: none;" (change)="onFileSelected($event)" />


                      <!-- <div class="col-6">
                                                <h5 style="font-size: 16px; color:#000000">Payment Status</h5>
                                                <div>
                                                    <select class="form-control" [(ngModel)]="domainsList.paymentStatus"
                                                        disabled="true" (ngModelChange)="onPaymentStatusChange()">
                                                        <option value="" disabled selected>Select Status</option>
                                                        <option value="Paid">Paid</option>
                                                        <option value="Unpaid">Unpaid</option>
                                                        <option value="Initiated">Initiated</option>
                                                        <option value="Ready for payment">Ready For Payment</option>
                                                    </select>
                                                </div>
                                            </div> -->
                                           
                                              <!-- STD Telephone Input Group -->
                        <div class="col-6">
  <label style="font-size: 14px;" for="stdTelephone">STD Telephone</label>

  <div class="std-input-wrapper">
    <!-- STD Code Input -->
    <input
      type="text"
      id="stdCode"
      placeholder="STD Code"
      class="form-control std-code-input"
      [(ngModel)]="organizationsList.stdCode"
      maxlength="6"
      (input)="validateStdAndTelephone()"
       [ngStyle]="{ 'margin-bottom': stdCodeAndTelephoneCombinationError ? '0px' : '20px' }"
    />

    <!-- STD Telephone Input -->
    <input
      type="text"
      id="stdTelephone"
      class="form-control std-phone-input"
      placeholder="Enter STD Telephone"
      [(ngModel)]="organizationsList.stdTelephone"
      (input)="validateStdAndTelephone()"
           [ngStyle]="{ 'margin-bottom': stdCodeAndTelephoneCombinationError ? '0px' : '20px' }"
      maxlength="10"
    />
  </div>
  <div
    class="error-message"
    *ngIf="stdCodeAndTelephoneCombinationError!=''"
  >
   {{stdCodeAndTelephoneCombinationError}}
  </div>
</div>
                            
                        
                        <!-- Mobile Number Input Group -->
                        <div class="col-6" style="padding-top: 2px;">
                          <label style="font-size: 14px;" for="mobileNumber">Mobile Number</label>
                        
                          <div class="mobile-input-wrapper">
                            <!-- Country Code Select -->
                            <div class="custom-select-wrapper">
                              <div class="customs-select" formControlName="countryCode">
                                {{ organizationsList.countryCode ? organizationsList.countryCode : 'country code' }}
                                <span class="dropdown-arrow"></span>
                              </div>
                              <select class="real-select" (change)="updateCountryCode($event)">
                                <option [value]="null" selected disabled hidden>Select country</option>
                                <option *ngFor="let countryCode of countryCodes | orderBy: 'countryName'" [value]="countryCode.countryCode">
                                  {{ countryCode.countryName }} - ({{ countryCode.countryCode }})
                                </option>
                              </select>
                            </div>
                        
                            <!-- Mobile Number Input -->
                            <input type="text" id="mobileNumber" class="form-control mobile-input" placeholder="Enter mobile number"
                              [(ngModel)]="organizationsList.mobileNumber" (input)="validateCountryAndMobile()" maxlength="15" required />
                          </div>

                           <div class="error-message"
                      *ngIf="countryCodeMobileCombinationError!='' ">
                    {{countryCodeMobileCombinationError}}</div>
                        </div>
                        
                        <!-- Mobile Number Input -->
                        
                        
                        </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 class="user-field-group">
                                                <label>Another Field</label> 
                                                <input class="form-control text-input" disabled value="Some Value" readonly>
                                              </div> -->
                        </div>
                      </div>
                    </div>

                    <div style="display:flex;justify-content: left;gap: 10px;"
                      *ngIf="domainsList?.isOnboardingDomain && domainsList?.applicationStatus=='Submitted' && (domainsList.paymentStatus =='Ready For Payment'||domainsList.paymentStatus =='Payment Not Done')">
                      <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>
                <br />
                <div class="card">
                  <div class="row">
                    <div class="col-4">
                      <h5 style="font-size: 16px; color:#000000">Payment Status</h5>
                      <div>
                        <input type="text" class="form-control" [value]="domainsList?.paymentStatus" disabled>
                      </div>
                    </div>

                    <div class="col-4">
                      <h5 style="font-size: 16px; color:#000000">NS Status</h5>
                      <div>
                        <input type="text" class="form-control" [value]="domainsList?.nsRecordStatus" disabled>
                      </div>
                    </div>

                    <div class="col-4">
                      <h5 style="font-size: 16px; color:#000000">Domain Status</h5>
                      <div>
                        <input type="text" class="form-control" value="{{ domainsList?.status }}" disabled>
                      </div>
                    </div>


                  </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 pe-3">
                <!-- <div class="card card-equal-height"> -->
                <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>
                  
                  <div class="card">
                    <h4 style="font-family: Roboto; font-size: 20px; color:#000000">ertyuiopEntity 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>
                          <div (click)="reuploadOrgDocs('GST')" 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('GSTIN')" class="ClickDisplayDoc">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>
                          <div (click)="reuploadOrgDocs('PAN')" 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="orgPanStatus != 'Rejected'" (click)="viewDocuments('PAN')" class="ClickDisplayDoc" >PAN</span> -->
                          <span (click)="viewDocuments('PAN')" class="ClickDisplayDoc">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>
                          <div (click)="reuploadOrgDocs('LICENCE')" class="tooltip-container"
                            style="cursor: pointer; padding-left: 5px; color: #007CF8;text-decoration: underline;"
                            onmouseover="showTooltip()" onmouseout="hideTooltip()">Reupload
                            <div class="tooltip" id="myTooltip">Click to reupload the document</div>
                          </div>
                          <!-- <span *ngIf="orgLicenceStatus != 'Rejected'" (click)="viewDocuments('LICENCE')"  class="ClickDisplayDoc" >Licence From Regulator</span> -->
                          <span (click)="viewDocuments('LICENCE')" class="ClickDisplayDoc">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>
                          <div (click)="reuploadOrgDocs('BOARD')" 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="orgBoardStatus != 'Rejected'"(click)="viewDocuments('BOARD')"  class="ClickDisplayDoc" >Board Resolution</span> -->
                          <span (click)="viewDocuments('BOARD')" class="ClickDisplayDoc">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="2">
                          <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()">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()">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()">View</p></td> -->
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

              </div>
            </div>
            <div style="margin-left: 95px;margin-top: 15px;margin-bottom: 15px;">
              <!-- <div class="card col-12"> -->
              <div>
                <div class="button-group">
                  <button *ngIf="role === 'IDRBTADMIN'" type="button" (click)="updateOrgDetails()"
                    (click)="updateDomain()">Submit</button>
                  <button type="button" (click)="cancelDomain()">Cancel</button>
                  <button class="btn btn-info"
                    [disabled]="
                    (domainsList.applicationStatus =='Incomplete' && isOrgOnboarded == false) || 
                    (domainsList.applicationStatus =='Resubmitted' && isOrgOnboarded == false)"
                    (click)="reSubmitApplication()">Re-Submit Application</button>
                </div>
              </div>

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

      </div>
    </div>


    <ng-template #paymentDialog>
      <h1 class="p-4">Upload Payment Receipt</h1>
      <mat-dialog-content class="d-flex flex-column align-items-center text-center">

        <label for="fileInput" class="btn btn-primary btn-lg">
          Upload File
          <input id="fileInput" type="file" (change)="onFileSelected($event)" style="display: none" />
        </label>
        <div *ngIf="selectedFileName" class="text-danger">
          <span>{{ selectedFileName }}</span>
        </div>
      </mat-dialog-content>
      <mat-dialog-actions class="justify-content-between pt-2 pb-4 pr-4 pl-4">
        <button class="btn btn-secondary btn-sm" (click)="onDialogClose()">Cancel</button>
        <button class="btn btn-primary btn-sm">Submit</button>
      </mat-dialog-actions>
    </ng-template>

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
      aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">


          <div style="background: #F7F7F7;" class="d-flex justify-content-between align-items-center;">
            <h1 style="padding-top: 10px;padding-left: 10px;">Payment Receipt</h1>
            <button class="close" data-dismiss="modal" aria-label="Close" style="padding-top: 10px;">
              <span aria-hidden="true" style="background-color: none; color: black;font-size: 40px;"(click)="closeThePaymentUploadModal()">&times;</span>
            </button>

          </div>
          <div class="d-flex justify-content-center align-items-center">
            <div class="text-center" style="padding-top: 30px; color: #000;">
              <h1>Upload Your Payment Receipt</h1>
              <p>To verify your payment status, add your payment receipt</p>
            </div>
          </div>


          <div [ngStyle]="{ 'height': fileType ? '350px' : '300px' }"
            style="border: 2px dashed #9A9A9A; border-radius: 5px; margin: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center;">

            <svg *ngIf="!fileType" width="72" height="72" style="margin-top: 20px;" viewBox="0 0 72 72" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M48 48L36 36L24 48" stroke="#9A9A9A" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M36 36V63" stroke="#9A9A9A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
              <path
                d="M61.1699 55.1704C64.0959 53.5753 66.4074 51.0511 67.7395 47.9963C69.0716 44.9415 69.3485 41.5301 68.5265 38.3005C67.7045 35.0709 65.8304 32.207 63.1999 30.1608C60.5694 28.1146 57.3325 27.0026 53.9999 27.0004H50.2199C49.3118 23.4882 47.6194 20.2274 45.2697 17.4634C42.9201 14.6994 39.9744 12.504 36.6542 11.0423C33.3339 9.58053 29.7255 8.89052 26.1002 9.02409C22.4749 9.15766 18.9271 10.1113 15.7234 11.8134C12.5197 13.5155 9.74362 15.9217 7.60375 18.8512C5.46388 21.7806 4.01595 25.157 3.36882 28.7266C2.72169 32.2962 2.8922 35.966 3.86752 39.4602C4.84285 42.9544 6.59761 46.182 8.99988 48.9004"
                stroke="#9A9A9A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M48 48L36 36L24 48" stroke="#9A9A9A" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            <div *ngIf="fileType === 'application/pdf'">

              <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M48 48L36 36L24 48" stroke="#9A9A9A" stroke-width="4" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M36 36V63" stroke="#9A9A9A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>



            <div *ngIf="fileType === 'image/jpeg' || fileType === 'image/png'">

              <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="36" cy="36" r="32" stroke="#9A9A9A" stroke-width="4" />
                <path d="M28 28L36 38L44 28H28Z" stroke="#9A9A9A" stroke-width="4" />
              </svg>
            </div>
            <div id="documentUploading" hidden data-toggle="modal" data-target="#viewPaymentReceipt"></div>
            <p *ngIf="file" style="color: red;">

              <span (click)="previewDocument()" style="color: red; text-decoration: underline; cursor: pointer;">{{
                fileName }}</span>
            </p>
            <div *ngIf="!file">
              <p style="padding-top: 20px;">Drag and drop your payment receipt</p>
              <p style="padding-top: 10px;">Supported formats: PDF, DOC, JPEG</p>

            </div>

            <!-- Updated message after file is selected -->
            <div *ngIf="file" style="text-align: center;">
              <p style="padding-top: 10px;">Click the file name above to preview your uploaded document</p>
              <hr style="border: 2px solid #9A9A9A;margin-left: 10px; margin-right: 10px; " />
              <p>If the uploaded document is not correct, click below to upload again</p>

            </div>
            <input type="file" #fileInput style="display: none;" (change)="onFileChange1($event)" />

            <button class="Browse" (click)="fileInput.click()">Browse Files</button>

            <div *ngIf="fileError" style="color: red; padding-top: 10px;">
              {{ fileError }}
            </div>
          </div>
          <div id="updateDocumentClose" hidden data-toggle="modal" data-target="#exampleModalCenter"></div>
          <div style="display: flex; justify-content: flex-end; gap: 20px;  padding-right: 50px; margin-bottom: 10px;">
            <button style=" color: white; background-color: #007CF8; border-radius: 5px; border:2px solid #007CF8;"
              (click)="uploadPaymentReceipt()">Upload</button>
            <button style=" color: #FF0000; background-color: white; border-radius: 5px; border: 2px solid #FF0000;"
              id="closePaymentReceipt" class="close" data-dismiss="modal" (click)="closedButton()">Cancel</button>
          </div>

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



    <!-- <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div style="background: #F7F7F7; padding-top: 10px; padding-left: 10px;" class="d-flex justify-content-between align-items-center;">
          <h1>Payment Receipt</h1>
         
          <i class="bi bi-x" style="font-size: 40px; cursor: pointer; color: #000;" (click)="closedButton()"></i>
        </div>
        <div class="d-flex justify-content-center align-items-center">
          <div class="text-center" style="padding-top: 30px; color: #000;">
            <h1>Upload Your Payment Receipt</h1>
            <p>To verify your payment status, add your payment receipt</p>
          </div>
        </div>
        <div>
          <div class="card" style="border-radius: 5px; height: 300px; margin: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
           
            <div *ngIf="fileType === 'application/pdf'">
             
              <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M48 48L36 36L24 48" stroke="#9A9A9A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M36 36V63" stroke="#9A9A9A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
   
          
   
            <div *ngIf="fileType === 'image/jpeg' || fileType === 'image/png'">
           
              <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="36" cy="36" r="32" stroke="#9A9A9A" stroke-width="4" />
                <path d="M28 28L36 38L44 28H28Z" stroke="#9A9A9A" stroke-width="4" />
              </svg>
            </div>
   
           
            <p *ngIf="fileName" style="color: red;">
             
              <span  (click)="previewDocument()"
               style="color: red; text-decoration: underline; cursor: pointer;">{{ fileName }}</span>
            </p>
            <input type="file" #fileInput style="display: none;"  (change)="onFileChange($event, 'update')" />
            <p *ngIf="fileError" style="color: red;">{{ fileError }}</p>
            <p style="padding-top: 20px;">Click the file name above to preview your uploaded document</p>
            <hr style="width: 80%; border: 2px solid #9A9A9A; margin: 10px 0;" />
            <p style="padding-top: 10px; padding-left: 15px;">If the uploaded document is not correct, click below to upload again</p>
   
            <button class="Browse" (click)="fileInput.click()" style="margin-top: 10px;">Browse Files</button>
   
          </div>
   
       
          <div style="display: flex; justify-content: flex-end; gap: 20px; padding-right: 50px; margin-bottom: 10px;">
           
            <button style="color: white; background-color: #007CF8; border-radius: 5px; border:2px solid #007CF8;" (click)="updatePaymentReceipt()">update</button>
           
            <button id="closePaymentReceipt1" style="color: #999999; background-color: white; border-radius: 5px; border: 2px solid #999999;" (click)="updatecancelButton()">Cancel</button>
          </div>
   
        </div>
      </div>
    </div>
  </div> -->


    <div data-toggle="modal" class="modal fade" id="viewPaymentReceipt" 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;"> View Document</h5>
            <button class="close" (click)="popUPButtonClose()" 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 class="image-Container" *ngIf="tempimageUrl">
              <img [src]="tempimageUrl" alt="Image Preview" width="400px" height="300px">
            </div>

            <div *ngIf="temppdfUrl">
              <iframe [src]="temppdfUrl" width="100%" height="500px"></iframe>
            </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">

          </div>
        </div>
      </div>
    </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>

    <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>
            <!-- <button type="button" > -->
            <span aria-hidden="true" id="closeUploadModal" class="close" data-dismiss="modal" style="cursor: pointer;"
              (click)="clearTheinpuErrors()" aria-label="Close">&times;</span>
            <!-- </button> -->
          </div>
          <div class="modal-body">
            <div>
              <div style="margin-bottom: 20px;">

                <p> <span style="color:red;padding-right:3px">*</span>Your document was rejected due to blurriness or an
                  incorrect ID number. Please upload a clearer copy with the correct ID.</p>
              </div>
              <div class="modalcontainer">
                <div class="row">
                  <div class="col-sm-7">
                    <input style="width: 100%;" *ngIf="docName!='BOARD' &&  docName !== 'Domain Board Approval'" (input)="handleOrganisationInputChange($event)"
                      type="text" id="gst-input" [(ngModel)]="organisationInputValue"
                      [maxlength]="getMaxLength(docName)" (keydown)="preventInvalidInput($event)"
                      placeholder="Enter {{docName}} Number">
                    <span style="color:red">{{organisationInputFieldErrors}}</span>
                    <div *ngIf="organisationDocErrors " style="color: red; ">
                      <p>{{ organisationDocErrors }}</p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <button style="width: 100%;" [disabled]="!organisationInputValue && docName  !== 'BOARD' && docName !== 'Domain Board Approval'"
                      (click)="triggerFileInput()">Upload Document</button>
                    <input type="file" #filesInput id="file-upload" accept=".pdf, .jpg, .jpeg"
                      (change)="handleFileInput($event)">
                    <span style="color:red">{{organisationInputsFieldErrors}}</span>
                  </div>
                  <div *ngIf="uploadSuccessMessage" style="color: green; margin-top: 10px;">
                    <p>{{ uploadSuccessMessage }}</p>
                  </div>
                </div>


              </div>
              <!-- <div style="margin-top: 20px;">
                    <p *ngIf="docName==='PAN'" style="color: rgba(0, 124, 248, 1);text-decoration: underline;">PAN</p>
                    <p *ngIf="docName==='BOARD'" style="color: rgba(0, 124, 248, 1);text-decoration: underline;">Board Resolution</p>
                    <p *ngIf="docName==='GST'" style="color: rgba(0, 124, 248, 1);text-decoration: underline;">GSTIN</p>
                    <p *ngIf="docName==='LICENCE'" style="color: rgba(0, 124, 248, 1);text-decoration: underline;">LICENCE NUMBER</p>
                </div> -->

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" (click)="reUploadDocument(UploadedDocuments)" class="btn btn-primary">Save</button>
             <!-- <button *ngIf="docName === 'Domain Board Approval'" type="button" (click)="uploadDomainBoardApprovalDocument(UploadedDocuments)" class="btn btn-primary">Save</button> -->
            <button type="button" class="btn btn-secondary" (click)="clearTheinpuErrors()"
              data-dismiss="modal">Cancel</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="boardApprovalModal" hidden data-toggle="modal" data-target="#viewTheBoardApprovalDocs"></div>
    <div class="modal fade" id="viewTheOrgGstDocs" 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 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>
          <br />

          <!-- Modal body -->
          <div class="modal-body">

            <p><b>Comments :</b>{{ orgGSTDocComment && orgGSTDocComment !== '' ? orgGSTDocComment : 'NA' }}</p>
            <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>
          <!-- Modal footer -->
          <!-- <div class="modal-footer" role="alert">
               <button class="btn btn-primary" (click)="approveOrgDocs('GST')">Approve</button>
               <button class="btn btn-danger"(click)="rejectOrgDocs('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 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 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>{{ orgLicenceDocComment && orgLicenceDocComment !== '' ? orgLicenceDocComment : 'NA' }}

            <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>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
            <!-- <button class="btn btn-primary" (click)="approveOrgDocs('LICENCE')">Approve</button>
               <button class="btn btn-danger"(click)="rejectOrgDocs('LICENCE')">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: 18px; font-weight: 500;">{{modalTitle}} Document
              View</h5>
            <button 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>{{ orgBoardDocComment && orgBoardDocComment !== '' ? orgBoardDocComment : 'NA' }}

            <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)="approveOrgDocs('BOARD')">Approve</button>
               <button class="btn btn-danger"(click)="rejectOrgDocs('BOARD')">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 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)="approveOrgDocs('BOARD')">Approve</button>
               <button class="btn btn-danger"(click)="rejectOrgDocs('BOARD')">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 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 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>{{ orgPanDocComment && orgPanDocComment !== '' ? orgPanDocComment : 'NA' }}

            <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>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
            <!-- <button class="btn btn-primary" (click)="approveOrgDocs('PAN')">Approve</button>
               <button class="btn btn-danger"(click)="rejectOrgDocs('PAN')">Reject</button> -->
          </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  class="image-Container">
                        <img [src]="'data:image/png/jpg/jpeg;base64,'+domainsList.paymentReceipt "width="100%" height="100%">
                      </div> -->

            <!-- <div >
                        <iframe width="100%" height="500px"></iframe>
                      </div> -->
          </div>
          <!-- Modal footer -->
          <!-- <div class="modal-footer" *ngIf="domainsList.paymentStatus!='Payment Approved'&&domainsList.paymentStatus!='Payment Rejected'"role="alert">
                       <button class="btn btn-primary" (click)="approvePaymentStatus()">Approve</button>
                       <button class="btn btn-danger"(click)="rejectPaymentStatus()">Reject</button>
                    </div> -->
        </div>
      </div>
    </div>


    <div class="model fade" #domainModal class="modal" id="domainAvailabilityModal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title">
              {{ isDomainAvailable ? 'Available' : 'Not Available' }}
              <svg *ngIf="isDomainAvailable && domainsList?.domainName" xmlns="http://www.w3.org/2000/svg" width="30"
                height="30" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" stroke="green" fill="none" />
                <path d="M9 12l2 2l4 -4" />
              </svg>

              <svg *ngIf="!isDomainAvailable && domainsList?.domainName" xmlns="http://www.w3.org/2000/svg" width="30"
                height="30" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" stroke="red" fill="none" />
                <line x1="15" y1="9" x2="9" y2="15" />
                <line x1="9" y1="9" x2="15" y2="15" />
              </svg>
            </h2>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <label style="font-size: 20px;">Domain Name - {{chosenDomainName}}</label>
            <br /><br />
            <div class="row">
              <div class="col-sm-2">
                <label style="font-size: 20px;">Tenure </label>
              </div>
              <div class="col-sm-5">
                <select [(ngModel)]="selectedTenure" class="form-control form-select" style="width: 100px;">
                  <option *ngFor="let tenure of tenures" [value]="tenure">{{ tenure }}</option>
                </select>
              </div>
            </div>
            <div class="row" *ngIf="chosenDomainName.length == 2">
              <div class="col-sm-12">
               <label style="font-size: 20px;">2 Letter Domain Board Approval Document <span style="color:red">*</span></label>
                <input type="file" class="form-control" (change)="onDocFileSelected($event)" />
            </div>
            </div>
            

          </div>
          <div class="modal-footer">
            <button [disabled]="!isDomainAvailable" (click)="updateDomainNameAndTenure()" type="button"
              class="btn btn-primary">Update Domain Name</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeDomainName">Close</button>
          </div>
        </div>
      </div>
    </div>