@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 && canDoActionOnInvoice) {
        <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 && canDoActionOnInvoice) {
    <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>
  }

  @if (canDoActionOnInvoice) {
    <shared-light-bottomsheet [(visible)]="showReturnFromSaleForm" header=" برگشت از فروش">
      <shared-return-form
        [initialValues]="invoice.items"
        [invoiceDate]="invoice.invoice_date"
        [loading]="returnFromSaleLoading || false"
        (onSubmit)="returnSubmit($event)"
        (onClose)="cancelReturn()" />
    </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)"
        [loading]="correctionLoading || false"
        (onSubmit)="correctionSubmit($event)"
        (onClose)="cancelCorrection()" />
    </shared-light-bottomsheet>
    @if (showCorrectionPaymentDialog()) {
      <shared-invoice-payment-form-dialog
        [(visible)]="showCorrectionPaymentDialog"
        [totalAmount]="correctionRequiredPayment()"
        [submitOrderLoading]="correctionLoading"
        [isGoldGuild]="false"
        [isUnknownCustomer]="true"
        (onSubmitPayment)="confirmCorrectionPayment($event)"
        (onClose)="cancelCorrectionPayment()" />
    }
  }

  <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>
}