@if (invoice) {
  <p-card>
    <div class="flex flex-col gap-4">
      @if (invoice.referenced_by) {
        <p-message severity="warn" [closable]="false">
          این صورت‌حساب، مرجع صورت‌حساب شماره‌ی
          <a [href]="referenceByInvoiceRoute()" class="text-lg font-bold">
            {{ invoice.referenced_by.invoice_number }}
          </a>
          می‌باشد.
        </p-message>
      }
      @if (invoice.reference_invoice) {
        <p-message severity="info" [closable]="false">
          صورت‌حساب مرجع به شماره‌ی
          <a [href]="referenceInvoiceRoute()" class="text-lg font-bold">
            {{ invoice.reference_invoice.invoice_number }}
          </a>
          می‌باشد.
        </p-message>
      }

      <div class="listKeyValue">
        <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.economic_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>
}