@if(form.bFormReady && BizTransactionType) {
<form [formGroup]="form" class="FormOverView scrollbar">
  <gb-formaction [FormDetails]="form" [FormData]="form.value" [MenuRights]="MenuRights"
    [BizTransactionPicklistRequired]="true" (FormOutput)="FormOutput($event)" [DocumentPrint]=!IsPrintButtonDisabled
    [BizTransactionType]="BizType" [TDSshowDynamicButton]="isTDSHidden" [DeleteValidationRequired]="true"
    [IsButtonDisabled]="IsUpdateButtonDisabled && !isSaveMode()" [IsSaveButtonDisabled]="IsSaveButtonDisabled"
    [PolicyDeleteDisable]="VocuherDeleteBtnDisable">
  </gb-formaction>

  @if(CancelledWaterMarkVoucher) {
  <div class="cancel-watermark"></div>
  }

  @if(BizTransactionType) {
  <div class="FormOverView scrollbar" style="background-color: var(--bg-surface); padding: 0px"
    [style.opacity]="1">
    <div class="FormSection scrollbar" style="margin-bottom: 12px">
      <div class="scrollbar" style="display: flex; justify-content: flex-end">
        <div class="scrollbar" style="flex-grow: 1;overflow: auto;overflow-y: hidden;margin-right: 10px;">

          <div style="display: flex">
            <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" (PicklistValue)="OnPicklistChange($event)"
              [FormData]="form.value" class="adjacentField"
              [ValuebasedMaxLength]="BizTransactionType.BIZTransactionTypeNOGenerationType == 1 ? BizTransactionType.BIZTransactionTypeNumberSize : -1"
              formControlName="VoucherNumber" [gbReadOnly]="IsGetButtonDisabled"
              [AddNew]="BizTransactionType.BIZTransactionTypeNOGenerationType == 1 ? true : false">
            </gb-newpicklist>

            <gb-date formControlName="VoucherVoucherDate" class="adjacentField" [minDate]="MinDate" [maxDate]="MaxDate"
              [default]="'todaygb5'" [date]="form.get('VoucherId')?.value" [DateRefresh]="VoucherDateRefresh"
              (DateOutPut)="DateOutPut($event)">
            </gb-date>

            <div style="height: 85px">
              <gb-input formControlName="VoucherReferenceNumber" class="adjacentField"></gb-input>
              <gb-date style="position: relative; top: -15px; right: 33px" [MinimizedView]="true"
                formControlName="VoucherReferenceDate" [default]="'todaygb5'" [date]="form.get('VoucherId')?.value"
                [DateRefresh]="VoucherDateRefresh">
              </gb-date>
            </div>

            <gb-checkbox formControlName="IsInter" [ngStyle]="{ opacity: IsInter ? 0.5 : 1 }" [gbReadOnly]="IsInter">
            </gb-checkbox>

            <gb-checkbox formControlName="IsCurrency" [ngStyle]="{ opacity: IsMultiCurrency ? 0.5 : 1 }"
              [gbReadOnly]="IsMultiCurrency">
            </gb-checkbox>

            <div style="width: 200px;">
              <mat-select class="form_value" formControlName="selectControl" id="Templatebutton">
                <mat-option value="SelectTemplate" disabled>{{ 'finance.voucher.selectTemplate' | transloco
                  }}</mat-option>
                @if(!(form.get('VoucherId')?.value == -1 || form.get('VoucherId')?.value == 0)) {
                <mat-option value="Template" (click)="LightBoxOpen('SaveTemplateModal')">{{
                  'finance.voucher.saveTemplate' | transloco }}</mat-option>
                }
                <mat-option value="Load Template" (click)="LightBoxOpen('LoadTemplateModal')">{{
                  'finance.voucher.loadTemplate' | transloco }}</mat-option>
                <mat-option value="Load Payment" (click)="LightBoxOpen('LoadPaymentModal')">{{
                  'finance.voucher.loadPayment' | transloco }}</mat-option>
                <mat-option value="Load Purchase" (click)="LightBoxOpen('LoadPurchaseModal')">{{
                  'finance.voucher.loadPurchase' | transloco }}</mat-option>
              </mat-select>
            </div>
          </div>

          <div style="display: flex; align-items: center; width: 100%;" class="narration-container">
            <gb-input formControlName="VoucherNarration" class="adjacentField narration-input">
            </gb-input>

            <gb-newpicklist style="height: 36px !important; margin-left: -30px"
              formControlName="VoucherNarrations" (PicklistValue)="VoucherNarrationPicklistChange($event)">
              <span style="margin-left: 8px; cursor: pointer">&#x25B2;</span>
            </gb-newpicklist>

            @if(allocationVisible) {
            <gb-newpicklist [style.display]="Allocation ? 'inline-block' : 'none'" [FormData]="form.value"
              class="adjacentField" formControlName="AllocationName" (PicklistValue)="OnPicklistChange($event)"
              (PicklistValue)="getAllocationValue($event)">
            </gb-newpicklist>
            }

            @if(BranchKL1Visible) {
            <gb-newpicklist [style.display]="L1Branch ? 'inline-block' : 'none'" [FormData]="form.value"
              class="adjacentField" formControlName="BranchL1Name" (PicklistValue)="OnPicklistChange($event)">
            </gb-newpicklist>
            }
          </div>

        </div>
      </div>
    </div>

    <div class="voucher-grid-container">
      <div class="FormSection scrollbar" style="margin-bottom: 12px">
        <gb-vouchergrid formControlName="VoucherDetailArray" [ouDetails]="OUDetail"
          [BizTransactionType]="BizTransactionType" [CheckingSetting]="NeedNegativeCheck"
          [checkingSettings]="checkingSettingsData" [FormData]="form.value" [GridRefresh]="VoucherGridRefresh()"
          (GridOutPut)="getVocuherDetailGridOutPut($event)"
          (accountFavourChange)="accountFavour[$event.index] = $event.value" (GridIndexOutput)="GridIndexOutput($event)"
          (GridFocusOutput)="DebitAndCreditCalculator($event)" (LightBoxOutPut)="LightBox($event)"
          (PicklistSelectedOutput)="handlePicklistSelected($event)" [loginInfo]="LoginDTO"
          (openTDSPaymentLightBox)="onOpenTDSPayment($event)" [voucherAccountName]="selectedVoucherAccountName">
        </gb-vouchergrid>

        @if(CancelledWaterMarkVoucher) {
        <div class="voucher-grid-disable-overlay"></div>
        }

        <!-- Total DR and Total CR Section -->
        <div class="FormSection scrollbar" style="margin-bottom: 12px;">
          <div style="display: flex; justify-content: flex-end; gap: 10px; align-items: center;">
            <div
              style="width: 174px;height: 56px;background-color: #faf5ff;border-radius: 8px;display: flex;align-items: center;">
              <span style="padding: 10px">{{ 'finance.voucher.totalDR' | transloco }}</span><span>{{
                this.form.get("TotalDebit")?.value || 0 }}</span>
            </div>
            <div
              style="width: 174px;height: 56px;background-color: #faf5ff;border-radius: 8px;display: flex;align-items: center;">
              <span style="padding: 10px">{{ 'finance.voucher.totalCR' | transloco }}</span><span>{{
                this.form.get("TotalCredit")?.value || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--Currency LightBox-->
    @if(CurrencyLightBox) {
    <div #myModal id="CurrencyModel" class="modal">
      <div class="modal-content" style="
                padding: 20px;
                position: relative;
                max-width: 1000px;
                margin: auto;
                border-radius: 8px;
                background-color: white;
              ">
        <h3 style="color: #007bff; margin-bottom: 20px">
          {{ 'finance.voucher.multiCurrencyDetails' | transloco }}
        </h3>

        <span class="closeicon" (click)="Currencyclose()" style="position: absolute; right: 20px; cursor: pointer">
          <mat-icon>cancel</mat-icon>
        </span>

        <div style="
                  display: grid;
                  grid-template-columns: auto auto auto auto;
                  gap: 10px 20px;
                  align-items: center;
                ">
          <span style="color: deeppink">{{ 'finance.voucher.accountCode' | transloco }}</span>
          <span>{{ selectedCurrencyRow?.VoucherAccountCode }}</span>

          <span style="color: deeppink">{{ 'finance.voucher.accountName' | transloco }}</span>
          <span>{{ selectedCurrencyRow?.VoucherAccountName }}</span>

          <span style="color: deeppink">{{ 'finance.voucher.accountCurrency' | transloco }}</span>
          <span>{{ selectedCurrencyRow?.CurrencyCode }}</span>

          <span style="color: deeppink">{{ 'finance.voucher.accountCurrencyConversion' | transloco }}</span>
          <span>{{ selectedCurrencyRow?.VoucherDetailAcCurrencyConversion }}</span>

          <span style="color: deeppink">{{ 'finance.voucher.convertedAmount' | transloco }}:</span>
          <span>{{ selectedCurrencyRow?.VoucherDetailAmount }}</span>
        </div>
      </div>
    </div>
    }

    <!--Instrument LightBox-->
    @if(InstrumentLightBox) {
    <div id="InstrumentModel" class="modal">
      <div class="modal-content scrollbar">
        <span class="title mon-sixth">{{ 'finance.voucher.instrumentLightBox' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-instrumentlightbox (CloseInstrument)="LightBoxClose()" (InstrumentOutPut)="saveInstrumentLightBox($event)"
          [VoucherDetail]="VoucherDetailArray" [InstrumentArray]="getInstrumentArray"
          [VoucherAccountDetails]="AccountDetails" [BizTransactionType]="BizTransactionType"
          [favouringName]="selectedAccountFavour" [voucherAccountName]="selectedVoucherAccountName"
          [AccountVoucherDate]="getVoucherDate" [AccountVoucherCurrency]="getCurrencyCode"
          [FullVoucherArray]="FullVoucherDetailArray">
        </gb-instrumentlightbox>
      </div>
    </div>
    }

    <!--BillAllocation LightBox-->
    @if(BillAllocationLightBox) {
    <div id="BillAllocationModel" class="modal">
      <div class="modal-content scrollbar" style="margin-top: 40px;">
        <span class="title mon-sixth">{{ 'finance.voucher.billAllocationLightBox' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-billallocationlightbox [IsFocused]="isFocused()" (CloseBillAllocation)="LightBoxClose()"
          (BillAllocationOutPut)="saveBillAllocationLightBox($event)" [BillAllocationArray]="BillAllocationArray"
          [VoucherAccountDetails]="AccountDetails" [VoucherBillDetails]="BillDetails"
          [BizTransactionType]="BizTransactionType" [ParentAmount]="DetailAmountValue">
        </gb-billallocationlightbox>
      </div>
    </div>
    }

    <!--CostCenter LightBox-->
    @if(CostCenterLightBox) {
    <div id="CostCenterModel" class="modal">
      <div class="modal-content scrollbar">
        <span class="title mon-sixth">{{ 'finance.voucher.costCenterLightBox' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-costcenterlightbox (CostCenterOutPut)="saveCostCenterLightBox($event)"
          [VoucherAccountDetails]="AccountDetails" [CostCenterDetail]="CostCenterDetail"
          (CloseCostCenter)="LightBoxClose()">
        </gb-costcenterlightbox>
      </div>
    </div>
    }

    <!--TDSCategory LightBox-->
    @if(TDSLightBox) {
    <div id="TDSCategoryModel" class="modal">
      <div class="modal-content scrollbar">
        <span class="title mon-sixth">{{ 'finance.voucher.tdsDetails' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-tdscategorylightbox (TDSCategoryOutPut)="saveTDSCategoryLightBox($event)"
          [VoucherAccountDetails]="AccountDetails" [tdType]="TDType" [isAutoCalc]="isTDSAutoCalc"
          [BizTransactionType]="BizTransactionType" [gridIndex]="FormGridIndex" [VoucherTDSArrayFilling]="TdsAutoArray">
        </gb-tdscategorylightbox>
      </div>
    </div>
    }

    <!--TDSPayment LightBox-->
    @if(TDSPaymentLightBox) {
    <div id="TDSPaymentCategoryModel" class="modal">
      <div class="modal-content scrollbar">
        <span class="title mon-sixth">{{ 'finance.voucher.tdsPayment' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-tdspaymentcategory (TDSCategoryOutPut)="saveTDSCategoryLightBox($event)"
          [VoucherAccountDetails]="AccountDetails">
        </gb-tdspaymentcategory>
      </div>
    </div>
    }

    <!--Parameter Lightbox-->
    @if(ParameterLightBox) {
    <div id="ParameterModel" class="modal">
      <div class="modal-content scrollbar">
        <span class="title mon-sixth">{{ 'finance.voucher.qualityParameter' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-parameterlightbox (ParameterOutPut)="saveParameterLightBox($event)" [VoucherAccountDetails]="AccountDetails"
          [ParameterArray]="ParameterArray">
        </gb-parameterlightbox>
      </div>
    </div>
    }

    <!-- Template LightBoxes -->
    <div #SaveTemplateModal class="modal">
      <div class="modal-content">
        <span class="title mon-sixth">{{ 'finance.voucher.saveTemplate' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" (PicklistValue)="TemplateValidation($event)"
          [FormData]="form.value" formControlName="SaveTemplate">
        </gb-newpicklist>
        <button [disabled]="isTemplateSaveDisabled || !form.get('SaveTemplate')?.value" class="LightBox-Save"
          mat-raised-button [ngStyle]="{ opacity: isTemplateSaveDisabled ? 0.3 : 1 }"
          style="background-color: #32ae73; color: #ffffff; position: relative; top: -16px;" (click)="SaveTemplate()">
          <mat-icon>save</mat-icon> {{ 'finance.voucher.save' | transloco }}
        </button>
      </div>
    </div>

    <div #LoadTemplateModal class="modal">
      <div class="modal-content">
        <span class="title mon-sixth">{{ 'finance.voucher.loadTemplate' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="LoadTemplate">
        </gb-newpicklist>
        <button [disabled]="!form.get('LoadTemplate')?.value" class="LightBox-Save" (click)="LoadTemplate()"
          mat-raised-button [ngStyle]="{ opacity: !form.get('LoadTemplate')?.value ? 0.2 : 1 }" style="
                background-color: #32ae73;
                color: #ffffff;
                position: relative;
                top: -16px;
              ">
          {{ 'finance.voucher.load' | transloco }}
        </button>
      </div>
    </div>

    <div #LoadPaymentModal class="modal">
      <div class="modal-content">
        <span class="title mon-sixth">{{ 'finance.voucher.loadPayment' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="LoadPayment">
        </gb-newpicklist>
        <button [disabled]="!form.get('LoadPayment')?.value" class="LightBox-Save" (click)="LoadPayment()"
          mat-raised-button [ngStyle]="{ opacity: !form.get('LoadPayment')?.value ? 0.2 : 1 }" style="
                background-color: #32ae73;
                color: #ffffff;
                position: relative;
                top: -16px;
              ">
          {{ 'finance.voucher.load' | transloco }}
        </button>
      </div>
    </div>

    <div #LoadPurchaseModal class="modal">
      <div class="modal-content">
        <span class="title mon-sixth">{{ 'finance.voucher.loadPurchase' | transloco }} </span>
        <span class="closeicon" (click)="LightBoxClose()"><mat-icon>cancel</mat-icon></span>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="LoadPurchase">
        </gb-newpicklist>
        <button [disabled]="!form.get('LoadPurchase')?.value" class="LightBox-Save" (click)="LoadPurchase()"
          mat-raised-button [ngStyle]="{ opacity: !form.get('LoadPurchase')?.value ? 0.2 : 1 }" style="
                background-color: #32ae73;
                color: #ffffff;
                position: relative;
                top: -16px;
              ">
          {{ 'finance.voucher.load' | transloco }}
        </button>
      </div>
    </div>

    <!--Save Update Validation Lightbox-->
    <div #ValidationModal class="modal">
      <div class="modal-content">
        <span class="title mon-sixth">{{ 'finance.voucher.validationForVoucher' | transloco }} </span>
        <span class="closeicon" (click)="ValidationLightBoxClose()">
          <mat-icon>cancel</mat-icon>
        </span>
        <table class="validation-table">
          <thead>
            <tr>
              <th>{{ 'finance.voucher.slNo' | transloco }}</th>
              <th>{{ 'finance.voucher.validationCode' | transloco }}</th>
              <th>{{ 'finance.voucher.validationName' | transloco }}</th>
              <th>{{ 'finance.voucher.validationValue' | transloco }}</th>
            </tr>
          </thead>
          <tbody>
            @for (item of SaveResult?.responseModel?.ValidationBody; track item; let i = $index) {
            <tr>
              <td>{{ i + 1 }}</td>
              <td>{{ item.ValidationCode }}</td>
              <td>{{ item.ValidationName }}</td>
              <td>{{ item.ValidationValue || '-' }}</td>
            </tr>
            }
          </tbody>
        </table>
      </div>
    </div>

    <!--Narration Modal-->
    <div #NarrationModal class="modal">
      <div class="modal-content">
        <span class="title mon-sixth">{{ 'finance.voucher.narration' | transloco }}</span>
        <span class="closeicon" (click)="closeNarrationModal()"><mat-icon>cancel</mat-icon></span>
        <div style="display: flex;  gap: 10px;">
          <textarea [(ngModel)]="narrationText" formControlName="VoucherLineNarrations"
            placeholder="{{ 'finance.voucher.enterNarration' | transloco }}" maxlength="400"
            style="width: 30%; height: 100px; resize: none; padding: 8px; border: 1px solid #ccc; border-radius: 10px;">
              </textarea>
          <div style="display: flex; align-items: center; gap: 5px;">
            <gb-newpicklist [FormData]="form.value" formControlName="VoucherLineNarrations"
              (PicklistValue)="onNarrationPicklistChange($event)">
              <span style="margin-left: 8px; cursor: pointer">&#x25B2;</span>
            </gb-newpicklist>
          </div>
        </div>
        <button class="LightBox-Save" mat-raised-button
          style="background-color: #32ae73; color: #ffffff; margin-top: 10px;" (click)="saveNarration()">
          <mat-icon>save</mat-icon> {{ 'finance.voucher.save' | transloco }}
        </button>
      </div>
    </div>

    <!--Document Print-->
    @if(DocumentPrinting) {
    <div class="DocumentModal">
      <div style="width: 1260px;" class="Document-content" [style.max-height.px]="sharedservice.ScreenHeight() - 300">
        <div class="modal-header">
          <div class="title mon-sixth">{{ 'finance.voucher.documentPrinting' | transloco }}</div>
          <mat-icon class="doccloseicon" (click)="DocumentPrinting = false">
            cancel
          </mat-icon>
        </div>
        <div class="modal-body scrollbar">
          <gb-documentprinting [DocumentId]="DocumentId" [DocumentName]="DocumentName"
            [BizTransactionTypeDetails]="PrintBizTransactionType" [ModuleId]="MenuRights.ModuleId"
            [ReportId]="ReportId">
          </gb-documentprinting>
        </div>
      </div>
    </div>
    }

  </div>
  }
</form>
}