<div class="container">
  <div class="row">

    <div class="col-12 my-3">
      <kendo-expansionpanel title="Pesquisar clientes" [animation]="duration" [expanded]="true">
        <form class="k-form k-form-horizontal" align="start" [formGroup]="form">
          <kendo-formfield showHints="initial" showErrors="always">
            <kendo-label [for]="documento" text="CPF / CNPJ"></kendo-label>
            <kendo-textbox
              class="a-input"
              #documento
              formControlName="document"
              showSuccessIcon="initial"
              showErrorIcon="initial"
            ></kendo-textbox>

            <kendo-formhint align="start">Informe o CPF ou CNPJ somente com números</kendo-formhint>
            <!--kendo-formerror>Error: Amount is required</!--kendo-formerror-->
          </kendo-formfield>

          <kendo-formfield showHints="initial" showErrors="always">
            <kendo-label [for]="name" text="Nome"></kendo-label>
            <kendo-textbox
              class="a-input"
              #name
              formControlName="name"
              showSuccessIcon="initial"
              showErrorIcon="initial"
            ></kendo-textbox>
          </kendo-formfield>

          <div class="mt-3">
            <button class="btn-lg" kendoButton [primary]="true"(click)="searchCustomerByQuery()" >Pesquisar</button>
            <button class="btn-lg k-button k-primary" [routerLink]="['/customer/create']">
              Incluir
            </button>
          </div>
        </form>
      </kendo-expansionpanel>

    </div>

    <div class="container d-flex flex-row">
      <div class="row w-100 justify-content-start">
        <div class="col-12">
          <ng-container *ngIf="customer$ | async as data; else loadingOrError">
            <kendo-grid
              [data]="customer$ | async"
              [pageSize]="20"
              [pageable]="true"
              [sortable]="true"
              [reorderable]="true"
              [resizable]="true"
              [height]="450"
              [columnMenu]="{ filter: true }"
            >

              <kendo-grid-column
                field="customerId"
                title="Código"
                [width]="30"
              >
                <ng-template kendoGridCellTemplate let-dataItem>
                  <div>{{ dataItem.customerId }}</div>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="name" title="Nome" [width]="150">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <div>{{ dataItem.name }}</div>
                </ng-template>
              </kendo-grid-column>

              <kendo-grid-column field="cpfcnpj" title="CPF / CNPJ" [width]="60">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <div>{{ dataItem.cpfCnpj }}</div>
                </ng-template>
              </kendo-grid-column>

              <kendo-grid-column field="phone" title="Telefone" [width]="60">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <div>{{ dataItem.phone }}</div>
                </ng-template>
              </kendo-grid-column>

              <kendo-grid-column field="cellPhone" title="Celular" [width]="60">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <div>{{ dataItem.cellPhone }}</div>
                </ng-template>
              </kendo-grid-column>
            </kendo-grid>
          </ng-container>
          <ng-container *ngIf="!customer$">
            <div class="text-center">Sem registros para exibir.</div>
          </ng-container>

          <ng-template #loadingOrError>
            <ng-container *ngIf="errorObject; else loading"> </ng-container>
          </ng-template>

          <ng-template #loading>
            <ng-container *ngIf="isloading">
              <div class="k-loading-panel">
                <div class="k-loading-panel-mask"></div>
                <div class="k-loading-panel-wrapper">
                  <kendo-loader
                    [type]="'infinite-spinner'"
                    [themeColor]="'primary'"
                    [size]="'large'"
                  >
                  </kendo-loader>
                  <div class="k-loading-panel-text">Aguarde...</div>
                </div>
              </div>
            </ng-container>
          </ng-template>

          <div kendoDialogContainer></div>
        </div>
      </div>

    </div>

    <div class="col-12"></div>
  </div>
</div>
