<div *ngIf="dataTodaySale" class="main-content">
  <main>
    <div class="page-header">
      <h1>Dashboard</h1>
      <small>Faturamento</small>
    </div>

    <div class="page-content">
      <div class="analytics">
        <div class="card">
          <div class="card-head">
            <h2>{{ dataTodaySale.sale | currency : "BRL" }}</h2>
          </div>
          <div class="card-progress">
            <small>Faturamento Líquido</small>
            <div class="card-indicator">
              <div
                class="indicator one"
                [ngStyle]="{ 'width.%': dataTodaySale.percentual }"
              ></div>
            </div>
            <small
              >{{ dataTodaySale.objetivo | currency : "BRL" }} (
              {{ dataTodaySale.percentual | number : "1.0-2" }}% )
            </small>
          </div>
          <div class="mt-3 card-head">
            <small>Devolução</small>
          </div>
          <div class="card-progress">
            <small>
              {{ dataTodaySale.devolution | currency : 'BRL' }}
            </small>
          </div>
        </div>

        <div class="card">
          <div class="card-head">
            <h2>Realizado</h2>
          </div>
          <kendo-arcgauge
            [value]="dataTodaySale.percentual"
            [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"
                >{{ dataTodaySale.percentual | number : "1.0-2" }}%</span
              >
            </ng-template>
          </kendo-arcgauge>
        </div>

        <div class="card">
          <div class="card-head">
            <h2>Margem Líquida</h2>
          </div>
          <kendo-arcgauge
            [value]="dataTodaySale.profit"
            [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"
                >{{ dataTodaySale.profit | number : "1.0-2" }}%</span
              >
            </ng-template>
          </kendo-arcgauge>
          <!-- <div class="card-progress">
            <small>Margem</small>
            <div class="card-indicator">
              <div
                class="indicator two"
                [ngStyle]="{ 'width.%': (dataTodaySale.profit / 30) * 100 }"
              ></div>
            </div>
          </div> -->
        </div>

        <div class="card">
          <div class="card-head">
            <h2>{{ dataTodaySale.nfs | number : "1.0-2" }}</h2>
          </div>
          <div class="card-progress">
            <small>Quantidade de cupons emitidos</small>
            <div class="card-indicator">
              <div class="indicator three" style="width: 65%"></div>
            </div>
          </div>
          <div class="card-head">
            <small>Ticket Médio</small>
          </div>
          <div class="card-progress">
            <small>
              {{ dataTodaySale.sale / dataTodaySale.nfs | number : "1.0-2" }}
            </small>
          </div>
        </div>

        <!--div class="card">
          <div class="card-head">
            <h2>{{ dataTodaySale.devolution | currency : "BRL" }}</h2>
          </div>
          <div class="card-progress">
            <small>Devolução</small>
            <div class="card-indicator">
              <div class="indicator four" style="width: 75%"></div>
            </div>
          </div>
        </!div> -->
      </div>

      <div class="records">
        <kendo-grid [kendoGridBinding]="gridData" [height]="410"  [sortable]="true">
          <kendo-grid-column field="supervisorId" title="#" [width]="50">
          </kendo-grid-column>
          <kendo-grid-column field="name" title="Loja" [width]="320">
          </kendo-grid-column>
          <kendo-grid-column [class]="{ 'text-end': true }" field="objetivo" title="Meta" [width]="150">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{ dataItem.objetivo | currency : "BRL" }}</span
              >
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column [class]="{ 'text-end': true }" field="sale" title="Realizado" [width]="120">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{ dataItem.sale | currency : "BRL" }}</span
              >
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column [class]="{ 'text-end': true }" field="percentual" title="%" [width]="120">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{ dataItem.percentual | number : "1.0-2" }}</span
              >
              <div class="card-indicator">
                <div
                  class="indicator one"
                  [ngStyle]="{ 'width.%': dataItem.percentual }"
                ></div>
              </div>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column [class]="{ 'text-end': true }" field="profit" title="Margem" [width]="80">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span>
                {{ dataItem.profit | number: '1.0-2' }}</span
              >
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column [class]="{ 'text-end': true }" field="devolution" title="Devolução"  [width]="130" >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span>
                {{ dataItem.devolution | currency: 'BRL' }}</span
              >
            </ng-template>
          </kendo-grid-column>
        </kendo-grid>
      </div>
    </div>
  </main>
</div>
