cbsnexora/src/app/current-accounts/current-account-actions/close-current-account/close-current-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="container mat-elevation-z8">
  <mat-card>
    <form [formGroup]="closeCurrentAccountForm" (ngSubmit)="submit()">
      <mat-card-content>
        <div class="layout-column">
          <mat-form-field (click)="closedOnDatePicker.open()">
            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
            <input
              matInput
              [min]="minDate"
              [max]="maxDate"
              [matDatepicker]="closedOnDatePicker"
              required
              formControlName="closedOnDate"
            />
            <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #closedOnDatePicker></mat-datepicker>
            @if (closeCurrentAccountForm.controls.closedOnDate.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <mat-checkbox class="m-b-25 m-t-15" formControlName="withdrawBalance">
            {{ 'labels.inputs.Withdraw Balance' | translate }}
          </mat-checkbox>

          <mat-checkbox formControlName="postInterestValidationOnClosure">
            {{ 'labels.inputs.Is Interest Posting required on closure date' | translate }}?
          </mat-checkbox>

          @if (closeCurrentAccountForm.controls['withdrawBalance'].value) {
            <div class="layout-column">
              @if (closeCurrentAccountForm.controls['amount']) {
                <mat-form-field class="m-t-20">
                  <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
                  <input type="number" required matInput formControlName="amount" />
                </mat-form-field>
              }
              @if (closeCurrentAccountForm.controls['paymentTypeId']) {
                <mat-form-field>
                  <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
                  <mat-select formControlName="paymentTypeId">
                    @for (paymentType of paymentTypeOptions; track paymentType) {
                      <mat-option [value]="paymentType.id">
                        {{ paymentType.name }}
                      </mat-option>
                    }
                  </mat-select>
                </mat-form-field>
              }
              <div class="flex-fill">
                <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
                  <mat-slide-toggle>
                    <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                      <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                    </div>
                  </mat-slide-toggle>
                </span>
              </div>
              @if (closeCurrentAccountForm.controls['accountNumber']) {
                <mat-form-field>
                  <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
                  <input type="number" formControlName="accountNumber" matInput />
                </mat-form-field>
              }
              @if (closeCurrentAccountForm.controls['checkNumber']) {
                <mat-form-field>
                  <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
                  <input type="number" formControlName="checkNumber" matInput />
                </mat-form-field>
              }
              @if (closeCurrentAccountForm.controls['routingCode']) {
                <mat-form-field>
                  <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
                  <input formControlName="routingCode" matInput />
                </mat-form-field>
              }
              @if (closeCurrentAccountForm.controls['receiptNumber']) {
                <mat-form-field>
                  <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
                  <input formControlName="receiptNumber" matInput />
                </mat-form-field>
              }
              @if (closeCurrentAccountForm.controls['bankNumber']) {
                <mat-form-field>
                  <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
                  <input formControlName="bankNumber" matInput />
                </mat-form-field>
              }
            </div>
          }

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
          </mat-form-field>
        </div>
      </mat-card-content>

      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
        <button type="button" mat-raised-button [routerLink]="['../../']">
          {{ 'labels.buttons.Cancel' | translate }}
        </button>
        <button mat-raised-button color="warn" [disabled]="!closeCurrentAccountForm.valid">
          {{ 'labels.buttons.Confirm' | translate }}
        </button>
      </mat-card-actions>
    </form>
  </mat-card>
</div>