@if (loading()) {
  <shared-page-loading />
} @else if (pos()) {
  <div class="w-full min-h-[calc(100dvh-5.5rem)] md:overflow-hidden">
    <div class="w-full! h-full flex max-md:flex-col gap-4 pt-0">
      <div class="grow min-h-[calc(100dvh-5.5rem)] w-full">
        <pos-goods class="block h-full" />
      </div>
      @if (!isMobile()) {
        <div class="md:shrink-0 h-full md:block hidden p-4 overflow-auto">
          <pos-order-section />
        </div>
      }
    </div>
  </div>

  @if (inOrderGoods().length > 0) {
    <button
      type="button"
      pButton
      class="sticky! bottom-0 inset-x-0 w-full right-0 z-1200 border-t border-surface-border bg-surface-0 px-4 py-3 shadow-[0_-4px_16px_rgba(0,0,0,0.08)] md:hidden! rounded-b-none!"
      (click)="openInvoiceBottomSheet()"
    >
      <!-- [style.paddingBottom]="'calc(0.75rem + {{env(safe-area-inset-bottom)}})'" -->
      <div class="mx-auto flex w-full max-w-3xl items-center justify-between">
        <div class="flex flex-col items-start gap-1">
          <span class="text-base">مبلغ کل فاکتور</span>
          <span class="text-xl font-semibold" [appPriceMask]="priceInfo().totalAmount"></span>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-base font-medium">مشاهده فاکتور</span>
          <i class="pi pi-chevron-up"></i>
        </div>
      </div>
    </button>
  }
  <shared-light-bottomsheet [(visible)]="showInvoiceBottomSheet" [modal]="true" [closable]="true" header="فاکتور">
    @if (showInvoiceBottomSheet()) {
      <pos-order-section (onAddMoreGoods)="closeInvoiceBottomSheet()" (onSuccess)="onSuccessSubmit($event)" />
    }
  </shared-light-bottomsheet>

  @if (responseInvoice()) {
    <pos-order-submitted-dialog [(visible)]="isVisibleSuccessDialog" [invoice]="responseInvoice()!" />
  }
}