cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-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]="recurringDepositAccountDetailsForm">
  <!-- ══ Account Details ══════════════════════════════════════════ -->
  <div class="rad-section">
    <div class="rad-section__header">
      <i class="fas fa-info-circle"></i>
      <h3>Account Details</h3>
    </div>
    <div class="rad-grid">
      <mat-form-field appearance="outline" class="rad-field">
        <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
        <mat-select formControlName="productId" required>
          @for (product of productData; track product) {
            <mat-option [value]="product.id">{{ product.name }}</mat-option>
          }
        </mat-select>
        <mat-error>
          {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
          <strong>{{ 'labels.commons.required' | translate }}</strong>
        </mat-error>
      </mat-form-field>

      @if (isProductSelected) {
        <mat-form-field appearance="outline" class="rad-field" (click)="submittedOnDatePicker.open()">
          <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="submittedOnDatePicker"
            formControlName="submittedOnDate"
            required
          />
          <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #submittedOnDatePicker></mat-datepicker>
          <mat-error>
            {{ 'labels.inputs.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
            <strong>{{ 'labels.commons.required' | translate }}</strong>
          </mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline" class="rad-field">
          <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
          <mat-select formControlName="fieldOfficerId">
            @for (officer of fieldOfficerData; track officer) {
              <mat-option [value]="officer.id">{{ officer.displayName }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <mat-form-field appearance="outline" class="rad-field">
          <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
          <input matInput formControlName="externalId" />
        </mat-form-field>
      }
    </div>
  </div>

  @if (isProductSelected && productTemplate) {
    <!-- ══ Product Classification (read-only) ══════════════════════ -->
    <div class="rad-section rad-section--mt">
      <div class="rad-section__header">
        <i class="fas fa-tags"></i>
        <h3>Product Classification</h3>
        <span class="rad-badge">From Product</span>
      </div>
      <div class="rad-grid rad-grid--classification">
        <mat-form-field appearance="outline" class="rad-field">
          <mat-label>Account Type</mat-label>
          <mat-select [(ngModel)]="selectedAccountType" [ngModelOptions]="{ standalone: true }">
            @for (opt of accountTypeOptions; track opt) {
              <mat-option [value]="opt">{{ opt }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <mat-form-field appearance="outline" class="rad-field">
          <mat-label>Customer Segment</mat-label>
          <mat-select [(ngModel)]="selectedCustomerSegment" [ngModelOptions]="{ standalone: true }">
            @for (opt of customerSegmentOptions; track opt) {
              <mat-option [value]="opt">{{ opt }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <mat-form-field appearance="outline" class="rad-field">
          <mat-label>Account No</mat-label>
          <input
            matInput
            [value]="
              productTemplate?.previewAccountNo || recurringDepositsAccountTemplate?.accountNo || 'Auto-generated'
            "
            readonly
          />
        </mat-form-field>

        @if (productTemplate.effectiveDate) {
          <mat-form-field appearance="outline" class="rad-field">
            <mat-label>Effective Date</mat-label>
            <input matInput [value]="formatTemplateDate(productTemplate.effectiveDate)" readonly />
          </mat-form-field>
        }

        @if (productTemplate.endDate) {
          <mat-form-field appearance="outline" class="rad-field">
            <mat-label>End Date</mat-label>
            <input matInput [value]="formatTemplateDate(productTemplate.endDate)" readonly />
          </mat-form-field>
        }

        <mat-form-field appearance="outline" class="rad-field">
          <mat-label>Introducer Required</mat-label>
          <input matInput [value]="productTemplate.introducerRequired ? 'Yes' : 'No'" readonly />
        </mat-form-field>

        <div class="rad-field rad-info-row">
          <span class="rad-info-label">Share Linking Enabled</span>
          <span class="rad-badge" [class.rad-badge--yes]="productTemplate.shareLinkingEnabled">
            {{ productTemplate.shareLinkingEnabled ? 'Yes' : 'No' }}
          </span>
        </div>
      </div>
    </div>

    @if (productTemplate?.introducerRequired) {
      <mifosx-introducer-search (introducerChange)="onIntroducerChange($event)"></mifosx-introducer-search>
    }
  }
</form>