cbsnexora/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-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/.
-->

<div class="preview-wrapper">
  <!-- ══ 1. Account Details ════════════════════════════════════════ -->
  <div class="preview-section">
    <div class="preview-section__header">
      <i class="fas fa-info-circle preview-section__icon"></i>
      <span class="preview-section__title">Account Details</span>
    </div>
    <div class="preview-body">
      <div class="preview-grid preview-grid--three">
        <div class="preview-field">
          <span class="preview-label">Product</span>
          <span class="preview-value">{{
            fixedDepositAccountData?.productId | find: fixedDepositsAccountTemplate?.productOptions : 'id' : 'name'
          }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Submitted On</span>
          <span class="preview-value">{{ fixedDepositAccountData?.submittedOnDate | dateFormat }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Field Officer</span>
          <span class="preview-value">{{
            (fixedDepositAccountData?.fieldOfficerId
              | find: fixedDepositsAccountProductTemplate?.fieldOfficerOptions : 'id' : 'displayName') || 'Unassigned'
          }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">External ID</span>
          <span class="preview-value" [class.preview-muted]="!fixedDepositAccountData?.externalId">
            {{ fixedDepositAccountData?.externalId || 'Unassigned' }}
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ 1a. Product Classification ════════════════════════════════ -->
  @if (fixedDepositsAccountProductTemplate) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-tags preview-section__icon"></i>
        <span class="preview-section__title">Product Classification</span>
        <span class="preview-section__badge preview-section__badge--active" style="margin-left: auto"
          >From Product</span
        >
      </div>
      <div class="preview-body">
        <div class="preview-grid preview-grid--three">
          @if (fixedDepositAccountData?.accountType) {
            <div class="preview-field">
              <span class="preview-label">Account Type</span>
              <span class="preview-value">{{ fixedDepositAccountData.accountType }}</span>
            </div>
          }
          @if (fixedDepositAccountData?.customerSegment) {
            <div class="preview-field">
              <span class="preview-label">Customer Segment</span>
              <span class="preview-value">{{ fixedDepositAccountData.customerSegment }}</span>
            </div>
          }
          @if (fixedDepositsAccountProductTemplate?.fdType) {
            <div class="preview-field">
              <span class="preview-label">FD Type</span>
              <span class="preview-value">{{ getFdTypeLabel(fixedDepositsAccountProductTemplate.fdType) }}</span>
            </div>
          }
          <div class="preview-field">
            <span class="preview-label">Account No</span>
            <span class="preview-value preview-mono">
              {{
                fixedDepositsAccountProductTemplate?.previewAccountNo ||
                  fixedDepositsAccountTemplate?.accountNo ||
                  'Auto-generated'
              }}
            </span>
          </div>
          @if (fixedDepositsAccountProductTemplate?.effectiveDate) {
            <div class="preview-field">
              <span class="preview-label">Effective To</span>
              <span class="preview-value">{{ fixedDepositsAccountProductTemplate.effectiveDate | dateFormat }}</span>
            </div>
          }
          @if (fixedDepositsAccountProductTemplate?.endDate) {
            <div class="preview-field">
              <span class="preview-label">End Date</span>
              <span class="preview-value">{{ fixedDepositsAccountProductTemplate.endDate | dateFormat }}</span>
            </div>
          }
          <div class="preview-field">
            <span class="preview-label">Deposit Account Link</span>
            <span
              class="preview-value preview-badge"
              [class.preview-badge--yes]="fixedDepositsAccountProductTemplate?.shareLinkingEnabled"
            >
              {{ fixedDepositsAccountProductTemplate?.shareLinkingEnabled ? 'Yes' : 'No' }}
            </span>
          </div>
        </div>
      </div>
    </div>
  }

  <!-- ══ 1b. Status of Account (RBI) ══════════════════════════════ -->
  @if (fixedDepositAccountData?.accountStatus) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-id-card preview-section__icon"></i>
        <span class="preview-section__title">Status of Account</span>
        <span class="preview-section__badge">RBI Guidelines</span>
      </div>
      <div class="preview-body">
        <div class="preview-soa-status-row">
          <span class="preview-soa-tile">
            @switch (fixedDepositAccountData.accountStatus) {
              @case ('INDIVIDUAL_MALE') {
                <i class="fas fa-male"></i> Individual (Male)
              }
              @case ('INDIVIDUAL_FEMALE') {
                <i class="fas fa-female"></i> Individual (Female)
              }
              @case ('SINGLE') {
                <i class="fas fa-user-circle"></i> Single Account
              }
              @case ('JOINT') {
                <i class="fas fa-users"></i> Joint Account
              }
              @case ('MINOR') {
                <i class="fas fa-child"></i> Minor Account
              }
              @case ('SENIOR_CITIZEN') {
                <i class="fas fa-user-clock"></i> Senior Citizen
              }
              @default {
                {{ fixedDepositAccountData.accountStatus }}
              }
            }
          </span>
        </div>

        @if (fixedDepositAccountData.accountStatus === 'JOINT') {
          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
            <div class="preview-field">
              <span class="preview-label">Mode of Operation</span>
              <span class="preview-value">
                @switch (fixedDepositAccountData.modeOfOperation) {
                  @case ('EITHER_OR_SURVIVOR') {
                    Either or Survivor
                  }
                  @case ('FORMER_OR_SURVIVOR') {
                    Former or Survivor
                  }
                  @case ('JOINTLY') {
                    Jointly
                  }
                  @case ('ANYONE_OR_SURVIVOR') {
                    Anyone or Survivor
                  }
                  @default {
                    {{ fixedDepositAccountData.modeOfOperation || '—' }}
                  }
                }
              </span>
            </div>
          </div>
          @if (fixedDepositAccountData.jointHolders?.length) {
            <div class="preview-soa-table-wrap">
              <table class="preview-soa-tbl">
                <thead>
                  <tr>
                    <th class="preview-soa-th">Sr.</th>
                    <th class="preview-soa-th">Holder Name</th>
                    <th class="preview-soa-th">CIF No.</th>
                    <th class="preview-soa-th">Ownership %</th>
                    <th class="preview-soa-th">Signing</th>
                    <th class="preview-soa-th">Role</th>
                  </tr>
                </thead>
                <tbody>
                  @for (holder of fixedDepositAccountData.jointHolders; track holder.clientId; let i = $index) {
                    <tr [class.preview-soa-tr--primary]="holder.isPrimary">
                      <td class="preview-soa-td">{{ i + 1 }}</td>
                      <td class="preview-soa-td">
                        {{ holder.displayName || holder.clientName || '—' }}
                        @if (holder.isPrimary) {
                          <span class="preview-soa-primary-tag">Primary</span>
                        }
                      </td>
                      <td class="preview-soa-td preview-mono">{{ holder.cifNumber || holder.clientCif || '—' }}</td>
                      <td class="preview-soa-td">{{ holder.sharePercentage ?? '—' }}%</td>
                      <td class="preview-soa-td">{{ holder.isMandatory ? 'Mandatory' : 'Optional' }}</td>
                      <td class="preview-soa-td">{{ holder.isPrimary ? 'Primary Account Holder' : 'Co-Holder' }}</td>
                    </tr>
                  }
                </tbody>
              </table>
            </div>
          }
        }

        @if (fixedDepositAccountData.accountStatus === 'INDIVIDUAL_MALE' && fixedDepositAccountData.specialCategory) {
          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
            <div class="preview-field">
              <span class="preview-label">Special Category</span>
              <span class="preview-value">{{ fixedDepositAccountData.specialCategory }}</span>
            </div>
          </div>
        }

        @if (fixedDepositAccountData.accountStatus === 'INDIVIDUAL_FEMALE' && fixedDepositAccountData.weakerSection) {
          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
            <div class="preview-field">
              <span class="preview-label">Weaker Section</span>
              <span class="preview-value">{{ fixedDepositAccountData.weakerSection }}</span>
            </div>
          </div>
        }

        @if (fixedDepositAccountData.accountStatus === 'MINOR') {
          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
            <div class="preview-field">
              <span class="preview-label">Guardian Name</span>
              <span class="preview-value">{{ fixedDepositAccountData.guardianName || '—' }}</span>
            </div>
            <div class="preview-field">
              <span class="preview-label">Guardian CIF</span>
              <span class="preview-value preview-mono">{{ fixedDepositAccountData.guardianCifNumber || '—' }}</span>
            </div>
            <div class="preview-field">
              <span class="preview-label">Relationship</span>
              <span class="preview-value">{{ fixedDepositAccountData.guardianRelationship || '—' }}</span>
            </div>
          </div>
        }
      </div>
    </div>
  }

  <!-- ══ 1c. Linked Account ════════════════════════════════════════ -->
  @if (fixedDepositAccountData?.linkedAccountId) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-link preview-section__icon"></i>
        <span class="preview-section__title">Linked Deposit Account</span>
        <span class="preview-section__badge">{{ fixedDepositAccountData.linkedAccountType }}</span>
      </div>
      <div class="preview-body">
        <div class="preview-grid preview-grid--three">
          <div class="preview-field">
            <span class="preview-label">Account No</span>
            <span class="preview-value preview-mono">{{ fixedDepositAccountData.linkedAccountNo }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Account Type</span>
            <span class="preview-value">{{ fixedDepositAccountData.linkedAccountType }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Account ID</span>
            <span class="preview-value preview-mono">{{ fixedDepositAccountData.linkedAccountId }}</span>
          </div>
        </div>
      </div>
    </div>
  }

  <!-- ══ 2. Currency & Configuration ══════════════════════════════ -->
  <div class="preview-section">
    <div class="preview-section__header">
      <i class="fas fa-coins preview-section__icon"></i>
      <span class="preview-section__title">{{ 'labels.heading.Currency' | translate }}</span>
    </div>
    <div class="preview-body">
      <div class="preview-grid preview-grid--three">
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Currency' | translate }}</span>
          <span class="preview-value">{{ currencyName }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Decimal Places' | translate }}</span>
          <span class="preview-value">{{ decimalPlaces }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
          <span class="preview-value">{{ inMultiplesOf }}</span>
        </div>

        <div class="preview-field">
          <span class="preview-label">Auto Debit Facility</span>
          <span
            class="preview-value preview-badge"
            [class.preview-badge--yes]="fixedDepositAccountData?.autoDebitFacility"
          >
            {{ fixedDepositAccountData?.autoDebitFacility | yesNo }}
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ 2b. Dormancy Monitoring ═══════════════════════════════════ -->
  @if (
    fixedDepositsAccountProductTemplate?.dormancyAlert || fixedDepositsAccountProductTemplate?.isDormancyTrackingActive
  ) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-moon preview-section__icon"></i>
        <span class="preview-section__title">Dormancy Monitoring</span>
        <span
          class="preview-section__badge"
          [class.preview-section__badge--active]="fixedDepositsAccountProductTemplate?.isDormancyTrackingActive"
        >
          {{ fixedDepositsAccountProductTemplate?.isDormancyTrackingActive ? 'Active' : 'Inactive' }}
        </span>
      </div>
      <div class="preview-body">
        <div class="preview-dormancy-timeline">
          <div class="preview-dorm-step">
            <div class="preview-dorm-step__dot preview-dorm-step__dot--inactive"></div>
            <div class="preview-dorm-step__body">
              <span class="preview-dorm-step__label">Inactive</span>
              <span class="preview-dorm-step__days">
                @if (fixedDepositsAccountProductTemplate?.daysToInactive != null) {
                  After {{ fixedDepositsAccountProductTemplate.daysToInactive }} days of no transaction
                } @else {
                  Not configured
                }
              </span>
            </div>
          </div>
          <div class="preview-dorm-connector"></div>
          <div class="preview-dorm-step">
            <div class="preview-dorm-step__dot preview-dorm-step__dot--dormant"></div>
            <div class="preview-dorm-step__body">
              <span class="preview-dorm-step__label">Dormant</span>
              <span class="preview-dorm-step__days">
                @if (fixedDepositsAccountProductTemplate?.daysToDormancy != null) {
                  {{ fixedDepositsAccountProductTemplate.daysToDormancy }} days after inactive
                } @else {
                  Not configured
                }
              </span>
            </div>
          </div>
          <div class="preview-dorm-connector"></div>
          <div class="preview-dorm-step">
            <div class="preview-dorm-step__dot preview-dorm-step__dot--escheat"></div>
            <div class="preview-dorm-step__body">
              <span class="preview-dorm-step__label">Escheat</span>
              <span class="preview-dorm-step__days">
                @if (fixedDepositsAccountProductTemplate?.daysToEscheat != null) {
                  {{ fixedDepositsAccountProductTemplate.daysToEscheat }} days after dormant
                } @else {
                  Not configured
                }
              </span>
            </div>
          </div>
        </div>
        <div class="preview-dorm-flags">
          <span
            class="preview-dorm-flag"
            [class.preview-dorm-flag--on]="fixedDepositsAccountProductTemplate?.dormancyAlert"
          >
            <i class="fas fa-bell"></i> Alert
            {{ fixedDepositsAccountProductTemplate?.dormancyAlert ? 'Enabled' : 'Disabled' }}
          </span>
          <span
            class="preview-dorm-flag"
            [class.preview-dorm-flag--on]="fixedDepositsAccountProductTemplate?.isDormancyTrackingActive"
          >
            <i class="fas fa-eye"></i> Tracking
            {{ fixedDepositsAccountProductTemplate?.isDormancyTrackingActive ? 'Active' : 'Inactive' }}
          </span>
        </div>
      </div>
    </div>
  }

  <!-- ══ 2c. Nominee Details ══════════════════════════════════════ -->
  @if (fdNominees?.length > 0) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-user-shield preview-section__icon"></i>
        <span class="preview-section__title">Nominee Details</span>
        <span class="preview-section__badge">{{ fdNominees.length }} Nominee(s)</span>
      </div>
      <div class="preview-body">
        @for (nom of fdNominees; track nom.nomineeClientId; let i = $index) {
          @if (i > 0) {
            <hr class="preview-nom-divider" />
          }
          <div class="preview-grid preview-grid--three">
            <div class="preview-field">
              <span class="preview-label">Name</span>
              <span class="preview-value">{{ nom.nomineeDisplayName || '—' }}</span>
            </div>
            <div class="preview-field">
              <span class="preview-label">Client ID</span>
              <span class="preview-value preview-mono">{{ nom.nomineeClientId || '—' }}</span>
            </div>
            <div class="preview-field">
              <span class="preview-label">Relationship</span>
              <span class="preview-value">{{ nom.relationshipName || '—' }}</span>
            </div>
            <div class="preview-field">
              <span class="preview-label">Share %</span>
              <span class="preview-value">{{ nom.percentageShare ?? '—' }}%</span>
            </div>
            <div class="preview-field">
              <span class="preview-label">Minor</span>
              <span class="preview-value">{{ nom.nomineeIsMinor ? 'Yes' : 'No' }}</span>
            </div>
            @if (nom.guardianDisplayName) {
              <div class="preview-field">
                <span class="preview-label">Guardian</span>
                <span class="preview-value">{{ nom.guardianDisplayName }}</span>
              </div>
            }
            @if (nom.remarks) {
              <div class="preview-field">
                <span class="preview-label">Remarks</span>
                <span class="preview-value">{{ nom.remarks }}</span>
              </div>
            }
          </div>
        }
      </div>
    </div>
  }

  <!-- ══ 4. Maturity Summary ═══════════════════════════════════ -->
  @if (maturitySummary) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-piggy-bank preview-section__icon"></i>
        <span class="preview-section__title">Maturity Summary</span>
        <span class="preview-section__badge preview-section__badge--active">Projected</span>
      </div>
      <div class="preview-body">
        <div class="preview-grid preview-grid--three">
          <div class="preview-field">
            <span class="preview-label">Deposit Amount</span>
            <span class="preview-value">{{ maturitySummary.depositAmount | formatNumber }} {{ currencyName }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Applicable Interest Rate</span>
            <span class="preview-value">{{ maturitySummary.interestRate | formatNumber }}%</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Tenure</span>
            <span class="preview-value">{{ maturitySummary.tenureLabel }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Estimated Interest Earned</span>
            <span class="preview-value" style="color: var(--theme-success, #28a745); font-weight: 500">
              + {{ maturitySummary.totalInterest | formatNumber }} {{ currencyName }}
            </span>
          </div>
          <div class="preview-field" style="grid-column: span 2">
            <span class="preview-label">Projected Maturity Amount</span>
            <span class="preview-value preview-mono" style="font-weight: 600; font-size: 1.25rem">
              {{ maturitySummary.maturityAmount | formatNumber }} {{ currencyName }}
            </span>
          </div>
        </div>
      </div>
    </div>
  }

  <!-- ══ 5. Interest Rate Chart ═══════════════════════════════════ -->
  <div class="preview-section">
    <div class="preview-section__header">
      <i class="fas fa-chart-line preview-section__icon"></i>
      <span class="preview-section__title">{{ 'labels.heading.Interest Rate Chart' | translate }}</span>
      @if (selectedTenure) {
        <span class="preview-section__badge preview-section__badge--tenure">
          <i class="fas fa-calendar-check"></i> Selected Tenure: {{ selectedTenureLabel }}
        </span>
      }
    </div>
    <div class="preview-body">
      <!-- Selected Tenure + Rate Banner -->
      @if (selectedTenure && matchedSlabIndex >= 0) {
        <!-- Senior Citizen Status Banner -->
        @if (isSeniorCitizenSelected) {
          @if (seniorCitizenBonus > 0) {
            <div class="preview-sc-status preview-sc-status--applied">
              <i class="fas fa-user-shield"></i>
              <span>Senior Citizen Rate Applied</span>
              <span class="preview-sc-status__bonus">+{{ seniorCitizenBonus | formatNumber }}% bonus</span>
            </div>
          } @else {
            <div class="preview-sc-status preview-sc-status--notice">
              <i class="fas fa-info-circle"></i>
              <span>Senior Citizen selected — no additional rate configured for this slab</span>
            </div>
          }
        }

        <div
          class="preview-tenure-banner"
          [class.preview-tenure-banner--sc]="isSeniorCitizenSelected && seniorCitizenBonus > 0"
        >
          <div class="preview-tenure-banner__left">
            <i class="fas fa-calendar-check"></i>
            <div>
              <span class="preview-tenure-banner__label">Your FD Tenure</span>
              <span class="preview-tenure-banner__value">{{ selectedTenureLabel }}</span>
            </div>
          </div>
          <div class="preview-tenure-banner__divider"></div>
          <div class="preview-tenure-banner__right">
            <span class="preview-tenure-banner__rate-label">
              @if (isSeniorCitizenSelected && seniorCitizenBonus > 0) {
                <i class="fas fa-user-shield" style="color: #5b21b6; margin-right: 4px"></i>Sr. Citizen Rate
              } @else {
                Applicable Interest Rate
              }
            </span>
            <span
              class="preview-tenure-banner__rate"
              [style.color]="isSeniorCitizenSelected && seniorCitizenBonus > 0 ? '#5b21b6' : ''"
              >{{ appliedInterestRate | formatNumber }}%</span
            >
          </div>
          <div class="preview-tenure-banner__slab">
            <i class="fas fa-layer-group"></i>
            Slab: {{ interestRateChartData[matchedSlabIndex]?.fromPeriod }}–{{
              interestRateChartData[matchedSlabIndex]?.toPeriod ?? '∞'
            }}
            {{ interestRateChartData[matchedSlabIndex]?.periodType?.value }}
          </div>
        </div>
      }

      <div class="preview-grid preview-grid--three" style="margin-bottom: 1rem">
        @if (fixedDepositsAccountProductTemplate?.accountChart?.name) {
          <div class="preview-field">
            <span class="preview-label">Name</span>
            <span class="preview-value">{{ fixedDepositsAccountProductTemplate.accountChart.name }}</span>
          </div>
        }
        <div class="preview-field">
          <span class="preview-label">Valid From</span>
          <span class="preview-value">{{
            fixedDepositsAccountProductTemplate?.accountChart?.fromDate | dateFormat
          }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Primary Grouping by Amount</span>
          <span
            class="preview-value preview-badge"
            [class.preview-badge--yes]="fixedDepositsAccountProductTemplate?.accountChart?.isPrimaryGroupingByAmount"
          >
            {{ fixedDepositsAccountProductTemplate?.accountChart?.isPrimaryGroupingByAmount | yesNo }}
          </span>
        </div>
      </div>

      <table
        class="mat-elevation-z1 irc-table preview-table"
        mat-table
        [dataSource]="interestRateChartData"
        multiTemplateDataRows
      >
        <ng-container matColumnDef="period">
          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
          <td mat-cell *matCellDef="let chartSlab">
            {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
              chartSlab.periodType?.value | translateKey: 'catalogs'
            }}
          </td>
        </ng-container>

        <ng-container matColumnDef="amountRange">
          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
          <td mat-cell *matCellDef="let chartSlab">
            {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
          </td>
        </ng-container>

        <ng-container matColumnDef="interest">
          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
          <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
        </ng-container>

        <ng-container matColumnDef="description">
          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
          <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
        </ng-container>

        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
          <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
            <button
              mat-button
              color="primary"
              (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
            >
              <fa-icon [icon]="expandChartSlabIndex === chartSlabIndex ? 'eye-slash' : 'eye'" class="m-r-10"></fa-icon>
              {{
                (expandChartSlabIndex === chartSlabIndex
                  ? 'labels.buttons.Hide Incentives'
                  : 'labels.buttons.View Incentives'
                ) | translate
              }}
            </button>
          </td>
        </ng-container>

        <ng-container matColumnDef="incentives">
          <td
            mat-cell
            *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
            [attr.colspan]="chartSlabsDisplayedColumns?.length"
          >
            <div
              class="layout-row-wrap flex-100 incentives"
              [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
            >
              <mat-card class="layout-row-wrap flex-100">
                <h4 class="m-b-10 flex-13">{{ 'labels.heading.Incentives' | translate }}</h4>
                <table
                  class="flex-100 mat-elevation-z1"
                  mat-table
                  [dataSource]="chartSlab.incentives"
                  *ngIf="chartSlab.incentives?.length"
                >
                  <ng-container matColumnDef="entityType">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                    <td mat-cell *matCellDef="let incentive">{{ incentive.entityType?.value }}</td>
                  </ng-container>
                  <ng-container matColumnDef="attributeName">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                    <td mat-cell *matCellDef="let incentive">{{ incentive.attributeName?.value }}</td>
                  </ng-container>
                  <ng-container matColumnDef="conditionType">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                    <td mat-cell *matCellDef="let incentive">{{ incentive.conditionType?.value | titlecase }}</td>
                  </ng-container>
                  <ng-container matColumnDef="attributeValue">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                    <td mat-cell *matCellDef="let incentive">{{ incentive.attributeValueDesc }}</td>
                  </ng-container>
                  <ng-container matColumnDef="incentiveType">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                    <td mat-cell *matCellDef="let incentive">{{ incentive.incentiveType?.value }}</td>
                  </ng-container>
                  <ng-container matColumnDef="amount">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                    <td mat-cell *matCellDef="let incentive">{{ incentive.amount | formatNumber }}</td>
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
                </table>
              </mat-card>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
        <tr
          mat-row
          *matRowDef="let row; columns: chartSlabsDisplayedColumns; let i = dataIndex"
          [class.preview-slab-row--matched]="i === matchedSlabIndex"
        ></tr>
        <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
      </table>
      @if (selectedTenure && matchedSlabIndex >= 0) {
        <div class="preview-slab-legend">
          <span class="preview-slab-legend__dot"></span>
          Highlighted row is the slab applicable for your selected tenure of <strong>{{ selectedTenureLabel }}</strong>
        </div>
      }
    </div>
  </div>
</div>

<div class="preview-section">
  <div class="preview-section__header">
    <i class="fas fa-flag-checkered preview-section__icon"></i>
    <span class="preview-section__title">Maturity &amp; Pre-mature Closure</span>
  </div>
  <div class="preview-body">
    <div class="preview-grid preview-grid--three">
      <div class="preview-field">
        <span class="preview-label">{{ 'labels.inputs.Maturity Instructions' | translate }}</span>
        <span class="preview-value">{{ closureMaturityInstructionLabel }}</span>
      </div>
      @if (closureSettings?.transferToSavingsId) {
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Transfer to savings account' | translate }}</span>
          <span class="preview-value">{{ closureTransferToSavingsLabel }}</span>
        </div>
      }
      <div class="preview-field">
        <span class="preview-label">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}</span>
        <span class="preview-value">{{ closureSettings?.preClosurePenalApplicable | yesNo }}</span>
      </div>
      @if (closureSettings?.preClosurePenalApplicable) {
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Penal Interest' | translate }} (%)</span>
          <span class="preview-value">{{ closureSettings?.preClosurePenalInterest }}%</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Period' | translate }}</span>
          <span class="preview-value">{{ closurePenalInterestOnTypeLabel }}</span>
        </div>
      }
    </div>
  </div>
</div>

@if (!hideButtons) {
  <div class="layout-row responsive-column align-center gap-2px margin-t">
    <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 [routerLink]="['../..']">
      {{ 'labels.buttons.Cancel' | translate }}
    </button>
    <button mat-raised-button color="primary" class="preview-submit-row__primary" (click)="submitEvent.emit()">
      <fa-icon icon="check" class="m-r-10"></fa-icon>
      {{ 'labels.buttons.Submit' | translate }}
    </button>
  </div>
}