<div class="card-dashoard">
  <div class="row">
    <div class="col-12">
      <span class="title-card">
        {{ name }}
      </span>
    </div>
    <div class="col-12">
      <span *ngIf="currency" class="value-card">{{
        valueGoal | currency
      }}</span>
      <span *ngIf="!currency" class="value-card">{{ valueGoal }}</span>
    </div>
    <div class="col-12">
      <div class="row justify-content-center">
        <div class="col-6 text-end">
          <span class="value-real">{{ valueReal | currency }}</span>
        </div>
        <div class="col-6 text-end">
          <span *ngIf="currency" class="delta-value">{{
            valueReal - valueGoal | currency
          }}</span>
        </div>
      </div>
    </div>
    <div class="col-12 mt-2">
      <span *ngIf="monthDayPrevious == 'M'" class="month-prev"
        >Mês anterior</span
      >
      <span *ngIf="monthDayPrevious == 'D'" class="month-prev"
        >Dia anterior</span
      >
    </div>
    <div class="col-12">
      <div class="row">
        <div class="col-6">
          <span *ngIf="monthDayPrevious == 'M'" class="name-month">{{
            previousMonth()
          }}</span>
          <span *ngIf="monthDayPrevious == 'D'" class="name-month">{{
            previousDay()
          }}</span>
        </div>
        <div class="col-6">
          <span *ngIf="currency" class="value-month-prev">{{
            valuePrevReal | currency
          }}</span>
          <span *ngIf="!currency" class="value-month-prev">{{
            valuePrevReal
          }}</span>
        </div>
      </div>
    </div>
    <div class="col-12 text-center mt-2">
      <span
        *ngIf="historySale"
        class="history"
        (click)="executeLink()"
        (click)="openHistorySale()"
      >
        Ver histórico
      </span>
    </div>
  </div>
</div>

<div *ngIf="showHistorySale">
  <kendo-window
    [width]="600"
    [height]="700"
    (close)="closeHistorySale()"
    title="Histório de venda do mês"
  >
    <kendo-grid
      [data]="saleHistory"
      [groupable]="{ showFooter: true }"
      [group]="group"
      [height]="600"
    >
      <kendo-grid-column
        field="date"
        title="Data"
        [width]="120"
        [sticky]="true"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.saleDate | date : "dd/MM/yyyy" }}</span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column
        field="saleValue"
        title="Valor Vendido"
        [width]="120"
        [class]="{ 'text-end': true }"
        [sticky]="true"
      >
        <ng-template
          kendoGridCellTemplate
          let-dataItem
          [class]="{ 'text-end': true }"
        >
          <span>{{ dataItem.saleValue | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span>
            {{ aggregates.saleValue.sum.toFixed(2) | currency }}
          </span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column
        field="devolucao"
        title="Valor devolvido"
        [width]="120"
        [class]="{ 'text-end': true }"
        [sticky]="true"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.devolucao | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span>
            {{ aggregates.devolucao.sum.toFixed(2) | currency }}
          </span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column
        field="amount"
        title="Venda Líquida"
        [width]="120"
        [class]="{ 'text-end': true }"
        [sticky]="true"
      >
        <ng-template
          kendoGridCellTemplate
          let-dataItem
          [class]="{ 'text-end': true }"
        >
          <span>{{ dataItem.amount | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span>
            {{ aggregates.amount.sum.toFixed(2) | currency }}
          </span>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </kendo-window>
</div>
