cbsnexora/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.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/.
-->

<form [formGroup]="savingsAccountDetailsForm">
  <!-- Account Details -->
  <div class="sad-section">
    <div class="sad-section__header">
      <i class="fas fa-info-circle"></i>
      <h3>Account Details</h3>
    </div>
    <div class="sad-grid">
      <mat-form-field appearance="outline" class="sad-field">
        <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
        <mat-select formControlName="productId" required>
          @for (product of productData; track product) {
            <mat-option [value]="product.id">{{ product.name }}</mat-option>
          }
        </mat-select>
        <mat-error>
          {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
          <strong>{{ 'labels.commons.required' | translate }}</strong>
        </mat-error>
      </mat-form-field>

      @if (savingsProductSelected) {
        <mat-form-field appearance="outline" class="sad-field" (click)="submittedOnDatePicker.open()">
          <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="submittedOnDatePicker"
            formControlName="submittedOnDate"
            required
          />
          <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #submittedOnDatePicker></mat-datepicker>
          <mat-error>
            {{ 'labels.inputs.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
            <strong>{{ 'labels.commons.required' | translate }}</strong>
          </mat-error>
        </mat-form-field>
      }

      @if (savingsProductSelected) {
        <mat-form-field appearance="outline" class="sad-field">
          <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
          <mat-select formControlName="fieldOfficerId">
            @for (officer of fieldOfficerData; track officer) {
              <mat-option [value]="officer.id">{{ officer.displayName }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      }

      @if (savingsProductSelected) {
        <mat-form-field appearance="outline" class="sad-field">
          <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
          <input matInput formControlName="externalId" />
        </mat-form-field>
      }
    </div>
  </div>

  <!-- Product Classification (read-only, shown after product is selected) -->
  @if (savingsProductSelected) {
    <div class="sad-section sad-section--mt">
      <div class="sad-section__header">
        <i class="fas fa-tags"></i>
        <h3>Product Classification</h3>
        <span class="sad-badge">From Product</span>
      </div>
      <div class="sad-grid sad-grid--classification">
        <mat-form-field appearance="outline" class="sad-field">
          <mat-label>Account Type</mat-label>
          <input matInput [value]="productTemplate.accountType || ''" readonly />
        </mat-form-field>

        <mat-form-field appearance="outline" class="sad-field">
          <mat-label>Customer Segment</mat-label>
          <input matInput [value]="productTemplate.customerSegment || ''" readonly />
        </mat-form-field>

        <mat-form-field appearance="outline" class="sad-field">
          <mat-label>Product Code</mat-label>
          <input matInput [value]="productTemplate.productCode || ''" readonly />
        </mat-form-field>

        @if (productTemplate.effectiveDate) {
          <mat-form-field appearance="outline" class="sad-field">
            <mat-label>Effective Date</mat-label>
            <input matInput [value]="formatTemplateDate(productTemplate.effectiveDate)" readonly />
          </mat-form-field>
        }

        @if (productTemplate.endDate) {
          <mat-form-field appearance="outline" class="sad-field">
            <mat-label>End Date</mat-label>
            <input matInput [value]="formatTemplateDate(productTemplate.endDate)" readonly />
          </mat-form-field>
        }

        <mat-form-field appearance="outline" class="sad-field">
          <mat-label>Introducer Required</mat-label>
          <input matInput [value]="productTemplate.introducerRequired ? 'Yes' : 'No'" readonly />
        </mat-form-field>

        <div class="sad-field sad-info-row">
          <span class="sad-info-label">Share Linking Enabled</span>
          <span class="sad-badge" [class.sad-badge--yes]="productTemplate.shareLinkingEnabled">
            {{ productTemplate.shareLinkingEnabled ? 'Yes' : 'No' }}
          </span>
        </div>
      </div>
    </div>
  }

  <div class="layout-row align-center gap-2percent margin-t responsive-column">
    <button mat-raised-button matStepperPrevious disabled>
      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
      {{ 'labels.buttons.Previous' | translate }}
    </button>
    <button mat-raised-button matStepperNext [disabled]="savingsAccountDetailsForm.invalid">
      {{ 'labels.buttons.Next' | translate }}
      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
    </button>
  </div>
</form>