@if (loading) {
  <shared-page-loading />
} @else if (!invoice) {
  <uikit-empty-state> </uikit-empty-state>
} @else {
  <p-dialog [visible]="actionLoading" [closable]="false" header="لطفا صبر کنید">
    <div class="flex h-[30svh] flex-col items-center justify-center gap-6">
      <p-progressSpinner />
      <span class="text-lg font-bold">در حال ارسال درخواست شما...</span>
    </div>
  </p-dialog>
  <app-inner-pages-header pageTitle="اطلاعات صورت‌حساب‌" [backRoute]="backRoute">
    <ng-template #actions>
      <p-button (click)="printInvoice()" icon="pi pi-print" outlined size="small" label="چاپ" />
    </ng-template>
  </app-inner-pages-header>
  <div class="p-4">
    <p-card>
      <div class="flex flex-col gap-4">
        <div class="listKeyValue">
          <app-key-value label="شماره صورت‌حساب" [value]="invoice.invoice_number" />
          <app-key-value label="شماره منحصر به فرد مالیاتی" [value]="invoice.tax_id" />
          <app-key-value label="تاریخ صورت‌حساب‌" [value]="invoice.invoice_date" type="date" />
          <app-key-value label="تاریخ ایجاد صورت‌حساب‌" [value]="invoice.created_at" type="dateTime" />
          <app-key-value label="نوع صورت‌حساب">
            <catalog-invoice-type-tag [status]="invoice.type.value" />
          </app-key-value>
          <app-key-value label="وضعیت صدور به سامانه‌ی مودیان">
            <catalog-tax-provider-status-tag [status]="invoice.status.value" [translate]="invoice.status.translate" />
          </app-key-value>
          <div class="col-span-full">
            <app-key-value label="توضیحات" [value]="invoice.notes || '----'" />
          </div>
        </div>
        <p-divider align="center"> اطلاعات مالی</p-divider>
        <div class="grid items-center gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-3">
          <app-key-value label="مبلغ تخفیف" [value]="invoice.discount_amount" type="price" />
          <app-key-value label="مبلغ مالیات" [value]="invoice.tax_amount" type="price" />
          <app-key-value label="مجموع قابل پرداخت" [value]="invoice.total_amount" type="price" />
        </div>

        <p-divider align="center"> اطلاعات پرداخت</p-divider>
        <div class="grid items-center gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-3">
          <app-key-value label="نحوه‌ی تسویه‌حساب">
            <catalog-invoice-settlement-type-tag [type]="invoice.settlement_type.value" />
          </app-key-value>

          @for (payment of invoice.payments; track $index) {
            <app-key-value
              [label]="`${payment.payment_method === 'SET_OFF' ? 'تهاتر' : payment.payment_method === 'TERMINAL' ? 'پوز' : 'نقدی/ کارت‌خوان دیگر/ کارت به کارت'}`"
              [value]="payment.amount"
              type="price" />
          }
        </div>

        <p-divider align="center"> اطلاعات صادر کننده </p-divider>
        <div class="listKeyValue">
          <app-key-value label="کسب و کار" [value]="invoice.pos!.complex.business_activity.name" />
          <app-key-value label="مجموعه" [value]="invoice.pos!.complex.name" />
          <app-key-value label="پایانه فروش" [value]="invoice.pos!.name" />
          @if (invoice.consumer_account?.account?.username) {
            <app-key-value label="ایجاد کننده" [value]="invoice.consumer_account.account.username" />
          }
        </div>

        @if (variant !== 'customer') {
          <p-divider align="center"> اطلاعات مشتری </p-divider>
          @if (invoice.customer) {
            <div class="listKeyValue">
              @if (invoice.customer.type === 'INDIVIDUAL') {
                <app-key-value label="نوع مشتری" value="حقیقی" />
                <app-key-value label="نام" [value]="invoice.customer.individual?.first_name" />
                <app-key-value label="نام خانوادگی" [value]="invoice.customer.individual?.last_name" />
                <app-key-value label="کد اقتصادی" [value]="invoice.customer.individual?.economic_code" />
                <app-key-value label="کد ملی" [value]="invoice.customer.individual?.national_id" />
                <app-key-value label="کد پستی" [value]="invoice.customer.individual?.postal_code" />
              } @else {
                <app-key-value label="نوع مشتری" value="حقوقی" />
                <app-key-value label="نام شرکت" [value]="invoice.customer.legal?.company_name" />
                <app-key-value label="کد اقتصادی" [value]="invoice.customer.legal?.economic_code" />
                <app-key-value label="کد ثبتی" [value]="invoice.customer.legal?.registration_number" />
                <app-key-value label="کد پستی" [value]="invoice.customer.legal?.postal_code" />
              }
            </div>
          } @else if (invoice.unknown_customer) {
            <div class="listKeyValue">
              <app-key-value label="نوع مشتری" value="نوع دوم" />
              <app-key-value label="عنوان" [value]="invoice.unknown_customer.name" />
              <app-key-value label="کد ثبتی" [value]="invoice.unknown_customer.national_code" />
            </div>
          } @else {
            <p class="text-text-color pt-3 pb-5 text-center">اطلاعات مشتری ثبت نشده است.</p>
          }
        }
        <p-divider align="center"> کالاهای خریداری شده </p-divider>
        <app-page-data-list
          [columns]="columns"
          [items]="invoice.items"
          [loading]="loading"
          pageTitle=""
          [showRefresh]="false">
          <ng-template #totalAmount let-item>
            @if (!item.discount_amount) {
              <span [appPriceMask]="item.total_amount"></span>
            }
          </ng-template>
        </app-page-data-list>
      </div>
    </p-card>
  </div>

  @if (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 || ''"
            size="small"
            [severity]="$any(action).severity || 'secondary'"
            [outlined]="$any(action).severity === 'secondary'"
            (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"
      (onSubmit)="correctionSubmit($event)" />
  </shared-light-bottomsheet>
}