<div class="layout-container">
  <app-side-menu></app-side-menu>
  <div class="content-area">
    <app-main-header></app-main-header>
    <div class="container-fluid">
      <div class="row" style="padding-top: 100px;">
        <div class="col-sm-12">
          <div class="content-wrapper">
            <div class="header-content">
              <svg (click)="cancelDomain()" style="cursor: pointer;" width="24" height="25" viewBox="0 0 24 25"
                fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 12.5H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M12 19.5L5 12.5L12 5.5" stroke="black" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
              <h3 style="padding-left:0">Domain Details</h3>
            </div>
            <div class="first">
              <div class="details-container">
                <div class="detail-item">
                  <p>Domain</p>
                  <div class="domain-box">{{domainDetail?.bankName}}{{domainDetail?.domainName}}

 <div *ngIf="isEditing" style="display:flex; align-items:center; gap:5px;">

    <!-- Editable part -->
    <input type="text"
           class="form-control"
           style="width:150px"
           [(ngModel)]="chosenDomainName" />

    <!-- Fixed part -->
    <span>.{{domainDetail?.domainName}}</span>
  </div>

  <!-- EDIT ICON -->
 <i *ngIf="isEditAllowed()"
     class="fas fa-pencil-alt edit-icon"
     (click)="isEditing = true; setDomainName()">
  </i>

  <!-- SEARCH BUTTON -->
  <a *ngIf="isEditing"
     style="cursor:pointer;color:blue"
     (click)="onKeyupDomainName()">
     Search
  </a>



                  </div>
                </div>
                <div class="detail-item">
                  <p>Domain Status</p>
                  <div class="box-content">{{domainDetail?.status}}</div>
                </div>
                <div class="detail-item">
                  <p>Tenure (yrs)</p>
                  <div style="text-align: center;" class="box-content">{{domainDetail?.numberOfYears}}</div>
                </div>
                <div class="detail-item">
                  <p>Registration Date</p>

                  <div class="box-content">{{domainDetail?.registrationDate|date:'MMM d, y, h:mm a'}}</div>
                </div>
                <div class="detail-item">
                  <p>Aligned Renewal Date</p>
                  <div class="box-content">{{domainDetail?.alignedRenewalDate|date:'MMM d, y, h:mm a'}}</div>
                </div>

              </div>
              <hr />
              <div >
                <div style="display: flex;flex-direction: row;gap:20px">
                    <div>
                      <h2 style="margin-left: 10px;">Name Identifiers</h2>
                    </div>
                    <div *ngIf="role != 'IDRBTADMIN'" style="cursor: pointer;" >
                        <svg 
                              width="27" height="27" viewBox="0 0 41 41" (click)="addIdentifiers()"
                              fill="none" xmlns="http://www.w3.org/2000/svg">
                              <rect x="0.128906" y="0.746094" width="40" height="40" rx="3" fill="#2AA3D9" />
                              <path
                                d="M26.1289 21.7461H21.1289V26.7461C21.1289 27.2961 20.6789 27.7461 20.1289 27.7461C19.5789 27.7461 19.1289 27.2961 19.1289 26.7461V21.7461H14.1289C13.5789 21.7461 13.1289 21.2961 13.1289 20.7461C13.1289 20.1961 13.5789 19.7461 14.1289 19.7461H19.1289V14.7461C19.1289 14.1961 19.5789 13.7461 20.1289 13.7461C20.6789 13.7461 21.1289 14.1961 21.1289 14.7461V19.7461H26.1289C26.6789 19.7461 27.1289 20.1961 27.1289 20.7461C27.1289 21.2961 26.6789 21.7461 26.1289 21.7461Z"
                                fill="white" />
                        </svg>

                    </div>
                    <div>
                      <button id="cartButton" *ngIf="enablePurchaseNameIdentifier && role!='IDRBTADMIN' && (domainDetail.remainingPurchasedNameIdentifiers==0|| domainDetail.remainingPurchasedNameIdentifiers==null)"
                      class="btn btn-primary btn-square" (click)="purchaseNameIdentifier()">
                      <svg style="cursor: pointer;"
                          xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart"
                          viewBox="0 0 16 16">
                        <path
                          d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                      </svg>
              </button>
                </div>
                <p *ngIf="role != 'IDRBTADMIN'" style="color: blue; padding-top: 5px;">*₹2000 per year will be charged for each Name Identifier beyond the limit of 5, calculated across all domains.</p>
                </div>
                <div class="box-container">
                  <div *ngFor="let item of aliasList" class="box">
                    {{ item?.aliasName }}
                    &nbsp;&nbsp;
                    <i *ngIf="role != 'IDRBTADMIN'" class="fa fa-trash"  style="color: red;cursor:pointer" 
                    (click)="deleteOrRequestDeleteForNameIdentifier(item)"></i>
                  </div>
                </div>
              </div>
              <hr *ngIf="aliasList.length>0" />

              <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex;flex-direction: row;gap:20px">
                  <div>
                    <h2 style="margin-left: 10px;">Name Servers</h2>
                    
                  </div>
                  <div style="padding-top:3px;">

                    <svg *ngIf="domainDetail?.nameServers?.length < maxNameServers && role != 'IDRBTADMIN' && (domainDetail.remainingPurchasedNameServers!=0 || orgDetails.remainingFreeNameServers>0)" style="cursor: pointer;"
                      width="27" height="27" viewBox="0 0 41 41" (click)="addNameServers(domainDetail.domainId)"
                      fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect x="0.128906" y="0.746094" width="40" height="40" rx="3" fill="#2AA3D9" />
                      <path
                        d="M26.1289 21.7461H21.1289V26.7461C21.1289 27.2961 20.6789 27.7461 20.1289 27.7461C19.5789 27.7461 19.1289 27.2961 19.1289 26.7461V21.7461H14.1289C13.5789 21.7461 13.1289 21.2961 13.1289 20.7461C13.1289 20.1961 13.5789 19.7461 14.1289 19.7461H19.1289V14.7461C19.1289 14.1961 19.5789 13.7461 20.1289 13.7461C20.6789 13.7461 21.1289 14.1961 21.1289 14.7461V19.7461H26.1289C26.6789 19.7461 27.1289 20.1961 27.1289 20.7461C27.1289 21.2961 26.6789 21.7461 26.1289 21.7461Z"
                        fill="white" />
                    </svg>
                    
                  </div>
                 <button id="cartButton" *ngIf="enablePurchaseNameServer && role!='IDRBTADMIN'"
                      class="btn btn-primary btn-square" (click)="purchaseNameServer()">
                <svg style="cursor: pointer;"
                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart"
                    viewBox="0 0 16 16">
                  <path
                    d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                </svg>
              </button>
              <p *ngIf="role != 'IDRBTADMIN'" style="color: blue; padding-top: 5px;">*₹2000 per year will be charged for each Name Server beyond the limit of 5, calculated across all domains.</p>

                </div>
                
                <div>
                  <svg *ngIf="role != 'IDRBTADMIN'"
                   (click)="domainedit()" style="margin-right: 10px;cursor: pointer;" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M12 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V12"
                      stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path
                      d="M18.3751 2.62498C18.7729 2.22716 19.3125 2.00366 19.8751 2.00366C20.4377 2.00366 20.9773 2.22716 21.3751 2.62498C21.7729 3.02281 21.9964 3.56237 21.9964 4.12498C21.9964 4.68759 21.7729 5.22716 21.3751 5.62498L12.3621 14.639C12.1246 14.8762 11.8313 15.0499 11.5091 15.144L8.63609 15.984C8.55005 16.0091 8.45883 16.0106 8.372 15.9883C8.28517 15.9661 8.20592 15.9209 8.14254 15.8575C8.07916 15.7942 8.03398 15.7149 8.01174 15.6281C7.98949 15.5412 7.991 15.45 8.01609 15.364L8.85609 12.491C8.95062 12.169 9.12463 11.876 9.36209 11.639L18.3751 2.62498Z"
                      stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
              </div>
              <!-- Header Row -->
<div class="header-row">
  <div class="header-cell">Host Name</div>
  <div class="header-cell">DNS Service Provider</div>
  <div class="header-cell">IPV4 Address</div>
  <div class="header-cell">IPV6 Address</div>
  <div class="header-cell">IP Service Provider</div>
  <div class="header-cell">Tenure</div>
  <div class="header-cell" *ngIf="role !== 'IDRBTADMIN'">Approved by Registrar</div>
  <div class="header-cell" *ngIf="role === 'IDRBTADMIN'">Action</div>
  <div *ngIf="role != 'IDRBTADMIN' && !isEditMode && (domainDetail?.status == 'Active')" class="header-cell">Raise Delete Request</div>
  <div *ngIf="role != 'IDRBTADMIN' && !isEditMode && (domainDetail?.status == 'Inactive')" class="header-cell">Delete</div>
  <div *ngIf="role === 'IDRBTADMIN'" class="header-cell">Approve/Reject Delete</div>
</div>

<!-- Data Rows -->
<div class="data-row" *ngFor="let ns of domainDetail?.nameServers || []">
  <div class="data-cell">{{ ns.hostName }}</div>
  <div class="data-cell">{{ ns.dnsServiceProvider }}</div>
  <div class="data-cell">{{ ns.ipAddress }}</div>
  <div class="data-cell">{{ ns.ipv6Address }}</div>
  <div class="data-cell">{{ ns.ipServiceProvider }}</div>
  <div class="data-cell">{{ domainDetail.numberOfYears }}</div>
  <div class="data-cell" *ngIf="role !== 'IDRBTADMIN'">
    {{ ns.isnameServerSentToNixi && (ns.isEdited === false || ns.isEdited == null) ? 'Approved' : 'Not Approved' }}
  </div>
  <div class="data-cell" *ngIf="(role === 'IDRBTADMIN' && !ns.isnameServerSentToNixi) || (role === 'IDRBTADMIN' && ns.isEdited == true)">
    <button class="btn btn-primary" (click)="sendDataToNixi(ns)">Approve Name Server</button>
  </div>
  <div class="data-cell" *ngIf="role === 'IDRBTADMIN' && (ns.isnameServerSentToNixi &&  (ns.isEdited == false || ns.isEdited == null))">
    Approved
  </div>
  
     <div class="data-cell" *ngIf="role !== 'IDRBTADMIN' && !isEditMode;">
      <div >
        <div *ngIf="ns.isnameServerSentToNixi && !ns.registrarApprovalForDeletion">
          <button class="btn btn-danger" (click)="sendDeleteRequestForNameServer(true, ns)">
           Request Delete
          </button>
        </div>
        <div *ngIf="ns.registrarApprovalForDeletion">
          <p>Request Sent</p>
        </div>
        
      </div>
      
      <div *ngIf="!ns.isnameServerSentToNixi">
         <button *ngIf="!ns.isnameServerSentToNixi" class="btn btn-danger" (click)="sendDeleteRequestForNameServer(false, ns)">
         Delete
      </button>
      </div>
    </div>

    <div class="data-cell" *ngIf="role === 'IDRBTADMIN'">
      <ng-container *ngIf="(ns.isnameServerSentToNixi && ns.registrarApprovalForDeletion) || (ns.isEdited == false && ns.registrarApprovalForDeletion == true)">
       <div style="display: flex;">
         <button class="btn btn-success" (click)="deleteNsOnRegistrarAction(true,ns)">Approve Delete</button>&nbsp;
         <button class="btn btn-danger" (click)="deleteNsOnRegistrarAction(false,ns)">Reject Delete</button>
       </div>
      </ng-container>
      <ng-container *ngIf="!ns.isnameServerSentToNixi || !ns.registrarApprovalForDeletion">
        <p>NA</p>
      </ng-container>
    </div>
  </div>
</div>
<br/>

<!-- DNS SEC CODE START-->
 <!-- DNSSEC Header -->
<div style="display: flex; justify-content: space-between; align-items: center;">
  <div style="display: flex; flex-direction: row; gap: 20px">
    <div>
      <h2 style="margin-left: 10px;">DNSSEC Details</h2>
    </div>
    <div style="padding-top: 3px;">
      <!-- Add DNSSEC Button -->
      <svg *ngIf="role != 'IDRBTADMIN'" style="cursor: pointer;" width="27" height="27" viewBox="0 0 41 41"
           (click)="openModelForAddDns()" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="0.128906" y="0.746094" width="40" height="40" rx="3" fill="#2AA3D9" />
        <path d="M26.1289 21.7461H21.1289V26.7461C21.1289 27.2961 20.6789 27.7461 20.1289 27.7461
                 C19.5789 27.7461 19.1289 27.2961 19.1289 26.7461V21.7461H14.1289
                 C13.5789 21.7461 13.1289 21.2961 13.1289 20.7461C13.1289 20.1961 13.5789 19.7461
                 14.1289 19.7461H19.1289V14.7461C19.1289 14.1961 19.5789 13.7461 20.1289 13.7461
                 C20.6789 13.7461 21.1289 14.1961 21.1289 14.7461V19.7461H26.1289
                 C26.6789 19.7461 27.1289 20.1961 27.1289 20.7461
                 C27.1289 21.2961 26.6789 21.7461 26.1289 21.7461Z"
              fill="white" />
      </svg>
    </div>
  </div>
  <div *ngIf="role != 'IDRBTADMIN' && dnssecDetailsList?.length > 0">
    <svg *ngIf="!isEditMode"
                   (click)="toggleEditMode()" style="margin-right: 10px;cursor: pointer;" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M12 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V12"
                      stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path
                      d="M18.3751 2.62498C18.7729 2.22716 19.3125 2.00366 19.8751 2.00366C20.4377 2.00366 20.9773 2.22716 21.3751 2.62498C21.7729 3.02281 21.9964 3.56237 21.9964 4.12498C21.9964 4.68759 21.7729 5.22716 21.3751 5.62498L12.3621 14.639C12.1246 14.8762 11.8313 15.0499 11.5091 15.144L8.63609 15.984C8.55005 16.0091 8.45883 16.0106 8.372 15.9883C8.28517 15.9661 8.20592 15.9209 8.14254 15.8575C8.07916 15.7942 8.03398 15.7149 8.01174 15.6281C7.98949 15.5412 7.991 15.45 8.01609 15.364L8.85609 12.491C8.95062 12.169 9.12463 11.876 9.36209 11.639L18.3751 2.62498Z"
                      stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                   <svg *ngIf="isEditMode" (click)="toggleEditMode()" style="margin-right: 10px;cursor: pointer;" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M18 6L6 18" stroke="red" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M6 6L18 18" stroke="red" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                  </svg>
  </div>
</div>

   
  

<!-- DNSSEC Table -->
<div class="dnssec-table">

  <!-- Table Header -->
  <div class="header-row row-grid">
    <div class="header-cell">Key Tag</div>
    <div class="header-cell">Algorithm</div>
    <div class="header-cell">Digest Type</div>
    <div class="header-cell">Digest</div>
    <div class="header-cell" *ngIf="!isEditMode">Approved</div>
    <div *ngIf="role != 'IDRBTADMIN' && !isEditMode" class="header-cell">Raise Delete Request</div>
    <div *ngIf="role === 'IDRBTADMIN'" class="header-cell">Approve/Reject Delete</div>
  </div>

  <!-- Table Data Rows -->
  <div class="data-row row-grid" *ngFor="let dns of dnssecDetailsList; let i = index">
    
    <!-- Key Tag -->
    <div class="data-cell">
      <ng-container *ngIf="!isEditMode; else keyTagInput">
        {{ dns.keyTag }}
      </ng-container>
      <ng-template #keyTagInput>
        <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="text-danger">
          Key Tag is required.
        </div>
        <div *ngIf="keyTagRef.errors?.['pattern']" class="text-danger">
          Key Tag must be numeric.
        </div>
        <div *ngIf="keyTagRef.valid && keyTagRef.value !== '' && keyTagRef.value > 65535" class="text-danger">
          Key Tag must be ≤ 65535.
        </div>
      </ng-template>
    </div>

    <!-- Algorithm Type -->
    <div class="data-cell">
      <ng-container *ngIf="!isEditMode; else algorithmSelect">
        {{ dns.algorithmTypeCode }} &nbsp;&nbsp; {{ dns.algorithmType }}
      </ng-container>
      <ng-template #algorithmSelect>
        <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 || formSubmitted))" class="text-danger">
          Algorithm Type is required.
        </div>
      </ng-template>
    </div>

    <!-- Digest Type -->
    <div class="data-cell">
      <ng-container *ngIf="!isEditMode; else digestSelect">
        {{ dns.digestTypeCode }} &nbsp;&nbsp; {{ dns.digestType }}
      </ng-container>
      <ng-template #digestSelect>
        <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 || formSubmitted))" class="text-danger">
          Digest Type is required.
        </div>
      </ng-template>
    </div>

    <!-- Digest -->
    <div class="data-cell">
      <ng-container *ngIf="!isEditMode; else digestInput">
        {{ dns.digest }}
      </ng-container>
      <ng-template #digestInput>
        <input type="text" class="form-control"
          [(ngModel)]="dns.digest"
          name="digest{{i}}"
          #digestRef="ngModel"
          required placeholder="Enter digest" />
        <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>
      </ng-template>
    </div>

    <!-- Approved / Approve DNSSEC -->
    <div class="data-cell" *ngIf="!isEditMode">
      <ng-container *ngIf="role !== 'IDRBTADMIN'">
        {{ dns.sentToNixi ? 'Approved' : 'Not Approved' }}
      </ng-container>
      <ng-container *ngIf="role === 'IDRBTADMIN'">
        <button class="btn btn-primary" (click)="sendDnsSecToNixi(dns)" *ngIf="!dns.sentToNixi">
          Approve DNSSEC
        </button>
        <span *ngIf="dns.sentToNixi">Approved</span>
      </ng-container>
    </div>

    <!-- Request Delete -->
    <div class="data-cell" *ngIf="role !== 'IDRBTADMIN' && !isEditMode;">
      <div >
        <div *ngIf="dns.sentToNixi && !dns.registrarApprovalForDeletion">
          <button class="btn btn-danger" (click)="sendDeleteRequest(true, dns)">
           Request Delete
          </button>
        </div>
        <div *ngIf="dns.registrarApprovalForDeletion">
          <p>Request Sent</p>
        </div>
        
      </div>
      
      <div *ngIf="!dns.isSentToNixi">
         <button *ngIf="!dns.sentToNixi" class="btn btn-danger" (click)="sendDeleteRequest(false, dns)">
         Delete
      </button>
      </div>
    </div>

    <!-- Approve/Reject Delete -->
    <div class="data-cell" *ngIf="role === 'IDRBTADMIN'">
      <ng-container *ngIf="dns.sentToNixi && dns.registrarApprovalForDeletion">
       <div style="display: flex;">
         <button class="btn btn-success" (click)="deleteDnsSecOnRegistrarAction(true,dns)">Approve Delete</button>&nbsp;
         <button class="btn btn-danger" (click)="deleteDnsSecOnRegistrarAction(false,dns)">Reject Delete</button>
       </div>
      </ng-container>
      <ng-container *ngIf="!dns.sentToNixi || !dns.registrarApprovalForDeletion">
        <p>NA</p>
      </ng-container>
    </div>

  </div>
</div>

<!-- Submit button when edit mode is ON -->
<div *ngIf="isEditMode" class="mt-2">
  <button type="button" (click)="updateDnsSec()" class="btn btn-primary">Submit</button>
</div>


 <!-- DNS SEC CODE END -->
              <hr />
              <h2 style="margin-left: 10px;">Billing History</h2>
              <div class="row row-cols-4"
                style="background: #F5FAFF; margin-left: 10px; margin-right: 10px; padding: 16px 24px;">
                <div class="col" style="font-weight: 500; font-size: 14px;">Invoice No</div>
                <div class="col" style="font-weight: 500; font-size: 14px;">Amount</div>
                <div class="col" style="font-weight: 500; font-size: 14px;">Invoice Date</div>
                <div class="col" style="font-weight: 500; font-size: 14px;">Status</div>
              </div>
              <div class="row row-cols-4"
                style="padding-top: 20px;  margin-left: 10px; margin-right: 10px; padding: 16px 24px;"
                *ngFor="let bh of invoiceData; let i = index"
                [ngClass]="{'odd-row': i % 2 === 0, 'even-row': i % 2 !== 0}">
                <div class="col">{{bh.id}}</div>
                <div class="col">{{bh.finalAmount | indianCurrency}}</div>
                <div class="col">{{bh.createdDateTime | date:'MMM d, y, h:mm a'}}</div>
                <div class="col">{{domainDetail.paymentStatus}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


<div id="purchaseNameServerModal" class="modal" [style.display]="isPurchaseNameServerModalOpen ? 'flex' : 'none'">
  <div class="modal-content">
    <span class="close" (click)="closePurchaseNameServerModal()">&times;</span>
    <h2>Purchase Name Server</h2>
    <p>Are you sure you want to purchase a new name server?</p>

    <div class="form-group">
  <label for="numNameServers">Number of Name Servers:</label>
  <input type="text" id="numNameServers" class="form-control"
         [(ngModel)]="numNameServersToPurchase"
         (keypress)="allowPositiveNumbersOnly($event)"  (paste)="onPaste($event)">
</div>
    <button class="btn btn-primary" [disabled]="numNameServersToPurchase == 0" (click)="confirmPurchaseNameServer()">Confirm</button>
  </div>
</div>


<div id="addDnsSec" hidden data-toggle="modal" data-target="#addDnsSecModal"></div>
<div id="closeaddDnsSecModal" hidden  data-dismiss="modal" ></div>
 <div class="modal" id="addDnsSecModal" tabindex="-1" role="dialog"  data-backdrop="static">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" style="font-weight: 500; font-size: 14px; margin-bottom: 0px;">Add DNSSEC</h5>
        <button type="button"  (click)="clearAddDnsList()"  class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div>
    <button id="dnsSec" class="btn btn-primary" style="padding:4px 10px;"
           
            (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 *ngFor="let dns of addDnssecDetailsList; 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)" [disabled]="this.dnssecDetailsList.length + this.addDnssecDetailsList.length==1"
      style="background: red; color: white; border: none; padding: 5px 10px; border-radius: 5px;">Delete</button>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <label>Key Tag:<span style="color:red">*</span></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="text-danger">
        Key Tag is required.
      </div>
      <div *ngIf="keyTagRef.errors?.['pattern']" class="text-danger">
        Key Tag must be numeric.
      </div>
      <div *ngIf="keyTagRef.valid && keyTagRef.value !== '' && keyTagRef.value > 65535" class="text-danger">
       Key Tag must be less than or equal to 65535.
      </div>
    </div>

    <div class="col-sm-4">
      <label>Algorithm Type:<span style="color:red">*</span></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 || formSubmitted))"
  class="text-danger">
  Algorithm Type is required.
</div>
    </div>

    <div class="col-sm-4">
      <label>Digest Type:<span style="color:red">*</span></label>
   <select
  class="form-select"
  [(ngModel)]="dns.digestTypeCode"
  #digestTypeRef="ngModel"
  name="digestType{{i}}"
  required
  (ngModelChange)="onDigestChange($event, dns)"
>
  <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>
    </div>
  </div>

  <div class="row" style="padding-top: 10px;">
    <div class="col-sm-12">
      <label>Digest:<span style="color:red">*</span></label>
      <input class="form-control" type="text" [(ngModel)]="dns.digest" name="digest{{i}}" #digestRef="ngModel" required
        placeholder="Enter digest" />
      <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>
    </div>
  </div>

  <br />
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="saveDNSSecRecords()">Save</button>
        <button type="button" class="btn btn-danger"  (click)="closeDnsAddModal()"  >Close</button>
      </div>
    </div>
  </div>
</div>


<div id="addNameIdentifier" hidden data-toggle="modal" data-target="#addNameIdentifiermodal"></div>
 <div class="modal fade" id="addNameIdentifiermodal" tabindex="-1" role="dialog" aria-labelledby="xlModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header" id="modalHeader">
                        <h5 class="modal-title" id="xlModalLabel" style="font-size: 20px;">Add Name Identifier</h5>
                        <button  id="closeButtonForPaymentOfNameIdentifier" class="close"  data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"  style="background-color: none; color: black;font-size: 20px; padding: 5px; padding-top: 0px;"
                                >&times;</span>
                        </button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                         <!-- <p style="font-weight: 500;padding-bottom: 8px;">{{nameIdentifier}}</p> -->
       <input type="text" class="form-control" 
       (ngModelChange)="validateNameIdentifier($event)"
        [(ngModel)]="addNameIdentifiers"
        placeholder="Enter Name Identifier"/>
                    </div>
                     <div *ngIf="addNameIdentifierErrorMsg!=''" style="color:red;margin-left:20px">{{addNameIdentifierErrorMsg}}</div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                       <button class="btn btn-primary" (click)="saveAliasNameForDomain()" >Save</button>
                       <button class="btn btn-danger" (click)="clearError()" >Cancel</button>
                    </div>
                </div>
            </div>
          </div>
<div id="purchaseNameIdentifierModal" class="modal" [style.display]="isPurchaseNameIdentifierModalOpen ? 'flex' : 'none'">
  <div class="modal-content">
    <span class="close" (click)="closePurchaseNameIdentifierModal()">&times;</span>
    <h2>Purchase Name Identifier</h2>
    <p>Are you sure you want to purchase a new name Identifier?</p>

    <div class="form-group">
  <label for="numNameIdentifiers">Number of Name Identifiers:</label>
  <input type="text" id="numNameIdentifier" class="form-control"
         [(ngModel)]="numNameIdentifiersToPurchase"
         (keypress)="allowPositiveNumbersOnly($event)"  (paste)="onPaste($event)">
</div>
    <button class="btn btn-primary" [disabled]="numNameIdentifiersToPurchase == 0" (click)="confirmPurchaseNameIdentifier()">Confirm</button>
  </div>
</div>


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

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

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

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