<div class="w-100">
  <!-- Card with shadow and padding -->
  <div class="col-12 mt-3">
    <!-- Add margin-top to create space from the top -->
    <div class="card" style="border: none">
      <div class="card-body">
        <h3>Super Admin Contact Details</h3>

        <!-- Entire form in one form group -->
        <form [formGroup]="fullForm" *ngIf="choosenContactType === ''">
          <!-- Administrative Card -->
          <div class="card mt-4 mb-4 ">
            <div class="card-header">
              <h5 class="mt-2">Super Admin</h5>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="panDetails">
                  <p>Verify Your PAN Details</p>
                </div>
                <div class="col-md-4">
                  <label for="admPanNumber" class="form-label">PAN Number (Enter Individual PAN Number)</label><span class="text-danger">*</span>
                  <input type="text" id="admPanNumber" class="form-control" formControlName="admPanNumber"
                    placeholder="Enter PAN number" maxlength="10"
                    (input)="fullForm.get('admPanNumber')?.setValue($any($event.target).value.toUpperCase(), { emitEvent: false })"
                    />
                  <div *ngIf="
                      fullForm.get('admPanNumber')?.invalid &&
                      fullForm.get('admPanNumber')?.touched
                    " class="text-danger">
                    PAN Number is required.
                  </div>

                </div>
                <div class="col-md-4">
                  <label for="admDob" class="form-label">Date Of Birth</label><span class="text-danger">*</span>
                  <input type="date" id="admDob" class="form-control" formControlName="admDob"
                    placeholder="Enter Date Of Birth" maxlength="50" />
                  <div *ngIf="
                      fullForm.get('admDob')?.invalid &&
                      fullForm.get('admDob')?.touched
                    " class="text-danger">
                    Date of birth is required.
                  </div>
                                                                                                                                                                                                                                                                                                                                                                                        
                </div>
                <div class="col-md-4">
                  <label for="admFullName" class="form-label">Full Name</label><span class="text-danger">*</span>
                  <input type="text" id="admFullName" class="form-control" formControlName="admFullName"
                    placeholder="Enter full name" (input)="allowAlphabetsOnly($event)" maxlength="50" />
                  <div *ngIf="
                      fullForm.get('admFullName')?.invalid &&
                      fullForm.get('admFullName')?.touched
                    " class="text-danger">
                    Full name is required.
                  </div>
                </div>
                <div class="col-md-12">
                  <button type="button" class="btn btn-primary" (click)="verifyPANForAdmin()">
                    Verify PAN
                  </button>
                </div>
                <div class="col-md-4">
                  <label for="admEmail" class="form-label">Individual Official Email ID</label><span
                    class="text-danger">*</span>
                  <input type="email" id="admEmail" class="form-control" formControlName="admEmail"
                    placeholder="Enter individual official email id" 
                    readonly
                    />
                  <div *ngIf="
                  (fullForm.get('admEmail')?.errors?.['invalidEmail']) &&
                  fullForm.get('admEmail')?.touched
                  " class="text-danger">
                    Please enter a valid email.
                  </div>
                  <!-- <div *ngIf="fullForm.get('techEmail')?.hasError('invalidEmail') && fullForm.get('techEmail')?.touched" class="text-danger">
                  Please enter a valid email address
                </div> -->
                  <div *ngIf="fullForm.errors?.['emailNotUniqueBill'] && fullForm.get('admEmail')?.touched"
                    class="text-danger">
                    An email can only be used twice.
                  </div>
                  <div
                    *ngIf="fullForm.get('admEmail')?.errors?.['emailAlreadyExists'] && fullForm.get('admEmail')?.touched"
                    class="text-danger">
                    This email is already used
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="admDesignation" class="form-label">Designation</label><span class="text-danger">*</span>
                  <input type="text" id="admDesignation" class="form-control" formControlName="admDesignation"
                    placeholder="Enter your designation" (input)="allowAlphabetsOnly($event)" />
                  <div
                    *ngIf="fullForm.get('admDesignation')?.hasError('maxlength') && fullForm.get('admDesignation')?.touched"
                    class="text-danger">
                    Designation cannot exceed 50 characters.
                  </div>
                  <div *ngIf="
                    fullForm.get('admDesignation')?.invalid &&
                    fullForm.get('admDesignation')?.touched
                  " class="text-danger">
                    Please enter your Designation.
                  </div>
                </div>

                <div class="col-md-6">
                  <label for="admPhone" class="form-label">Authorized Official's Official Number</label><span
                    class="text-danger">*</span>
                  <!-- <div class="input-group">   -->
                  <!-- Country Code Dropdown for Bill Phone -->
                  <div style="display: flex; width: 100%;">
                    <!-- Country Code Input -->
                    <input type="text" placeholder="STD Code" id="countryCode" class="form-control"
                      formControlName="admCountryCode" (input)="onAdminStdChange()" #countryCodeInput
                      style="width: auto; min-width: auto;padding-left: 5px; padding-right: 0px; border-top-right-radius: 0;border-bottom-right-radius: 0;" />


                    <!-- Mobile Number Input -->
                    <input type="text" id="admPhone" class="form-control" placeholder="Enter STD Telephone"
                      formControlName="admPhone"
                      (input)="sanitizeInput($event, 'admPhone')" maxlength="10" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" />
                  </div>

                  <!-- </div> -->
                  <div *ngIf=" (fullForm.get('admCountryCode')?.invalid && fullForm.get('admCountryCode')?.touched)
                    || (fullForm.get('admPhone')?.invalid &&
                    fullForm.get('admPhone')?.touched) || adminStdCodeMobileCombinationError!=''"
                    class="text-danger">
                    Please enter a valid STD code (1-6 digits) or telephone number (5-10 digits).
                  </div>


                </div>
                <div class="col-md-6">
                  <label for="admAltPhone" class="form-label">Individual Official Mobile Number</label><span
                    class="text-danger">*</span>

                  <div style="display: flex; width: 100%;">
                    <!-- Country Code Input -->
                    <div class="custom-select-wrapper">
                      <div class="customs-select">
                        {{ selectedAdminAltCountryCode ? selectedAdminAltCountryCode : 'County Code' }}
                        <span class="dropdown-arrow"></span>
                      </div>
                      <select class="real-select" formControlName="admAltCountryCode"
                        (change)="updateAdminAltCountryCode($event)" onclick="return false;">
                        <option [value]="null" selected disabled hidden>Country Code</option>
                        <option *ngFor="let stdNum of countryCodes | orderBy:'countryName'"
                          [value]="stdNum.countryCode">
                          {{ stdNum.countryName }} -({{ stdNum.countryCode }})
                        </option>
                      </select>
                    </div>


                    <!-- Mobile Number Input -->
                    <input type="text" id="admAltPhone" class="form-control" placeholder="Enter phone number"
                      formControlName="admAltPhone"
                      (input)="sanitizeInput($event, 'admAltPhone')" maxlength="15" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" readonly/>
                  </div>
                  <!-- Country Code Dropdown for Bill Phone -->

                  <div *ngIf=" (fullForm.get('admAltCountryCode')?.invalid && fullForm.get('admAltCountryCode')?.touched)||
                      (fullForm.get('admAltPhone')?.invalid &&
                      fullForm.get('admAltPhone')?.touched)|| adminCountryCodeMobileCombinationError!=''
                    " class="text-danger">
                    {{ adminCountryCodeMobileCombinationError || 'Please enter a valid country code (1-4 digits) or
                    mobile number (10 digits for India, 8-15 digits for other countries).'}}
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="admAddress" class="form-label">Address</label><span class="text-danger">*</span>
                  <input type="text" id="admAddress" class="form-control" formControlName="admAddress"
                    placeholder="Enter your address" [value]="fullAddress"
                    (keypress)="preventConsecutiveSpaces($event)" />
                  <div *ngIf="fullForm.get('admAddress').touched && fullForm.get('admAddress').invalid"
                    class="text-danger">
                    <!-- Required Validation Error -->
                    <div *ngIf="fullForm.get('admAddress').errors?.['required']">
                      Please enter your address.
                    </div>
                    <!-- Min Length Validation Error (only if not required error is shown) -->
                    <div
                      *ngIf="fullForm.get('admAddress').errors?.['minlength'] && !fullForm.get('admAddress').errors?.['required']">
                      Address must be atleast 5 characters long.

                    </div>

                    <!-- Max Length Validation Error (only if not required or minlength error is shown) -->
                    <div
                      *ngIf="fullForm.get('admAddress').errors?.['maxlength'] && !fullForm.get('admAddress').errors?.['required'] && !fullForm.get('admAddress').errors?.['minlength']">
                      Address cannot exceed 300 characters.
                    </div>
                    <div *ngIf="fullForm.get('admAddress').errors?.['startWithSpecialChar']">
                      Address cannot start with a special character.
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="superAdminDocuments" class="form-label">Documents</label> <span style="color: red">*</span>
                  &nbsp;
                  <label style="color: blue;">( Please upload all the 2 documents )</label>
                  <app-document-upload id="documentsToUpload" [organisationId]="organisationId" [mode]="'admin'"
                    [adminUploadedDocs]="adminUploadedDocs" [contactSubmissionAttempted]="contactSubmissionAttempted"
                    (onAdminValidationChange)="
                    handleAdminValidationChange($event)
                  " (docNameForContact)="setDocNameToVieDocumentModal($event)"
                    (setAdminUploadedDocs)="setAdminUploadedDocuments($event)" (imageUrl)="onImageViewClick($event)"
                    (pdfUrl)="onPdfViewClick($event)" (resetErrorMessages)="resetErrorMessages()"
                    (errorForAdminDocUpload)="sendErrorOfAdminDocUploadToOnBoardingStepper($event)"
                    (ContactdocumentValidationStatus)="ContactdocumentValidationStatus($event)"></app-document-upload>
                  <!-- <label for="superAdminDocuments" class="form-label">Documents</label><span class="text-danger">*</span>
                      <select id="superAdminDocuments" class="form-select" formControlName="superAdminDocuments">
                        <option selected>Select and upload</option>
                        <option value="1">Document 1</option>
                        <option value="2">Document 2</option>
                      </select> -->
                </div>
              </div>
            </div>
          </div>

          <!-- Submit Button for the Entire Form -->

          <div class="d-flex justify-content-between">
            <div></div>
            <!-- <button class="btn btn-primary btn-lg" (click)="goBack()">Back</button> -->
      <button
  [disabled]="!isSuperAdminFormValid()"
  (click)="onButtonClickOfSubmit()"
  class="btn btn-primary btn-lg">
  Save & Next
</button>
          </div>
        </form>

        <!-- rgtr rgnt  -->
        <!-- Entire form in one form group -->
        <form [formGroup]="fullForm">
          <!-- Administrative Card -->
          <div class="card mt-4 mb-4 " *ngIf="choosenContactType === 'Administrative Officer'">
            <div class="card-header">
              <h5 class="mt-2">Administrative Officer</h5>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-4">
                  <label for="admFullName" class="form-label">Full Name</label><span class="text-danger">*</span>
                  <input type="text" id="admFullName" class="form-control" formControlName="admFullName"
                    placeholder="Enter full name" (input)="allowAlphabetsOnly($event)" maxlength="50" />
                  <div *ngIf="
                      fullForm.get('admFullName')?.invalid &&
                      fullForm.get('admFullName')?.touched
                    " class="text-danger">
                    Full name is required.
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="admEmail" class="form-label">Individual official Email ID</label><span
                    class="text-danger">*</span>
                  <input type="email" id="admEmail" class="form-control" formControlName="admEmail"
                    placeholder="Enter individual official email id" />
                  <div *ngIf="
                  (fullForm.get('admEmail')?.errors?.['invalidEmail']) &&
                  fullForm.get('admEmail')?.touched
                  " class="text-danger">
                    Please enter a valid email.
                  </div>
                  <!-- <div *ngIf="fullForm.get('techEmail')?.hasError('invalidEmail') && fullForm.get('techEmail')?.touched" class="text-danger">
                  Please enter a valid email address
                </div> -->
                  <div *ngIf="fullForm.errors?.['emailNotUniqueBill'] && fullForm.get('admEmail')?.touched"
                    class="text-danger">
                    An email can only be used twice.
                  </div>
                  <div
                    *ngIf="fullForm.get('admEmail')?.errors?.['emailAlreadyExists'] && fullForm.get('admEmail')?.touched"
                    class="text-danger">
                    This email is already used
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="admDesignation" class="form-label">Designation</label><span class="text-danger">*</span>
                  <input type="text" id="admDesignation" class="form-control" formControlName="admDesignation"
                    placeholder="Enter your designation" (input)="allowAlphabetsOnly($event)" maxlength="50" />
                  <div
                    *ngIf="fullForm.get('admDesignation')?.hasError('maxlength') && fullForm.get('admDesignation')?.touched"
                    class="text-danger">
                    Designation cannot exceed 50 characters.
                  </div>
                  <div *ngIf="
                    fullForm.get('admDesignation')?.invalid &&
                    fullForm.get('admDesignation')?.touched
                  " class="text-danger">
                    Please enter your Designation.
                  </div>
                </div>
                <div class="col-md-6">
                  <label for="admPhone" class="form-label">Authorized Official's Official Number</label><span
                    class="text-danger">*</span>
                  <!-- <div class="input-group">   -->
                  <!-- Country Code Dropdown for Bill Phone -->
                  <div style="display: flex; width: 100%;">
                    <!-- Country Code Input -->
                    <input type="text" placeholder="STD Code" id="countryCode" class="form-control"
                      formControlName="admCountryCode" (input)="onAdminStdChange()" #countryCodeInput
                      style="width: auto; min-width: auto;padding-left: 5px; padding-right: 0px; border-top-right-radius: 0;border-bottom-right-radius: 0;" />


                    <!-- Mobile Number Input -->
                    <input type="text" id="admPhone" class="form-control" placeholder="Enter STD Telephone"
                      formControlName="admPhone"
                      [attr.disabled]="fullForm.get('admCountryCode')?.value ? null : true"
                      (input)="sanitizeInput($event, 'admPhone')" maxlength="10" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" />
                  </div>

                  <!-- </div> -->
                  <div *ngIf=" (fullForm.get('admCountryCode')?.invalid && fullForm.get('admCountryCode')?.touched)
                    || (fullForm.get('admPhone')?.invalid &&
                    fullForm.get('admPhone')?.touched) || adminStdCodeMobileCombinationError!=''"
                    class="text-danger">
                    Please enter a valid STD code (1-6 digits) or telephone number (5-10 digits).
                  </div>


                </div>
                <div class="col-md-6">
                  <label for="admAltPhone" class="form-label">Individual Official Mobile Number</label><span
                    class="text-danger">*</span>

                  <div style="display: flex; width: 100%;">
                    <!-- Country Code Input -->
                    <div class="custom-select-wrapper">
                      <div class="customs-select">
                        {{ selectedAdminAltCountryCode ? selectedAdminAltCountryCode : 'County Code' }}
                        <span class="dropdown-arrow"></span>
                      </div>
                      <select class="real-select" formControlName="admAltCountryCode"
                        (change)="updateAdminAltCountryCode($event)">
                        <option [value]="null" selected disabled hidden>Country Code</option>
                        <option *ngFor="let stdNum of countryCodes | orderBy:'countryName'"
                          [value]="stdNum.countryCode">
                          {{ stdNum.countryName }} -({{ stdNum.countryCode }})
                        </option>
                      </select>
                    </div>


                    <!-- Mobile Number Input -->
                    <input type="text" id="admAltPhone" class="form-control" placeholder="Enter phone number"
                      formControlName="admAltPhone"
                      (input)="sanitizeInput($event, 'admAltPhone')" maxlength="15" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" />
                  </div>
                  <!-- Country Code Dropdown for Bill Phone -->

                  <div *ngIf=" (fullForm.get('admAltCountryCode')?.invalid && fullForm.get('admAltCountryCode')?.touched)||
                      (fullForm.get('admAltPhone')?.invalid &&
                      fullForm.get('admAltPhone')?.touched)|| adminCountryCodeMobileCombinationError!=''
                    " class="text-danger">
                    {{ adminCountryCodeMobileCombinationError || 'Please enter a valid country code (1-4 digits) or
                    mobile number (10 digits for India, 8-15 digits for other countries).'}}
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="admAddress" class="form-label">Address</label><span class="text-danger">*</span>
                  <input type="text" id="admAddress" class="form-control" formControlName="admAddress"
                    placeholder="Enter your address" [value]="fullAddress"
                    (keypress)="preventConsecutiveSpaces($event)" />
                  <div *ngIf="fullForm.get('admAddress').touched && fullForm.get('admAddress').invalid"
                    class="text-danger">
                    <!-- Required Validation Error -->
                    <div *ngIf="fullForm.get('admAddress').errors?.['required']">
                      Please enter your address.
                    </div>
                    <!-- Min Length Validation Error (only if not required error is shown) -->
                    <div
                      *ngIf="fullForm.get('admAddress').errors?.['minlength'] && !fullForm.get('admAddress').errors?.['required']">
                      Address must be atleast 5 characters long.

                    </div>

                    <!-- Max Length Validation Error (only if not required or minlength error is shown) -->
                    <div
                      *ngIf="fullForm.get('admAddress').errors?.['maxlength'] && !fullForm.get('admAddress').errors?.['required'] && !fullForm.get('admAddress').errors?.['minlength']">
                      Address cannot exceed 300 characters.
                    </div>
                    <div *ngIf="fullForm.get('admAddress').errors?.['startWithSpecialChar']">
                      Address cannot start with a special character.
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="superAdminDocuments" class="form-label">Documents</label><span style="color: red">*</span>
                  &nbsp;
                  <label style="color: blue;">( Please upload all the 2 documents )</label>
                  <app-document-upload id="documentsToUpload" [organisationId]="organisationId" [mode]="'admin'"
                    [adminUploadedDocs]="adminUploadedDocs" [contactSubmissionAttempted]="contactSubmissionAttempted"
                    (onAdminValidationChange)="
                    handleAdminValidationChange($event)
                  " (docNameForContact)="setDocNameToVieDocumentModal($event)"
                    (setAdminUploadedDocs)="setAdminUploadedDocuments($event)" (imageUrl)="onImageViewClick($event)"
                    (pdfUrl)="onPdfViewClick($event)" (resetErrorMessages)="resetErrorMessages()"
                    (errorForAdminDocUpload)="sendErrorOfAdminDocUploadToOnBoardingStepper($event)">


                    ></app-document-upload>

                  <!-- <label for="superAdminDocuments" class="form-label">Documents</label><span class="text-danger">*</span>
                      <select id="superAdminDocuments" class="form-select" formControlName="superAdminDocuments">
                        <option selected>Select and upload</option>
                        <option value="1">Document 1</option>
                        <option value="2">Document 2</option>
                      </select> -->
                </div>
              </div>
            </div>
          </div>

          <!-- Technical Card -->
          <div class="card mb-4" *ngIf="choosenContactType === 'Technical Officer'">
            <div class="card-header">
              <h5 class="mt-2">Technical Officer</h5>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-4">
                  <label for="techFullName" class="form-label">Full Name</label><span class="text-danger">*</span>
                  <input type="text" id="techFullName" class="form-control" formControlName="techFullName"
                    placeholder="Enter full name" (input)="allowAlphabetsOnly($event)" maxlength="50" />
                  <div *ngIf="
                      fullForm.get('techFullName')?.invalid &&
                      fullForm.get('techFullName')?.touched
                    " class="text-danger">
                    Full name is required.
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="techEmail" class="form-label">Individual official Email ID</label><span
                    class="text-danger">*</span>
                  <input type="email" id="techEmail" class="form-control" formControlName="techEmail"
                    placeholder="Enter organization email" />
                  <div *ngIf="
                    (fullForm.get('techEmail')?.errors?.['invalidEmail']) &&
                    fullForm.get('techEmail')?.touched
                    " class="text-danger">
                    Please enter a valid email.
                  </div>
                  <!-- <div *ngIf="fullForm.get('techEmail')?.hasError('invalidEmail') && fullForm.get('techEmail')?.touched" class="text-danger">
                    Please enter a valid email address
                  </div> -->
                  <div *ngIf="fullForm.errors?.['emailNotUniqueTech'] && fullForm.get('techEmail')?.touched"
                    class="text-danger">
                    An email can only be used twice.
                  </div>
                  <div
                    *ngIf="fullForm.get('techEmail')?.errors?.['emailAlreadyExists'] && fullForm.get('techEmail')?.touched"
                    class="text-danger">
                    This email is already used
                  </div>

                </div>
                <div class="col-md-4">
                  <label for="techDesignation" class="form-label">Designation</label><span class="text-danger">*</span>
                  <input type="text" id="techDesignation" class="form-control" formControlName="techDesignation"
                    (input)="allowAlphabetsOnly($event)" placeholder="Enter your designation" maxlength="50" />
                  <div
                    *ngIf="fullForm.get('techDesignation')?.hasError('maxlength') && fullForm.get('techDesignation')?.touched"
                    class="text-danger">
                    Designation cannot exceed 50 characters.
                  </div>
                  <div *ngIf="
                    fullForm.get('techDesignation')?.invalid &&
                    fullForm.get('techDesignation')?.touched
                  " class="text-danger">
                    Please enter your Designation.
                  </div>
                </div>
                <div class="col-md-6">
                  <label for="techPhone" class="form-label">Authorized Official's Official Number</label><span
                    class="text-danger">*</span>
                  <div style="display: flex; width: 100%;">

                    <input type="text" placeholder="STD Code" id="techCountryCode" class="form-control"
                      formControlName="techCountryCode" #techCountryCode
                      style="width: auto; min-width: auto; padding-left: 5px; padding-right: 0px; border-top-right-radius: 0;border-bottom-right-radius: 0;" />



                    <input type="text" id="techPhone" class="form-control" placeholder="Enter STD Telephone"
                      formControlName="techPhone" [attr.disabled]="fullForm.get('techCountryCode')?.value ? null : true"
                      (input)="sanitizeInput($event, 'techPhone')" maxlength="10" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" />
                  </div>

                  <div *ngIf=" (fullForm.get('techCountryCode')?.invalid && fullForm.get('techCountryCode')?.touched) ||
                      (fullForm.get('techPhone')?.invalid &&
                      fullForm.get('techPhone')?.touched) || techStdCodeMobileCombinationError!=''
                    " class="text-danger">
                    Please enter a valid STD code (1-6 digits) or telephone number (5-10 digits).
                  </div>

                </div>
                <div class="col-md-6">
                  <label for="techAltPhone" class="form-label">Individual Official Mobile Number</label><span
                    class="text-danger">*</span>
                  <div style="display: flex; width: 100%;">
                    <!-- Country Code Input -->
                    <div class="custom-select-wrapper">
                      <div class="customs-select">
                        {{ selectedTechAltCountryCode ? selectedTechAltCountryCode : 'Country Code' }}
                        <span class="dropdown-arrow"></span>
                      </div>
                      <select class="real-select" formControlName="techAltCountryCode"
                        (change)="updateTechAltCountryCode($event)">
                        <option [value]="null" selected disabled hidden>Country Code</option>
                        <option *ngFor="let stdNum of countryCodes | orderBy:'countryName'"
                          [value]="stdNum.countryCode">
                          {{ stdNum.countryName }} -({{ stdNum.countryCode }})
                        </option>
                      </select>
                    </div>


                    <!-- Mobile Number Input -->
                    <input type="text" id="techAltPhone" class="form-control" placeholder="Enter phone number"
                      formControlName="techAltPhone"
                      [attr.disabled]="fullForm.get('techAltCountryCode')?.value ? null : true"
                      (input)="sanitizeInput($event, 'techAltPhone')" maxlength="15" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" />
                  </div>

                  <div *ngIf=" (fullForm.get('techAltCountryCode')?.invalid && fullForm.get('techAltCountryCode')?.touched)||
                      (fullForm.get('techAltPhone')?.invalid &&
                      fullForm.get('techAltPhone')?.touched)  || techCountryCodeMobileCombinationError!=''
                    " class="text-danger">
                    {{ techCountryCodeMobileCombinationError || 'Please enter a valid country code (1-4 digits) or
                    mobile number (10 digits for India, 8-15 digits for other countries).' }}
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="techAddress" class="form-label">Address</label><span class="text-danger">*</span>
                  <input type="text" id="techAddress" class="form-control" formControlName="techAddress"
                    placeholder="Enter your address" [value]="fullAddress"
                    (keypress)="preventConsecutiveSpaces($event)" />
                  <div *ngIf="fullForm.get('techAddress').touched && fullForm.get('techAddress').invalid"
                    class="text-danger">
                    <!-- Required Validation Error -->
                    <div *ngIf="fullForm.get('techAddress').errors?.['required']">
                      Please enter your address.
                    </div>
                    <!-- Min Length Validation Error (only if not required error is shown) -->
                    <div
                      *ngIf="fullForm.get('techAddress').errors?.['minlength'] && !fullForm.get('techAddress').errors?.['required']">
                      Address must be atleast 5 characters long.

                    </div>
                    <!-- Max Length Validation Error (only if not required or minlength error is shown) -->
                    <div
                      *ngIf="fullForm.get('techAddress').errors?.['maxlength'] && !fullForm.get('techAddress').errors?.['required'] && !fullForm.get('techAddress').errors?.['minlength']">
                      Address cannot exceed 300 characters.
                    </div>
                    <div *ngIf="fullForm.get('techAddress').errors?.['startWithSpecialChar']">
                      Address cannot start with a special character.
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="techDocuments" class="form-label">Documents</label><span style="color: red">*</span>
                  &nbsp;
                  <label style="color: blue;">( Please upload all the 2 documents )</label>
                <app-document-upload
  id="documentsToUpload"
  [organisationId]="organisationId"
  [mode]="'admin'"
  [adminUploadedDocs]="adminUploadedDocs"
  [contactSubmissionAttempted]="contactSubmissionAttempted"
  (onAdminValidationChange)="handleAdminValidationChange($event)"
  (docNameForContact)="setDocNameToVieDocumentModal($event)"
  (setAdminUploadedDocs)="setAdminUploadedDocuments($event)"
  (imageUrl)="onImageViewClick($event)"
  (pdfUrl)="onPdfViewClick($event)"
  (resetErrorMessages)="resetErrorMessages()"
  (errorForAdminDocUpload)="sendErrorOfAdminDocUploadToOnBoardingStepper($event)">
</app-document-upload>
                  <!-- <label for="techDocuments" class="form-label">Documents</label><span class="text-danger">*</span>
                      <select id="techDocuments" class="form-select" formControlName="techDocuments">
                        <option selected>Select and upload</option>
                        <option value="1">Document 1</option>
                        <option value="2">Document 2</option>
                      </select> -->
                </div>
              </div>
            </div>
          </div>

          <!-- Billing Card -->
          <div class="card mb-4" *ngIf="choosenContactType === 'Billing Officer'">
            <div class="card-header">
              <h5 class="mt-2">Finance Officer</h5>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-4">
                  <label for="billFullName" class="form-label">Full Name</label>
                  <span class="text-danger">*</span>
                  <input type="text" id="billFullName" class="form-control" formControlName="billFullName"
                    placeholder="Enter full name" (input)="allowAlphabetsOnly($event)" maxlength="50" />
                  <div *ngIf="
                      fullForm.get('billFullName')?.invalid &&
                      fullForm.get('billFullName')?.touched
                    " class="text-danger">
                    Full name is required.
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="billEmail" class="form-label">Individual official Email ID</label><span
                    class="text-danger">*</span>
                  <input type="email" id="billEmail" class="form-control" formControlName="billEmail"
                    placeholder="Enter organization email" />
                  <div *ngIf="
                  (fullForm.get('billEmail')?.errors?.['invalidEmail']) &&
                  fullForm.get('billEmail')?.touched
                  " class="text-danger">
                    Please enter a valid email.
                  </div>
                  <!-- <div *ngIf="fullForm.get('techEmail')?.hasError('invalidEmail') && fullForm.get('techEmail')?.touched" class="text-danger">
                  Please enter a valid email address
                </div> -->
                  <div *ngIf="fullForm.errors?.['emailNotUniqueBill'] && fullForm.get('billEmail')?.touched"
                    class="text-danger">
                    An email can only be used twice.
                  </div>
                  <div
                    *ngIf="fullForm.get('billEmail')?.errors?.['emailAlreadyExists'] && fullForm.get('billEmail')?.touched"
                    class="text-danger">
                    This email is already used
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="billDesignation" class="form-label">Designation</label><span class="text-danger">*</span>
                  <input type="text" id="billDesignation" class="form-control" formControlName="billDesignation"
                    placeholder="Enter your designation" (input)="allowAlphabetsOnly($event)" maxlength="50" />
                  <div
                    *ngIf="fullForm.get('billDesignation')?.hasError('maxlength') && fullForm.get('billDesignation')?.touched"
                    class="text-danger">
                    Designation cannot exceed 50 characters.
                  </div>
                  <div *ngIf="
                      fullForm.get('billDesignation')?.invalid &&
                      fullForm.get('billDesignation')?.touched
                    " class="text-danger">
                    Please enter your Designation.
                  </div>
                </div>
                <div class="col-md-6">
                  <label for="billPhone" class="form-label">Authorized Official's Official Number</label><span
                    class="text-danger">*</span>
                  <div style="display: flex; width: 100%;">
                    <!-- Country Code Input -->
                    <input type="text" placeholder="STD Code" id="countryCode" class="form-control"
                      formControlName="billCountryCode" #billCountryCode
                      style="width: auto; min-width: auto; padding-left: 5px; padding-right: 0px; border-top-right-radius: 0;border-bottom-right-radius: 0;" />


                    <!-- Mobile Number Input -->
                    <input type="text" id="billPhone" class="form-control" placeholder="Enter STD Telephone"
                      formControlName="billPhone" [attr.disabled]="fullForm.get('billCountryCode')?.value ? null : true"
                      (input)="sanitizeInput($event, 'billPhone')" maxlength="10" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" />
                  </div>

                  <div *ngIf=" (fullForm.get('billCountryCode')?.invalid && fullForm.get('billCountryCode')?.touched) ||
                      (fullForm.get('billPhone')?.invalid &&
                      fullForm.get('billPhone')?.touched) || billStdCodeMobileCombinationError!=''
                    " class="text-danger">
                    Please enter a valid STD code (1-6 digits) or telephone number (5-10 digits).
                  </div>

                </div>
                <div class="col-md-6">
                  <label for="billAltPhone" class="form-label">Individual Official Mobile Number</label><span
                    class="text-danger">*</span>

                  <!-- Country Code Dropdown for Bill Alternative Phone -->
                  <div style="display: flex; width: 100%;">
                    <!-- Country Code Input -->
                    <div class="custom-select-wrapper">
                      <div class="customs-select">
                        {{ selectedBillAltCountryCode ? selectedBillAltCountryCode : 'Country Code' }}
                        <span class="dropdown-arrow"></span>
                      </div>
                      <select class="real-select" formControlName="billAltCountryCode"
                        (change)="updateBillAltCountryCode($event)">
                        <option [value]="null" selected disabled hidden>Country Code</option>
                        <option *ngFor="let stdNum of countryCodes | orderBy:'countryName'"
                          [value]="stdNum.countryCode">
                          {{ stdNum.countryName }} -({{ stdNum.countryCode }})
                        </option>
                      </select>
                    </div>


                    <!-- Mobile Number Input -->
                    <input type="text" id="billAltPhone" class="form-control" placeholder="Enter phone number"
                      formControlName="billAltPhone"
                      [attr.disabled]="fullForm.get('billAltCountryCode')?.value ? null : true"
                      (input)="sanitizeInput($event, 'billAltPhone')" maxlength="15" required
                      style="flex: 1; border-radius: 0 5px 5px 0px;" />
                  </div>

                  <div *ngIf=" (fullForm.get('billAltCountryCode')?.invalid && fullForm.get('billAltCountryCode')?.touched) ||
                      (fullForm.get('billAltPhone')?.invalid &&
                      fullForm.get('billAltPhone')?.touched) || billCountryCodeMobileCombinationError!=''
                    " class="text-danger">
                    {{ billCountryCodeMobileCombinationError ||'Please enter a valid country code (1-4 digits) or mobile
                    number (10 digits for India, 8-15 digits for other countries).'}}
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="billAddress" class="form-label">Address</label><span class="text-danger">*</span>
                  <input type="text" id="billAddress" class="form-control" formControlName="billAddress"
                    placeholder="Enter your address" [value]="fullAddress"
                    (keypress)="preventConsecutiveSpaces($event)" />
                  <div *ngIf="fullForm.get('billAddress').touched && fullForm.get('billAddress').invalid"
                    class="text-danger">
                    <!-- Required Validation Error -->
                    <div *ngIf="fullForm.get('billAddress').errors?.['required']">
                      Please enter your address.
                    </div>
                    <!-- Min Length Validation Error (only if not required error is shown) -->
                    <div
                      *ngIf="fullForm.get('billAddress').errors?.['minlength'] && !fullForm.get('billAddress').errors?.['required']">
                      Address must be atleast 5 characters long.

                    </div>
                    <!-- Max Length Validation Error (only if not required or minlength error is shown) -->
                    <div
                      *ngIf="fullForm.get('billAddress').errors?.['maxlength'] && !fullForm.get('billAddress').errors?.['required'] && !fullForm.get('billAddress').errors?.['minlength']">
                      Address cannot exceed 300 characters.
                    </div>
                    <div *ngIf="fullForm.get('billAddress').errors?.['startWithSpecialChar']">
                      Address cannot start with a special character.
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <label for="billDocuments" class="form-label">Documents</label><span style="color: red">*</span>
                  &nbsp;
                  <label style="color: blue;">( Please upload all the 2 documents )</label>
                <app-document-upload
  id="documentsToUpload"
  [organisationId]="organisationId"
  [mode]="'admin'"
  [adminUploadedDocs]="adminUploadedDocs"
  [contactSubmissionAttempted]="contactSubmissionAttempted"
  (onAdminValidationChange)="handleAdminValidationChange($event)"
  (docNameForContact)="setDocNameToVieDocumentModal($event)"
  (setAdminUploadedDocs)="setAdminUploadedDocuments($event)"
  (imageUrl)="onImageViewClick($event)"
  (pdfUrl)="onPdfViewClick($event)"
  (resetErrorMessages)="resetErrorMessages()"
  (errorForAdminDocUpload)="sendErrorOfAdminDocUploadToOnBoardingStepper($event)">
</app-document-upload>
                  <!-- <label for="billDocuments" class="form-label">Documents</label><span class="text-danger">*</span>
                      <select id="billDocuments" class="form-select" formControlName="billDocuments">
                        <option selected>Select and upload</option>
                        <option value="1">Document 1</option>
                        <option value="2">Document 2</option>
                      </select> -->
                </div>
              </div>
            </div>
          </div>

          <!-- Submit Button for the Entire Form -->

          <div class="d-flex justify-content-between" *ngIf="choosenContactType === 'Billing Officer' 
          || choosenContactType === 'Technical Officer' 
          || choosenContactType === 'Administrative Officer'">
            <div></div>
            <!-- <button class="btn btn-primary btn-lg" (click)="goBack()">Back</button> -->
            <button (click)="onSubmit()" class="btn btn-primary btn-lg">
              Save & Next
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="adminDoc" 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-weight: 500;font-size: 18px;">{{docNameForContact}} View
          Document</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" style="color:red; padding: 5px; padding-top: 0px;">&times;</span>
        </button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <div class="image-Container">
          <img [src]="imagUrl" *ngIf="imagUrl" alt="Image Preview" width="400px" height="300px">
        </div>

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

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

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

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

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

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

<div *ngIf="isLoading" class="spinner-container">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>