  <div class="d-flex flex-column wrapper">
    <header class="header-productlist fixed-top">
      <div class="container-fluid">
        <div class="row g-0 align-items-center">
          <div class="col-2">
            <a href="/#/menu/">
              <div class="logo"></div>
            </a>
            <!--img class="logo" src="assets/img/logo.svg" alt="" (click)="openMenu()"/-->
          </div>
          <div class="col-8 px-5"></div>
        </div>
      </div>
    </header>
    <main class="container-fluid">
      <div *ngIf="dataTodaySale" class="main-content">
        <div class="row w-100 h-100">
          <div class="col-sm-12 col-md-5">
            <div>
              <!--class="analytics"-->
              <div class="row w-100 g-2">
                <div class="col-sm-12 col-md-6">
                  <div class="card">
                    <div class="card-head">
                      <h2>Realizado hora</h2>
                    </div>
                    <kendo-arcgauge
                      [value]="dataTodaySale.percentualObjetiveHour"
                      [colors]="colors"
                      style="display: block; height: 150px"
                    >
                      <kendo-arcgauge-scale
                        [majorTicks]="{ visible: showTicks, color: ticksColor }"
                        [minorTicks]="{ visible: showTicks, color: ticksColor }"
                        [reverse]="reverse"
                        [startAngle]="startAngle"
                        [endAngle]="endAngle"
                        [rangePlaceholderColor]="rangePlaceholderColor"
                        [rangeSize]="rangeSize"
                        [rangeLineCap]="rangeLineCap"
                      >
                        <kendo-arcgauge-scale-labels
                          [color]="labelsColor"
                          [visible]="showLabels"
                        >
                        </kendo-arcgauge-scale-labels>
                      </kendo-arcgauge-scale>
                      <ng-template
                        kendoArcGaugeCenterTemplate
                        let-value="value"
                        let-color="color"
                      >
                        <span [style.color]="color" style="font-size: 1.5rem"
                          >{{
                            dataTodaySale.percentualObjetiveHour
                              | number : "1.0-2"
                          }}%</span
                        >
                      </ng-template>
                    </kendo-arcgauge>
                  </div>
                </div>

                <div class="col-sm-12 col-md-6">
                  <div class="card">
                    <div class="card-head">
                      <h2>Realizado Dia</h2>
                    </div>
                    <kendo-arcgauge
                      [value]="
                        (dataTodaySale.saleToday / dataTodaySale.objetiveToday) *
                        100
                      "
                      [colors]="colors"
                      style="display: block; height: 150px"
                    >
                      <kendo-arcgauge-scale
                        [majorTicks]="{ visible: showTicks, color: ticksColor }"
                        [minorTicks]="{ visible: showTicks, color: ticksColor }"
                        [reverse]="reverse"
                        [startAngle]="startAngle"
                        [endAngle]="endAngle"
                        [rangePlaceholderColor]="rangePlaceholderColor"
                        [rangeSize]="rangeSize"
                        [rangeLineCap]="rangeLineCap"
                      >
                        <kendo-arcgauge-scale-labels
                          [color]="labelsColor"
                          [visible]="showLabels"
                        >
                        </kendo-arcgauge-scale-labels>
                      </kendo-arcgauge-scale>
                      <ng-template
                        kendoArcGaugeCenterTemplate
                        let-value="value"
                        let-color="color"
                      >
                        <span [style.color]="color" style="font-size: 1.5rem"
                          >{{
                            (dataTodaySale.saleToday /
                              dataTodaySale.objetiveToday) *
                              100 | number : "1.0-2"
                          }}%</span
                        >
                      </ng-template>
                    </kendo-arcgauge>
                  </div>
                </div>

                <div class="col-sm-12 col-md-6">
                  <div class="card">
                    <div class="card-head">
                      <h2>Realizado até ontem</h2>
                    </div>
                    <kendo-arcgauge
                      [value]="
                        (dataTodaySale.sale / dataTodaySale.objetive) * 100
                      "
                      [colors]="colors"
                      style="display: block; height: 150px"
                    >
                      <kendo-arcgauge-scale
                        [majorTicks]="{ visible: showTicks, color: ticksColor }"
                        [minorTicks]="{ visible: showTicks, color: ticksColor }"
                        [reverse]="reverse"
                        [startAngle]="startAngle"
                        [endAngle]="endAngle"
                        [rangePlaceholderColor]="rangePlaceholderColor"
                        [rangeSize]="rangeSize"
                        [rangeLineCap]="rangeLineCap"
                      >
                        <kendo-arcgauge-scale-labels
                          [color]="labelsColor"
                          [visible]="showLabels"
                        >
                        </kendo-arcgauge-scale-labels>
                      </kendo-arcgauge-scale>
                      <ng-template
                        kendoArcGaugeCenterTemplate
                        let-value="value"
                        let-color="color"
                      >
                        <span [style.color]="color" style="font-size: 1.5rem"
                          >{{
                            (dataTodaySale.sale / dataTodaySale.objetive) * 100
                              | number : "1.0-2"
                          }}%</span
                        >
                      </ng-template>
                    </kendo-arcgauge>
                  </div>
                </div>

                <div class="col-sm-12 col-md-6">
                  <div class="card">
                    <div class="card-head">
                      <h2>Margem Líquida Dia</h2>
                    </div>
                    <kendo-arcgauge
                      [value]="dataTodaySale.profitPerc"
                      [colors]="colorsProfit"
                      style="display: block; height: 150px"
                    >
                      <kendo-arcgauge-scale
                        [majorTicks]="{ visible: showTicks, color: ticksColor }"
                        [minorTicks]="{ visible: showTicks, color: ticksColor }"
                        [reverse]="reverse"
                        [max]="40"
                        [startAngle]="startAngle"
                        [endAngle]="endAngle"
                        [rangePlaceholderColor]="rangePlaceholderColor"
                        [rangeSize]="rangeSize"
                        [rangeLineCap]="rangeLineCap"
                      >
                        <kendo-arcgauge-scale-labels
                          [color]="labelsColor"
                          [visible]="showLabels"
                        >
                        </kendo-arcgauge-scale-labels>
                      </kendo-arcgauge-scale>
                      <ng-template
                        kendoArcGaugeCenterTemplate
                        let-value="value"
                        let-color="color"
                      >
                        <span [style.color]="color" style="font-size: 1.5rem"
                          >{{
                            dataTodaySale.profitPerc | number : "1.0-2"
                          }}%</span
                        >
                      </ng-template>
                    </kendo-arcgauge>
                  </div>
                </div>

                <div class="col-sm-12 col-md-6">
                  <div class="card">
                    <div class="card-head">
                      <h2>{{ dataTodaySale.saleToday | currency : "BRL" }}</h2>
                    </div>
                    <div class="card-progress">
                      <small>Faturamento Dia</small>
                      <div class="card-indicator">
                        <div
                          class="indicator one"
                          [ngStyle]="{
                            'width.%':
                              (dataTodaySale.saleToday /
                                dataTodaySale.objetiveToday) *
                              100
                          }"
                        ></div>
                      </div>
                      <span style="font-weight: bold; font-size: 1.1rem"
                        >{{ dataTodaySale.objetiveToday | currency : "BRL" }} (
                        {{
                          (dataTodaySale.saleToday /
                            dataTodaySale.objetiveToday) *
                            100 | number : "1.0-2"
                        }}% )
                      </span>
                    </div>
                    <div class="mt-3 card-head">
                      <span style="font-weight: bold; font-size: 1rem"
                        >Ticket Médio Dia</span
                      >
                    </div>
                    <div class="card-progress">
                      <span style="font-weight: bold; font-size: 1.1rem">
                        {{
                          dataTodaySale.saleToday / dataTodaySale.nfsToday
                            | currency : "BRL"
                        }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-7">
            <div class="records">
              <kendo-grid [kendoGridBinding]="gridData" [sortable]="true">
                <kendo-grid-column
                  field="store"
                  title="Loja"
                  [sticky]="true"
                  [width]="250"
                >
                  <ng-template kendoGridHeaderTemplate>
                    <span class="header-grid"> Loja </span>
                  </ng-template>
                  <ng-template kendoGridCellTemplate let-dataItem>
                    <kendo-icon
                      *ngIf="dataItem.percentualObjectiveHour >= 100"
                      class="k-i-check-circle"
                      style="color: green"
                    ></kendo-icon>
                    <kendo-icon
                      *ngIf="dataItem.percentualObjectiveHour < 100"
                      class="k-i-close-circle"
                      style="color: red"
                    ></kendo-icon>
                    <span class="ms-2 item-grid">{{ dataItem.store }}</span>
                  </ng-template>
                </kendo-grid-column>

                <kendo-grid-column
                  [class]="{ 'text-end': true }"
                  [footerClass]="{ 'text-end': true }"
                  field="objetiveToday"
                  title="Meta dia"
                  [width]="115"
                >
                  <ng-template kendoGridHeaderTemplate>
                    <span class="header-grid"> Meta Dia </span>
                  </ng-template>

                  <ng-template kendoGridCellTemplate let-dataItem>
                    <span class="item-grid">
                      {{ dataItem.objetiveToday | currency : "BRL" }}</span
                    >
                  </ng-template>
                  <ng-template kendoGridFooterTemplate>
                    <span class="footer-grid">
                      {{
                        this.dataTodaySale.objetiveToday | currency : "BRL"
                      }}</span
                    >
                  </ng-template>
                </kendo-grid-column>

                <kendo-grid-column
                  [class]="{ 'text-end': true }"
                  field="ObjetivoHour"
                  title="Meta Hora"
                  [width]="115"
                  [footerClass]="{ 'text-end': true }"
                >
                <ng-template kendoGridHeaderTemplate>
                  <span class="header-grid">Meta Hora</span>
                </ng-template>
                  <ng-template kendoGridCellTemplate let-dataItem>
                    <span class="item-grid">
                      {{ dataItem.objetiveHour | currency : "BRL" }}</span
                    >
                  </ng-template>
                  <ng-template kendoGridFooterTemplate>
                    <span class="footer-grid">
                      {{
                        this.dataTodaySale.objetiveHour | currency : "BRL"
                      }}</span
                    >
                  </ng-template>
                </kendo-grid-column>

                <kendo-grid-column
                  [class]="{ 'text-end': true }"
                  field="nfsToday"
                  title="Qtde Nfs"
                  [width]="70"
                  [footerClass]="{ 'text-end': true }"
                >
                <ng-template kendoGridHeaderTemplate>
                  <span class="header-grid">Qtde Nfs</span>
                </ng-template>
                  <ng-template kendoGridCellTemplate let-dataItem>
                    <span class="item-grid"> {{ dataItem.qtdeInvoiceDay }}</span>
                  </ng-template>
                  <ng-template kendoGridFooterTemplate>
                    <span class="footer-grid"> {{ this.dataTodaySale.nfsToday }}</span>
                  </ng-template>
                </kendo-grid-column>

                <kendo-grid-column
                  [class]="{ 'text-end': true }"
                  [footerClass]="{ 'text-end': true }"
                  field="saleToday"
                  title="Venda dia"
                  [width]="115"
                >
                <ng-template kendoGridHeaderTemplate>
                  <span class="header-grid">Venda dia</span>
                </ng-template>
                  <ng-template kendoGridCellTemplate let-dataItem>
                    <span class="item-grid">
                      {{ dataItem.saleToday | currency : "BRL" }}</span
                    >
                  </ng-template>
                  <ng-template kendoGridFooterTemplate>
                    <span class="footer-grid">
                      {{ this.dataTodaySale.saleToday | currency : "BRL" }}</span
                    >
                  </ng-template>
                </kendo-grid-column>

                <kendo-grid-column
                  [class]="{ 'text-end': true }"
                  [footerClass]="{ 'text-end': true }"
                  field="percentualObjectiveHour"
                  title="% Hora"
                  [width]="80"
                >
                <ng-template kendoGridHeaderTemplate>
                  <span class="header-grid">% Hora</span>
                </ng-template>
                  <ng-template kendoGridCellTemplate let-dataItem>
                    <span class="item-grid" style="text-align: right">
                      {{
                        dataItem.percentualObjectiveHour | number : "1.0-2"
                      }}</span
                    >
                  </ng-template>
                  <ng-template kendoGridFooterTemplate>
                    <span class="footer-grid">
                      {{
                        (this.dataTodaySale.saleToday /
                          (this.dataTodaySale.objetiveHour == 0
                            ? 1
                            : this.dataTodaySale.objetiveHour)) *
                          100 | number : "1.0-2"
                      }}%</span
                    >
                  </ng-template>
                </kendo-grid-column>

                <kendo-grid-column
                  [class]="{ 'text-end': true }"
                  [footerClass]="{ 'text-end': true }"
                  field="percentualObjectiveHour"
                  title="% Dia"
                  [width]="80"
                >
                <ng-template kendoGridHeaderTemplate>
                  <span class="header-grid">% Dia</span>
                </ng-template>
                  <ng-template kendoGridCellTemplate let-dataItem>
                    <span class="item-grid" style="text-align: right">
                      {{
                        (dataItem.saleToday / dataItem.objetiveToday) * 100
                          | number : "1.0-2"
                      }}</span
                    >
                  </ng-template>
                  <ng-template kendoGridFooterTemplate>
                    <span class="footer-grid">
                      {{
                        (this.dataTodaySale.saleToday /
                          (this.dataTodaySale.objetiveToday == 0
                            ? 1
                            : this.dataTodaySale.objetiveToday)) *
                          100 | number : "1.0-2"
                      }}%</span
                    >
                  </ng-template>
                </kendo-grid-column>
              </kendo-grid>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

