@if (loading) {
  <shared-page-loading />
} @else if (!invoice) {
  <uikit-empty-state> </uikit-empty-state>
} @else {
  <app-inner-pages-header [pageTitle]="`صورت‌حساب ${invoice.invoice_number}`" (onBackClick)="backToPrevPage()">
    <ng-template #actions>
      <p-button (click)="showQrCode()" icon="pi pi-qrcode" outlined size="small" />
      <p-button (click)="printInvoice()" icon="pi pi-print" outlined size="small" label="چاپ" />
      @if (!isApplication) {
        <p-button (click)="menu.toggle($event)" icon="pi pi-ellipsis-v" label="عملیات بیشتر" outlined size="small">
        </p-button>
        <p-menu #menu [model]="moreActionMenuItems()" [popup]="true"></p-menu>
      }
    </ng-template>
  </app-inner-pages-header>
  <div class="py-4 max-md:p-4">
    <shared-sale-invoice-single-info-card [loading]="loading" [invoice]="invoice" [variant]="variant" />
  </div>

  @if (isApplication && moreActionMenuItems().length) {
    <div class="border-surface-border bg-surface-card sticky bottom-0 z-10 mt-4 w-full rounded-t-2xl border-t p-3">
      <div class="flex flex-wrap justify-center gap-2">
        @for (action of moreActionMenuItems(); track action.label || $index) {
          <button
            pButton
            [label]="action.label || ''"
            [icon]="action.icon || ''"
            [severity]="$any(action).severity || 'secondary'"
            [outlined]="$any(action).severity === 'secondary'"
            [loading]="actionLoading"
            (click)="action.command()"></button>
        }
      </div>
    </div>
  }

  <shared-light-bottomsheet [(visible)]="showReturnFromSaleForm" header=" برگشت از فروش">
    <shared-return-form
      [initialValues]="invoice.items"
      [invoiceDate]="invoice.invoice_date"
      (onSubmit)="returnSubmit($event)" />
  </shared-light-bottomsheet>
  <shared-light-bottomsheet [(visible)]="showCorrectionForm" header="اصلاحی">
    <shared-correction-form
      [visible]="showCorrectionForm()"
      [initialValues]="invoice.items"
      [invoiceDate]="invoice.invoice_date"
      [beforeSubmit]="beforeCorrectionSubmitHandler.bind(this)"
      (onSubmit)="correctionSubmit($event)" />
  </shared-light-bottomsheet>
  <shared-light-bottomsheet [(visible)]="showQrCodeDialog" header="کد QR">
    <div class="flex flex-col gap-4">
      <span class="text-center text-lg font-bold">
        برای امکان دسترسی به صورت‌حساب به صورت آنلاین، کد QR را اسکن کنید.
      </span>
      <p-card class="mx-auto">
        <qrcode [qrdata]="publicInvoiceRoute()" [width]="220" [errorCorrectionLevel]="'M'"></qrcode>
      </p-card>
    </div>
  </shared-light-bottomsheet>

  <shared-light-bottomsheet [(visible)]="showCorrectionPaymentDialog" header="پرداخت اصلاحی">
    <div class="flex flex-col gap-4">
      <div class="text-sm">مبلغ اصلاحی افزایش یافته است. لطفاً مبلغ پرداختی را ثبت کنید.</div>
      <div class="border-surface-border rounded-lg border p-3">
        <div class="text-muted-color text-xs">حداقل مبلغ موردنیاز</div>
        <div class="text-lg font-bold" [appPriceMask]="correctionRequiredPayment()"></div>
      </div>
      <div class="flex flex-col gap-2">
        <label class="text-sm font-medium">مبلغ پرداختی</label>
        <input
          type="number"
          min="0"
          class="border-surface-border w-full rounded-md border px-3 py-2"
          [value]="correctionPaymentAmount()"
          (input)="onCorrectionPaymentAmountChange($event)" />
      </div>
      <div class="flex justify-end gap-2">
        <button pButton type="button" severity="secondary" label="انصراف" (click)="cancelCorrectionPayment()"></button>
        <button pButton type="button" label="تایید پرداخت" (click)="confirmCorrectionPayment()"></button>
      </div>
    </div>
  </shared-light-bottomsheet>
}