<div class="container d-flex flex-column h-100 p-0">
  <div class="row mx-1">
    <div class="col-sm-12 p-2">
      <div class="k-form shadow bg-body rounded p-3">
        <h4>EXTRATO DA MOVIMENTAÇÃO DOS PARCEIROS</h4>
        <label class="w-100">
          <span>Parceiro</span>
          <kendo-combobox
            #partner
            [data]="partners$ | async"
            textField="name"
            valueField="id"
            [kendoDropDownFilter]="{ operator: 'contains' }"
            (selectionChange)="selectPartner($event)"
          ></kendo-combobox>
        </label>
        <kendo-daterange #daterange>
          <div class="row">
            <div class="col-12 col-sm-12 col-md-6 col-lg-3">
              <kendo-floatinglabel text="Inicio">
                <kendo-dateinput
                  kendoDateRangeStartInput
                  [(value)]="range.start"
                ></kendo-dateinput>
              </kendo-floatinglabel>
            </div>

            <div class="col-12 col-sm-12 col-md-6 col-lg-3">
              <kendo-floatinglabel text="Fim">
                <kendo-dateinput
                  kendoDateRangeEndInput
                  [(value)]="range.end"
                ></kendo-dateinput>
              </kendo-floatinglabel>
            </div>
          </div>
        </kendo-daterange>

        <div class="mt-3 row-buttons">
          <button
            kendoButton
            rounded="medium"
            themeColor="primary"
            (click)="getComission()"
          >
            Pesquisar
          </button>
        </div>
      </div>
    </div>
    <!-- <div class="col-sm-12">
        <kendo-daterange>
          <kendo-floatinglabel text="Início" style="width: 120px">
            <kendo-dateinput
              kendoDateRangeStartInput
              [(value)]="range.start"
            ></kendo-dateinput>
          </kendo-floatinglabel>
          <kendo-floatinglabel class="ms-2" text="Término" style="width: 120px">
            <kendo-dateinput
              #endDateInput
              kendoDateRangeEndInput
              [(value)]="range.end"
            ></kendo-dateinput>
          </kendo-floatinglabel>
          <kendo-daterange-popup>
            <ng-template kendoDateRangePopupTemplate>
              <kendo-multiviewcalendar kendoDateRangeSelection>
              </kendo-multiviewcalendar>
            </ng-template>
          </kendo-daterange-popup>
        </kendo-daterange>
      </div>
      <div class="col-sm-12 mt-2">
        <button kendoButton (click)="getComission()">Pesquisar</button>
      </div> -->
  </div>

  <div class="flex-fill mt-3">
    <kendo-grid
      [data]="gridData"
      [resizable]="true"
      [scrollable]="true"
      [loading]="loading"
      style="height: 100hv; width: 100wv"
    >
      <ng-template kendoGridNoRecordsTemplate>
        <h4>Sem registros para serem exibidos.</h4>
        <p>Verifique o período informado e pesquise novamente.</p>
      </ng-template>

      <ng-template class="mt-4" kendoGridLoadingTemplate>
        <div class="k-loading-color"></div>
        <div class="loading-container">
          <kendo-loader type="converging-spinner" size="large"></kendo-loader>
        </div>
      </ng-template>

      <kendo-grid-column media="(max-width: 450px)" title="Movimentação">
        <ng-template kendoGridCellTemplate let-dataItem>
          <!-- template for mobile -->
          <div
            *ngIf="
              dataItem.type != 'DEPOSITO' &&
              dataItem.type != 'SALDO MES' &&
              dataItem.type != 'SALDO INICIAL'
            "
          >
            <dl>
              <div class="row">
                <div class="col-3">
                  <dt>Tipo</dt>
                  <dd>
                    <span
                      *ngIf="dataItem.type == 'VENDA'"
                      class="badge bg-primary"
                      >{{ dataItem.type }}</span
                    >
                    <span
                      *ngIf="dataItem.type == 'DEVOLUCAO'"
                      class="badge bg-danger"
                      >{{ dataItem.type }}</span
                    >
                    <span
                      *ngIf="dataItem.type == 'DEPOSITO'"
                      class="badge bg-warning"
                      >{{ dataItem.type }}</span
                    >
                    <span
                      *ngIf="dataItem.type == 'CREDITO'"
                      class="badge bg-warning"
                      >{{ dataItem.type }}</span
                    >
                  </dd>
                </div>
                <div class="col-3">
                  <dt>Loja</dt>
                  <dd>{{ dataItem.store }}</dd>
                </div>
                <div class="col-6">
                  <dt>Cliente</dt>
                  <dd>
                    <small> {{ dataItem.customer }}</small>
                  </dd>
                </div>
              </div>

              <div class="row">
                <div class="col-3">
                  <dt>Nota</dt>
                  <dd>{{ dataItem.number }}</dd>
                </div>
                <div class="col-3">
                  <dt>Data</dt>
                  <dd>{{ dataItem.dateSale | date:'dd/MM/yyyy':'UTC' }}</dd>
                </div>
                <div class="col-6">
                  <dt>Vendedor</dt>
                  <dd>
                    <small> {{ dataItem.seller }}</small>
                  </dd>
                </div>
              </div>

              <div class="row">
                <div class="col-4">
                  <dt>Valor</dt>
                  <dd>{{ dataItem.valueSale | currency }}</dd>
                </div>
                <div class="col-4">
                  <dt>Comissão</dt>
                  <dd>{{ dataItem.valueCommission | currency }}</dd>
                </div>
                <div class="col-4">
                  <dt>Saldo</dt>
                  <dd>{{ dataItem.balance | currency }}</dd>
                </div>
              </div>
            </dl>
          </div>

          <div *ngIf="dataItem.type == 'DEPOSITO'">
            <dl>
              <div class="row">
                <div class="col-3">
                  <dt>Tipo</dt>
                  <dd>
                    <span
                      *ngIf="dataItem.type == 'VENDA'"
                      class="badge bg-primary"
                      >{{ dataItem.type }}</span
                    >
                    <span
                      *ngIf="dataItem.type == 'DEVOLUCAO'"
                      class="badge bg-danger"
                      >{{ dataItem.type }}</span
                    >
                    <span
                      *ngIf="dataItem.type == 'DEPOSITO'"
                      class="badge bg-warning"
                      >{{ dataItem.type }}</span
                    >
                    <span
                      *ngIf="dataItem.type == 'CREDITO'"
                      class="badge bg-warning"
                      >{{ dataItem.type }}</span
                    >
                  </dd>
                </div>
                <div class="col-3">
                  <dt>Loja</dt>
                  <dd>{{ dataItem.store }}</dd>
                </div>
                <div class="col-6">
                  <dt>Forma de pagamento</dt>
                  <dd>
                    <span class="badge bg-warning">{{
                      dataItem.paidType
                    }}</span>
                  </dd>
                </div>
              </div>

              <div class="row">
                <div class="col-3">
                  <dt>data</dt>
                  <dd>{{ dataItem.dateSale | date:'dd/MM/yyyy':'UTC' }}</dd>
                </div>
                <div class="col-3">
                  <dt>Pagto</dt>
                  <dd>{{ dataItem.datePaid | date:'dd/MM/yyyy':'UTC' }}</dd>
                </div>
                <div class="col-3">
                  <dt>Valor</dt>
                  <dd>{{ dataItem.valueCreate | currency }}</dd>
                </div>
                <div class="col-3">
                  <dt>Saldo</dt>
                  <dd>{{ dataItem.balance | currency }}</dd>
                </div>
              </div>
            </dl>
          </div>
          <div *ngIf="dataItem.type == 'SALDO INICIAL'">
            <dl>
              <div class="row">
                <div class="col-4">
                  <dt>Tipo</dt>
                  <dd>
                    <span
                      *ngIf="dataItem.type == 'SALDO INICIAL'"
                      class="badge bg-success"
                      >{{ dataItem.type }}</span
                    >
                  </dd>
                </div>
                <div class="col-4">
                  <dt>Data</dt>
                  <dd>{{ dataItem.dateSale | date:'dd/MM/yyyy':'UTC' }}</dd>
                </div>
                <div class="col-4">
                  <dt>Saldo</dt>
                  <dd>{{ dataItem.balance | currency }}</dd>
                </div>
              </div>
            </dl>
          </div>

          <div *ngIf="dataItem.type == 'SALDO MES'">
            <dl>
              <div class="row">
                <div class="col-3">
                  <dt>Tipo</dt>
                  <dd>
                    <span class="badge bg-secondary">{{ dataItem.type }}</span>
                  </dd>
                </div>
                <div class="col-3">
                  <dt>Data</dt>
                  <dd>{{ dataItem.dateSale | date:'dd/MM/yyyy':'UTC' }}</dd>
                </div>
                <div class="col-3">
                  <dt>Saldo</dt>
                  <dd>{{ dataItem.valueCommission | currency }}</dd>
                </div>
                <div class="col-3">
                  <dt>Saldo</dt>
                  <dd>{{ dataItem.balance | currency }}</dd>
                </div>
              </div>
            </dl>
          </div>
        </ng-template>
      </kendo-grid-column>

      <!-- columns for mid-size devices -->
      <kendo-grid-column
        media="(min-width: 450px)"
        field="store"
        title="Loja"
        [width]="50"
      >
      </kendo-grid-column>
      <kendo-grid-column
        media="(min-width: 450px)"
        field="type"
        title="Tipo"
        [width]="100"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <span
            *ngIf="dataItem.type == 'SALDO INICIAL'"
            class="badge bg-success"
            >{{ dataItem.type }}</span
          >
          <span
            *ngIf="dataItem.type == 'SALDO MES'"
            class="badge bg-secondary"
            >{{ dataItem.type }}</span
          >
          <span *ngIf="dataItem.type == 'VENDA'" class="badge bg-primary">{{
            dataItem.type
          }}</span>
          <span *ngIf="dataItem.type == 'DEVOLUCAO'" class="badge bg-danger">{{
            dataItem.type
          }}</span>
          <span *ngIf="dataItem.type == 'DEPOSITO'" class="badge bg-warning">{{
            dataItem.type
          }}</span>
          <span *ngIf="dataItem.type == 'CREDITO'" class="badge bg-warning">{{
            dataItem.type
          }}</span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column
        media="(min-width: 450px)"
        field="dateSale"
        title="Data venda"
        [width]="100"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.dateSale | date:'dd/MM/yyyy':'UTC' }}
        </ng-template>
      </kendo-grid-column>

      <!-- additional columns on large devices -->
      <kendo-grid-column
        media="(min-width: 680px)"
        field="number"
        title="Número NF"
        [width]="90"
      >
      </kendo-grid-column>
      <kendo-grid-column
        media="(min-width: 680px)"
        field="seller"
        title="Vendedor"
        [width]="130"
      >
      </kendo-grid-column>
      <kendo-grid-column
        media="(min-width: 680px)"
        field="customer"
        title="Cliente"
        [width]="180"
      >
      </kendo-grid-column>

      <kendo-grid-column
        media="(min-width: 680px)"
        field="valueSale"
        title="Valor venda"
        [width]="110"
        [class]="{ 'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.valueSale | currency }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        media="(min-width: 680px)"
        field="pecentCommission"
        title="%Comis"
        [width]="80"
        [class]="{ 'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.pecentCommission | number : "1.2-2" }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        media="(min-width: 680px)"
        field="valueCommission"
        title="Vl Comissão"
        [width]="100"
        [class]="{ 'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.valueCommission | currency }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        media="(min-width: 680px)"
        field="valueCreate"
        title="Vl Gerado"
        [width]="100"
        [class]="{ 'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.valueCreate | currency }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        media="(min-width: 680px)"
        field="datePaid"
        title="Data Pagto"
        [width]="100"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.datePaid | date:'dd/MM/yyyy':'UTC' }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        media="(min-width: 680px)"
        field="balance"
        title="Saldo"
        [width]="100"
        [class]="{ 'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.balance | currency }}
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>
</div>
