<div class="card mt-3" style="border: none;">
    <div class="card-body">
        <!--
  <mat-card
class="form-card shadow-lg"
> -->
<form [formGroup]="nameServerForm" autocomplete="off" [style]="{ 'padding-top': enableBackButton? '40px' : '0px' }">
    
    <h3>
        <svg *ngIf="enableBackButton" (click)="routeBack()" 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>
        Name Server Details</h3>
   <p>Any change in the data point need to be approved by the Registrar before it takes affect</p>
 <!-- <p style="color: red;" *ngIf="this.orgDetails?.remainingFreeNameServers>0">Remaining Free Name Servers Left : <b>{{ (this.orgDetails?.remainingFreeNameServers - nameServers.length) < 0 ? 0 : (this.orgDetails?.remainingFreeNameServers - nameServers.length) }}</b></p>
 <p style="color: red;" *ngIf="this.domain?.remainingPurchasedNameServers>0">Remaining Purchased Name Servers Left : <b>{{ (this.domain?.remainingPurchasedNameServers - nameServers.length) < 0 ? 0 : (this.domain?.remainingPurchasedNameServers - nameServers.length) }}</b></p> -->
   
<div
  style="width: 100%;display:flex;align-items: center;justify-content: space-around;background-color:rgba(237, 245, 252, 1) ;padding:10px">
  <div style="background-color: rgba(1, 254, 0, 1);padding:2px">
  <span style="font-weight: 500; color: black;">
    Max limit for NS = {{ maxNsRecord }}
  </span>
  </div>
  <div style="background-color: rgba(248, 255, 0, 1);padding:2px">
    <span style="font-weight: 500; color: black;">
    Both IPv4 and IPv6 address : Max {{ minimumCombinedIPS }}
  </span>
  </div>
  <div>
   <span style="font-weight: 500; color: #1321BE;padding:2px">
    Balance either IPv4 or IPv6
  </span>
  </div>
</div>
 <div *ngIf="hasNSDetails">
        <div formArrayName="nameServers">
            <table class="ns-table">
                <thead>
                    <tr>
                        <th style="width: 60px;">Server</th>
                        <th>Host Name</th>
                        <th>DNS Service Provider</th>
                        <th>IPv4 Address</th>
                        <th>IPv6 Address</th>
                        <th>IP Service Provider</th>
                        <th style="width: 100px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let server of nameServers.controls; let i = index" [formGroupName]="i"
                    [ngClass]="{ 'alternate-row': i % 2 !== 0 }" >
                        <td style="text-align: center;padding-top: 12px;">
                            {{ i + 1 }}
                           
                        </td>
                        <td>
                            <div class="input-container ">
                                <input type="text" formControlName="hostName" class="custom-text-field" 
                                    placeholder="Enter name server host" 
                                    />
                                    <div *ngIf="!server.get('hostName')?.invalid && server.get('hostName')?.touched">
                                       <span style="color: #6D6D6D;">NS :</span> 
                                        <span style="color: #008CC4;">"{{ server.get('hostName')?.value }}.{{domain.bankName}}{{domain.domainName}}"</span> 
                                    </div>
                                    <!-- (input)="validateHostName(server)" -->
                                <div *ngIf="server.get('hostName')?.invalid && server.get('hostName')?.touched" class="error-message">
                                    <div *ngIf="server.get('hostName')?.hasError('required')">
                                        Host Name is required.
                                    </div>
                                    <div *ngIf="server.get('hostName')?.hasError('duplicateHostName') && !server.get('hostName')?.hasError('required')">
                                        This hostName is already provided. Please provide a unique hostName.
                                    </div>
                                    <div *ngIf="server.get('hostName')?.hasError('invalidCharacters') && !server.get('hostName')?.hasError('required') && !server.get('hostName')?.hasError('duplicateHostName')">
                                        Invalid Characters. Only alphanumeric and hyphens are allowed.
                                      </div>
                                      <div *ngIf="server.get('hostName')?.hasError('consecutiveHyphens') && !server.get('hostName')?.hasError('required') && !server.get('hostName')?.hasError('duplicateHostName')">
                                        Host name cannot contain consecutive hyphens
                                      </div>
                                      <div *ngIf="server.get('hostName')?.hasError('invalidStartEndCharacter') && !server.get('hostName')?.hasError('required') && !server.get('hostName')?.hasError('duplicateHostName')">
                                        Host name cannot start or end with a hyphen
                                      </div>
                                      <!-- <div *ngIf="server.get('hostName')?.hasError('duplicateHostName')">
                                        <small class="text-danger">{{ server.get('hostName')?.errors?.['customError'] }}</small>
                                    </div> -->
                                </div>
                               </div>
                        </td>
                        
                        
                        <td>
                            <div class="input-container">
                            <input type="text" formControlName="dnsServiceProvider" class="custom-text-field" (input)="allowAlphabetsOnly($event)"
                                placeholder="Enter Provider Name" />
                                <div *ngIf="server.get('dnsServiceProvider')?.invalid && server.get('dnsServiceProvider')?.touched" class="error-message">
                                    <!-- Required Error -->
                                    <div *ngIf="server.get('dnsServiceProvider')?.hasError('required')">
                                        Provider name is required.
                                    </div>
                                </div></div>
                        </td>
                        <td>
                            <div class="input-container">
                                <!-- [ngClass]="{
                                    'highlight-error': server.get('ipAddress')?.hasError('ipAddressUsed') 
                                  }" -->
                            <input type="text" formControlName="ipAddress" class="custom-text-field"
                                placeholder="Enter IP Address" 
                                [autocomplete]="'new-ip-address-' + i" autocorrect="off" />
                                <!-- (ngModelChange)="validateNameServerDetails()"/> -->
                                
                            <div *ngIf="server.get('ipAddress')?.invalid && server.get('ipAddress')?.touched" class="error-message">

  <!-- 1. Required -->
  <div *ngIf="server.get('ipAddress')?.hasError('required')">
    IP address is required.
  </div>

  <!-- 2. ipAddressUsed -->
  <div *ngIf="!server.get('ipAddress')?.hasError('required') 
              && server.get('ipAddress')?.hasError('ipAddressUsed')">
    This IP address is already in use by another domain. Please provide a unique IP address.
  </div>

  <!-- 3. Pattern -->
  <div *ngIf="!server.get('ipAddress')?.hasError('required') 
              && !server.get('ipAddress')?.hasError('ipAddressUsed') 
              && server.get('ipAddress')?.hasError('pattern')">
    Invalid IP address format. Please enter a valid IP address.
  </div>

  <!-- 4. Duplicate IPv4 -->
  <div *ngIf="!server.get('ipAddress')?.hasError('required') 
              && !server.get('ipAddress')?.hasError('ipAddressUsed') 
              && !server.get('ipAddress')?.hasError('pattern') 
              && server.get('ipAddress')?.hasError('duplicateIpAddress')">
    This IP address is already in use. Please provide a unique IP address.
  </div>

  <!-- 5. Too Many Dual IPs -->
  <div *ngIf="!server.get('ipAddress')?.hasError('required') 
              && !server.get('ipAddress')?.hasError('ipAddressUsed') 
              && !server.get('ipAddress')?.hasError('pattern') 
              && !server.get('ipAddress')?.hasError('duplicateIpAddress') 
              && (server.get('ipAddress')?.hasError('tooManyDualIPs') 
                  || server.get('ipv6Address')?.hasError('tooManyDualIPs'))">
    <div class="error-message">
      Only 3 name servers with both IPv4 and IPv6 are allowed in total.
    </div>
  </div>

</div>
                                <div *ngIf="server.hasError('atLeastOneIpRequired') && (server.dirty || server.touched)">
                                  <div class="error-message">
                                    Either IPv4 or IPv6 address is required.
                                  </div>
                                </div>
                            </div>
                        </td>

                        <!-- IPV6 address field -->
                        <td>
                            <div class="input-container">
                                <!-- [ngClass]="{
                                    'highlight-error': server.get('ipAddress')?.hasError('ipAddressUsed') 
                                  }" -->
                            <input type="text" formControlName="ipv6Address" class="custom-text-field"
                                placeholder="Enter IP Address" 
                                [autocomplete]="'new-ip-address-' + i" autocorrect="off" />
                                <!-- (ngModelChange)="validateNameServerDetails()"/> -->
                                
                            <div *ngIf="server.get('ipv6Address')?.invalid && server.get('ipv6Address')?.touched" class="error-message">

  <!-- Show 'required' error first -->
  <div *ngIf="server.get('ipv6Address')?.hasError('required')">
    IP address is required.
  </div>

  <!-- Show 'ipv6AddressUsed' only if no 'required' error -->
  <div *ngIf="!server.get('ipv6Address')?.hasError('required') 
              && server.get('ipv6Address')?.hasError('ipv6AddressUsed')">
    This IP address is already in use by another domain. Please provide a unique IP address.
  </div>

  <!-- Show 'pattern' only if no higher-priority error -->
  <div *ngIf="!server.get('ipv6Address')?.hasError('required') 
              && !server.get('ipv6Address')?.hasError('ipv6AddressUsed') 
              && server.get('ipv6Address')?.hasError('pattern')">
    Invalid IP address format. Please enter a valid IP address.
  </div>

  <!-- Show 'duplicateIpv6Address' only if no higher-priority error -->
  <div *ngIf="!server.get('ipv6Address')?.hasError('required') 
              && !server.get('ipv6Address')?.hasError('ipv6AddressUsed') 
              && !server.get('ipv6Address')?.hasError('pattern') 
              && server.get('ipv6Address')?.hasError('duplicateIpv6Address')">
    This IP address is already in use. Please provide a unique IP address.
  </div>

  <!-- Show 'tooManyDualIPs' last -->
  <div *ngIf="!server.get('ipv6Address')?.hasError('required') 
              && !server.get('ipv6Address')?.hasError('ipv6AddressUsed') 
              && !server.get('ipv6Address')?.hasError('pattern') 
              && !server.get('ipv6Address')?.hasError('duplicateIpv6Address') 
              && (server.get('ipv6Address')?.hasError('tooManyDualIPs') || server.get('ipAddress')?.hasError('tooManyDualIPs'))">
    <span class="error-message">
      Only 3 name servers with both IPv4 and IPv6 are allowed in total.
    </span>
  </div>
  </div>
                                 <div *ngIf="server.hasError('atLeastOneIpRequired') && (server.dirty || server.touched)">
                                  <div class="error-message">
                                    Either IPv4 or IPv6 address is required.
                                  </div>
                                </div>
                            </div>
                        </td>
                        
                        <td>
                            <div class="input-container">
                            <input type="text" formControlName="ipServiceProvider" class="custom-text-field" (input)="allowAlphabetsOnly($event)"
                                placeholder="Enter Provider Name" />
                                <div *ngIf="server.get('ipServiceProvider')?.invalid && server.get('ipServiceProvider')?.touched" class="error-message">
                                    <!-- Required Error -->
                                    <div *ngIf="server.get('ipServiceProvider')?.hasError('required')">
                                        IP service provider name is required.
                                    </div></div></div>
                        </td>
                        <td>
                            <div class="input-container">
                            <!-- <button
                             style="background: transparent;border: none;" type="button" class="delete-button" (click)="removeLastNameServer(i)">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3 6H5H21" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M10 11V17" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14 11V17" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                   
                            </button> -->
                           <button
  style="background: transparent; border: none;"
  type="button"
  class="delete-button"
  (click)="removeLastNameServer(i)"
  [disabled]="nameServerCount === 0 && nameServers.length <= 2 && i < 2"
>
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    [attr.stroke]="(nameServerCount === 0 && nameServers.length <= 2 && i < 2) ? '#A9A9A9' : '#FF0000'"
  >
    <path d="M3 6H5H21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M10 11V17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M14 11V17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
</button>



                </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div *ngIf="nameServers.length+(nameServerLength?nameServerLength:0)>freeNSRecord && domain.isOnboardingDomain && limitofNameServer<=0 " style="color: rgba(0, 124, 248, 1);font-weight: 500;float: right;">
                <span style="color:red">*</span> The Price has been updated to {{calculateTotalPricewithoutGst()}} ₹ exclusive of GST
 
            </div>
            <div *ngIf="nameServers.length+(nameServerLength?nameServerLength:0)>(orgDetails?.remainingFreeNameServers) && !domain.isOnboardingDomain && limitofNameServer<=0" style="color: rgba(0, 124, 248, 1);font-weight: 500;float: right;">
                <span style="color:red">*</span> The Price has been updated to {{calculateTotalPricewithoutGst()}} ₹ exclusive of GST
 
            </div>
        </div>
       
        <!-- Add More NS Button -->
        <!-- <button type="button" (click)="addNameServer()">Add More NS</button> -->
    </div>
</form>
 
            <!-- Add/Remove name server buttons -->
            <div class="button-group">
                <div>
                    <button class="btn btn-primary" *ngIf="limitofNameServer<=0" [disabled]="(this.nameServers?.length ?? 0) + (this.nameServerLength ?? 0)==this.maxNsRecord" (click)="addNameServer()">
                        Add More NS
                    </button>
                     <button class="btn btn-primary" *ngIf="limitofNameServer>0" [disabled]="(this.nameServers?.length ?? 0) >=limitofNameServer" (click)="addNameServer()">
                        Add More NS
                    </button>
                    &nbsp;
                    <!-- <button class="btn btn-primary" (click)="removeLastNameServer()">
                        Delete
                    </button> -->
                </div>
             
               
                
            </div>

             <!-- DNS SEC CODE  START-->
         <!-- Show this button initially -->
          <br/>
<div class="row">
  <span style="margin-bottom: 10px;">
      <p style="font-weight: 500;">Add Your DNSSEC Details Below</p>
    </span>
  <div class="col-sm-7">
    
    <button class="btn btn-primary"
        *ngIf="dnssecDetailsList.length === 0"
        (click)="addDNSSECDtls()">
  Add DNSSEC Details
</button>
&nbsp;&nbsp;
<div class="tooltip-wrapper ms-2 d-inline-flex align-items-center">
  <span class="info-text">Important Instruction for DNSSEC Users</span>
  &nbsp;&nbsp;
  <img src="/assets/svg/redi.svg"
       style="width:25px;margin-left: 20px;"
       alt="info" />

  <div class="tooltip-text" style="background-color: #FFE0E0; color: #036;">
    <ul>
      <div [innerHtml]="dnssecInfoText"></div>
    </ul>
  </div>
</div>

  </div>
</div>

<!-- DNSSEC Records -->
<div *ngFor="let dns of dnssecDetailsList; let i = index" class="dnssec-block">
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <h4>DNSSEC Record {{ i + 1 }}</h4>
    <button (click)="removeRecord(i)"
      style="background: red; color: white; border: none; padding: 5px 10px; border-radius: 5px;">
      Delete
    </button>
  </div>

  <div class="row">
    <!-- Key Tag -->
    <div class="col-sm-4">
      <label>Key Tag</label>
      <input type="text" class="form-control" [(ngModel)]="dns.keyTag" name="keyTag{{i}}" #keyTagRef="ngModel" required
        pattern="^[0-9]+$" placeholder="Enter key tag" />
      <div *ngIf="(keyTagRef.errors?.['required'] && (keyTagRef.touched || formSubmitted))" class="error-message">
        Key Tag is required.
      </div>
      <div *ngIf="keyTagRef.errors?.['pattern']" class="error-message">
        Key Tag must be numeric.
      </div>
      <div *ngIf="keyTagRef.valid && keyTagRef.value !== '' && keyTagRef.value > 65535" class="error-message">
       Key Tag must be less than or equal to 65535.
      </div>
    </div>

    <!-- Algorithm Type -->
    <div class="col-sm-4">
      <label>Algorithm Type</label>
      <select
        class="form-select"
        [(ngModel)]="dns.algorithmTypeCode"
        name="algorithmType{{i}}"
        #algorithmTypeRef="ngModel"
        (ngModelChange)="onAlgorithmChange($event, dns)"
        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 || formSubmittedForDnsSec))"
        class="error-message">
        Algorithm Type is required.
      </div>
    </div>

    <!-- Digest Type -->
    <div class="col-sm-4">
      <label>Digest Type</label>
      <select
        class="form-select"
        [(ngModel)]="dns.digestTypeCode"
        name="digestType{{i}}"
        #digestTypeRef="ngModel"
        (ngModelChange)="onDigestChange($event, dns)"
        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 || formSubmittedForDnsSec))"
        class="error-message">
        Digest Type is required.
      </div>
    </div>
  </div>

  <!-- Digest -->
  <div class="row" style="padding-top: 10px;">
    <div class="col-sm-12">
  <label>Digest:<span style="color:red">*</span></label>
  <input class="form-control" autocomplete="do-not-autofill" type="text" [(ngModel)]="dns.digest" name="digest{{i}}" #digestRef="ngModel" required
    placeholder="Enter digest" />
  <div *ngIf="(digestRef.errors?.['required'] && (digestRef.touched || formSubmitted))" class="error-message">
    Digest is required.
  </div>
  <div *ngIf="!digestRef.errors?.['required'] && isDigestDuplicate(i)" class="error-message">
  Digest must be unique.
</div>
</div>
  </div>
</div>

<!-- Show this only when records exist & less than 2 -->
<div class="row" style="padding-left: 20px;">
  <div class="col-sm-3">
    <!-- <button class="btn btn-primary"
            *ngIf="dnssecDetailsList.length > 0 && dnssecDetailsList.length < 3"
            (click)="addAdditionalRecords()">Add Additional DS Records</button> -->
    <button class="btn btn-primary"
  (click)="addAdditionalRecords()"  *ngIf="dnssecDetailsList.length > 0 && dnssecDetailsList.length <= 3"
  [disabled]="dnssecDetailsList.length + (dbDnsSecDetailsList ?? []).length >= 3"
>
  Add Additional Record
</button>

  </div>
</div>

        <!-- DNS SEC CODE  END-->

        </div>

        <section  *ngIf="limitofNameServer<=0" class="outer-section">
          <section *ngIf="limitofNameServer<=0" class="m-4" style="width: 520px; max-width: 550px;">
            <div class="shadows bg-body rounded">
        
              <div class="card">
                <div class="card-header" style="background-color: #4A6CFA; padding: 0; margin: 0;">
                  <div style="text-align: center; padding: 10px 0;">
                    <h2 style="color: #fff; margin: 0;">Price Summary</h2>
                  </div>
                </div>
                <div class="card-body">
                  <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                      <tr>
                        <th style="text-align: left; padding-bottom: 10px;">ITEM</th>
                        <th style="text-align: right; padding-bottom: 10px;">PRICE</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="padding-top: 10px; padding-bottom: 10px;">Payable Amount</td>
                        <td
                          style="text-align: right; padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; justify-content: flex-end;">
                          <span class="inr-amount">{{domain.domainPrice | indianCurrency}}</span>
                          <span *ngIf="domain.isOnboardingDomain" style="cursor: pointer; color: rgba(34, 197, 94, 1); margin-left: 5px; font-size: 0.9em;"
                            data-toggle="modal" data-target="#costSummary">
                            <i class="fas fa-info-circle"></i>
                          </span>
                        </td>
                      </tr>
        
                      
        
                      <tr *ngIf="domain.isOnboardingDomain && domain.domainName !== '.fin.in'">
                        <td style="padding-top: 10px; padding-bottom: 10px;">
                          <span style="color: #28a745;">Please Check for Tier 1 or Tier 2 Cooperative Bank for Charge deduction</span>
        
                        </td>
                        <td style="text-align: right; padding-top: 10px; padding-bottom: 10px;">
                          <input type="checkbox" [(ngModel)]="domain.isCooperativeBank"
                            (change)="updateDomainBasedOnisCoOperativeBank()">
                        </td>
                      </tr>

                      <tr *ngIf="domain.rebateAmountOfDomain!=null && domain.rebateAmountOfDomain>0">
                        <td style="padding-top: 10px; padding-bottom: 10px;">Rebate Amount</td>
                        <td
                          style="text-align: right; padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; justify-content: flex-end;">
                          - <span class="inr-amount">{{domain.rebateAmountOfDomain | indianCurrency}}</span>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding-top: 10px; padding-bottom: 10px;">Additional Name Identifier Price</td>
                        <td style="text-align: right; padding-top: 10px; padding-bottom: 10px;"><span
                            class="inr-amount">{{domain.aliasPrice | indianCurrency}}</span></td>
                      </tr>
                      <tr>
                        <td style="padding-top: 10px; padding-bottom: 10px;">Additional Name Server Price</td>
                        <td style="text-align: right; padding-top: 10px; padding-bottom: 10px;"><span class="inr-amount">{{
                            price+this.nsRecordTotalPrice | indianCurrency}}</span></td>
                      </tr>
                      <tr *ngIf="calculateTdsIfItGreaterThanThePrice()>0">
                        <td style="padding-top: 10px; padding-bottom: 10px;">TDS &#64;{{tds*100}}%</td>
                        <td style="text-align: right; padding-top: 10px; padding-bottom: 10px;"><span class="inr-amount">{{
                            calculateTDS() | indianCurrency}}</span></td>
                      </tr>
                      <tr>
                        <td style="padding-top: 10px; padding-bottom: 10px;">GST &#64;{{gstPercentage}}%</td>
                        <td style="text-align: right; padding-top: 10px; padding-bottom: 10px;"><span class="inr-amount">{{
                            calculateGst() | indianCurrency}}</span></td>
                      </tr>
        
                      <tr>
                        <td colspan="2" style="border-top: 1px solid #e0e0e0; padding: 0;"></td>
                      </tr>
                      <tr style="background-color:#f1f5f9;">
                        <td style="font-weight: 500; padding-top: 20px;padding-bottom: 10px;">Grand Total</td>
                        <td style="text-align: right; font-weight: 500;padding-top: 20px; padding-bottom: 10px;"><span
                            class="inr-amount">{{ (calculateTotalPricewithGst()-this.calculateTDS()) | indianCurrency}}</span></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </section>
        
          <section id="idrbtDetails" class="m-4" style="width: 520px; max-width: 550px;">
            <div class="shadows bg-body rounded" style="border: 1px solid #e0e0e0;">
        
              <div>
                <div class="card-header" style="background-color: #4A6CFA; padding: 0; margin: 0;">
                  <div style="text-align: center; padding: 10px 10px;">
                    <h2 style="color: #fff; margin: 0;">IDRBT Information for e-Pay of TDS through Income Tax Website</h2>
                  </div>
                </div>
        
                <div class="card-body">
                  <div class="detail-row">
                    <span class="label">Name:</span>
                    <span class="value">{{ idrbtDetails?.deducteeName }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Address:</span>
                    <span class="value">{{ idrbtDetails?.address }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">STD Telephone No:</span>
                    <span class="value">{{ idrbtDetails?.stdNumber }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Mobile No:</span>
                    <span class="value">{{ idrbtDetails?.mobileNumber }}</span>
                  </div>
                
                  <div class="detail-row">
                    <span class="label">Email:</span>
                    <span class="value">{{ idrbtDetails?.orgEmail }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">PAN Number:</span>
                    <span class="value">{{ idrbtDetails?.orgPan }}</span>
                  </div>
                    <div class="detail-row">
                    <span class="label">TAN Number:</span>
                    <span class="value">{{ idrbtDetails?.orgTan }}</span>
                  </div>
                  <!-- <div class="detail-row">
              <span class="label">TAN of Deductee:</span>
              <span class="value">{{ deductee.tan }}</span>
            </div> -->
                </div>
              </div>
            </div>
          </section>
        </section>
       <div class="navigation-buttons">
          <div>

          </div>
          <div>
            <button class="btn btn-primary"[disabled]="nameServerForm.invalid || !isFormValid()" (click)="toggleModal()">Save & Next</button>
          </div>
                    
        </div>
   
    </div>

    <div *ngIf="isLoading" class="spinner-container">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
<div class="modal 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 class="modal fade" id="costSummary" 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" style="background-color: rgba(74, 108, 250, 1);" id="modalHeader">
        <h5 class="modal-title" id="xlModalLabel" style="font-size: 18px;font-weight: 500;color:white"> Cost Summary (Per Year)</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" style="color:white; padding: 5px; padding-top: 0px;">&times;</span>
        </button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
      <table id="costSummaryTable">
          <thead>
            <tr>
              <th>S. No</th>
              <th>Particulars</th>
              <th>Price Per Item(INR)</th>
              <th>Quantity</th>
              <th>Total Price (INR)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of costItems">
              <td>{{ item.sNo }}</td>
              <td>{{ item.particulars }}</td>
              <td>{{ formatCurrency(item.pricePerItem) }}</td>
              <td>{{ item.quantity }}</td>
              <td>{{ formatCurrency(item.totalPrice) }}</td>
            </tr>
            <tr class="total-row">
              <td colspan="3">Total</td>
              <td>{{ totalQuantity }}</td>
              <td>{{ formatCurrency(grandTotal) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer" role="alert">
        <button class="btn btn-primary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
    <!-- </mat-card> -->