<div class="row">
  <div class="col-sm-6 col-lg-3">
    <mat-card
      class="cardWithShadow cursor-pointer bg-light-primary shadow-none"
      [ngClass]="{ 'active-tab': activeTab() === 'All' }"
      (click)="handleTabClick('All')"
    >
      <mat-card-content class="d-flex align-items-center gap-16">
        <div
          class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-primary text-white"
        >
          <i-tabler name="list-details" class="icon-24 d-flex"></i-tabler>
        </div>
        <div class="info">
          <h5 class="f-w-400 lh-sm f-s-14">Total</h5>
          <h5 class="f-w-500 lh-sm f-s-14">
            {{ allInvoices().length }} invoices
          </h5>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="col-sm-6 col-lg-3">
    <mat-card
      class="cardWithShadow cursor-pointer bg-light-secondary shadow-none"
      [ngClass]="{ 'active-tab': activeTab() === 'Shipped' }"
      (click)="handleTabClick('Shipped')"
    >
      <mat-card-content class="d-flex align-items-center gap-16">
        <div
          class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-secondary text-white"
        >
          <i-tabler name="shopping-bag" class="icon-24 d-flex"></i-tabler>
        </div>
        <div class="info">
          <h5 class="f-w-400 lh-sm f-s-14">Shipped</h5>
          <h5 class="f-w-500 lh-sm f-s-14">
            {{ countInvoicesByStatus("Shipped") }} invoices
          </h5>
        </div>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="col-sm-6 col-lg-3">
    <mat-card
      class="cardWithShadow cursor-pointer bg-light-success shadow-none"
      [ngClass]="{ 'active-tab': activeTab() === 'Delivered' }"
      (click)="handleTabClick('Delivered')"
    >
      <mat-card-content class="d-flex align-items-center gap-16">
        <div
          class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-success text-white"
        >
          <i-tabler name="truck" class="icon-24 d-flex"></i-tabler>
        </div>
        <div class="info">
          <h5 class="f-w-400 lh-sm f-s-14">Delivered</h5>
          <h5 class="f-w-500 lh-sm f-s-14">
            {{ countInvoicesByStatus("Delivered") }} invoices
          </h5>
        </div>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="col-sm-6 col-lg-3">
    <mat-card
      class="cardWithShadow cursor-pointer bg-light-warning shadow-none"
      [ngClass]="{ 'active-tab': activeTab() === 'Pending' }"
      (click)="handleTabClick('Pending')"
    >
      <mat-card-content class="d-flex align-items-center gap-16">
        <div
          class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-warning text-white"
        >
          <i-tabler name="sort-ascending" class="icon-24 d-flex"></i-tabler>
        </div>
        <div class="info">
          <h5 class="f-w-400 lh-sm f-s-14">Pending</h5>
          <h5 class="f-w-500 lh-sm f-s-14">
            {{ countInvoicesByStatus("Pending") }} invoices
          </h5>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>

<mat-card class="cardWithShadow">
  <mat-card-content>
    <div class="row justify-content-between align-items-center">
      <div class="col-sm-4">
        <mat-form-field appearance="outline" class="w-100 hide-hint">
          <input
            matInput
            placeholder="Search Invoice"
            (keyup)="filter($any($event.target).value)"
          />
          <mat-icon matSuffix>
            <i-tabler name="search" class="icon-20 d-flex m-t-4"></i-tabler>
          </mat-icon>
        </mat-form-field>
      </div>
      <div class="col-sm-4 d-flex align-items-center justify-content-end">
        <a
          mat-button
          [routerLink]="['/apps/invoice/addInvoice']"
          mat-flat-button
          color="primary"
          >Add Invoice</a
        >
      </div>
    </div>
  </mat-card-content>
</mat-card>

<mat-card class="cardWithShadow">
  <mat-card-content>
    <div class="table-responsive">
      <table
        mat-table
        [dataSource]="invoiceList"
        matSort
        class="no-wrap m-t-0 v-middle w-100"
      >
        <ng-container matColumnDef="chk">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox
              [checked]="allComplete()"
              [indeterminate]="someComplete()"
              (change)="setAll($event.checked)"
              color="primary"
            >
            </mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            <mat-checkbox
              [(ngModel)]="element.completed"
              (ngModelChange)="updateAllComplete()"
              color="primary"
            >
            </mat-checkbox>
          </td>
        </ng-container>

        <ng-container matColumnDef="id">
          <th
            mat-header-cell
            *matHeaderCellDef
            mat-sort-header
            class="f-w-600 f-s-15"
          >
            Id
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.id }}
          </td>
        </ng-container>

        <ng-container matColumnDef="billFrom">
          <th
            mat-header-cell
            *matHeaderCellDef
            mat-sort-header
            class="f-w-600 f-s-15"
          >
            Bill From
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.billFrom }}
          </td>
        </ng-container>

        <ng-container matColumnDef="billTo">
          <th
            mat-header-cell
            *matHeaderCellDef
            mat-sort-header
            class="f-w-600 f-s-15"
          >
            Bill To
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.billTo }}
          </td>
        </ng-container>

        <ng-container matColumnDef="totalCost">
          <th
            mat-header-cell
            *matHeaderCellDef
            mat-sort-header
            class="f-w-600 f-s-15"
          >
            Total Cost
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.totalCost }}
          </td>
        </ng-container>

        <ng-container matColumnDef="status">
          <th
            mat-header-cell
            *matHeaderCellDef
            mat-sort-header
            class="f-w-600 f-s-15"
          >
            Status
          </th>

          <td mat-cell *matCellDef="let element" class="f-s-14">
            <span
              class="p-x-8 p-y-4 f-w-500 rounded-pill f-s-12"
              [ngStyle]="{
                'background-color':
                  element.status === 'Shipped'
                    ? 'rgb(93, 135, 255)'
                    : element.status === 'Delivered'
                    ? 'rgb(19, 222, 185)'
                    : element.status === 'Pending'
                    ? 'rgb(255, 174, 31)'
                    : 'transparent',
                color: 'white'
              }"
            >
              {{ element.status }}
            </span>
          </td>
        </ng-container>

        <ng-container matColumnDef="action">
          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-15">
            Action
          </th>
          <td mat-cell *matCellDef="let element" class="d-flex">
            <a
              mat-icon-button
              [routerLink]="['/apps/invoice/editinvoice', element.id]"
              class="d-flex align-items-center justify-content-center"
            >
              <i-tabler
                name="pencil"
                class="icon-18 d-flex align-items-center"
              ></i-tabler>
            </a>
            <a
              mat-icon-button
              [routerLink]="['/apps/invoice/viewInvoice', element.id]"
              class="d-flex align-items-center justify-content-center"
            >
              <i-tabler
                name="eye"
                class="icon-18 d-flex align-items-center"
              ></i-tabler>
            </a>

            <a
              mat-icon-button
              (click)="deleteInvoice(element.id)"
              class="d-flex align-items-center justify-content-center"
            >
              <i-tabler
                name="trash"
                class="icon-18 d-flex align-items-center"
              ></i-tabler>
            </a>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 8, 10]"
        showFirstLastButtons
      ></mat-paginator>
    </div>
  </mat-card-content>
</mat-card>
