cbsnexora/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.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="cfa-container">
  <!-- Hero Header -->
  <div class="cfa-header">
    <fa-icon icon="university" class="cfa-header__icon"></fa-icon>
    <div>
      <h2 class="cfa-header__title">Modify Fixed Deposit Account Application</h2>
      <div class="cfa-header__sub">
        Review and update the account details, currency and interest terms before resubmitting.
      </div>
    </div>
  </div>

  <!-- Wizard tabs -->
  <mat-tab-group
    class="cfa-tabs"
    animationDuration="200ms"
    [preserveContent]="true"
    [(selectedIndex)]="selectedTabIndex"
  >
    <!-- Tab 1: Product Classification + Details -->
    <mat-tab>
      <ng-template mat-tab-label>
        <fa-icon icon="check-square" class="cfa-tab__icon"></fa-icon>
        Product
      </ng-template>
      <div class="cfa-tab-body">
        <mifosx-fixed-deposit-account-details-step
          [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
          (fixedDepositsAccountProductTemplate)="setTemplate($event)"
          [externalLinkedAccountId]="fixedDepositAccountMaturityTermsStep?.selectedTransferAccount?.id ?? null"
          [hideButtons]="true"
        >
        </mifosx-fixed-deposit-account-details-step>

        <div class="cfa-actions">
          <span class="cfa-actions__spacer"></span>
          <button mat-raised-button color="primary" [disabled]="!fixedDepositsAccountProductTemplate" (click)="next()">
            {{ 'labels.buttons.Next' | translate }}
            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
          </button>
        </div>
      </div>
    </mat-tab>

    <!-- Tab 2: Currency -->
    <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
      <ng-template mat-tab-label>
        <fa-icon icon="dollar-sign" class="cfa-tab__icon"></fa-icon>
        Currency
      </ng-template>
      <div class="cfa-tab-body">
        @if (fixedDepositsAccountProductTemplate) {
          <mifosx-fixed-deposit-account-currency-step
            [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
            [primaryClientId]="fixedDepositsAccountAndTemplate?.clientId ?? null"
            [existingAccount]="fixedDepositsAccountAndTemplate"
          ></mifosx-fixed-deposit-account-currency-step>
        }

        <div class="cfa-actions">
          <button mat-stroked-button (click)="prev()">
            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Previous' | translate }}
          </button>
          <span class="cfa-actions__spacer"></span>
          <button mat-raised-button color="primary" (click)="next()">
            {{ 'labels.buttons.Next' | translate }}
            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
          </button>
        </div>
      </div>
    </mat-tab>

    <!-- Tab 3: Interest Rate Chart -->
    <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
      <ng-template mat-tab-label>
        <fa-icon icon="university" class="cfa-tab__icon"></fa-icon>
        Interest Rate Chart
      </ng-template>
      <div class="cfa-tab-body">
        @if (fixedDepositsAccountProductTemplate) {
          <mifosx-fixed-deposit-account-interest-rate-chart-step
            [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
            [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
            [cbsBaseRates]="cbsBaseRates"
            [initialTenure]="selectedTenure"
            [submittedOnDate]="submittedOnDate"
            (tenureSelected)="onTenureSelected($event)"
          >
          </mifosx-fixed-deposit-account-interest-rate-chart-step>
        }

        <div class="cfa-actions">
          <button mat-stroked-button (click)="prev()">
            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Previous' | translate }}
          </button>
          <span class="cfa-actions__spacer"></span>
          <button mat-raised-button color="primary" (click)="next()">
            {{ 'labels.buttons.Next' | translate }}
            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
          </button>
        </div>
      </div>
    </mat-tab>

    <!-- Tab 4: Terms -->
    <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
      <ng-template mat-tab-label>
        <fa-icon icon="file-alt" class="cfa-tab__icon"></fa-icon>
        Terms
      </ng-template>
      <div class="cfa-tab-body">
        @if (fixedDepositsAccountProductTemplate) {
          <mifosx-fixed-deposit-account-maturity-terms-step
            [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
            [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
            [linkedSavingsAccountId]="
              fixedDepositsAccountDetailsStep?.selectedLinkedAccount?.accountType === 'SAVINGS'
                ? fixedDepositsAccountDetailsStep?.selectedLinkedAccount?.id
                : null
            "
          ></mifosx-fixed-deposit-account-maturity-terms-step>
        }

        <div class="cfa-actions">
          <button mat-stroked-button (click)="prev()">
            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Previous' | translate }}
          </button>
          <span class="cfa-actions__spacer"></span>
          <button mat-raised-button color="primary" (click)="next()">
            {{ 'labels.buttons.Next' | translate }}
            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
          </button>
        </div>
      </div>
    </mat-tab>

    <!-- Tab 5: Preview -->
    <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
      <ng-template mat-tab-label>
        <fa-icon icon="eye" class="cfa-tab__icon"></fa-icon>
        {{ 'labels.inputs.PREVIEW' | translate }}
      </ng-template>
      <div class="cfa-tab-body">
        @if (fixedDepositsAccountProductTemplate) {
          <mifosx-fixed-deposit-account-preview-step
            [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
            [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
            [fixedDepositAccountData]="fixedDepositAccount"
            [selectedTenure]="selectedTenure"
            [fdNominees]="fixedDepositAccountCurrencyStep?.nominees ?? []"
            [closureSettings]="fixedDepositAccountMaturityTermsStep?.closureSettings ?? {}"
            [hideButtons]="true"
            (submitEvent)="submit()"
          ></mifosx-fixed-deposit-account-preview-step>
        }

        <div class="cfa-actions">
          <button mat-stroked-button (click)="prev()">
            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Previous' | translate }}
          </button>
          <span class="cfa-actions__spacer"></span>
          <button mat-stroked-button [routerLink]="['../']">
            {{ 'labels.buttons.Cancel' | translate }}
          </button>
          <button mat-raised-button color="primary" class="preview-submit-row__primary" (click)="submit()">
            <fa-icon icon="check" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Submit' | translate }}
          </button>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>