<app-dns-loading [isDnsLoading]="isLoadingData"></app-dns-loading>
<div class="layout-container">
  <app-side-menu></app-side-menu>
  <div class="content-area">
    <app-main-header></app-main-header>
    <div class="container-fluid">
      <div class="row" style="padding-top: 100px;">
        <div class="col-sm-12">
          <div style="color: #212529;font-size: 24px;padding-bottom: 15px;">Officer Details Management</div>
          <div class="button-svg-container">
            <!-- <ng-select style="width: 200px;" placeholder="Select item" appendTo="body" 
                [(ngModel)]="selectedOrganisation" (change)="getContactUsers()">
                <ng-option [value]="0">Select</ng-option>
                <ng-option *ngFor="let org of organisationsList" 
                [value]="org.organisationDetailsId">{{org.institutionName}}</ng-option>
            </ng-select> -->
          
            <!-- [disabled]="isButtonDisabled()" -->
            <button  class="btn btn-primary" [disabled]="isButtonDisabled()"
             data-target="#addContact" data-toggle="modal"
              (click)="validateAddUser()">
              Add Officer Details
            </button>

          </div>
          <section class="example-container" style="margin-top: 10px;">
            <table id="table1" mat-table [dataSource]="usersDataSource" matSort class="mat-elevation-z8">

              <!-- <ng-container matColumnDef="checkbox">
                  <th mat-header-cell *matHeaderCellDef>
                    <input type="checkbox" id="mainCheckBox" />
                  </th>
                  <td mat-cell *matCellDef="let user; let i = index">
                    <input type="checkbox" id="subCheckBox{{i}}" class="subCheckBox" value="{{i}}" />
                  </td>
                </ng-container> -->


              <!-- <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
                <td  mat-cell *matCellDef="let user; let i = index">
                  {{i+1}}</td>
              </ng-container> -->
              <ng-container matColumnDef="ids">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Officer's Org Id</th>
                <td mat-cell *matCellDef="let user">
                  {{user.id}}  </td>
              </ng-container>

              <ng-container matColumnDef="organisationName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Entity Name</th>
                <td mat-cell *matCellDef="let user">
                  {{user.organisationDetails.institutionName}}</td>
              </ng-container>


              <ng-container matColumnDef="personName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Officer Name</th>
                <td mat-cell *matCellDef="let user">{{user.personName}}</td>
              </ng-container>


              <ng-container matColumnDef="designation">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Designation</th>
                <td mat-cell *matCellDef="let user">{{user.designation}}</td>
              </ng-container>

              <ng-container matColumnDef="mobileNumber">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Mobile Number</th>
                <td mat-cell *matCellDef="let user">{{user.mobileNumber}}</td>
              </ng-container>


              <ng-container matColumnDef="emailId">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Email ID</th>
                <td mat-cell *matCellDef="let user">{{user.emailId}}</td>
              </ng-container>

              <ng-container matColumnDef="contactRole">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Role</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.contactRole === 'Billing Officer' ? 'Financial Officer' : user.contactRole }}
                </td>
              </ng-container>

              <!-- <ng-container matColumnDef="approveOrReject">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Approve/Reject Login</th>
                    <td mat-cell *matCellDef="let user">
                        <div>
                            <span class="approved" (click)="enableOrDisableLoginStatus('Approved',user)">
                                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="0.5" width="24" height="24" rx="2" fill="#C3FFC3" fill-opacity="0.5"/>
                                    <path d="M15 19.25V17.75C15 16.9544 14.6839 16.1913 14.1213 15.6287C13.5587 15.0661 12.7956 14.75 12 14.75H6.75C5.95435 14.75 5.19129 15.0661 4.62868 15.6287C4.06607 16.1913 3.75 16.9544 3.75 17.75V19.25" stroke="#008000" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9.375 11.75C11.0319 11.75 12.375 10.4069 12.375 8.75C12.375 7.09315 11.0319 5.75 9.375 5.75C7.71815 5.75 6.375 7.09315 6.375 8.75C6.375 10.4069 7.71815 11.75 9.375 11.75Z" stroke="#008000" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M15.75 11.75L17.25 13.25L20.25 10.25" stroke="#008000" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                            </span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="rejected" (click)="enableOrDisableLoginStatus('Rejected',user)">
                                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="0.5" width="24" height="24" rx="2" fill="#FF9393" fill-opacity="0.5"/>
                                    <path d="M15 19.25V17.75C15 16.9544 14.6839 16.1913 14.1213 15.6287C13.5587 15.0661 12.7956 14.75 12 14.75H6.75C5.95435 14.75 5.19129 15.0661 4.62868 15.6287C4.06607 16.1913 3.75 16.9544 3.75 17.75V19.25" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9.375 11.75C11.0319 11.75 12.375 10.4069 12.375 8.75C12.375 7.09315 11.0319 5.75 9.375 5.75C7.71815 5.75 6.375 7.09315 6.375 8.75C6.375 10.4069 7.71815 11.75 9.375 11.75Z" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M16.5 9.5L20.25 13.25" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M20.25 9.5L16.5 13.25" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                            </span>
                        </div>
                    </td>
                  </ng-container> -->

                  <!-- <ng-container matColumnDef="verifyEmail">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Verify Email</th>
                    <td mat-cell *matCellDef="let user">
                      <p (click)="sendOtpToVerifyEmail(user)"
                        style="cursor: pointer;text-decoration: underline;color: blue;">Verify Email</p>
                    </td>
                  </ng-container> -->
              <ng-container matColumnDef="documents">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>View Documents</th>
                <td mat-cell *matCellDef="let user">
                  <a (click)="navigateToVerifyDocuments(user)"
                    style="cursor: pointer;text-decoration: underline;color: blue;">View</a>
                </td>
              </ng-container>

              <ng-container matColumnDef="loginStatus">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Login Status</th>
                <td mat-cell *matCellDef="let user">
                  <div>{{user.loginStatus?user.loginStatus:'NA'}}</div>
                </td>
              </ng-container>
              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Actions</th>
                <td mat-cell *matCellDef="let user">
                  <div>
                    <!-- Admin Officer Button -->
                    <svg *ngIf="user.contactRole === 'Administrative Officer'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <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.62523C18.7729 2.2274 19.3125 2.00391 19.8751 2.00391C20.4377 2.00391 20.9773 2.2274 21.3751 2.62523C21.7729 3.02305 21.9964 3.56262 21.9964 4.12523C21.9964 4.68784 21.7729 5.2274 21.3751 5.62523L12.3621 14.6392C12.1246 14.8765 11.8313 15.0501 11.5091 15.1442L8.63609 15.9842C8.55005 16.0093 8.45883 16.0108 8.372 15.9886C8.28517 15.9663 8.20592 15.9212 8.14254 15.8578C8.07916 15.7944 8.03398 15.7151 8.01174 15.6283C7.98949 15.5415 7.991 15.4503 8.01609 15.3642L8.85609 12.4912C8.95062 12.1693 9.12463 11.8763 9.36209 11.6392L18.3751 2.62523Z"
                        stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        (click)="getAdminOfficerDetails(user.id)" style="cursor: pointer;" data-toggle="modal" data-target="#userModal" />
                    </svg>
              
                    <!-- Billing Officer Button -->
                    <svg *ngIf="user.contactRole === 'Billing Officer'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <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.62523C18.7729 2.2274 19.3125 2.00391 19.8751 2.00391C20.4377 2.00391 20.9773 2.2274 21.3751 2.62523C21.7729 3.02305 21.9964 3.56262 21.9964 4.12523C21.9964 4.68784 21.7729 5.2274 21.3751 5.62523L12.3621 14.6392C12.1246 14.8765 11.8313 15.0501 11.5091 15.1442L8.63609 15.9842C8.55005 16.0093 8.45883 16.0108 8.372 15.9886C8.28517 15.9663 8.20592 15.9212 8.14254 15.8578C8.07916 15.7944 8.03398 15.7151 8.01174 15.6283C7.98949 15.5415 7.991 15.4503 8.01609 15.3642L8.85609 12.4912C8.95062 12.1693 9.12463 11.8763 9.36209 11.6392L18.3751 2.62523Z"
                        stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        (click)="getBillingOfficerDetails(user.id)" style="cursor: pointer;" data-toggle="modal" data-target="#billingModel" />
                    </svg>
              
                    <!-- Technical Officer Button -->
                    <svg *ngIf="user.contactRole === 'Technical Officer'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <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.62523C18.7729 2.2274 19.3125 2.00391 19.8751 2.00391C20.4377 2.00391 20.9773 2.2274 21.3751 2.62523C21.7729 3.02305 21.9964 3.56262 21.9964 4.12523C21.9964 4.68784 21.7729 5.2274 21.3751 5.62523L12.3621 14.6392C12.1246 14.8765 11.8313 15.0501 11.5091 15.1442L8.63609 15.9842C8.55005 16.0093 8.45883 16.0108 8.372 15.9886C8.28517 15.9663 8.20592 15.9212 8.14254 15.8578C8.07916 15.7944 8.03398 15.7151 8.01174 15.6283C7.98949 15.5415 7.991 15.4503 8.01609 15.3642L8.85609 12.4912C8.95062 12.1693 9.12463 11.8763 9.36209 11.6392L18.3751 2.62523Z"
                        stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        (click)="getTechnicalOfficerDetails(user.id)" style="cursor: pointer;" data-toggle="modal" data-target="#lastModal" />
                    </svg>
              
                    <!-- Delete Button -->
                    <svg  *ngIf="user.contactRole === 'AdminOfficer'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path d="M3 6H5H21" stroke="#ED6A5E" 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="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M10 11V17" stroke="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M14 11V17" stroke="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer;" (click)="deleteAdminById(user.id,user.contactRole)" />
                    </svg>
                    <svg  *ngIf="user.contactRole === 'BillingOfficer'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path d="M3 6H5H21" stroke="#ED6A5E" 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="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M10 11V17" stroke="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M14 11V17" stroke="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer;" (click)="deleteBillingById(user.id,user.contactRole)" />
                    </svg>
                    <svg  *ngIf="user.contactRole === 'TechnicalOfficer'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path d="M3 6H5H21" stroke="#ED6A5E" 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="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M10 11V17" stroke="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M14 11V17" stroke="#ED6A5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer;" (click)="deleteTechById(user.id,user.contactRole)" />
                    </svg>
                  </div>
                </td>
              </ng-container>
               <ng-container matColumnDef="delete">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Delete Officer</th>
                <td mat-cell *matCellDef="let user">
                  <div> <svg style="cursor: pointer;" (click)="deleteTheOfficerDetails(user.id,user.emailId,user.contactRole)"  width="22" height="20" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M3.69873 6H5.69873H21.6987" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M19.6987 6V20C19.6987 20.5304 19.488 21.0391 19.1129 21.4142C18.7379 21.7893 18.2292 22 17.6987 22H7.69873C7.1683 22 6.65959 21.7893 6.28452 21.4142C5.90944 21.0391 5.69873 20.5304 5.69873 20V6M8.69873 6V4C8.69873 3.46957 8.90944 2.96086 9.28452 2.58579C9.65959 2.21071 10.1683 2 10.6987 2H14.6987C15.2292 2 15.7379 2.21071 16.1129 2.58579C16.488 2.96086 16.6987 3.46957 16.6987 4V6" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M10.6987 11V17" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M14.6987 11V17" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          </svg></div>
                </td>
              </ng-container>
               <!-- <ng-container matColumnDef="edit">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Edit</th>
                <td mat-cell *matCellDef="let user">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style="cursor: pointer;"
                    (click)="openEditOfficerModal(user)" data-toggle="modal" data-target="#editOfficerModal">
                    <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.62523C18.7729 2.2274 19.3125 2.00391 19.8751 2.00391C20.4377 2.00391 20.9773 2.2274 21.3751 2.62523C21.7729 3.02305 21.9964 3.56262 21.9964 4.12523C21.9964 4.68784 21.7729 5.2274 21.3751 5.62523L12.3621 14.6392C12.1246 14.8765 11.8313 15.0501 11.5091 15.1442L8.63609 15.9842C8.55005 16.0093 8.45883 16.0108 8.372 15.9886C8.28517 15.9663 8.20592 15.9212 8.14254 15.8578C8.07916 15.7944 8.03398 15.7151 8.01174 15.6283C7.98949 15.5415 7.991 15.4503 8.01609 15.3642L8.85609 12.4912C8.95062 12.1693 9.12463 11.8763 9.36209 11.6392L18.3751 2.62523Z"
                        stroke="#9A9A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                </td>
              </ng-container> -->
              

              <ng-container matColumnDef="isContactSentToNixi">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Contact Approved</th>
                <td mat-cell *matCellDef="let user">
                  <div>{{ user.isContactSentToNixi ? 'Approved' : 'Not Approved' }}</div>
                </td>
              </ng-container>
              

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </section>
          <mat-paginator style="font-size: 13px;" [pageSizeOptions]="[5, 10, 20 ]" showFirstLastButtons [pageSize]="10"
            aria-label="Select page of periodic elements">
          </mat-paginator>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Contact User modal -->
<div *ngIf="openTheContactDetailsModal == true"  class="modal" id="addContact" 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">Add Contact</h5>
        <button type="button" class="close" id="closeContactDetailsModal" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"  (click)="resetForm()">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- <p>Modal body text goes here.</p> -->
        <ng-select style="width: 250px;" [(ngModel)]="selectedOfficerToAdd" bindLabel="value" bindValue="key" placeholder="choose officer">
          <!-- <ng-option value='' disabled>select</ng-option> -->
          <ng-option *ngFor="let option of options" [value]="option.value">
            {{ option.label }}
          </ng-option>
        </ng-select>
        <div>
          <app-contact-details-form
          #contactDetailsForm
                [choosenContactType]="selectedOfficerToAdd"
                [organisationId] ="selectedOrganisationId"
                (adminDocDetails)="SubmittedAdminDocs($event)"
                (techDocDetails)="submittedTechDocDetails($event)"
                (billDocDetails)="submittedBillDocDetails($event)"
                (addUserContactDetailsSaved)="closeTheModal($event)"
                ></app-contact-details-form>
                

        </div>
         <!-- <div *ngIf="selectedOfficerToAdd === 'AdminOfficer'">
          <p>Admin Officer</p>
        </div>
        <div *ngIf="selectedOfficerToAdd === 'TechnicalOfficer'">
          <p>Technical Officer</p>
        </div>
        <div *ngIf="selectedOfficerToAdd === 'BillingOfficer'">
          <p>Billing Officer</p>
        </div> -->
     
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="resetForm()">Close</button>
      </div>
    </div>
  </div>
</div>

  <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" style=" background: #EDECFC; color: #000000;">
        <h5 class="modal-title" id="exampleModalLabel" style="font-size: 18px;">Update Officer Details
        </h5>
        <button type="button" class="close" data-dismiss="modal" id="closeRegForm" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
       <div class="form-group" *ngIf="adminOfficerDetails">
  <!-- <label for="organisationName">Organization Name<span style="color:red">*</span></label>
  <input type="text" id="organisationName" name="organisationName" class="form-control"  (keyup)="AdminOrganisationNameChange()"
    [(ngModel)]="adminOfficerDetails.organisationName" placeholder="Enter Organisation Name">
</div>
<div *ngIf="!orgNameInput" class="error-message">
  {{ orgNameErrorMessage }}
</div> -->
<div class="form-group" *ngIf="adminOfficerDetails">
  <label for="personName">Officer Name<span style="color:red">*</span></label>
  <input type="text" id="personName" name="personName" class="form-control" (keyup)="AdminPersonNameChange()"
    [(ngModel)]="adminOfficerDetails.adminFullName" placeholder="Enter Officer Name">
</div>
<div *ngIf="!personNameInput" class="error-message">
  {{ personNameErrorMessage }}
</div>
<div class="form-group" *ngIf="adminOfficerDetails">
  <label for="Designation">Designation<span style="color:red">*</span></label>
  <input type="text" id="Designation" name="Designation" class="form-control" (keyup)="AdminDesignationNameChange()"
    [(ngModel)]="adminOfficerDetails.adminDesignation" placeholder="Enter Designation">
</div>
<div *ngIf="!designationNameInput" class="error-message">
  {{ designationNameErrorMessage }}
</div>

<div class="form-group" *ngIf="adminOfficerDetails">
  <label for="MobileNumber">Mobile Number<span style="color:red">*</span></label>
  <div class="input-group">
 <div class="input-group-prepend">
      <span class="input-group-text">{{adminOfficerDetails.adminAltCountryCode}}</span>
    </div>
  <input type="text" id="MobileNumber" name="MobileNumber" class="form-control" (keyup)="AdminMobileNameChange()"
    [(ngModel)]="adminOfficerDetails.adminAltPhone" placeholder="Enter Mobile Number">
  </div>
  
</div>
<div *ngIf="!mobileNameInput" class="error-message">
  {{ mobileNameErrorMessage }}
</div>
<div class="form-group" *ngIf="adminOfficerDetails">
  <label for="EmailId">Email ID<span style="color:red">*</span></label>
  <input type="text" readonly id="EmailId" name="EmailId" class="form-control" (keyup)="AdminEmailNameChange()"
    [(ngModel)]="adminOfficerDetails.adminEmail" placeholder="Enter Email ID">
</div>
<div *ngIf="!emailNameInput" class="error-message">
  {{ emailNameErrorMessage }}
</div>

        


      </div>

    </div>
    <div class="modal-footer">
          <!-- Submit Button with background color styling -->
          <button (click)="updateAdminOfficerLoginStatus(adminOfficerDetails)" class="btn btn-primary">Update</button>
        &nbsp;&nbsp;&nbsp;
          <!-- Cancel Button with background color styling and space between -->
          <button (click)="clearButton()"  class="btn btn-danger">Cancel</button>
        </div>
  </div>
  
</div>
</div>
  <div class="modal fade" id="billingModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" style=" background: #EDECFC; color: #000000;">
        <h5 class="modal-title" id="exampleModalLabel" style="font-size: 18px;">Update Officer Details</h5>
        <button type="button" class="close" data-dismiss="modal" id="closeRegForm1" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <!-- <div class="form-group" *ngIf="billingOfficerDetails">
          <label for="organisationName">Organization Name<span style="color:red">*</span></label>
          <input type="text" id="organisationName" name="organisationName" class="form-control" (keyup)="billingOrganisationNameChange()" [(ngModel)]="billingOfficerDetails.organisationName" placeholder="Enter Organisation Name">
        </div>
        <div *ngIf="!orgNameInput" class="error-message">
          {{ orgNameErrorMessage }}
      </div> -->

        <div class="form-group" *ngIf="billingOfficerDetails">
          <label for="personName">Officer Name<span style="color:red">*</span></label>
          <input type="text" id="personName" name="personName" class="form-control"  (keyup)="billingPersonNameChange()" [(ngModel)]="billingOfficerDetails.billFullName" placeholder="Enter Officer Name">
        </div>
        <div *ngIf="!personNameInput" class="error-message">
          {{ personNameErrorMessage }}
      </div>
        <div class="form-group" *ngIf="billingOfficerDetails">
          <label for="Designation">Designation<span style="color:red">*</span></label>
          <input type="text" id="Designation" name="Designation" class="form-control" (keyup)="billingdesignationNameChange()"  [(ngModel)]="billingOfficerDetails.billDesignation" placeholder="Enter Designation">
        </div>
        <div *ngIf="!designationNameInput" class="error-message">
          {{ designationNameErrorMessage }}
      </div>
        <div class="form-group" *ngIf="billingOfficerDetails">
           <label for="MobileNumber">Mobile Number<span style="color:red">*</span></label>
          <div class="input-group">
          <div class="input-group-prepend">
                 <span class="input-group-text">{{billingOfficerDetails.billAltCountryCode}}</span>
              </div>
         
          <input type="text" id="MobileNumber" name="MobileNumber" class="form-control" (keyup)="billingMobileNameChange()"   [(ngModel)]="billingOfficerDetails.billAltPhone" placeholder="Enter Mobile Number">
       </div>
        </div>
        <div *ngIf="!mobileNameInput" class="error-message">
          {{ mobileNameErrorMessage }}
      </div>
        <div class="form-group" *ngIf="billingOfficerDetails">
          <label for="EmailId">Email ID<span style="color:red">*</span></label>
          <input type="text" readonly id="EmailId" name="EmailId" class="form-control" (keyup)="billingEmailNameChange()"  [(ngModel)]="billingOfficerDetails.billEmail" placeholder="Enter Email ID">
        </div>
        <div *ngIf="!emailNameInput" class="error-message">
          {{ emailNameErrorMessage }}
      </div>
       
      </div>
      <div class="modal-footer">
          <!-- Submit Button with background color styling -->
          <button (click)="updateBillingOfficerLoginStatus(billingOfficerDetails)" class="btn btn-primary">Update</button>
          &nbsp;&nbsp;&nbsp;
          <!-- Cancel Button with background color styling and space between -->
          <button class="btn btn-danger" (click)="clearButtons()" >Cancel</button>
        </div>
    </div>
     
  </div>
</div>

<div class="modal fade" id="lastModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" style=" background: #EDECFC; color: #000000;">
        <h5 class="modal-title" id="exampleModalLabel" style="font-size: 18px;">Update Officer Details</h5>
        <button type="button" class="close" data-dismiss="modal" id="closeRegForm2" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="form-group" *ngIf="technicalOfficerDetails">
          <!-- <label for="organisationName">Organization Name<span style="color:red">*</span></label>
          <input type="text" id="organisationName" name="organisationName" class="form-control"  (keyup)="organisationNameChange()" [(ngModel)]="technicalOfficerDetails.organisationName" placeholder="Enter Organisation Name">
        </div>
        <div *ngIf="!orgNameInput" class="error-message">
          {{ orgNameErrorMessage }}
      </div> -->
        <div class="form-group" *ngIf="technicalOfficerDetails">
          <label for="personName">Officer Name<span style="color:red">*</span></label>
          <input type="text" id="personName" name="personName" class="form-control" (keyup)="personNameChange()" [(ngModel)]="technicalOfficerDetails.techFullName" placeholder="Enter Officer Name">
        </div>
        <div *ngIf="!personNameInput" class="error-message">
          {{ personNameErrorMessage }}
      </div>
        <div class="form-group" *ngIf="technicalOfficerDetails">
          <label for="Designation">Designation<span style="color:red">*</span></label>
          <input type="text" id="Designation" name="Designation" class="form-control" (keyup)="designationNameChange()" [(ngModel)]="technicalOfficerDetails.techDesignation" placeholder="Enter Designation">
        </div>
        <div *ngIf="!designationNameInput" class="error-message">
          {{ designationNameErrorMessage }}
      </div>

        <div class="form-group" *ngIf="technicalOfficerDetails">
          <label for="MobileNumber">Mobile Number<span style="color:red">*</span></label>
          <div class="input-group">
          <div class="input-group-prepend">
               <span class="input-group-text">{{technicalOfficerDetails.techAltCountryCode}}</span>
          </div>
          <input type="text" id="MobileNumber" name="MobileNumber" class="form-control" (keyup)="mobileNameChange()" [(ngModel)]="technicalOfficerDetails.techAltPhone" placeholder="Enter Mobile Number">
        </div>
        </div>
        <div *ngIf="!mobileNameInput" class="error-message">
          {{ mobileNameErrorMessage }}
      </div>

        <div class="form-group" *ngIf="technicalOfficerDetails">
          <label for="EmailId">Email ID<span style="color:red">*</span></label>
          <input type="text" readonly id="EmailId" name="EmailId" class="form-control" (keyup)="emailNameChange()" [(ngModel)]="technicalOfficerDetails.techEmail" placeholder="Enter Email ID">
        </div>
        <div *ngIf="!emailNameInput" class="error-message">
          {{ emailNameErrorMessage }}
      </div>

       
      </div>
       <div class="modal-footer">
         
          <button (click)="updateTechnicalOfficerLoginStatus(technicalOfficerDetails)" class="btn btn-primary">Update</button>
         &nbsp;&nbsp;&nbsp;
         
          <button  class="btn btn-danger" (click)="cancelButton()"  >Cancel</button>
        </div>
    </div>
    
  </div>
</div>
  
