cbsnexora/src/app/current-accounts/current-account-stepper/current-account-details-step/add-beneficiary-dialog/add-beneficiary-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/.
-->

<!-- Header -->
<div class="abd-header">
  <div class="abd-header__icon">
    <mat-icon>person_pin</mat-icon>
  </div>
  <div class="abd-header__text">
    <h2 class="abd-header__title">Add Beneficiary / Nominee</h2>
    <p class="abd-header__sub">Register a nominee for this account as per Indian banking norms</p>
  </div>
  <button mat-icon-button class="abd-header__close" type="button" (click)="cancel()">
    <mat-icon>close</mat-icon>
  </button>
</div>

<mat-dialog-content>
  <form [formGroup]="form" class="abd-form">
    <!-- Mode Toggle -->
    <div class="abd-mode-toggle">
      <button
        type="button"
        class="abd-mode-btn"
        [class.abd-mode-btn--active]="mode === 'search'"
        (click)="switchMode('search')"
      >
        <mat-icon>manage_search</mat-icon> Linked Client
      </button>
      <button
        type="button"
        class="abd-mode-btn"
        [class.abd-mode-btn--active]="mode === 'manual'"
        (click)="switchMode('manual')"
      >
        <mat-icon>edit_note</mat-icon> Manual Entry
      </button>
    </div>

    <!-- Search Mode -->
    @if (mode === 'search') {
      <div class="abd-search-section">
        <mat-form-field appearance="outline" class="abd-full-width">
          <mat-label>Search Client by Name / CIF</mat-label>
          <mat-icon matPrefix class="abd-prefix-icon">search</mat-icon>
          <input
            matInput
            formControlName="searchText"
            (input)="onSearchInput($event.target.value)"
            autocomplete="off"
            placeholder="Type at least 2 characters..."
          />
          @if (isSearching) {
            <mat-progress-spinner matSuffix diameter="18" mode="indeterminate"></mat-progress-spinner>
          }
          @if (selectedClient) {
            <button matSuffix mat-icon-button type="button" (click)="clearSelection()">
              <mat-icon>close</mat-icon>
            </button>
          }
        </mat-form-field>

        @if (searchResults.length > 0) {
          <div class="abd-search-results">
            @for (client of searchResults; track client) {
              <div class="abd-result-item" (click)="selectClient(client)">
                <div class="abd-result-avatar">{{ (client.displayName || '?')[0].toUpperCase() }}</div>
                <div class="abd-result-body">
                  <span class="abd-result-name">{{ client.displayName }}</span>
                  <span class="abd-result-meta">
                    @if (client.cifNumber) {
                      <span class="abd-chip">{{ client.cifNumber }}</span>
                    }
                    @if (client.officeName) {
                      <span class="abd-chip">{{ client.officeName }}</span>
                    }
                  </span>
                </div>
                <mat-icon class="abd-result-arrow">chevron_right</mat-icon>
              </div>
            }
          </div>
        }

        @if (selectedClient) {
          <div class="abd-selected-card">
            <div class="abd-selected-avatar">{{ (selectedClient.displayName || '?')[0].toUpperCase() }}</div>
            <div class="abd-selected-info">
              <span class="abd-selected-name">{{ selectedClient.displayName }}</span>
              <span class="abd-selected-sub">{{ selectedClient.cifNumber || selectedClient.accountNumber }}</span>
            </div>
            <span class="abd-badge abd-badge--linked">Linked</span>
          </div>
        }
      </div>
    }

    <!-- Name field (manual or auto-filled) -->
    <mat-form-field appearance="outline" class="abd-full-width abd-mt">
      <mat-label>Nominee / Beneficiary Name <span class="abd-required">*</span></mat-label>
      <input matInput formControlName="name" [readonly]="mode === 'search' && !!selectedClient" />
      <mat-error>Name is required</mat-error>
    </mat-form-field>

    <!-- Row: Relationship + DOB -->
    <div class="abd-row">
      <mat-form-field appearance="outline" class="abd-flex">
        <mat-label>Relationship <span class="abd-required">*</span></mat-label>
        <mat-select formControlName="relationship">
          @for (r of relationships; track r) {
            <mat-option [value]="r">{{ r }}</mat-option>
          }
        </mat-select>
        <mat-error>Relationship is required</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline" class="abd-flex" (click)="dobPicker.open()">
        <mat-label>Date of Birth</mat-label>
        <input matInput [matDatepicker]="dobPicker" formControlName="dateOfBirth" readonly />
        <mat-datepicker-toggle matSuffix [for]="dobPicker"></mat-datepicker-toggle>
        <mat-datepicker #dobPicker></mat-datepicker>
      </mat-form-field>
    </div>

    <!-- Share % -->
    <div class="abd-share-row">
      <mat-form-field appearance="outline" class="abd-share-field">
        <mat-label>Share % <span class="abd-required">*</span></mat-label>
        <input matInput type="number" formControlName="sharePercentage" min="1" max="100" />
        <span matSuffix class="abd-pct">%</span>
        <mat-error>Enter 1–100</mat-error>
      </mat-form-field>
      <div class="abd-quick-pct">
        @for (p of [25, 33, 50, 100]; track p) {
          <button type="button" class="abd-pct-chip" (click)="form.get('sharePercentage').setValue(p)">{{ p }}%</button>
        }
      </div>
    </div>

    <!-- Minor Toggle -->
    <div class="abd-minor-toggle">
      <mat-slide-toggle formControlName="isMinor" color="primary">
        Nominee is a Minor (below 18 years)
      </mat-slide-toggle>
    </div>

    <!-- Guardian fields (if minor) -->
    @if (isMinor) {
      <div class="abd-guardian-box">
        <div class="abd-guardian-label">
          <mat-icon>supervisor_account</mat-icon>
          Guardian Details
        </div>
        <div class="abd-row">
          <mat-form-field appearance="outline" class="abd-flex">
            <mat-label>Guardian Name</mat-label>
            <input matInput formControlName="guardianName" />
          </mat-form-field>
          <mat-form-field appearance="outline" class="abd-flex">
            <mat-label>Guardian Relationship</mat-label>
            <mat-select formControlName="guardianRelationship">
              @for (r of guardianRelationships; track r) {
                <mat-option [value]="r">{{ r }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    }
  </form>
</mat-dialog-content>

<mat-dialog-actions class="abd-actions">
  <button mat-stroked-button type="button" (click)="cancel()">Cancel</button>
  <button
    mat-flat-button
    color="primary"
    type="button"
    class="abd-btn-add"
    [disabled]="form.get('name').invalid || form.get('relationship').invalid || form.get('sharePercentage').invalid"
    (click)="confirm()"
  >
    <mat-icon>check</mat-icon> Add Nominee
  </button>
</mat-dialog-actions>