cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-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]="recurringDepositAccountTermsForm">
  <!-- ===================== Interest Rate & Posting Terms ===================== -->
  <div class="rdpt-section">
    <div class="rdpt-section__header">
      <span class="rdpt-section__badge"><i class="fas fa-chart-line"></i></span>
      <span>Interest Rate &amp; Posting Terms</span>
    </div>
    <div class="rdpt-body">
      @if (recurringDepositsAccountProductTemplate?.nominalAnnualInterestRate != null) {
        <div class="rdpt-banner">
          <span class="rdpt-banner__icon">ℹ️</span>
          <span>
            Recurring Deposit base rate:
            <b>{{ recurringDepositsAccountProductTemplate?.nominalAnnualInterestRate }}%</b>
          </span>
        </div>
      }

      <!-- Row 1: Nominal Annual Interest | Effective Date | Interest Calculation Type -->
      <div class="rdpt-grid rdpt-grid--three">
        <mat-form-field appearance="outline" class="rdpt-field">
          <mat-label>Nominal Annual Interest</mat-label>
          <input matInput [value]="recurringDepositsAccountProductTemplate?.nominalAnnualInterestRate ?? ''" readonly />
        </mat-form-field>

        <mat-form-field appearance="outline" class="rdpt-field">
          <mat-label>Effective Date</mat-label>
          <input matInput [value]="formatDate(recurringDepositsAccountProductTemplate?.effectiveDate)" readonly />
        </mat-form-field>

        <mat-form-field appearance="outline" class="rdpt-field">
          <mat-label>Interest Calculation Type</mat-label>
          <input
            matInput
            [value]="
              recurringDepositsAccountProductTemplate?.interestCalculationTypeName ??
              (recurringDepositsAccountProductTemplate?.interestCalculationType?.id
                | find: recurringDepositsAccountProductTemplate?.interestCalculationTypeOptions : 'id' : 'value') ??
              ''
            "
            readonly
          />
        </mat-form-field>
      </div>

      <!-- Row 2: Interest Calculate | Average Period | Interest Posting Period -->
      <div class="rdpt-grid rdpt-grid--three">
        <mat-form-field appearance="outline" class="rdpt-field">
          <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
          <mat-select formControlName="interestCalculationType" required>
            @for (interestCalculationType of interestCalculationTypeData; track interestCalculationType) {
              <mat-option [value]="interestCalculationType.id">
                {{ interestCalculationType.value | translateKey: 'catalogs' }}
              </mat-option>
            }
          </mat-select>
          <mat-error>
            {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
            <strong>{{ 'labels.commons.required' | translate }}</strong>
          </mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline" class="rdpt-field">
          <mat-label>Average Period</mat-label>
          <input matInput [value]="recurringDepositsAccountProductTemplate?.averagePeriod ?? ''" readonly />
        </mat-form-field>

        <mat-form-field appearance="outline" class="rdpt-field">
          <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
          <mat-select formControlName="interestPostingPeriodType" required>
            @for (interestPostingPeriodType of interestPostingPeriodTypeData; track interestPostingPeriodType) {
              <mat-option [value]="interestPostingPeriodType.id">
                {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
              </mat-option>
            }
          </mat-select>
          <mat-error>
            {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
            <strong>{{ 'labels.commons.required' | translate }}</strong>
          </mat-error>
        </mat-form-field>
      </div>

      <!-- Row 3: Interest Compounding Period -->
      <div class="rdpt-grid rdpt-grid--three">
        <mat-form-field appearance="outline" class="rdpt-field">
          <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
          <mat-select formControlName="interestCompoundingPeriodType" required>
            @for (
              interestCompoundingPeriodType of interestCompoundingPeriodTypeData;
              track interestCompoundingPeriodType
            ) {
              <mat-option [value]="interestCompoundingPeriodType.id">
                {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
              </mat-option>
            }
          </mat-select>
          <mat-error>
            {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
            <strong>{{ 'labels.commons.required' | translate }}</strong>
          </mat-error>
        </mat-form-field>
      </div>

      <!-- Footer: Auto Interest Post | Frequency Fix Day | Last Interest Date -->
      <div class="rdpt-footer">
        <div class="rdpt-footer__grid">
          <div class="rdpt-toggle-card">
            <div>
              <h4>Auto Interest Post</h4>
            </div>
            <div class="rdpt-toggle-card__choices">
              <label class="rdpt-radio">
                <input type="radio" [checked]="recurringDepositsAccountProductTemplate?.autoPost === true" disabled />
                <span>Yes</span>
              </label>
              <label class="rdpt-radio">
                <input type="radio" [checked]="recurringDepositsAccountProductTemplate?.autoPost === false" disabled />
                <span>No</span>
              </label>
            </div>
          </div>

          <mat-form-field appearance="outline" class="rdpt-field">
            <mat-label>Frequency (Fix Day)</mat-label>
            <input matInput [value]="recurringDepositsAccountProductTemplate?.frequencyFixDay ?? ''" readonly />
            <mat-hint>Days</mat-hint>
          </mat-form-field>

          <mat-form-field appearance="outline" class="rdpt-field">
            <mat-label>Last Interest Date</mat-label>
            <input matInput [value]="formatDate(recurringDepositsAccountProductTemplate?.lastInterestDate)" readonly />
          </mat-form-field>
        </div>

        @if (recurringDepositAccountTermsForm.value.interestCalculationType === 1) {
          <div class="rdpt-note">
            <span>⚠️</span>
            <span
              >Daily product-based interest accrual enabled - interest calculated EOD on daily closing balance.</span
            >
          </div>
        }

        <!-- Days in Year (account-level field) -->
        <div class="rdpt-footer__grid rdpt-footer__grid--single">
          <mat-form-field appearance="outline" class="rdpt-field">
            <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
            <mat-select formControlName="interestCalculationDaysInYearType" required>
              @for (
                interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData;
                track interestCalculationDaysInYearType
              ) {
                <mat-option [value]="interestCalculationDaysInYearType.id">
                  {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
                </mat-option>
              }
            </mat-select>
            <mat-error>
              {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>

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