cbsnexora/src/app/current-accounts/current-account-stepper/current-account-settings-step/current-account-settings-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]="currentAccountSettingsForm">
  <!-- Section 1: Balance & Minimum Balance -->
  <div class="sps-section">
    <div class="sps-section__header">
      <span class="sps-section__badge"><i class="fas fa-balance-scale"></i></span>
      <span>Balance &amp; Minimum Balance</span>
    </div>
    <div class="sps-body">
      <div class="sps-layout sps-layout--balance">
        <div class="sps-row sps-row--three">
          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
            <mat-label>{{ 'labels.inputs.Minimum Opening Balance' | translate }}</mat-label>
            <input type="number" matInput formControlName="minRequiredOpeningBalance" min="0" step="0.01" />
          </mat-form-field>

          <div class="sps-toggle sps-toggle--inline">
            <mat-checkbox labelPosition="before" formControlName="enforceMinRequiredBalance">
              <span>Enforce Minimum Balance</span>
            </mat-checkbox>
          </div>

          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
            <mat-label>Minimum Balance (&#8377;) *</mat-label>
            <input type="number" matInput formControlName="minRequiredBalance" min="0" step="0.01" />
            <mat-hint>PENAL CHARGE APPLIES ON BREACH</mat-hint>
          </mat-form-field>
        </div>

        <div class="sps-row sps-row--two">
          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
            <mat-label>Balance Frequency</mat-label>
            <mat-select formControlName="balanceFrequency">
              @for (freq of periodFrequencyData; track freq.value) {
                <mat-option [value]="freq.value">{{ freq.value }}</mat-option>
              }
            </mat-select>
          </mat-form-field>

          <div class="sps-toggle sps-toggle--inline sps-toggle--right">
            <mat-checkbox labelPosition="before" formControlName="withdrawalFeeForTransfers">
              <span>{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
            </mat-checkbox>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Section 2: Lock-in Period -->
  <div class="sps-section">
    <div class="sps-section__header">
      <span class="sps-section__badge"><i class="fas fa-lock"></i></span>
      <span>Lock-in Period</span>
    </div>
    <div class="sps-body">
      <div class="sps-lockin-row">
        <span>Enable Lock-in Period</span>
        <mat-checkbox formControlName="enableLockinPeriod"></mat-checkbox>
      </div>

      @if (currentAccountSettingsForm.value.enableLockinPeriod) {
        <div class="sps-lockin-fields">
          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
            <mat-label>{{ 'labels.inputs.Frequency' | translate }} *</mat-label>
            <input type="number" matInput formControlName="lockinPeriodFrequency" min="1" step="1" />
          </mat-form-field>

          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
            <mat-label>{{ 'labels.inputs.Type' | translate }} *</mat-label>
            <mat-select formControlName="lockinPeriodFrequencyType">
              @for (type of lockinPeriodFrequencyTypeData; track type) {
                <mat-option [value]="type.id">{{ type.value | translateKey: 'catalogs' }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
      }
    </div>
  </div>

  <!-- Section 3: Additional Rules -->
  <div class="sps-section">
    <div class="sps-section__header">
      <span class="sps-section__badge"><i class="fas fa-cog"></i></span>
      <span>Additional Rules</span>
    </div>
    <div class="sps-body">
      <div class="sps-toggle sps-toggle--inline">
        <mat-checkbox formControlName="accountClosedZeroBalanceInDayClosing">
          <span>Account Closed with Zero Balance in Day Closing</span>
        </mat-checkbox>
      </div>
    </div>
  </div>

  <!-- Section 4: Overdraft (OD) Facility -->
  <div class="sps-section">
    <div class="sps-section__header">
      <span class="sps-section__badge"><i class="fas fa-hand-holding-usd"></i></span>
      <span>Overdraft (OD) Facility</span>
    </div>
    <div class="sps-body">
      <div class="sps-od-layout">
        <!-- Left: checkboxes -->
        <div class="sps-od-checks">
          <div class="sps-od-check-row">
            <mat-checkbox formControlName="allowOverdraft">
              <span>Is Overdraft Allowed</span>
            </mat-checkbox>
          </div>
          @if (currentAccountSettingsForm.value.allowOverdraft) {
            <div class="sps-od-check-row">
              <mat-checkbox formControlName="odAccountClosedZeroBalanceInDayClosing">
                <span>OD Account Closed with Zero Balance in Day Closing</span>
              </mat-checkbox>
              <p class="sps-od-check-hint">
                Automatically closes OD accounts when balance reaches zero during day-end closing.
              </p>
            </div>
          }
        </div>

        <!-- Right: OD details panel — only visible when OD is allowed -->
        @if (currentAccountSettingsForm.value.allowOverdraft) {
          <div class="sps-od-panel">
            <div class="sps-od-radio-group">
              <span class="sps-od-radio-label">Average Balance Calculation in Period</span>
              <mat-radio-group formControlName="avgBalanceCalcPeriod" class="sps-od-radio-choices">
                <mat-radio-button value="6M">6M</mat-radio-button>
                <mat-radio-button value="1Y">1Y</mat-radio-button>
                <mat-radio-button value="3Y">3Y</mat-radio-button>
              </mat-radio-group>
            </div>

            <div class="sps-od-radio-group">
              <span class="sps-od-radio-label">Valid for Period</span>
              <mat-radio-group formControlName="validForPeriod" class="sps-od-radio-choices">
                <mat-radio-button value="3M">3M</mat-radio-button>
                <mat-radio-button value="1Y">1Y</mat-radio-button>
                <mat-radio-button value="3Y">3Y</mat-radio-button>
              </mat-radio-group>
            </div>

            <div class="sps-od-inputs">
              <mat-form-field appearance="outline" class="sps-field">
                <mat-label>OD Limit %</mat-label>
                <input type="number" matInput formControlName="overdraftLimit" min="0" step="0.01" />
              </mat-form-field>

              <mat-form-field appearance="outline" class="sps-field">
                <mat-label>Interest on OD %</mat-label>
                <input
                  type="number"
                  matInput
                  formControlName="nominalAnnualInterestRateOverdraft"
                  min="0"
                  step="0.01"
                />
              </mat-form-field>
            </div>
          </div>
        }
      </div>
    </div>
  </div>
</form>