<div class="d-flex flex-column wrapper">
  <div class="filter">
    <form [formGroup]="formFilter" class="k-form shadow bg-body rounded">
      <h4>PAGAMENTO DE COMISSAO DE PARCEIROS</h4>

      <div class="row">
        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
          <label class="mt-3">
            <span>Parceiro</span>
            <kendo-combobox
              #partner
              [data]="partners$ | async"
              textField="name"
              valueField="id"
              [kendoDropDownFilter]="{ operator: 'contains' }"
              (selectionChange)="selectPartner($event)"
            ></kendo-combobox>
          </label>
        </div>

        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
          <form [formGroup]="formFilter">
            <div class="row mt-3">
              <div class="col-12">
                <span>Tipo de parceiro</span>
              </div>
              <div class="col-sm-12 col-md-3 col-lg-3">
                <label>
                  <input
                    type="radio"
                    name="type"
                    value="B"
                    #other
                    formControlName="type"
                    kendoRadioButton
                  />
                  <span class="in-line ms-2">Bella Obra</span>
                </label>
              </div>
              <div class="col-sm-12 col-md-3 col-lg-3">
                <label>
                  <input
                    type="radio"
                    name="type"
                    value="P"
                    #other
                    formControlName="type"
                    kendoRadioButton
                  />
                  <span class="in-line ms-2">Parceiros</span>
                </label>
              </div>
              <div class="col-sm-12 col-md-3 col-lg-3">
                <label>
                  <input
                    type="radio"
                    name="type"
                    value="M"
                    #other
                    formControlName="type"
                    kendoRadioButton
                  />
                  <span class="in-line ms-2">Mestre</span>
                </label>
              </div>
              <div class="col-sm-12 col-md-3 col-lg-3">
                <label>
                  <input
                    type="radio"
                    name="type"
                    value="T"
                    #other
                    formControlName="type"
                    kendoRadioButton
                  />
                  <span class="in-line ms-2">Todos</span>
                </label>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="row mt-3">
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
          <label>
            <span>Mês de apuração</span>

            <kendo-datepicker
              #shortDate
              format="MMMM/yyyy"
              [value]="value"
              formControlName="dateMov"
              activeView="year"
              bottomView="year"
            >
            </kendo-datepicker>
          </label>
        </div>
      </div>

      <div class="mt-5 row-buttons">
        <button
          kendoButton
          rounded="medium"
          themeColor="primary"
          (click)="search()"
        >
          Pesquisar
        </button>
        <button
          class="ms-auto"
          kendoButton
          rounded="medium"
          themeColor="primary"
          (click)="showConfirmationPayment()"
        >
          Processar
        </button>
      </div>
    </form>
  </div>
  <main class="flex-fill mt-3">
    <kendo-grid
      [kendoGridBinding]="gridView"
      [height]="800"
      [sortable]="true"
      [filterable]="filterMode"
      (pageChange)="pageChange($event)"
      kendoGridSelectBy="partnerId"
      [(selectedKeys)]="mySelection"
      (groupChange)="onGroupChange($event)"
      [groupable]="{ showFooter: true }"
      [group]="group"
    >
      <ng-template kendoGridToolbarTemplate>
        <button type="button" kendoGridExcelCommand icon="file-excel">
          Export to Excel
        </button>
      </ng-template>
      <kendo-grid-checkbox-column
        [showSelectAll]="true"
        [width]="50"
      ></kendo-grid-checkbox-column>
      <kendo-grid-column
        field="partnerId"
        title="Código Parceiro"
        [width]="80"
      ></kendo-grid-column>
      <kendo-grid-column
        field="name"
        title="Nome"
        [width]="230"
      ></kendo-grid-column>
      <kendo-grid-column
        field="type"
        title="Tipo Parceiro"
        [width]="120"
      ></kendo-grid-column>
      <kendo-grid-column
        field="phone"
        title="Telefone"
        [width]="110"
      ></kendo-grid-column>
      <kendo-grid-column
        field="saleValue"
        title="Venda Líquida"
        [width]="140"
        [class]="{ 'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.saleValue | currency }}</span>
        </ng-template>

        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span> {{ aggregates.saleValue.sum | currency }} </span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column
        field="devolValue"
        title="Devolução"
        [width]="140"
        [class]="{'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.devolValue | currency }}</span>
        </ng-template>

        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span> {{ aggregates.devolValue.sum | currency }} </span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column
        field="previusBalance"
        title="Saldo Anterior"
        [width]="140"
        [class]="{ 'text-end': true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.previusBalance | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span> {{ aggregates.previusBalance.sum | currency }} </span>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        field="commissionValue"
        title="Valor da Comissão"
        [width]="140"
        [class]="{ 'text-end': true }"
        ><ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.commissionValue | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span> {{ aggregates.commissionValue.sum | currency }} </span>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        field="paidValue"
        title="Valor Pago"
        [width]="140"
        [class]="{ 'text-end': true }"
        ><ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.paidValue | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span> {{ aggregates.paidValue.sum | currency }} </span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column
        field="creditValue"
        title="Valor Crédito"
        [width]="140"
        [class]="{ 'text-end': true }"
        ><ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.creditValue | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span> {{ aggregates.creditValue.sum | currency }} </span>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        field="balance"
        title="Valor a pagar"
        [width]="140"
        [class]="{ 'text-end': true }"
        ><ng-template kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.balance | currency }}</span>
        </ng-template>
        <ng-template kendoGridGroupFooterTemplate let-aggregates="aggregates">
          <span> {{ aggregates.balance.sum | currency }} </span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-excel fileName="PagamentoParceiros.xlsx"></kendo-grid-excel>
    </kendo-grid>
  </main>

  <div *ngIf="loading">
    <div class="k-loading-panel">
      <div class="k-loading-panel-mask"></div>
      <div class="k-loading-panel-wrapper">
        <div class="k-loading-panel-text text-center">
          <kendo-loader
            style="justify-content: center"
            type="infinite-spinner"
            themeColor="primary"
            size="large"
          >
          </kendo-loader>
        </div>
        <div class="k-loading-panel-text text-center">
          {{ messageLoading }}
        </div>
      </div>
    </div>
  </div>
</div>

<div *ngIf="openedConfirmationPayment">
  <app-confirmation
    opened="openedConfirmationPayment"
    title="{{ titleMessage }}"
    message="{{ messageConfirmation }}"
    textButtonConfirmation="{{ textButtonConfirmation }}"
    textButtonCancel="{{ textButtonCancel }}"
    (resultEvent)="createPayment($event)"
  ></app-confirmation>
</div>

<div *ngIf="openedInformation">
  <app-message-information
    opened="openedConfirmationPayment"
    title="{{ titleInformation }}"
    message="{{ messageInformation }}"
  ></app-message-information>
</div>

<div *ngIf="openedInformation">
  <app-message-information
    opened="true"
    title="Autorização de desconto"
    message="{{ messageInformation }}"
    (resultEvent)="closeInformation($event)"
  ></app-message-information>
</div>
