<div class="flex flex-col gap-6 p-4">
  <season-picker (onChange)="onDateChanged($event)" />
  <div class="grid grid-cols-2 gap-4">
    @if (loading()) {
      @for (_ of [0, 1, 2, 3, 4, 5]; track $index) {
        <div class="h-32 w-full">
          <p-skeleton width="100%" height="100%"></p-skeleton>
        </div>
      }
    } @else {
      <pos-statistics-invoice-type-card
        type="all"
        [loading]="loading()"
        [totalAmount]="item()?.all?.total_amount"
        [totalTaxAmount]="item()?.all?.total_tax"
        [count]="item()?.all?.count"
        (onClick)="toInvoicesPage('all')" />
      <pos-statistics-invoice-type-card
        type="success"
        [loading]="loading()"
        [totalAmount]="item()?.success?.total_amount"
        [totalTaxAmount]="item()?.success?.total_tax"
        [count]="item()?.success?.count"
        (onClick)="toInvoicesPage('success')" />
      <pos-statistics-invoice-type-card
        type="failure"
        [loading]="loading()"
        [totalAmount]="item()?.failure?.total_amount"
        [totalTaxAmount]="item()?.failure?.total_tax"
        [count]="item()?.failure?.count"
        (onClick)="toInvoicesPage('failure')" />
      <pos-statistics-invoice-type-card
        type="notSended"
        [loading]="loading()"
        [totalAmount]="item()?.notSended?.total_amount"
        [totalTaxAmount]="item()?.notSended?.total_tax"
        [count]="item()?.notSended?.count"
        (onClick)="toInvoicesPage('notSended')" />
      <pos-statistics-invoice-type-card
        type="pending"
        [loading]="loading()"
        [totalAmount]="item()?.pending?.total_amount"
        [totalTaxAmount]="item()?.pending?.total_tax"
        [count]="item()?.pending?.count"
        (onClick)="toInvoicesPage('pending')" />
      <pos-statistics-invoice-type-card
        type="credit"
        [loading]="loading()"
        [totalAmount]="item()?.credit?.total_amount"
        [totalTaxAmount]="item()?.credit?.total_tax"
        [count]="item()?.credit?.count" />
    }
  </div>
  <div class="fixed inset-x-0 bottom-0 p-4">
    <button pButton [routerLink]="shopRoute" size="large" class="w-full">ایجاد صورت‌حساب جدید</button>
  </div>
</div>
