cbsnexora/src/app/clients/clients-view/family-members-tab/nominee-dialog/nominee-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/.
-->

<div class="fd-dialog">
  <!-- Header -->
  <div class="fd-header">
    <h2 class="fd-title">{{ data.title }}</h2>
    <button mat-icon-button class="fd-close" (click)="onCancel()">
      <i class="fa fa-times"></i>
    </button>
  </div>

  <!-- Content -->
  <div class="fd-content">
    <form [formGroup]="nomineeForm" (ngSubmit)="onSubmit()">
      <div class="fd-grid fd-grid--cols-2">
        <!-- Nomination Type -->
        <div class="fd-field">
          <mat-form-field appearance="outline">
            <mat-label>{{ 'labels.inputs.Nomination Type' | translate }}</mat-label>
            <mat-select formControlName="nominationType">
              <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>
        </div>

        <!-- Nominee Name -->
        <div class="fd-field">
          <mat-form-field appearance="outline">
            <mat-label>{{ 'labels.inputs.Nominee Name' | translate }}</mat-label>
            <input formControlName="firstName" required matInput />
            @if (nomineeForm.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>
        </div>

        <!-- Relationship -->
        <div class="fd-field">
          <mat-form-field appearance="outline">
            <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
            <mat-select formControlName="relationshipId" required>
              @for (relation of data.familyMemberOptions?.relationshipIdOptions; track relation) {
                <mat-option [value]="relation.id">
                  {{ relation.name | translateKey: 'catalogs' }}
                </mat-option>
              }
            </mat-select>
            @if (nomineeForm.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>
        </div>

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

        <!-- Percentage Share -->
        <div class="fd-field">
          <mat-form-field appearance="outline">
            <mat-label>{{ 'labels.inputs.Percentage Share' | translate }} (%)</mat-label>
            <input type="number" formControlName="percentageShare" matInput min="0" max="100" />
          </mat-form-field>
        </div>

        <!-- Nominee is Minor -->
        <div class="fd-field fd-field--checkbox">
          <mat-checkbox formControlName="isDependent" labelPosition="before">
            {{ 'labels.inputs.Nominee is Minor' | translate }}?
          </mat-checkbox>
        </div>
      </div>

      <!-- Guardian Details (shown when minor) -->
      @if (nomineeForm.get('isDependent')?.value) {
        <h4 class="fd-section-title">{{ 'labels.heading.Guardian Details (If Minor)' | translate }}</h4>
        <div class="fd-grid fd-grid--cols-2">
          <div class="fd-field">
            <mat-form-field appearance="outline">
              <mat-label>{{ 'labels.inputs.Guardian Name' | translate }}</mat-label>
              <input formControlName="guardianName" matInput />
            </mat-form-field>
          </div>

          <div class="fd-field">
            <mat-form-field appearance="outline">
              <mat-label>{{ 'labels.inputs.Relationship with Minor' | translate }}</mat-label>
              <input formControlName="guardianRelationship" matInput />
            </mat-form-field>
          </div>
        </div>
      }

      <!-- Remarks (full width) -->
      <div class="fd-grid">
        <div class="fd-field fd-field--full">
          <mat-form-field appearance="outline">
            <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
            <input formControlName="remarks" matInput />
          </mat-form-field>
        </div>
      </div>
    </form>
  </div>

  <!-- Actions -->
  <div class="fd-actions" mat-dialog-actions align="end">
    <button mat-stroked-button class="fd-btn fd-btn--cancel" (click)="onCancel()">
      {{ 'labels.buttons.Cancel' | translate }}
    </button>
    <button
      mat-flat-button
      color="primary"
      class="fd-btn fd-btn--submit"
      [disabled]="!nomineeForm.valid"
      (click)="onSubmit()"
    >
      <i class="fa fa-check fd-btn__icon"></i>
      {{ 'labels.buttons.Submit' | translate }}
    </button>
  </div>
</div>