<header class="sticky-top">
  <app-header-system></app-header-system>
</header>

<main>
  <div class="container mt-3 d-flex">
    <div class="row flex-fill">
      <div class="col-12 col-sm-12 col-md-4 shadow-sm p-3 mb-3 bg-body rounded">
        <div class="app-card p-3">
          <h4>Cliente</h4>
          <div class="row">

            <div *ngIf="!saleCustomer" class="col-12 col justity-self-center">
              <img
              class="card-img-top"
              style="margin: 10px; height: 200px; width: 200px"
              src="../../../assets/img/SelectCustomer.png"
            />
            <span class="break-column"
              >Selecione o cliente para esta venda</span
            >
            <button kendoButton class="break-column btn-dark">
              Selecionar cliente
            </button>
            </div>

            <div *ngIf="saleCustomer" class="col-12">
              <div class="">
                <div class="row">
                  <div class="col-4">
                    <span>Nome</span><br />
                    <span>CPF/CNPJ</span><br />
                    <span>Endereço</span><br />
                    <span>Número</span><br />
                    <span>Complemento</span><br />
                    <span>Bairro</span><br />
                    <span>Cidade</span><br />
                    <span>UF</span><br />
                    <span>CEP</span><br />
                  </div>
                  <div class="col-8">
                    <span>{{ saleCustomer.name }}</span
                    ><br />
                    <span>{{ saleCustomer.cpfCnpj }}</span
                    ><br />
                    <span>{{ saleCustomer.address }}</span
                    ><br />
                    <span>{{ saleCustomer.addressNumber }}</span
                    ><br />
                    <span>{{ saleCustomer.complement }}</span
                    ><br />
                    <span>{{ saleCustomer.neighborhood }}</span
                    ><br />
                    <span>{{ saleCustomer.city }}</span
                    ><br />
                    <span>{{ saleCustomer.state }}</span
                    ><br />
                    <span>{{ saleCustomer.zipCode }}</span
                    ><br />
                  </div>
                </div>
                <div class="row justify-content-end">
                  <div class="col-4 justify-items-end">
                    <button kendoButton look="clear" (click)="openWindow()">
                      Alterar cliente
                    </button>
                  </div>
                </div>
                <div class="k-overlay" *ngIf="openedCustomer"></div>

                <kendo-window
                  title="Selecione o cliente desejado"
                  *ngIf="openedCustomer"
                  [width]="750"
                  [minWidth]="450"
                  (close)="close()"
                >
                  <div class="my-3">
                    <form class="k-form">
                      <kendo-label [for]="searchCustomer" text="Nome do cliente">
                      </kendo-label>
                      <kendo-textbox
                        #searchCustomer
                        [formControl]="queryField"
                        placeholder="Informe o nome do cliente"
                      ></kendo-textbox>
                    </form>
                  </div>

                  <div class="grid-wrapper">
                    <kendo-grid
                      [data]="customers"
                      [height]="350"
                      [selectable]="selectableSettigns"
                      (selectionChange)="onSelectionChangeCustomer($event)"
                    >
                      <kendo-grid-column
                        field="codigoCliente"
                        title="Código"
                        width="80"
                      ></kendo-grid-column>
                      <kendo-grid-column
                        field="cpfCnpj"
                        width="120"
                      ></kendo-grid-column>
                      <kendo-grid-column field="name" width="300"></kendo-grid-column>
                    </kendo-grid>
                  </div>
                </kendo-window>
              </div>
            </div>

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

      <div class="col-12 col-sm-12 col-md-4 shadow-sm p-3 mb-3 bg-body rounded">
        <div class="p-3">
          <h4>Endereço de entrega</h4>

        </div>
      </div>

      <div class="col-12 col-sm-12 col-md-4 shadow-sm p-3 mb-3 bg-body rounded">
        <div class="p-3">
          <h4>Forma de pagamento</h4>
          <div class="row">
            <div class="col-12">
              <form class="k-form">
                <kendo-label
                  class="mb-1"
                  [for]="paymentPlan"
                  text="Plano de pagamento"
                ></kendo-label>
                <kendo-combobox
                  #paymentPlan
                  [data]="paymentPlan$ | async"
                  [valueField]="'codplpag'"
                  [textField]="'descricao'"
                  [placeholder]="'Selecione o plano de pagamento'"
                  (valueChange)="setPaymentoPlan($event)"
                >
                </kendo-combobox>
                <kendo-label
                  class="mt-2 mb-1"
                  [for]="paymentPlan"
                  text="Cobrança"
                ></kendo-label>
                <kendo-combobox
                  #paymentPlan
                  [data]="billing$ | async"
                  [valueField]="'codcob'"
                  [textField]="'cobranca'"
                  [placeholder]="'Selecione a cobrança'"
                  (selectionChange)="setBilling($event)"
                >
                </kendo-combobox>

                <div class="row m-3">
                  <div class="col-12 p-3">
                    <button kendoButton type="button" class="btn btn-success" style="width: 100%" (click)="createOrder()">Confirmar pedido</button>
                  </div>

                  <div class="col-12 p-3">
                    <button kendoButton type="button" class="btn btn-dark" style="width: 100%">Gerar Orçamento</button>
                  </div>
                </div>

              </form>
            </div>

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


    </div>
  </div>
</main>

<footer></footer>
