<div class="form-group">
  <form [formGroup]="form">
    <app-input [control]="form.controls.unit_price" name="unit_price" label="مبلغ واحد" type="price" />
    <app-input [control]="form.controls.quantity" name="quantity" label="مقدار" type="number" suffix="گرم" />
    <app-enum-select [control]="form.controls.payload.controls.karat" type="goldKarat" name="karat" />

    <app-amount-percentage-input
      [percentageControl]="form.controls.payload.controls.wages_percentage"
      [amountControl]="form.controls.payload.controls.wages"
      [baseAmount]="unitWithQuantity()"
      [minAmount]="0"
      [maxAmount]="unitWithQuantity()"
      name="wages"
      label="اجرت"
    />

    {{ initialValues?.payload?.profit }}
    <app-amount-percentage-input
      [percentageControl]="form.controls.payload.controls.commission_percentage"
      [amountControl]="form.controls.payload.controls.commission"
      [baseAmount]="unitWithQuantity()"
      [minAmount]="0"
      [maxAmount]="unitWithQuantity()"
      name="commission"
      label="حق‌العمل"
    />
    <app-amount-percentage-input
      [percentageControl]="form.controls.payload.controls.profit_percentage"
      [amountControl]="form.controls.payload.controls.profit"
      [baseAmount]="totalAmountBeforeProfit()"
      [minAmount]="0"
      [maxAmount]="totalAmountBeforeProfit()"
      name="profit"
      label="سود"
    />
  </form>

  <app-amount-percentage-input
    [percentageControl]="form.controls.discount_percentage"
    [amountControl]="form.controls.discount"
    [baseAmount]="baseAmountForDiscountCalculation()"
    [minAmount]="0"
    [maxAmount]="baseAmountForDiscountCalculation()"
    name="discount"
    label="تخفیف"
  >
    <ng-template #labelSuffix>
      <p-selectButton
        [options]="discountTypeItems"
        [(ngModel)]="discountType"
        [allowEmpty]="false"
        optionLabel="label"
        optionValue="value"
        (onChange)="changeDiscountCalculation($event)"
      />
    </ng-template>
  </app-amount-percentage-input>

  <hr />
  <div class="flex flex-col gap-4 justify-center w-full">
    <pos-form-dialog-amount-card-template
      [totalAmount]="totalAmount()"
      [baseTotalAmount]="baseTotalAmount()"
      [discountAmount]="form.controls.discount.value || 0"
      [taxAmount]="taxAmount()"
    />
    <button pButton class="sm:w-auto w-full" (click)="submit()">{{ preparedCTAText() }}</button>
  </div>
</div>
