cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

<form [formGroup]="recurringDepositAccountSettingsForm">

  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">

    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v">
      Is Mandatory Deposit?
    </mat-checkbox>

    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="adjustAdvanceTowardsFuturePayments"
      class="margin-v">
      Adjust advance payments toward future installments?
    </mat-checkbox>

    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowWithdrawal" class="margin-v">
      Allow Withdrawals?
    </mat-checkbox>

    <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Frequency</mat-label>
      <input type="number" matInput formControlName="lockinPeriodFrequency">
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Type</mat-label>
      <mat-select formControlName="lockinPeriodFrequencyType">
        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
          [value]="lockinPeriodFrequencyType.id">
          {{ lockinPeriodFrequencyType.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <h4 fxFlex="98%" class="mat-h4">Recurring Deposit Details</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Recurring Deposit Amount</mat-label>
      <input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required>
      <mat-error>
        Recurring Deposit Amount is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <h4 fxFlex="98%" class="mat-h4">Deposit Period</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Deposit Period</mat-label>
      <input type="number" matInput formControlName="depositPeriod" required>
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Type</mat-label>
      <mat-select formControlName="depositPeriodFrequencyId" required>
        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
          {{ periodFrequencyType.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isCalendarInherited" class="margin-v">
      Deposit Frequency Same as Group/Center meeting
    </mat-checkbox>

    <ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
      <mat-form-field fxFlex="48%" (click)="expectedFirstDepositOnDatePicker.open()">
        <mat-label>Deposit Start Date</mat-label>
        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="expectedFirstDepositOnDatePicker"
          formControlName="expectedFirstDepositOnDate" required>
        <mat-datepicker-toggle matSuffix [for]="expectedFirstDepositOnDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #expectedFirstDepositOnDatePicker></mat-datepicker>
      </mat-form-field>

      <h4 fxFlex="98%" class="mat-h4">Deposit Frequency</h4>

      <mat-form-field fxFlex="48%">
        <mat-label>Deposit Frequency</mat-label>
        <input type="number" matInput formControlName="recurringFrequency" required>
        <mat-error>
          Deposit Frequency is <strong>required</strong>
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="48%">
        <mat-label>Type</mat-label>
        <mat-select formControlName="recurringFrequencyType" required>
          <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
            {{ periodFrequencyType.value }}
          </mat-option>
        </mat-select>
        <mat-error>
          Deposit Frequency Type is <strong>required</strong>
        </mat-error>
      </mat-form-field>
    </ng-container>


    <mat-divider fxFlex="98%"></mat-divider>

    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Frequency</mat-label>
      <input type="number" matInput formControlName="minDepositTerm" required>
      <mat-error>
        Minimum Deposit Term Frequency is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Frequency Type</mat-label>
      <mat-select formControlName="minDepositTermTypeId" required>
        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
          {{ periodFrequencyType.value }}
        </mat-option>
      </mat-select>
      <mat-error>
        Minimum Deposit Term Frequency Type is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <h4 fxFlex="98%" class="mat-h4">And thereafter, in Multiples of</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Frequency</mat-label>
      <input type="number" matInput formControlName="inMultiplesOfDepositTerm">
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Type</mat-label>
      <mat-select formControlName="inMultiplesOfDepositTermTypeId">
        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
          {{ periodFrequencyType.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term</h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Frequency</mat-label>
      <input type="number" matInput formControlName="maxDepositTerm">
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Type</mat-label>
      <mat-select formControlName="maxDepositTermTypeId">
        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
          {{ periodFrequencyType.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-divider fxFlex="98%"></mat-divider>

    <h4 fxFlex="98%" class="mat-h4">For Pre-mature closure</h4>

    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
      Apply Penal Interest (less)
    </mat-checkbox>

    <mat-form-field fxFlex="48%">
      <mat-label>Penal Interest (%)</mat-label>
      <input type="number" matInput formControlName="preClosurePenalInterest">
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Period</mat-label>
      <mat-select formControlName="preClosurePenalInterestOnTypeId">
        <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
          [value]="preClosurePenalInterestOnType.id">
          {{ preClosurePenalInterestOnType.value }}
        </mat-option>
      </mat-select>
    </mat-form-field> 

    <!-- <mat-divider fxFlex="98%"></mat-divider> -->

    <mat-form-field fxFlex="48%">
      <mat-label>Minimum Balance For Interest Calculation</mat-label>
      <input type="number" matInput formControlName="minBalanceForInterestCalculation">
    </mat-form-field>

    <ng-container *ngIf="taxGroup">
      <h4 fxFlex="98%" class="mat-h4">Tax Group</h4>

      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
        Is Withhold Tax Applicable?
      </mat-checkbox>
    
      <mat-form-field fxFlex="48%" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
        <mat-label>Tax Group</mat-label>
        <input type="text" matInput formControlName="taxGroupId">
      </mat-form-field>
    </ng-container>

  </div>

  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
    <button mat-raised-button matStepperPrevious>
      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
      Previous
    </button>
    <button mat-raised-button matStepperNext>
      Next&nbsp;&nbsp;
      <fa-icon icon="arrow-right"></fa-icon>
    </button>
  </div>

</form>