<div class="name container ld mt-5">
  <div class="col-md justify-content-center mt-5">
      <!-- Loop through the cards array and display each card -->
      <div *ngFor="let card of cards.slice(1)  " class="col-ld mt-5">
          <div class="card ">
              <div class="card-body">
                  <h2 class="card-title">{{ card.heading }}</h2>
                  <!-- Display details if not in editing mode -->
                  <div *ngIf="!card.details.isEditing">
                      <!-- Domain Applying For Card -->

                      <!-- <div *ngIf="card.heading !== 'Domain Applying For'">
                          <p><strong>Entity Name:</strong>
                              {{ cards[1].details.institutionName }}</p>
                          <p><strong>Selected Domain:</strong>
                          {{card.details.domainName}}</p>
                          <p><strong>Domain Name:</strong>
                              {{ card.details.bankName}}{{card.details.domainName }}</p>
                          <p><strong>Term:</strong>
                              {{ card.details.numberOfYears }} {{ getYearToNumber(card.details.numberOfYears) > 1 ? 'Years' : 'Year' }}
                          <p><strong>Cost:</strong>
                              {{  card.details.cost | indianCurrency }} (Inclusive of 18% GST)</p>  
                          <p *ngIf="card.details?.twoLetterDomainDocumentProof"><strong>Document:</strong>
                               <div *ngIf="card.details?.twoLetterDomainDocumentProof" style="margin-top: 10px;">
                              <div style="display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85rem;">
                                  <div 
                                      style="display: flex; align-items: center; gap: 5px;">
                                      <i class="bi bi-check-circle text-success"></i>
                                      Domain Board Approval - {{ card.details?.twoLetterDomainDocumentFileName }}
                                  </div>
                                 
                              </div>
                          </div>
                          
                      </div> -->
                      
                      <!-- Organisation Details Card -->
                      <div *ngIf="card.heading === 'Entity Details'">
                          <p><strong>Entity Name:</strong>
                              {{ card.details.institutionName }}</p>
                          <p><strong>GSTIN:</strong>
                          {{ card.details.organisationGstin || 'NA' }}
                         </p>

<p><strong>PAN Number:</strong>
  {{ card.details.panNumber || 'NA' }}
</p>

<p><strong>Date of Incorporation:</strong>
  {{ card.details.orgDateIncorp || 'NA' }}
</p>
                          <p><strong>Pincode:</strong>
                              {{ card.details.pincode }}</p>
                          <p><strong>Location:</strong>
                              {{ card.details.city }}</p>
                          <p><strong>City/District:</strong>
                                {{ card.details.district }}</p>
                          <p><strong>State:</strong>
                              {{ card.details.state }}</p>
                          <p><strong>Address:</strong>
                              {{ card.details.address }}</p>
                          <p><strong>STD Telephone:</strong>
                            {{card.details.stdCode}}  {{ card.details.stdTelephone }}</p>
                          <p><strong>Mobile No:</strong>
                             {{card.details.countryCode}} {{ card.details.mobileNumber}}</p>
                          <p><strong>Entity Email:</strong>
                              {{ card.details.organisationEmail }}</p>

                              <p><strong>Documents:</strong></p>
                          <div *ngIf="orgDocDetails?.length > 0" style="margin-top: 20px;">
                              <div style="display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85rem;">
                                  <div *ngFor="let doc of orgDocDetails; let i = index"
                                      style="display: flex; align-items: center; gap: 5px;">
                                      <i class="bi bi-check-circle text-success"></i>
                                      {{ doc.type }} - {{ doc.fileName }} {{ doc.value && doc.value !== "null" ? '- ' + doc.value : '' }}
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Administrative Contact Card -->
                      <div *ngIf="card.heading === 'Administrative Contact'">
                          <p><strong>Full Name:</strong>
                              {{ card.details.adminFullName }}</p>
                          <p><strong>Email:</strong>
                              {{ card.details.adminEmail }}</p>
                          <p><strong>STD TelePhone No:</strong>
                             {{card.details.adminCountryCode}} {{ card.details.adminPhone }}</p>
                          <p><strong>Individual Phone No:</strong>
                             {{card.details.adminAltCountryCode}} {{ card.details.adminAltPhone }}</p>
                          <p><strong>Designation:</strong>
                              {{ card.details.adminDesignation }}</p>
                          <p><strong>Address:</strong>
                              {{ card.details.adminAddress }}</p>
                          <p><strong>Documents:</strong>
                              {{ card.details.adminDocuments }}</p>
                          <div *ngIf="adminDocDetails?.length > 0" style="margin-top: 20px;">
                              <div style="display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85rem;">
                                  <div *ngFor="let doc of adminDocDetails; let i = index"
                                      style="display: flex; align-items: center; gap: 5px;">
                                      <i class="bi bi-check-circle text-success"></i>
                                      {{ doc.type }} - {{ doc.fileName }} {{ doc.value && doc.value !== "null" ? '- ' + doc.value : '' }}
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Technical Contact Card -->
                      <div *ngIf="card.heading === 'Technical Contact'">
                          <p><strong>Full Name:</strong>
                              {{ card.details.techFullName }}</p>
                          <p><strong>Email:</strong>
                              {{ card.details.techEmail }}</p>
                          <p><strong>STD Telephone No:</strong>
                            {{card.details.techCountryCode}} {{ card.details.techPhone }}</p>
                          <p><strong>Individual Phone No:</strong>
                             {{card.details.techAltCountryCode}} {{ card.details.techAltPhone }}</p>
                          <p><strong>Designation:</strong>
                              {{ card.details.techDesignation }}</p>
                           <p><strong>Address:</strong>
                              {{ card.details.techAddress }}</p>
                          <p><strong>Documents:</strong>
                              {{ card.details.techDocuments }}</p>
                          <div *ngIf="techDocDetails?.length > 0" style="margin-top: 20px;">
                              <div style="display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85rem;">
                                  <div *ngFor="let doc of techDocDetails; let i = index"
                                      style="display: flex; align-items: center; gap: 5px;">
                                      <i class="bi bi-check-circle text-success"></i>
                                      {{ doc.type }} - {{ doc.fileName }} {{ doc.value && doc.value !== "null" ? '- ' + doc.value : '' }}
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Billing Contact Card -->
                      <div *ngIf="card.heading === 'Finance Contact'">
                          <p><strong>Full Name:</strong>
                              {{ card.details.billFullName }}</p>
                          <p><strong>Email:</strong>
                              {{ card.details.billEmail }}</p>
                          <p><strong>STD Telephone No:</strong>
                            {{card.details.billCountryCode}}  {{ card.details.billPhone }}</p>
                          <p><strong>Individual Phone No:</strong>
                             {{card.details.billAltCountryCode}} {{ card.details.billAltPhone }}</p>
                          <p><strong>Designation:</strong>
                              {{ card.details.billDesignation }}</p>
                          <p><strong>Address:</strong>
                               {{ card.details.billAddress }}</p>
                          <p><strong>Documents:</strong>
                          </p>
                          <div *ngIf="billDocDetails?.length > 0" style="margin-top: 20px;">
                              <div style="display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85rem;">
                                  <div *ngFor="let doc of billDocDetails; let i = index"
                                      style="display: flex; align-items: center; gap: 5px;">
                                      <i class="bi bi-check-circle text-success"></i>
                                      {{ doc.type }} - {{ doc.fileName }} {{ doc.value && doc.value !== "null" ? '- ' + doc.value : '' }}
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Name Server Details Card -->
                      <div *ngIf="card.heading === 'Name Server Details'">
                          <div *ngFor="let nameServer of nameDetails; let i = index">
                              <p><strong>Name Server {{ i + 1 }} Host Name:</strong> {{ nameServer.hostName }}</p>
                              <p><strong>Name Server {{i + 1}} DNS Service Provider:</strong> {{ nameServer.dnsServiceProvider }}</p>
                              <p><strong>Name Server {{ i + 1 }} IPv4 Address:</strong> {{ nameServer.ipAddress ? nameServer.ipAddress:'NA'}}</p>
                              <p><strong>Name Server {{ i + 1 }} IPv6 Address:</strong> {{ nameServer.ipv6Address ? nameServer.ipv6Address:'NA'  }}</p>
                              <p><strong>Name Server {{i + 1}} IP Service Provider:</strong> {{ nameServer.ipServiceProvider }}</p>
                              <hr />
                          </div>
                      </div>
                      <div *ngIf="card.heading === 'DNS SEC Details'">
                          <div *ngFor="let dnsSec of dnsSecRecordsOfDomain; let i = index">
                              <p><strong>DNS SEC {{ i + 1 }} key Tag:</strong> {{ dnsSec.keyTag }}</p>
                              <p><strong>DNS SEC {{i + 1}} Algorithm Type:</strong> {{ dnsSec.algorithmType }}</p>
                              <p><strong>DNS SEC {{ i + 1 }} Digest Type:</strong> {{ dnsSec.digestType }}</p>
                              <p><strong>DNS SEC {{ i + 1 }} Digest:</strong></p>
                              <p>{{ dnsSec.digest }}</p>
                              <hr />
                          </div>
                          <div *ngIf="dnsSecRecordsOfDomain.length==0">
                              <span style="font-size: 16px;">NA</span>
                          </div>
                      </div>
                    <button *ngIf="
  (!card.details.isEditing && card.heading !== 'Domain Applying For' && (card.heading !== 'DNS SEC Details' || dnsSecRecordsOfDomain?.length > 0)) || 
  (card.heading === 'Domain Applying For' && card.details.bankName?.length === 2)
"
        class="btn btn-primary mt-3 "
        [disabled]="hideEditButton" (click)="toggleEdit(card)">Edit</button>
                  </div>
                  <!-- Editable fields (shown only when isEditing is true) -->
                  <div *ngIf="card.details.isEditing">
                      <!-- Domain Applying For Card (Edit) -->
                      <div *ngIf="card.heading === 'Domain Applying For'">
                          <div class="form-group">
                              <label for="bankName">Bank Name:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="bankName" [disabled]="isDisabled"  (keypress)="preventSpecialChars($event)"
                                  [(ngModel)]="card.details.bankName">
                          </div>
                         
                          <div class="form-group">
                              <label for="domainName">Domain Name:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="domainName" [disabled]="isDisabled"
                                  [(ngModel)]="card.details.domainName">
                                 
                          </div>
                        
                          <div class="form-group">
                              <label for="term">Term:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="term" [disabled]="isDisabled"
                                  [(ngModel)]="card.details.numberOfYears">
                          </div>
                          
                          <div class="form-group">
                              <label for="cost">Cost:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="cost" [disabled]="isDisabled" [(ngModel)]="card.details.cost">
                          </div>

                           <div *ngIf="card.details.bankName.length==2" class="form-group">
    <label for="fileUpload">Document:<span style="color:red">*</span></label>
    <input
      type="file"
      class="form-control"
      id="fileUpload"
      (change)="onFileSelected($event)"
    />
    <div *ngIf="card.details?.twoLetterDomainDocumentFileName!=''&&card.details?.twoLetterDomainDocumentFileName!=null" style="display: flex; gap: 10px; flex-wrap: wrap;padding-top:10px; font-size: 0.85rem;">
                                  <div   (click)="openBoardDocumentModal()"
                                      style="display: flex; align-items: center; gap: 5px;">
                                      <i class="bi bi-check-circle text-success"></i>
                                      Domain Board Approval - {{ card.details?.twoLetterDomainDocumentFileName }}
                                  </div>
                                   <button class="btn btn-sm btn-danger" (click)="removeDomainBoardApprovalDoc()">
          <i class="bi bi-trash"></i>
        </button>
        
                              </div>
                              <p style="color:red">{{boardApprovalDocErrors}}</p>
  </div>
                      </div>
                      <!-- Organisation Details Card (Editable) -->
                      <div *ngIf="card.heading === 'Entity Details'" >
                          <form [formGroup]="organisationForm">
                          <div class="form-group">
                              <label for="institutionName">Entity Name:<span style="color:red">*</span></label>
                              <input type="text" placeholder="Enter entity name" class="form-control" formControlName="institutionName" id="institutionName" (input)="convertToUpperCase($event)"  (keypress)="preventSpecialChars($event)"
                                    required>
                                    <div *ngIf="organisationForm.get('institutionName')?.invalid" class="text-danger">
                                      Entity name is required.
                                  </div>
                          </div>

                         
                          <!-- <div class="form-group">
                              <label for="pincode">Pincode:<span style="color:red">*</span></label>
                              <input type="text" class="form-control"  maxlength="6" id="pincode"  (input)="restrictNonNumeric($event)" [(ngModel)]="card.details.pincode"  #pincodeControl="ngModel" required pattern="^[0-9]{6}$">
                          </div>
                          <div *ngIf="formSubmitted && pincodeControl.invalid" class="text-danger">
                               Pincode is required.
                          </div> -->
                          <div class="form-group">
                            <div class="row">
                              <div class="col-md-4 ">
                                <label for="pincode" class="form-label">Pincode</label><span style="color: red">*</span>
                    
                                <input type="text" style="margin-bottom: 0;" id="pincode" class="form-control" placeholder="Enter pincode" formControlName="pincode"
                                  (input)="onPincodeChange()" required maxlength="6" />
                                  <div
                                  *ngIf="organisationForm.get('pincode')?.invalid"
                                  class="text-danger">
                                  Please enter your pincode.
                                </div>
                                 <div
                                  *ngIf="!organisationForm.get('pincode')?.invalid && pincodeErrorMessage != ''"
                                  class="text-danger">
                                  {{pincodeErrMsg}}
                                </div>
                              </div>
                            
                    
                              <div class="col-md-4 ">
                                <label for="city" class="form-label">Location</label><span class="text-danger">*</span>
                    
                                <select id="city" class="form-control" formControlName="city"
                                  [disabled]="organisationForm.get('city')?.disabled" required>
                                  <option *ngIf="organisationForm.get('city')?.disabled" value="" disabled>
                                    Select Location
                                  </option>
                                  <!-- Do not show the "Select City" option when the city form control is disabled -->
                                  <option *ngFor="let city of cityOptions" [value]="city.name">
                                    {{ city.name }}
                                  </option>
                                </select>
                              </div>
                    
                              <div class="col-md-4 ">
                                <label for="state" class="form-label">State</label><span class="text-danger">*</span>
                    
                                <input type="text"  style="margin-bottom: 0;" id="state" class="form-control" placeholder="Enter State" formControlName="state"
                                  [value]="organisationForm.get('state')?.value" readonly required />
                              </div>
                              </div>
                            </div>
                          <div class="form-group">
                            <div class="row">
                              <div class="col-md-4 ">
                                <label for="district" class="form-label">District</label><span class="text-danger">*</span>
                    
                                <select id="district" class="form-control" formControlName="district"
                                  [disabled]="organisationForm.get('district')?.disabled" required>
                                  <option *ngIf="organisationForm.get('district')?.disabled" value="" disabled>
                                    Select District
                                  </option>
                                  <!-- Do not show the "Select City" option when the city form control is disabled -->
                                  <option *ngFor="let city of getUniqueDistricts()" [value]="city">
                                    {{ city }}
                                  </option>
                                </select>
                              </div>
                            </div>
                          </div>
                          
                          <div class="form-group">
                              <label for="address">Address:<span style="color:red">*</span></label>
                              <input type="text" placeholder="Enter address" class="form-control" id="address" formControlName="address" maxlength="500" required>
                              <div *ngIf=" organisationForm.get('address').invalid" class="text-danger">
                                <!-- Required Validation Error -->
                                <div *ngIf="organisationForm.get('address').errors?.['required']">
                                  Please enter your address.
                                </div>
                                <!-- Min Length Validation Error (only if not required error is shown) -->
                                <div *ngIf="organisationForm.get('address').errors?.['minlength'] && !organisationForm.get('address').errors?.['required']">
                                  Address must be atleat 5 characters long.
                                </div>
                                <!-- Max Length Validation Error (only if not required or minlength error is shown) -->
                                <div *ngIf="organisationForm.get('address').errors?.['maxlength'] && !organisationForm.get('address').errors?.['required'] && !organisationForm.get('address').errors?.['minlength']">
                                  Address cannot exceed 500 characters.
                                </div>
                              </div>
                          </div>
                          
                          <div class="form-group" >
                              <label for="stdTelephone" class="form-label">STD Telephone No</label><span style="color: red">*</span>
                              <div style="display: flex; width: 100%;">
                                <!-- Country Code Input -->
                                <input type="text" placeholder="STD code" id="orgStdCode" class="form-control"
                                 formControlName="stdCode"  (input)="adjustCountryCodeWidth(orgStdCountry)" (input)="sanitizeInput($event, 'stdCode')"#orgStdCode
                                  style="width: auto; min-width: auto;border-top-right-radius: 0;border-bottom-right-radius: 0; padding-left: 5px; padding-right: 0px;"/>
                              
                    
                                <!-- Mobile Number Input -->
                                <input style="border-radius: 0 5px 5px 0px;" type="text" id="stdTelephone" class="form-control"
                                  placeholder="Enter telephone number" formControlName="stdTelephone" 
                                  (input)="sanitizeInput($event, 'stdTelephone')" maxlength="10" required 
                                  style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                                  
                              </div>
          
                  
                              <div *ngIf="
                                    organisationForm.get('stdCode')?.invalid || organisationForm.get('stdTelephone')?.invalid
                                  
                                  " class="text-danger">
                                Please enter a valid STD code (1-6 digits) or telephone number (5-10 digits).
                              </div>
                  
                            </div>
                            <div class="form-group" >
                              <label for="mobileNumber" class="form-label">Mobile Number</label><span style="color: red">*</span>
                              <div style="display: flex; width: 100%;">
                                <!-- Country Code Input -->
                                <div class="custom-select-wrapper">
                                  <div class="customs-select" formControlName="countryCode">
                                    {{ selectedCountryCode ? selectedCountryCode : 'country code' }}
                                    <span class="dropdown-arrow"></span>
                                  </div>
                                  <select class="real-select" (change)="updateCountryCode($event)">
                                    <option [value]="null" selected disabled hidden>Country Code</option>
                                    <option *ngFor="let countryCode of countryCodes|orderBy:'countryName'" [value]="countryCode.countryCode">
                                      {{ countryCode.countryName }} -({{ countryCode.countryCode }})
                                    </option>
                                  </select>
                                </div>
                              
                    
                                <!-- Mobile Number Input -->
                                <input style="border-radius: 0 5px 5px 0px;" type="text" id="mobileNumber" class="form-control"
                                  placeholder="Enter mobile number" formControlName="mobileNumber" 
                                  (input)="sanitizeInput($event, 'mobileNumber')" minlength="8" maxlength="15" required 
                                  style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                              </div>
                              
                              <div *ngIf="organisationForm.get('countryCode')?.invalid && organisationForm.get('countryCode')?.touched || orgMobileNumberError!=''" class="text-danger">
                                
                                <span *ngIf="organisationForm.get('countryCode')?.errors?.['pattern'] || orgMobileNumberError!=''">
                                  Please enter a valid country code (1-4 digits) or mobile number (10 digits for India, 8-15 digits for other countries).
                                </span>
                              </div>
                              
                             <span *ngIf="orgMobileNumberError != ''" class="text-danger">Indian number must be start with 6-9</span>
                                
                              
                            
                            </div>
                          <div class="form-group">
                              <label for="email">Entity Email:<span style="color:red">*</span></label>
                              <input type="email" placeholder="Enter email" class="form-control" id="email" formControlName="organisationEmail" name="organisationEmail" (input)="validateEmail($event)"
                                required>
                                <div *ngIf="organisationForm.get('organisationEmail')?.invalid" class="text-danger">
                                  Entity email is required.
                              </div>
                          </div>
                          
      
                          
                          <div class="form-group">
                              <label for="email">Entity Documents:<span style="color:red">* </span><span class="text-danger">(Please upload all 4 documents)</span></label>
                              <app-document-upload id="documentsToUpload" [mode]="'org'"
                                  [organisationUploadedDocs]="orgDocDetails"
                                  [submissionAttempted]="submissionAttempted"
                                   (onOrganisationValidationChange)="
                                handleOrganisationValidationChange($event)
                              " (setOrganisationUploadedDocs)="
                                setOrganisationUploadedDocuments($event)"
                                 (previewDocNameModalheading)="setEntityDocNameForModalHeading($event)"
                              (imagePreviewUrl)="onImageViewClick($event)" 
                              (pdfPreviewUrl)="onPdfViewClick($event)"
                              [parentId]="'preview'"
                                  [preview]="preview"></app-document-upload>
                                  <div *ngIf="orgDocErrors!='' && orgDocDetails.length<4">
                                    <p style="color:red">{{orgDocErrors}}</p>
                                  </div>
                                  <div *ngIf="documentUploadError!=null">
                                     <p style="color: red" >{{documentUploadError.message}}</p>
                                  </div>
                          </div>
                      </form>
                      </div>
                      <!-- Administrative Contact Card (Editable) -->
                      <div *ngIf="card.heading === 'Administrative Contact'">
                          <div class="form-group">
                              <label for="adminFullName">Admin Full Name:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="adminFullName" placeholder="Enter full name" (input)="allowAlphabetsOnly($event,'adminFullName')"
                                  [(ngModel)]="card.details.adminFullName" #adminFullName="ngModel" required>
                                  <div *ngIf="formSubmitted && adminFullName.invalid || !validFullName" class="text-danger">
                                    Admin full name is required.
                                </div>
                          </div>
                         
                          <div class="form-group">
                              <label for="adminEmail">Admin Email:<span style="color:red">*</span></label>
                              <input type="email" class="form-control" id="adminEmail" placeholder="Enter email" (input)="validateEmail($event)"
                                  [(ngModel)]="card.details.adminEmail" #adminEmail="ngModel" required>
                                  <div *ngIf="formSubmitted && adminEmail.invalid" class="text-danger">
                                    Admin email is required.
                                </div>
                                <div *ngIf="orgEmailError!=''" class="text-danger">
                                    {{orgEmailError}}
                                </div>
                          </div>
                         
                          <div class="form-group">
                              <label for="adminPhone">Admin STD Telephone No:<span style="color:red">*</span></label>
                              <div class="input-group">
                                <div style="display: flex; width: 100%;">
                                  <!-- Country Code Input -->
                                  <input type="text" placeholder="Std code" id="adminCountryCode" class="form-control"  (keydown)="restrictInvalidKeys($event)" 
                                  [(ngModel)]="card.details.adminCountryCode"(input)="adjustCountryCodeWidth(adminCC)" #adminCode
                                  style="width: auto; min-width: auto;border-top-right-radius: 0;border-bottom-right-radius: 0; padding-left: 5px; padding-right: 0px;"/>
                                
                      
                                  <!-- Mobile Number Input -->
                                  <input   type="text" 
                                  class="form-control" 
                                  id="adminPhone"
                                  placeholder="Enter telephone number"  
                                  (input)="restrictNonNumeric($event)" 
                                  [(ngModel)]="card.details.adminPhone"  
                                  #adminPhone="ngModel"
                                  name="adminPhone"
                                  required
                                  maxlength="10"
                                  pattern="^\d{5,10}$"
                                    style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                                </div>
                                      <!-- Country Code Dropdown for Bill Phone -->
                                     
                              </div>
                            
                            
                            <!-- Error messages -->
                            <div *ngIf="formSubmitted && (adminPhone.invalid||!card.details.adminCountryCode)||adminStdNumberError!=''" class="text-danger">
                              <span *ngIf="adminPhone.errors?.['required']">STD telephone number is required.</span>
                              <span *ngIf="!card.details.adminCountryCode">STD code is required.</span>
                              <span *ngIf="adminPhone.errors?.['pattern']||adminStdNumberError!=''">Please enter a valid STD code (1-6 digits) or telephone number (5-10 digits).</span>
                            </div></div>
                            <div class="form-group">
                              <label for="adminAltPhone">Admin Individual Phone No:<span style="color:red">*</span></label>
                              <div class="input-group">
                                <div style="display: flex; width: 100%;">
                                  <!-- Country Code Input -->
                                  <div class="custom-select-wrapper">
                                      <div class="customs-select" formControlName="adminAltCountryCode">
                                        {{ selectedAdminAltCountryCode ? selectedAdminAltCountryCode : 'County Code' }}
                                        <span class="dropdown-arrow"></span>
                                      </div>
                                      <select class="real-select" (change)="updateAdminAltCountryCode($event)">
                                        <option [value]="null" selected disabled hidden>Country Code</option>
                                        <option *ngFor="let stdNum of countryCodes | orderBy:'countryName'" [value]="stdNum.countryCode">
                                          {{ stdNum.countryName }} -({{ stdNum.countryCode }})
                                        </option>
                                      </select>
                                    </div>
                                
                      
                                  <!-- Mobile Number Input -->
                                  <input  type="text" 
                                  class="form-control" 
                                  id="adminAltPhone"  
                                  (input)="restrictNonNumeric($event)" 
                                  [(ngModel)]="card.details.adminAltPhone"  
                                  placeholder="Enter Mobile number"
                                  (ngModelChange)="validatemobileNumber(card.details.adminAltPhone,'adminMobile')"
                                  #adminAltPhone="ngModel"
                                  name="adminAltPhone"
                                  required
                                  minlength="8"
                                  maxlength="15"
                                  pattern="^\d{8,15}$"
                                    style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                                </div>
                                      <!-- Country Code Dropdown for Bill Phone -->
                            </div>
                            
                            <!-- Error messages -->
                            <div *ngIf="formSubmitted && (adminAltPhone.invalid||!card.details.adminAltCountryCode)||adminMobileNumberError!=''" class="text-danger">
                              <span *ngIf="adminAltPhone.errors?.['required']">Individual phone number is required.</span>
                              <span *ngIf="!card.details.adminAltCountryCode">country code is required.</span>
                              <span *ngIf="adminAltPhone.errors?.['pattern'] ||adminMobileNumberError!=''">Please enter a valid country code (1-4 digits) or mobile number (10 digits for India, 8-15 digits for other countries).</span>
                              <span *ngIf="adminMobileNumberError!=''"> Indian numbers must be start with 6-9</span>
                            </div>
                          </div>
                            
                            
                          <div class="form-group">
                              <label for="adminDesignation">Admin Designation:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" placeholder="Enter designation" id="adminDesignation" (keypress)="preventSpecialChars($event)" maxlength="50"
                                  [(ngModel)]="card.details.adminDesignation" #adminDesignation="ngModel" required>
                                  <div *ngIf="formSubmitted && adminDesignation.invalid" class="text-danger">
                                    designation is required.
                                 </div>
                          </div>
                          
                           <!--  -->
                          <div class="form-group">
                            <label for="adminAddress">Address:<span style="color:red">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter address" id="adminAddress" maxlength="500" minlength="5"
                              [(ngModel)]="card.details.adminAddress" #adminAddress="ngModel" required>
                          
                            <div *ngIf="formSubmitted && adminAddress.invalid" class="text-danger">
                              <div *ngIf="adminAddress.errors?.['required']">
                                Address is required.
                              </div>
                          
                              <div *ngIf="adminAddress.errors?.['minlength']">
                                Address must be atleat 5 characters long.
                              </div>
                            </div>
                          </div>
                        
                           <!--  -->
                          <div class="form-group" style="margin-bottom: 5px;">
                              <label for="adminDocuments">Admin Documents:<span style="color:red">* </span><span class="text-danger">(Please upload all 3 documents)</span></label>
                              
                          </div>
                          <app-document-upload id="documentsToUpload" [mode]="'admin'"
                              [adminUploadedDocs]="adminDocDetails" [submissionAttempted]="submissionAttempted"
                              (onAdminValidationChange)="
                                  handleAdminValidationChange($event)
                              " 
                              (previewDocNameForContact)="setContactDocNameForModalHeading($event)"
                              (setAdminUploadedDocs)="setAdminUploadedDocuments($event)"
                              (imagePreviewUrl)="onImageViewClick($event)" (pdfPreviewUrl)="onPdfViewClick($event)"
                              [preview]="preview"></app-document-upload>
                              <div *ngIf="adminDocErrors!=''&& this.adminDocDetails.length<2">
                                <p style="color:red">{{adminDocErrors}}</p>
                              </div>
                              <div *ngIf="adminDocUploadError!=null">
                                <p style="color:red">{{adminDocUploadError?.message}}</p>
                              </div>
                      </div>
                      <!-- Technical Contact Card (Editable) -->
                      <div *ngIf="card.heading === 'Technical Contact'">
                          <div class="form-group">
                              <label for="techFullName">Tech Full Name:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="techFullName" placeholder="Enter full name" (input)="allowAlphabetsOnly($event,'techFullName')"
                                  [(ngModel)]="card.details.techFullName" #techFullName="ngModel" required>
                                  <div *ngIf="formSubmitted && techFullName.invalid || !validFullName" class="text-danger">
                                    Tech full name is required.
                                 </div>
                          </div>
                         
                          <div class="form-group">
                              <label for="techEmail">Tech Email:<span style="color:red">*</span></label>
                              <input type="email" class="form-control" placeholder="Enter email" id="techEmail" (input)="validateEmail($event)"
                                  [(ngModel)]="card.details.techEmail" #techEmail="ngModel" required>
                                  <div *ngIf="formSubmitted && techEmail.invalid" class="text-danger">
                                    Tech Email  is required.
                                 </div>
                                 <div *ngIf="orgEmailError!=''" class="text-danger">
                                    {{orgEmailError}}
                                </div>
                          </div>
                        
                         <!-- Tech Phone -->
                          <div class="form-group">
                              <label for="techPhone">Tech STD Telephone No:<span style="color:red">*</span></label>
                              
                              <div class="input-group">
                                <div style="display: flex; width: 100%;">
                                  <!-- Country Code Input -->
                                  <input type="text"  placeholder="Std Code" id="techCountryCode" class="form-control"  (keydown)="restrictInvalidKeys($event)" 
                                  [(ngModel)]="card.details.techCountryCode"(input)="adjustCountryCodeWidth(techCC)" #techCountryCode
                                  style="width: auto; min-width: auto;border-top-right-radius: 0;border-bottom-right-radius: 0; padding-left: 5px; padding-right: 0px;"/>
                                
                      
                                  <!-- Mobile Number Input -->
                                  <input   type="text" 
                                  class="form-control" 
                                  id="techPhone"  
                                  (input)="restrictNonNumeric($event)" 
                                  placeholder="Enter telePhone number"
                                  [(ngModel)]="card.details.techPhone"  
                                  #techphone="ngModel"
                                  name="techPhone"
                                  required
                                  minlength="6"
                                  maxlength="10"
                                  pattern="^\d{5,10}$"
                                    style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                                </div>
                          </div>
                          
                          <!-- Error messages for Tech Phone -->
                          <div *ngIf="formSubmitted && (techphone.invalid||!card.details.techCountryCode)||techStdNumberError!=''" class="text-danger">
                              <span *ngIf="techphone.errors?.['required']">STD telephone number is required.</span>
                              <span *ngIf="!card.details.techCountryCode">STD code is required.</span>
                              <span *ngIf="techphone.errors?.['pattern']||techStdNumberError!=''">Please enter a valid STD code (1-6 digits) or telephone number (5-10 digits).</span>
                          </div>
                          </div>
                          <!-- Tech Alt Phone -->
                          <div class="form-group">
                              <label for="techAltPhone">Tech Individual Phone No:<span style="color:red">*</span></label>
                              <div class="input-group">
                                <div style="display: flex; width: 100%;">
                                  <!-- Country Code Input -->
                                  <div class="custom-select-wrapper">
                                      <div class="customs-select" formControlName="techAltCountryCode">
                                        {{ selectedTechAltCountryCode ? selectedTechAltCountryCode : 'Country Code' }}
                                        <span class="dropdown-arrow"></span>
                                      </div>
                                      <select class="real-select" (change)="updateTechAltCountryCode($event)">
                                        <option [value]="null" selected disabled hidden>Country Code</option>
                                        <option *ngFor="let stdNum of countryCodes | orderBy:'countryName'" [value]="stdNum.countryCode">
                                          {{ stdNum.countryName }} -({{ stdNum.countryCode }})
                                        </option>
                                      </select>
                                    </div>
                                
                      
                                  <!-- Mobile Number Input -->
                                  <input   type="text" 
                                  class="form-control" 
                                  id="techAltPhone"  
                                  placeholder="Enter mobile number"
                                  (input)="restrictNonNumeric($event)" 
                                  [(ngModel)]="card.details.techAltPhone"  
                                  #techAltPhone="ngModel"
                                  (ngModelChange)="validatemobileNumber(card.details.techAltPhone,'techMobile')"
                                  name="techAltPhone"
                                  required
                                  minlength="8"
                                  maxlength="15"
                                  pattern="^\d{8,15}$"
                                    style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                                </div>

                          </div>
                          
                          <!-- Error messages for Tech Alt Phone -->
                          <div *ngIf="formSubmitted && (techAltPhone.invalid || !card.details.techAltCountryCode) || techMobileNumberError!=''" class="text-danger">
                            <span *ngIf="techAltPhone.errors?.['required']">Tech individual phone number is required.</span>
                             <span *ngIf="techAltPhone.errors?.['pattern']|| techMobileNumberError!=''">Please enter a valid country code (1-4 digits) or mobile number (10 digits for India, 8-15 digits for other countries).</span>
                             <span *ngIf="!card.details.techAltCountryCode"> country code is required.</span>
                             <span *ngIf="techMobileNumberError!=''">Indian numbers must be start with 6-9</span>
                           </div>
                          
                          </div>

                          <div class="form-group">
                              <label for="techDesignation">Tech Designation:<span style="color:red">*</span></label> 
                              <input type="text" class="form-control" id="techDesignation" placeholder="Enter designation" (keypress)="preventSpecialChars($event)" maxlength="50"
                                  [(ngModel)]="card.details.techDesignation" #techDesignation="ngModel" required>
                                  <div *ngIf="formSubmitted && techDesignation.invalid" class="text-danger">
                                    Designation is required.
                                 </div>
                          </div>
                          
                           <!--  -->
                          <div class="form-group">
                            <label for="techAddress">Address:<span style="color:red">*</span></label>
                            <input type="text" class="form-control" id="techAddress" placeholder="Enter address" maxlength="500" minlength="5"
                              [(ngModel)]="card.details.techAddress" #techAddress="ngModel" required>
                          
                            <div *ngIf="formSubmitted && techAddress.invalid" class="text-danger">
                              <div *ngIf="techAddress.errors?.['required']">
                                Address is required.
                              </div>
                          
                              <div *ngIf="techAddress.errors?.['minlength']">
                                Address must be atleat 5 characters long.
                              </div>
                            </div>
                          </div>
                      

                         <!-- <div class="form-group">
                          <label for="adminAddress">Address:<span style="color:red">*</span></label>
                          <input type="text" class="form-control" id="adminAddress" (keypress)="preventSpecialChars($event)" maxlength="300"
                              [(ngModel)]="card.details.adminAddress" #adminAddress="ngModel" required>
                        </div>
                      <div *ngIf="formSubmitted && adminAddress.invalid" class="text-danger">
                          Address is required.
                       </div> -->

                          <div class="form-group" style="margin-bottom: 5px;">
                              <label for="techDocuments">Tech Documents:<span style="color:red">* </span><span class="text-danger">(Please upload all 3 documents)</span></label>
                          </div>
                          <app-document-upload id="documentsToUpload" [mode]="'tech'"
                              [techUploadedDocs]="techDocDetails" [submissionAttempted]="submissionAttempted"
                              (onTechValidationChange)="handleTechValidationChange($event)"
                              (setTechUploadedDocs)="setTechUploadedDocuments($event)"
                              (imagePreviewUrl)="onImageViewClick($event)" (pdfPreviewUrl)="onPdfViewClick($event)"
                              [preview]="preview"
                              (previewDocNameForContact)="setContactDocNameForModalHeading($event)">
                            </app-document-upload>

                              <div *ngIf="techDocErrors!='' && techDocDetails.length<2">
                                <p style="color:red">{{techDocErrors}}</p>
                              </div>
                              <div *ngIf="techDocUploadError!=null">
                                <p style="color:red">{{techDocUploadError?.message}}</p>
                              </div>
                      </div>
                      <!-- Billing Contact Card (Editable) -->
                      <div *ngIf="card.heading === 'Finance Contact'">
                          <div class="form-group">
                              <label for="billFullName">Finance Full Name:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="billFullName" placeholder="Enter full name" (input)="allowAlphabetsOnly($event,'billFullName')"
                                  [(ngModel)]="card.details.billFullName" #billFullName="ngModel" required>
                                  <div *ngIf="formSubmitted && billFullName.invalid || !validFullName" class="text-danger">
                              Finance full name is required.
                           </div>
                          </div>
                          
                          <div class="form-group">
                              <label for="billEmail">Finance Email:<span style="color:red">*</span></label>
                              <input type="email" class="form-control" id="billEmail" placeholder="Enter email" (input)="validateEmail($event)"
                                  [(ngModel)]="card.details.billEmail" #billEmail="ngModel" required>
                                  <div *ngIf="formSubmitted && billEmail.invalid" class="text-danger">
                                    Finance email is required.
                                 </div>
                                 <div *ngIf="orgEmailError!=''" class="text-danger">
                                  {{orgEmailError}}
                              </div>
                          </div>
                          
                        
                          <!-- Bill Phone -->
                  <div class="form-group">
                      <label for="billPhone">Finance STD Telephone No:<span style="color:red">*</span></label>
                      <div class="input-group">
                         
                            
                            <div style="display: flex; width: 100%;">
                              <!-- Country Code Input -->
                              <input type="text" placeholder="Std code" id="billCountryCode" class="form-control"  (keydown)="restrictInvalidKeys($event)" 
                              [(ngModel)]="card.details.billCountryCode"(input)="adjustCountryCodeWidth(billCC)" #billCountryCode
                              style="width: auto; min-width: auto;border-top-right-radius: 0;border-bottom-right-radius: 0; padding-left: 5px; padding-right: 0px;"/>
                            
                  
                              <!-- Mobile Number Input -->
                              <input  type="text" 
                              class="form-control" 
                              id="billPhone"  
                              placeholder="Enter telephone number"
                              (input)="restrictNonNumeric($event)" 
                              [(ngModel)]="card.details.billPhone"  
                              #billPhone="ngModel"
                              name="billPhone"
                              required
                              minlength="6"
                              maxlength="10"
                              pattern="^\d{5,10}$"
                                style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                            </div>
                    </div>
                  
                  <!-- Error messages for Bill Phone -->
                  <div *ngIf="formSubmitted && (billPhone.invalid || !card.details.billCountryCode)||billStdnumberError!=''" class="text-danger">
                    <span *ngIf="billPhone.errors?.['required']">STD Telephone number is required.</span>
                    <span *ngIf="billPhone.errors?.['pattern']||billStdnumberError!=''">Invalid STD Telephone number format. It should be a 10-digit number.</span>
                    <span *ngIf="!card.details.billCountryCode"> STD code is required.</span>
                  </div>
                  </div>
                  <!-- Bill Alt Phone -->
                  <div class="form-group">
                    <label for="billAltPhone">Finance Individual Phone No:<span style="color:red">*</span></label>
                    <div class="input-group">
                         
                            
                      <div style="display: flex; width: 100%;">
                        <!-- Country Code Input -->
                        <div class="custom-select-wrapper">
                          <div class="customs-select" formControlName="billAltCountryCode">
                            {{ selectedBillAltCountryCode ? selectedBillAltCountryCode : 'Country Code' }}
                            <span class="dropdown-arrow"></span>
                          </div>
                          <select class="real-select" (change)="updateBillAltCountryCode($event)">
                            <option [value]="null" selected disabled hidden>Country Code</option>
                            <option *ngFor="let stdNum of countryCodes | orderBy:'countryName'" [value]="stdNum.countryCode">
                              {{ stdNum.countryName }} -({{ stdNum.countryCode }})
                            </option>
                          </select>
                        </div>
                      
            
                        <!-- Mobile Number Input -->
                        <input  type="text" 
                        class="form-control" 
                        id="billAltPhone" 
                        placeholder="Enter mobile number" 
                        (input)="restrictNonNumeric($event)" 
                        [(ngModel)]="card.details.billAltPhone"  
                        #billAltPhone="ngModel"
                        (ngModelChange)="validatemobileNumber(card.details.billAltPhone,'billMobile')"
                        name="billAltPhone"
                        required
                        minlength="8"
                        maxlength="15"
                        pattern="^\d{8,15}$"
                          style="flex: 1; border-radius: 0 5px 5px 0px;"/>
                      </div>
              </div>
                     
                      
                  
                  <!-- Error messages for Bill Alt Phone -->
                  <div *ngIf="formSubmitted && (billAltPhone.invalid || !card.details.billAltCountryCode)|| billMobilenumberError!=''" class="text-danger">
                    <span *ngIf="billAltPhone.errors?.['required']">Bill phone number is required.</span>
                    <span *ngIf="billAltPhone.errors?.['pattern'] || billMobilenumberError!=''">Please enter a valid country code (1-4 digits) or mobile number (10 digits for India, 8-15 digits for other countries).</span>
                    <span *ngIf="!card.details.billAltCountryCode"> country code is required.</span>
                    <span *ngIf="billMobilenumberError!=''">Indian numbers must be start with 6-9</span>
                  </div>
                  </div>
                  <!-- Error message for duplicate phone numbers -->
               

                           <div class="form-group">
                              <label for="billDesignation">Finance Designation:<span style="color:red">*</span></label>
                              <input type="text" class="form-control" id="billDesignation" placeholder="Enter designation" (keypress)="preventSpecialChars($event)" maxlength="50"
                                  [(ngModel)]="card.details.billDesignation" #billDesignation="ngModel" required>
                                  <div *ngIf="formSubmitted && billDesignation.invalid" class="text-danger">
                                    Designation is required.
                                 </div>
                         
                                </div>
                         
                           <!--  -->
                          <div class="form-group">
                            <label for="billAddress">Address:<span style="color:red">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter address" id="billAddress" maxlength="500" minlength="5"
                              [(ngModel)]="card.details.billAddress" #billAddress="ngModel" required>
                          
                            <div *ngIf="formSubmitted && billAddress.invalid" class="text-danger">
                              <div *ngIf="billAddress.errors?.['required']">
                                Address is required.
                              </div>
                          
                              <div *ngIf="billAddress.errors?.['minlength']">
                                Address must be atleat 5 characters long.
                              </div>
                            </div>
                          </div>
                       
                           <!--  -->
                          <div class="form-group" style="margin-bottom: 5px;">
                              <label for="billDocuments">Finance Documents:<span style="color:red">*</span><span class="text-danger"></span><span class="text-danger">(Please upload all 3 documents)</span></label>
                          </div>
                          <app-document-upload id="documentsToUpload" [mode]="'bill'"
                              [billingUploadedDocs]="billDocDetails" [submissionAttempted]="submissionAttempted"
                              (onBillingValidationChange)="
                            handleBillingValidationChange($event)
                          " (setBillingUploadedDocs)="
                            setBillingUploadedDocuments($event)
                          " (imagePreviewUrl)="onImageViewClick($event)" (pdfPreviewUrl)="onPdfViewClick($event)"
                              [preview]="preview"
                              (previewDocNameForContact)="setContactDocNameForModalHeading($event)"></app-document-upload>

                              <div *ngIf="billDocErrors!=''&&billDocDetails.length<2">
                                <p style="color:red">{{billDocErrors}}</p>
                              </div>
                               <div *ngIf="finDocUploadError!=null">
                                <p style="color:red">{{finDocUploadError?.message}}</p>
                              </div>
                      </div>

                      <!-- DNS SEC DETAILS EDIT CARD START-->
                      <!-- DNS SEC Details Card (Editable) -->
                      <div *ngIf="card.heading === 'DNS SEC Details'">
                        <div class="form-group" *ngIf="dnsSecRecordsCount > 0">
                          <div *ngFor="let dnsSec of dnsSecRecordsOfDomain; let i = index">
                      
                            <!-- Key Tag -->
                            <label for="keyTag{{i}}">DNS SEC {{i+1}} Key Tag:<span style="color:red">*</span></label>
                            <input type="text" class="form-control" id="keyTag{{i}}" placeholder="Enter key tag" [(ngModel)]="dnsSec.keyTag" name="keyTag{{i}}"
                              #keyTagRef="ngModel" required pattern="^[0-9]+$">
                            <div *ngIf="(keyTagRef.errors?.['required'] && (keyTagRef.touched || formSubmitted))" class="text-danger">
                              Key Tag is required.
                            </div>
                            <div *ngIf="keyTagRef.errors?.['pattern']" class="text-danger">
                              Key Tag must be numeric.
                            </div>
                      
                            <!-- Algorithm Type -->
                            <label for="algorithmType{{i}}">DNS SEC {{i+1}} Algorithm Type:<span style="color:red">*</span></label>
                            <!-- <input type="text" class="form-control" id="algorithmType{{i}}" [(ngModel)]="dnsSec.algorithmType"
                              name="algorithmType{{i}}" #algorithmTypeRef="ngModel" required>
                            <div *ngIf="(algorithmTypeRef.errors?.['required'] && (algorithmTypeRef.touched || formSubmitted))"
                              class="text-danger">
                              Algorithm Type is required.
                            </div> -->
                            <select
                              class="form-select"
                              [(ngModel)]="dnsSec.algorithmTypeCode"
                              name="algorithmType{{i}}"
                              #algorithmTypeRef="ngModel"
                              (ngModelChange)="onAlgorithmChange($event, dnsSec)"
                              required
                            >
                              <option value="">Select Algorithm type</option>
                                <option *ngFor="let opt of algorithmTypeOptions" [value]="opt.algorithmCode">
                                  {{ opt.algorithmCode }} - {{ opt.algorithmType }}
                                </option>
                            </select>
                            <div *ngIf="(algorithmTypeRef.errors?.['required'] && (algorithmTypeRef.touched || formSubmitted))"
                              class="text-danger">
                              Algorithm Type is required.
                            </div>
                      
                            <!-- Digest Type -->
                            <label for="digestType{{i}}">DNS SEC {{i+1}} Digest Type:<span style="color:red">*</span></label>
                            <!-- <input type="text" class="form-control" id="digestType{{i}}" [(ngModel)]="dnsSec.digestType"
                              name="digestType{{i}}" #digestTypeRef="ngModel" required>
                            <div *ngIf="(digestTypeRef.errors?.['required'] && (digestTypeRef.touched || formSubmitted))" class="text-danger">
                              Digest Type is required.
                            </div> -->
                            <select
                              class="form-select"
                              [(ngModel)]="dnsSec.digestTypeCode"
                              name="digestType{{i}}"
                              #digestTypeRef="ngModel"
                              (ngModelChange)="onDigestChange($event, dnsSec)"
                              required
                            >
                              <option value="">Select Digest type</option>
                              <option *ngFor="let opt of digestTypeOptions" [value]="opt.digestTypeCode">
                                {{ opt.digestTypeCode }} - {{ opt.digestType }}
                              </option>
                            </select>
                            <div *ngIf="(digestTypeRef.errors?.['required'] && (digestTypeRef.touched || formSubmitted))" class="text-danger">
                              Digest Type is required.
                            </div>
                      
                            <!-- Digest -->
                            <label for="digest{{i}}">DNS SEC {{i+1}} Digest:<span style="color:red">*</span></label>
                            <textarea class="form-control" id="digest{{i}}" placeholder="Enter DNS SEC digest" [(ngModel)]="dnsSec.digest" name="digest{{i}}"
                              #digestRef="ngModel" required></textarea>
                            <div *ngIf="(digestRef.errors?.['required'] && (digestRef.touched || formSubmitted))" class="text-danger">
                              Digest is required.
                            </div>
                            <div *ngIf="!digestRef.errors?.['required'] && isDigestDuplicate(i)" class="text-danger">
                                Digest must be unique.
                            </div>
                      
                            <hr />
                          </div>
                        </div>
                      </div>
                      <!-- DNS SEC DETAILS EDIT CARD END -->


                      <!-- Name Server Details Card (Editable) -->
                      <div *ngIf="card.heading === 'Name Server Details'">
                        <div class="form-group">
                            <div *ngFor="let item of nameDetails; let i = index">
                                <label for="hostName{{i}}">Name Server {{i+1}} Host Name:<span style="color:red">*</span></label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="hostName{{i}}" 
                                    placeholder="Enter host name"
                                    [(ngModel)]="item.hostName" 
                                    (ngModelChange)="validateNameServerDetails()"
                                    #hostNameRef="ngModel"
                                    name="hostName{{i}}"
                                    required>
                                <div *ngIf="(hostNameRef.errors?.['required'] && (hostNameRef.touched || formSubmitted))" class="text-danger">
                                    Host Name is required.
                                </div>
                                <div *ngIf="item.duplicateHostNameError" class="text-danger">
                                  {{ item.duplicateHostNameError }}
                              </div>
                                <div *ngIf="item.hostNameFormatError" class="text-danger">
                                  {{ item.hostNameFormatError }}
                              </div>
                              <div 
                                *ngIf="!hostNameRef.errors && !item.duplicateHostNameError && !item.hostNameFormatError"
                              >
                               <span style="color: #6D6D6D;">NS :</span> 
                                        <span style="color: #008CC4;">"{{ item.hostName }}.{{cards[0].details.bankName}}{{cards[0].details.domainName}}"</span> 
                              </div>
                              <label for="dnsServiceProvider{{i}}">Name Server {{i+1}} DNS Service Provider:<span style="color:red">*</span></label>
                              <input 
                                  type="text" 
                                  class="form-control" 
                                  placeholder="Enter Service provider"
                                  id="dnsServiceProvider{{i}}" 
                                  [(ngModel)]="item.dnsServiceProvider" 
                                  #dnsServiceProvider="ngModel"
                                  name="dnsServiceProvider{{i}}"
                                  required>
                              <div *ngIf="(dnsServiceProvider.errors?.['required'] && (dnsServiceProvider.touched || formSubmitted))" class="text-danger">
                                  DNS Service Provider is required.
                              </div>
                    
                                <label for="ipAddress{{i}}">Name Server {{i+1}} IPv4 Address:</label>
<input
    type="text"
    class="form-control"
    id="ipAddress{{i}}"
    [(ngModel)]="item.ipAddress"
    placeholder="Enter IPV4 address"
    #ipAddressRef="ngModel"
    (ngModelChange)="validateNameServerDetails()"
    name="ipAddress{{i}}"
    pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
>
<!-- <div *ngIf="(ipAddressRef.invalid && (ipAddressRef.touched || formSubmitted))" class="text-danger">
    <span *ngIf="ipAddressRef.errors?.['pattern']">Invalid IPv4 Address format.</span>
</div> -->
<div *ngIf="item.invalidIPv4FormatError" class="text-danger">
    {{ item.invalidIPv4FormatError }}
</div>
<div *ngIf="item.duplicateIPError" class="text-danger">
    {{ item.duplicateIPError }}
</div>

<div *ngIf="item.tooManyDualIPsError" class="text-danger">
    {{ item.tooManyDualIPsError }}
</div>

<label for="ipv6Address{{i}}">Name Server {{i+1}} IPv6 Address:</label>
<input
    type="text"
    class="form-control"
    id="ipv6Address{{i}}"
    [(ngModel)]="item.ipv6Address"
    placeholder="Enter IPV6 address"
    #ipv6AddressRef="ngModel"
    (ngModelChange)="validateNameServerDetails()"
    name="ipv6Address{{i}}"
   pattern="^((([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:))|(([0-9a-fA-F]{1,4}:){6}(:[0-9a-fA-F]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9a-fA-F]{1,4}:){5}(((:[0-9a-fA-F]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9a-fA-F]{1,4}:){4}(((:[0-9a-fA-F]{1,4}){1,3})|((:[0-9a-fA-F]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){3}(((:[0-9a-fA-F]{1,4}){1,4})|((:[0-9a-fA-F]{1,4}){0,1}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){2}(((:[0-9a-fA-F]{1,4}){1,5})|((:[0-9a-fA-F]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){1}(((:[0-9a-fA-F]{1,4}){1,6})|((:[0-9a-fA-F]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9a-fA-F]{1,4}){1,7})|((:[0-9a-fA-F]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))$"
>
<!-- <div *ngIf="(ipv6AddressRef.invalid && (ipv6AddressRef.touched || formSubmitted))" class="text-danger">
    <span *ngIf="ipv6AddressRef.errors?.['pattern']">Invalid IPv6 Address format.</span>
</div> -->
<div *ngIf="item.invalidIPv6FormatError" class="text-danger">
    {{ item.invalidIPv6FormatError }}
</div>
<div *ngIf="item.duplicateIpV6Error" class="text-danger">
    {{ item.duplicateIpV6Error }}
</div>
<div *ngIf="item.tooManyDualIPsError" class="text-danger">
    {{ item.tooManyDualIPsError }}
</div>

<div *ngIf="item.atLeastOneIPRequiredError && (formSubmitted || (ipAddressRef.touched || ipv6AddressRef.touched))" class="text-danger">
    {{ item.atLeastOneIPRequiredError }}
</div>
                                <label for="hostName{{i}}">Name Server {{i+1}} IP Service Provider:<span style="color:red">*</span></label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="ipServiceProvider{{i}}" 
                                    placeholder="Enter IP service provider"
                                    [(ngModel)]="item.ipServiceProvider" 
                                    #ipServiceProvider="ngModel"
                                    name="ipServiceProvider{{i}}"
                                    required>
                                <div *ngIf="(ipServiceProvider.errors?.['required'] && (ipServiceProvider.touched || formSubmitted))" class="text-danger">
                                    IP Service Provider is required.
                                </div>
                           
                            </div>
                            <!-- <div *ngIf="nameServerError!=''" class="text-danger">
                                {{nameServerError}}
                            </div> -->
                          </div>
                    </div>
                        
                        <!-- Save & Cancel Buttons -->
                        <!-- <button *ngIf="card.heading != 'Name Server Details'" class="btn btn-success mt-3" (click)="onSave(card)">Save</button> -->
                        <button class="btn btn-success mt-3" (click)="onSave(card)">Save</button>
                        <button class="btn btn-danger mt-3" (click)="onCancel(card)">Cancel</button>
                  </div>
              </div>
          </div>
      </div>
      <!-- Checkbox -->
      <div class="card" style="border: 0cap;">
          <div class="card-body ">
            <input class="custom-checkbox" id="verifyDscCheckBox"
            type="checkbox" 
            [(ngModel)]="checkBoxChecked" 
            id="toggleModalCheckbox" 
           
          (change)="toggleModal()"
          />
                    <span [innerHTML]="isExpanded ? fullText : (fullText | slice:0:428) + '...'"></span>
                    <a href="javascript:void(0);" (click)="isExpanded = !isExpanded" class="text-primary">
                      {{ isExpanded ? 'Less' : 'ReadMore' }}
                    </a>
          </div>

          <!-- Signature Verification Status -->
<div *ngIf="signatureVerified !== null" class="signature-status-container">
  
  <div *ngIf="signatureVerified === true" class="signature-success">
      <i class="bi bi-shield-check"></i>
      Signature Verified Successfully
  </div>

  <div *ngIf="signatureVerified === false" class="signature-failed">
      <i class="bi bi-shield-x"></i>
      Signature Verification Failed
  </div>

</div>

          
      </div>
      <div *ngIf="showError" class="error-message" style="color: red;">
          You must agree to the terms and conditions to proceed.
      </div>
      
      <div class="d-flex navigation-buttons justify-content-between mt-2">
          <!-- <button class="btn btn-primary" (click)="goBack()">Back</button> --><div></div>
            <button class="btn btn-success me-2" (click)="downloadPreview()">
    Download Details
  </button>
          <!-- [disabled]="enable" need to be added-->
          <button 
  [disabled]="!checkBoxChecked || signatureVerified !== true"  
  class="btn btn-primary"
  (click)="onButtonClickForSaveAndNext()">
  Save & Next
</button>

      </div>
      <!-- Loading Spinner -->
      <div *ngIf="isLoading" class="spinner-container">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
      </div>
  </div>
</div>
<div class="modal fade" id="previewBillDoc" 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;">{{docNameForContact}} View Document</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" style="color:red; padding: 5px; padding-top: 0px;">&times;</span>
              </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
              <div class="image-Container">
                  <img [src]="imagUrl" *ngIf="imagUrl" alt="Image Preview" width="400px" height="300px">
              </div>
              <div *ngIf="pdfUrl">
                  <iframe [src]="pdfUrl" width="100%" height="500px"></iframe>
              </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
          </div>
      </div>
  </div>
</div>
<div class="modal fade" id="previewTechDoc" 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;">{{docNameForContact}} View Document</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" style="color:red; padding: 5px; padding-top: 0px;">&times;</span>
              </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
              <div class="image-Container">
                  <img [src]="imagUrl" *ngIf="imagUrl" alt="Image Preview" width="400px" height="300px">
              </div>
              <div *ngIf="pdfUrl">
                  <iframe [src]="pdfUrl" width="100%" height="500px"></iframe>
              </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
          </div>
      </div>
  </div>
</div>
<div class="modal fade" id="previewAdminDoc" 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;">{{docNameForContact}} View Document</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" style="color:red; padding: 5px; padding-top: 0px;">&times;</span>
              </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
              <div class="image-Container">
                  <img [src]="imagUrl" *ngIf="imagUrl" alt="Image Preview" width="400px" height="300px">
              </div>
              <div *ngIf="pdfUrl">
                  <iframe [src]="pdfUrl" width="100%" height="500px"></iframe>
              </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
          </div>
      </div>
  </div>
</div>
<div class="modal fade" id="previewOrgDoc" 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;">{{docName}} View Document</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" style="color:red; padding: 5px; padding-top: 0px;">&times;</span>
              </button>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
              <div class="image-Container">
                  <img [src]="imagUrl" *ngIf="imagUrl" alt="Image Preview" width="400px" height="300px">
              </div>
              <div *ngIf="pdfUrl">
                  <iframe [src]="pdfUrl" width="100%" height="500px"></iframe>
              </div>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer" role="alert">
          </div>
      </div>
  </div>
</div>
<div class="modal fade"
  tabindex="-1"
  id="passwordModal"
  role="dialog"
  aria-hidden="true"
  data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered" 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()" 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"
          >
            <option value="" disabled selected>Select Certificate</option>
            <option *ngFor="let certificate of certificates" [ngValue]="certificate">
              {{ certificate.commonName }} - {{ certificate.validTill }}
            </option>
          </select>
        </div>

        <!-- <div style=" margin-bottom: 20px;">
          <label for="dataTypeSelect">Data Type</label><span class="text-danger">*</span>
          <select id="dataTypeSelect" class="form-control" [(ngModel)]="selectedDataType">
            <option value="" disabled>Select Data Type</option>
            <option *ngFor="let type of dataTypes" [ngValue]="type">
              {{ type }}
            </option>
          </select>
        </div> -->

        <label for="passwordInput" class="form-label">Token Pin</label><span class="text-danger">*</span>
        <div *ngIf="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="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)="onSign()">Submit</button>
        <button type="button" class="btn btn-danger" (click)="closePasswordModal()" style="margin-left: 10px">Cancel</button>
          
      </div>
    </div>
  </div>
</div>

<div data-toggle="modal" data-target="#viewBoardApprovalDocModal" #boardDocTrigger></div>

<div class="modal fade" id="viewBoardApprovalDocModal" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header" id="modalHeader">
        <h5 class="modal-title" id="xlModalLabel" style="font-size: 18px;font-weight: 500;">Board Approval Document</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" style="color:red; padding: 5px; padding-top: 0px;">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="image-Container">
          <img [src]="boardImageUrl" *ngIf="boardImageUrl" alt="Image Preview" width="400px" height="300px">
        </div>

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

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