<div *ngIf="dataSellerSale" class="main-content">
  <main>
    <div class="page-header">
      <h1>Dashboard - Venda mês</h1>
      <div class="row w-100">
        <div class="col-sm-12 col-md-12">
          <h3>
            {{ dataSellerSale.saleSupervisor[0].supervisorId }}-{{
              dataSellerSale.saleSupervisor[0].store
            }}
          </h3>
        </div>
        <div *ngIf="allowFilter" class="col-sm-12 col-md-2 mt-2" style="height: 40px">
          <button kendoButton (click)="showDialogFilter()" themeColor="primary" style="height: 100%; width: 100%;">Filtrar</button>
        </div>
      </div>
    </div>

    <div class="page-content">
      <div class="analytics">
        <div class="card">
          <div class="card-head">
            <h2>{{ dataSellerSale.saleToday | currency : "BRL" }}</h2>
          </div>
          <div class="card-progress">
            <small>Faturamento Dia</small>
            <div class="card-indicator">
              <div
                class="indicator one"
                [ngStyle]="{
                  'width.%':
                    (dataSellerSale.saleToday / dataSellerSale.objetiveToday) *
                    100
                }"
              ></div>
            </div>
            <small
              >{{ dataSellerSale.objetiveToday | currency : "BRL" }} (
              {{
                (dataSellerSale.saleToday / dataSellerSale.objetiveToday) * 100
                  | number : "1.0-2"
              }}% )
            </small>
          </div>
          <div class="mt-3 card-head">
            <small>Ticket Médio Dia</small>
          </div>
          <div class="card-progress">
            <small>
              {{
                dataSellerSale.saleToday / dataSellerSale.nfsToday
                  | currency : "BRL"
              }}
            </small>
          </div>
        </div>

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

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

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

        <!-- <div class="card">
          <div class="card-head">
            <h2>{{ dataSellerSale.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>
              {{ dataSellerSale.sale / dataSellerSale.nfs | number : "1.0-2" }}
            </small>
          </div>
        </div> -->
      </div>

      <div class="records">
        <kendo-grid
          [kendoGridBinding]="gridData"
          [height]="410"
          [sortable]="true"
        >
          <kendo-grid-column
            field="sellerName"
            title="Vendedor"
            [sticky]="true"
            [width]="250"
          >
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="ObjetivoSale"
            title="Meta dia"
            [width]="140"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.ObjetivoSale | currency : "BRL" }}</span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="ObjetivoHour"
            title="Meta Hora"
            [width]="140"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.objetiveHour | currency : "BRL" }}</span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="saleToday"
            title="Venda dia"
            [width]="140"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.saleToday | currency : "BRL" }}</span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="percentualObjectiveHour"
            title="% Hora"
            [width]="120"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{ dataItem.percentualObjectiveHour | number : "1.0-2" }}</span
              >
              <div class="card-indicator">
                <div
                  class="indicator one"
                  [ngStyle]="{ 'width.%': dataItem.percentualObjectiveHour }"
                ></div>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="percentualObjectiveHour"
            title="% Dia"
            [width]="120"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{
                  (dataItem.saleToday / dataItem.ObjetivoSale) * 100
                    | number : "1.0-2"
                }}</span
              >
              <div class="card-indicator">
                <div
                  class="indicator one"
                  [ngStyle]="{
                    'width.%':
                      (dataItem.saleToday / dataItem.ObjetivoSale) * 100
                  }"
                ></div>
              </div>
            </ng-template>
          </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="saleValue"
            title="Realizado"
            [width]="140"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{ dataItem.saleValue | currency : "BRL" }}</span
              >
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="dif"
            title="Dif"
            [width]="140"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{ dataItem.dif | currency : "BRL" }}</span
              >
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="percentualObjective"
            title="%"
            [width]="120"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span style="text-align: right">
                {{ dataItem.percentualObjective | number : "1.0-2" }}</span
              >
              <div class="card-indicator">
                <div
                  class="indicator one"
                  [ngStyle]="{ 'width.%': dataItem.percentualObjective }"
                ></div>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="qtdeInvoice"
            title="Qtde NFs"
            [width]="80"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.qtdeInvoice | number : "1.0-0" }}</span>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="ticket"
            title="Ticket Médio"
            [width]="110"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.ticket | currency : "BRL" }}</span>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="discountValue"
            title="Desconto"
            [width]="120"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.discountValue | currency : "BRL" }}</span>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="mix"
            title="Mix"
            [width]="100"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.mix | number : "1.0-0" }}</span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="preSaleQtde"
            title="Qtde Orçamento"
            [width]="140"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.preSaleQtde | number : "1.0-0" }}</span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column
            [class]="{ 'text-end': true }"
            field="preSaleValue"
            title="VL Orçamento"
            [width]="140"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              <span> {{ dataItem.preSaleValue | currency : "BRL" }}</span>
            </ng-template>
          </kendo-grid-column>
        </kendo-grid>
      </div>
    </div>
  </main>
</div>

<kendo-dialog
  *ngIf="showFilter"
  autoFocusedElement="#supervisor"
  title="Informe os filtros desejados"
  (close)="closeDialogFilter('cancel')"
  [minWidth]="350"
  [width]="350"
  [maxHeight]="450"
>
  <div style="margin: 30px; text-align: left">
    <p>Selecione o(s) supervisor(es) desejados</p>
    <kendo-multiselecttree
      [checkAll]="true"
      [size]="size"
      [(value)]="selectedSupervisores"
      kendoMultiSelectTreeExpandable
      [kendoMultiSelectTreeHierarchyBinding]="supervisores$ | async"
      textField="name"
      valueField="supervisorId"
    >
    </kendo-multiselecttree>
    <!-- <div class="row w-100 mt-2">
      <div class="col-12">
        <span>Data Inicial</span>
        <kendo-datepicker
          calendarType="infinite"
          [value]="dateFilterInitial"
        ></kendo-datepicker>
      </div>
      <div class="col-12">
        <span>Data Final</span>
        <kendo-datepicker
          calendarType="infinite"
          [value]="dateFilterFinal"
        ></kendo-datepicker>
      </div>
    </div> -->
  </div>
  <kendo-dialog-actions style="height: 40px">
    <button kendoButton style="height: 100%;" (click)="closeDialogFilter('no')">Cancelar</button>
    <button kendoButton style="height: 100%;" (click)="closeDialogFilter('yes')" themeColor="primary">
      Filtrar
    </button>
  </kendo-dialog-actions>
</kendo-dialog>
