cbsnexora/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<h1 mat-dialog-title>{{ data.context }} {{ 'labels.heading.Family Member' | translate }}</h1>

<form [formGroup]="familyMemberForm">
  <h3>{{ 'labels.heading.Nominee Details (DA1 / DA5)' | translate }}</h3>

  <div class="layout-row-wrap responsive-column align-start-center">
    <!-- Nomination Type -->
    <mat-form-field class="flex-50-minus-25px">
      <mat-label>{{ 'labels.inputs.Nomination Type' | translate }}</mat-label>
      <mat-select formControlName="nominationType" required>
        <mat-option value="DA1">{{ 'labels.inputs.DA1 - Add Nominee' | translate }}</mat-option>
        <mat-option value="DA5">{{ 'labels.inputs.DA5 - Modify / Cancel Nominee' | translate }}</mat-option>
      </mat-select>
    </mat-form-field>

    <!-- Nominee Name -->
    <mat-form-field class="flex-50-minus-25px">
      <mat-label>{{ 'labels.inputs.Nominee Name' | translate }}</mat-label>
      <input formControlName="firstName" required matInput />
      @if (familyMemberForm.controls.firstName.hasError('required')) {
        <mat-error>
          {{ 'labels.inputs.Nominee Name' | translate }} {{ 'labels.commons.is' | translate }}
          <strong>{{ 'labels.commons.required' | translate }}</strong>
        </mat-error>
      }
    </mat-form-field>

    <!-- Relationship -->
    <mat-form-field class="flex-50-minus-25px">
      <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
      <mat-select formControlName="relationshipId" required>
        @for (relation of data.options.relationshipIdOptions; track relation) {
          <mat-option [value]="relation.id">
            {{ relation.name | translateKey: 'catalogs' }}
          </mat-option>
        }
      </mat-select>
      @if (familyMemberForm.controls.relationshipId.hasError('required')) {
        <mat-error>
          {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
          <strong>{{ 'labels.commons.required' | translate }}</strong>
        </mat-error>
      }
    </mat-form-field>

    <!-- Date of Birth -->
    <mat-form-field class="flex-50-minus-25px" (click)="dueDatePicker.open()">
      <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
      <input
        formControlName="dateOfBirth"
        matInput
        [max]="maxDate"
        [matDatepicker]="dueDatePicker"
        placeholder="{{ 'labels.text.Optional' | translate }}"
      />
      <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #dueDatePicker></mat-datepicker>
    </mat-form-field>

    <!-- Percentage Share -->
    <mat-form-field class="flex-50-minus-25px">
      <mat-label>{{ 'labels.inputs.Percentage Share' | translate }} (%)</mat-label>
      <input type="number" formControlName="percentageShare" matInput min="0" max="100" />
    </mat-form-field>

    <!-- Nominee is Minor -->
    <mat-checkbox formControlName="isDependent" labelPosition="before" class="flex-50-minus-25px">
      {{ 'labels.inputs.Nominee is Minor' | translate }}?
    </mat-checkbox>
  </div>

  <!-- Guardian Details (shown when minor) -->
  @if (familyMemberForm.get('isDependent').value) {
    <h3>{{ 'labels.heading.Guardian Details (If Minor)' | translate }}</h3>
    <div class="layout-row-wrap responsive-column align-start-center">
      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Guardian Name' | translate }}</mat-label>
        <input formControlName="guardianName" matInput />
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Relationship with Minor' | translate }}</mat-label>
        <input formControlName="guardianRelationship" matInput />
      </mat-form-field>
    </div>
  }

  <!-- Remarks -->
  <div class="layout-row-wrap responsive-column align-start-center">
    <mat-form-field class="flex-fill">
      <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
      <input formControlName="remarks" matInput />
    </mat-form-field>
  </div>

  <mat-dialog-actions align="center">
    <button type="button" mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
    <button
      type="button"
      mat-raised-button
      color="primary"
      [disabled]="!familyMemberForm.valid"
      [mat-dialog-close]="{ member: familyMember }"
    >
      {{ 'labels.buttons.Confirm' | translate }}
    </button>
  </mat-dialog-actions>
</form>