<app-header-admin></app-header-admin>
<div class="d-flex flex-column wrapper">
  <div class="loading-overlay" *ngIf="(loading$ | async) || (updating$ | async)">
    <div class="loading-content">
      <kendo-loader type="converging-spinner" themeColor="primary" size="large"></kendo-loader>
      <div class="mt-2">Carregando dados do pedido...</div>
    </div>
  </div>
  <div class="container cart-container my-4">
    <!-- Primeira Linha -->
    <!-- <div class="row mb-3">
      <div class="col-12">
        <div class="row w-100 align-items-center">
          <div class="col-3 title-page">Resumo do pedido </div>

          <div class="col-3 ms-auto text-end">
            <a (click)="goSalesHome()">
              <button kendoButton class="btn-add-itens text-btn-add-itens">
                Adicionar Itens
              </button>
            </a>
          </div>
        </div>
      </div>
    </div> -->

    <div class="row mb-3">
      <div class="col-12">
        <div class="row w-100 align-items-center justify-content-between">
          <!-- Texto na esquerda -->
          <div class="col-6 col-sm-6 col-md-4 title-page text-start">
            Resumo do pedido
          </div>

          <!-- Botão na direita -->
          <div class="col-6 col-sm-6 col-md-4 text-end">
            <button kendoButton class="btn-add-itens text-btn-add-itens w-100 w-md-auto" (click)="goSalesHome()">
              Adicionar Itens
            </button>
          </div>
          <!-- <p>Largura da tela: {{ screenWidth }}px</p> -->
        </div>
      </div>
    </div>

    <!-- Segunda Linha -->
    <div class="row mb-3">
      <div class="col-12" style="height: 260px">
        <kendo-grid [kendoGridBinding]="shoppingItems$ | async" [sortable]="true" [resizable]="true" [height]="260"
          class="text-grid" (remove)="showConfirmationCancelItem($event)" (edit)="showPageDiscountItem($event)">
          <!-- Coluna responsiva para dispositivos pequenos -->
          <kendo-grid-column media="(max-width: 768px)" title="Itens do carrinho">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div>
                <h4>{{ dataItem.smallDescription }}</h4>
                <dl class="responsive-details">
                  <div class="details-row">
                    <dt>Preço: R$ {{ dataItem.price | number : "1.2-2" }}</dt>
                    <dd>F. Retira: {{ dataItem.stockStore }}</dd>
                  </div>
                  <div class="details-row">
                    <dt>Qtde:{{ dataItem.quantity }}</dt>
                    <dd>
                      Marca: <span>{{ dataItem.brand }}</span>
                    </dd>
                  </div>
                  <div class="details-row">
                    <dt>
                      Valor Total:
                      <span style="
                          font-size: 20px;
                          font-weight: 600;
                          margin-top: 10px;
                          color: blue;
                        ">R$
                        {{
                        dataItem.price * dataItem.quantity | number : "1.2-2"
                        }}</span>
                    </dt>
                    <dd>
                      <div *ngIf="dataItem.promotion > 0">
                        <span class="badge rounded-pill text-white" style="
                            opacity: 0.8;
                            background-color: #be102d;
                            margin-right: 10px;
                          ">
                          <small>Em promoção</small></span>
                      </div>
                      <div class="text-center" *ngIf="dataItem.deliveryType == 'EN'">
                        <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: #be102d">
                          <small>Entrega</small></span>
                      </div>
                      <div class="text-center" *ngIf="dataItem.deliveryType == 'RP'">
                        <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: #ef7d00">
                          <small>Retira posterior</small></span>
                      </div>

                      <div class="text-center" *ngIf="dataItem.deliveryType == 'RA'">
                        <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: #ef7d00">
                          <small>Retira posterior (Imediata)</small></span>
                      </div>

                      <div class="text-center" *ngIf="dataItem.deliveryType == 'RI'">
                        <span class="badge rounded-pill text-white" style="
                            opacity: 0.8;
                            background-color: hsl(138, 90%, 8%);
                          ">
                          <small>Retira imediata</small></span>
                      </div>
                      <div class="text-center" *ngIf="dataItem.deliveryType == 'EF'">
                        <span class="badge rounded-pill text-white" style="
                            opacity: 0.8;
                            background-color: hsl(258, 66%, 31%);
                          ">
                          <small>Encomenda</small></span>
                      </div>
                    </dd>
                  </div>
                </dl>
                <!-- Botões de Ação -->
                <div class="d-flex justify-content-start mt-2">
                  <button class="btn btn-sm btn-success me-2 custom-add-btn" kendoGridAddCommand
                    (click)="showModalProduct(dataItem)">
                    <i class="bi bi-pencil"></i> Editar
                  </button>
                  <button class="btn btn-sm btn-warning me-2 custom-edit-btn" kendoGridEditCommand>
                    <i class="bi bi-currency-dollar"></i> Desconto
                  </button>
                  <button class="btn btn-sm btn-danger custom-remove-btn" kendoGridRemoveCommand>
                    <i class="bi bi-cart-dash"></i> Remover
                  </button>
                </div>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="numSeq" title="Seq" [width]="10" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="title-product">
                <span>{{ dataItem.numSeq }}</span>
              </div>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="productId" title="Código" [width]="15" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div>
                <span>{{ dataItem.idProduct }}</span>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="description" title="Produto" [width]="80" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="title-product">
                <span>
                  {{ dataItem.smallDescription }}
                </span>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="promotion" title="Condição" [width]="25" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div *ngIf="dataItem.promotion > 0">
                <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: #be102d">
                  <small>Em promoção</small></span>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="brand" title="Marca" [width]="35" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div>
                <span>{{ dataItem.brand }}</span>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="discount" title="Desconto" [width]="15" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="text-center">
                <span>{{ dataItem.discount | number : "1.2-2" }}%</span>
              </div>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="stockId" title="F.Retira" [width]="20" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="text-center">
                <span>Loja {{ dataItem.stockStore }}</span>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="deliveryType" title="Tipo de entrega" [width]="25" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="text-center" *ngIf="dataItem.deliveryType == 'EN'">
                <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: #be102d">
                  <small>Entrega</small></span>
              </div>
              <div class="text-center" *ngIf="dataItem.deliveryType == 'RP'">
                <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: #ef7d00">
                  <small>Retira posterior</small></span>
              </div>

              <div class="text-center" *ngIf="dataItem.deliveryType == 'RA'">
                <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: #ef7d00">
                  <small>Retira posterior (Imediata)</small></span>
              </div>

              <div class="text-center" *ngIf="dataItem.deliveryType == 'RI'">
                <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: hsl(138, 90%, 8%)">
                  <small>Retira imediata</small></span>
              </div>
              <div class="text-center" *ngIf="dataItem.deliveryType == 'EF'">
                <span class="badge rounded-pill text-white" style="opacity: 0.8; background-color: hsl(258, 66%, 31%)">
                  <small>Encomenda</small></span>
              </div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="price" title="Preço" [width]="20" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span [ngClass]="{ 'red text-bold': dataItem.price < 0 }">R$ {{ dataItem.price | number : "1.2-2"
                }}</span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="quantity" title="Qtde" [width]="20" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span>{{ dataItem.quantity | number : "1.2-2" }} </span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="price" title="Valor total" [width]="20" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span [ngClass]="{ 'red text-bold': dataItem.price < 0 }">R$
                {{
                dataItem.price * dataItem.quantity | number : "1.2-2"
                }}</span>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column title="Ações" [width]="30" media="(min-width: 769px)">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="row g-2 justify-content-start">
                <div class="col-3 me-2" kendoGridAddCommand>
                  <i class="bi bi-pencil text-success" (click)="showModalProduct(dataItem)"></i>
                </div>
                <div class="col-3 me-2" kendoGridEditCommand>
                  <i class="bi bi-currency-dollar text-warning"></i>
                </div>
                <div class="col-3 me-2" kendoGridRemoveCommand>
                  <i class="bi bi-cart-dash text-danger"></i>
                </div>
              </div>
            </ng-template>
          </kendo-grid-column>
        </kendo-grid>
      </div>
    </div>

    <!-- Terceira Linha -->
    <div class="row">
      <!-- Coluna 1 -->
      <div class="col-md-6 col-12 mb-3">
        <div class="row w-100">
          <div *ngIf="pageCustomer" class="col-12">
            <span class="page-active me-3">Cliente</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive me-3">Financeiro</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive me-3">Endereço de Entrega</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive me-3">Observações</span>
          </div>
          <!--Card Customer-->
          <div *ngIf="pageCustomer" class="col-12">
            <div class="card-customer">
              <div class="row w-100 align-items-center">
                <div class="col-12 col-sm-5 col-md-6 d-flex align-items-center">
                  <span class="title-page">Informações do cliente</span>
                </div>
                <div class="col-12 col-sm-7 col-md-6 d-flex justify-content-end">
                  <div class="row w-100">
                    <div class="col-6 text-center">
                      <button kendoButton class="btn-new-customer text-btn-flat-azul"
                        (click)="showDialogCreateCustomer()">
                        Novo cliente
                      </button>
                    </div>
                    <div class="col-6 text-center">
                      <button kendoButton class="btn-add-itens text-btn-add-itens" (click)="selectCustomer()">
                        Pesquisar cliente
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <form class="mt-2 w-100" [formGroup]="formCustomer">
                <div class="row">
                  <div class="col-12">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">Nome do Cliente</span>
                        <span *ngIf="isPreCustomer()"
                          class="ms-5 top-0 translate-middle badge rounded-pill bg-danger">Pré-Cadastro</span>

                        <kendo-textbox class="is-text" formControlName="name" #name required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-6">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">CPF / CNPJ</span>
                        <kendo-textbox class="is-text" formControlName="document" #cpfCnpj required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-6">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">CONTATO</span>
                        <kendo-textbox class="is-text" formControlName="cellPhone" #cellPhone required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-4">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">CEP</span>
                        <kendo-textbox class="is-text" formControlName="cep" #cep required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-8">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">endereço</span>
                        <kendo-textbox class="is-text" formControlName="address" #address required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-3">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">número</span>
                        <kendo-textbox class="is-text" formControlName="number" #number required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-6">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">cidade</span>
                        <kendo-textbox class="is-text" formControlName="city" #city required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-3">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">estado</span>
                        <kendo-textbox class="is-text" formControlName="state" #state required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">complemento</span>
                        <kendo-textbox class="is-text" formControlName="complement" #complement required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row mt-2">
                  <div style="display: flex; justify-content: space-between">
                    <button kendoButton class="btn-new-customer text-btn-flat-azul" style="height: 40px"
                      (click)="showPreCustomer()">
                      <span>Pré-Cadastro</span>
                    </button>
                    <button kendoButton class="btn-next" (click)="activePagePayment()">
                      <span class="text-btn-next">Avançar</span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <!--Card Payment-->
          <div *ngIf="pagePayment" class="col-12">
            <span class="page-inactive me-5">Cliente</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-active">Financeiro</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive me-5">Endereço de Entrega</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive">Observações</span>
          </div>
          <div *ngIf="pagePayment" class="col-12">
            <div class="card-payment">
              <div class="row w-100 pe-0 me-0 align-items-end">
                <div class="col-12 m-0 p-0">
                  <span class="title-page">Pagamento</span>
                </div>
              </div>
              <form class="mt-2 h-100" [formGroup]="formPayment">
                <div class="row">
                  <div class="col-12 mt-3">
                    <kendo-formfield>
                      <label>
                        <span>Filial de venda</span>
                        <kendo-combobox #country textField="shortName" valueField="id" formControlName="invoiceStore"
                          [data]="invoiceStores$ | async" [kendoDropDownFilter]="{ operator: 'contains' }"
                          (selectionChange)="setInvoiceStore($event)">
                        </kendo-combobox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-12 mt-3">
                    <kendo-formfield>
                      <label>
                        <span>Cobrança</span>
                        <kendo-combobox #country textField="cobranca" valueField="codcob" formControlName="billing"
                          [data]="billing$ | async" [kendoDropDownFilter]="{ operator: 'contains' }"
                          (selectionChange)="setBilling($event)">
                        </kendo-combobox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-12 mt-3">
                    <kendo-formfield>
                      <label>
                        <span>Plano de pagamento</span>
                        <kendo-combobox #country textField="descricao" valueField="codplpag"
                          formControlName="paymentPlan" [data]="paymentPlans"
                          [kendoDropDownFilter]="{ operator: 'contains' }" (selectionChange)="setPaymentPlan($event)">
                        </kendo-combobox>
                      </label>
                    </kendo-formfield>
                  </div>

                  <!-- <div class="col-12 mt-3">
                    <kendo-formfield>
                      <label>
                        <span>Parceiro Jurunense</span>
                        <kendo-combobox
                          #partner
                          textField="name"
                          valueField="id"
                          formControlName="partner"
                          [data]="partners$ | async"
                          [kendoDropDownFilter]="{ operator: 'contains' }"
                          (selectionChange)="setPartner($event)"
                        >
                        </kendo-combobox>
                      </label>
                    </kendo-formfield>
                  </div> -->
                </div>
                <div class="row" style="margin-top: 20px; margin-bottom: 0">
                  <!-- <div class="col-8 text-end"> -->
                  <div style="display: flex; justify-content: space-between">
                    <button kendoButton class="btn-prior me-2" (click)="activePageCustomer()">
                      <span class="text-btn-prior text-center">Retornar</span>
                    </button>
                    <button kendoButton class="btn-next" (click)="activePageAddress()">
                      <span class="text-btn-next text-center">Avançar</span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <!--Card Address-->
          <div *ngIf="pageAddress" class="col-12">
            <span class="page-inactive me-5">Cliente</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive">Financeiro</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-active me-2">Endereço de Entrega</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive">Observações</span>
          </div>
          <div *ngIf="pageAddress" class="col-12">
            <div class="card-customer">
              <!-- <div style="display: flex; justify-content: space-between;">
                <span class="title-page">Endereço de entrega</span>
                <div class="" style="display: flex; gap: 5px; justify-content: flex-end;">
                  <button kendoButton class="btn-add-address text-center" (click)="showDialogCreateAddress()">
                    <span class="text-btn-add-address">Adicionar</span>
                  </button>
                  <button kendoButton class="btn-address" (click)="showDialogSelectAddress()">
                    <span class="text-btn-address text-center">Alterar</span>
                  </button>
                  <button kendoButton class="btn-remove-address" (click)="removeSelectAddress()">
                    <span class="text-btn-remove-address text-center">Remover</span>
                  </button>
                </div>
              </div> -->
              <div class="container-address">
                <span class="title-page">Endereço de entrega</span>
                <div class="btn-group">
                  <button kendoButton class="btn-add-address text-center" (click)="showDialogCreateAddress()">
                    <span class="text-btn-add-address">Adicionar</span>
                  </button>
                  <button kendoButton class="btn-address" (click)="showDialogSelectAddress()">
                    <span class="text-btn-address text-center">Alterar</span>
                  </button>
                  <button kendoButton class="btn-remove-address" (click)="removeSelectAddress()">
                    <span class="text-btn-remove-address text-center">Remover</span>
                  </button>
                </div>
              </div>
              <form class="mt-2 w-100" [formGroup]="formAddress">
                <div class="row">
                  <div class="col-4">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">CEP</span>
                        <kendo-textbox class="is-text" formControlName="zipCode" #cep required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-8">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">endereço</span>
                        <kendo-textbox class="is-text" formControlName="address" #address required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-3">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">número</span>
                        <kendo-textbox class="is-text" formControlName="number" #number required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-6">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">cidade</span>
                        <kendo-textbox class="is-text" formControlName="city" #city required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                  <div class="col-3">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">estado</span>
                        <kendo-textbox class="is-text" formControlName="state" #state required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">complemento</span>
                        <kendo-textbox class="is-text" formControlName="complement" #complement required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">Ponto de referência</span>
                        <kendo-textbox class="is-text" formControlName="referencePoint" #notify required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <kendo-formfield>
                      <label class="w-100">
                        <span class="title-form-column">observações</span>
                        <kendo-textbox class="is-text" formControlName="note" #notify required>
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row mt-2">
                  <div style="display: flex; justify-content: space-between">
                    <button kendoButton class="btn-prior me-2" (click)="activePagePayment()">
                      <span class="text-btn-prior text-center">Retornar</span>
                    </button>
                    <button kendoButton class="btn-next" (click)="activePageNoteDelivery()">
                      <span class="text-btn-next text-center">Avançar</span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <!-- Card Shipping e Notes -->
          <div *ngIf="pageNotesDelivery" class="col-12">
            <span class="page-inactive me-5">Cliente</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive">Financeiro</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-inactive me-5">Endereço de Entrega</span>
            <span class="k-icon k-i-arrow-60-right"></span>
            <span class="page-active">Observações</span>
          </div>
          <div *ngIf="pageNotesDelivery" class="col-12">
            <div class="card-payment">
              <form class="w-100 h-100" [formGroup]="formNotes">
                <div class="row w-100">
                  <div class="col-5 mt-2">
                    <label>
                      <kendo-formfield>
                        <span>Previsão de entrega</span>
                        <kendo-datepicker (blur)="setDataDelivery()" formControlName="shippingDate">
                        </kendo-datepicker>
                      </kendo-formfield>
                      <!--kendo-formfield>
                        <input
                          type="checkbox"
                          formControlName="scheduleDelivery"
                          [disabled]="denyScheduleDelivery"
                          kendoCheckBox
                          (blur)="setDataDelivery()"
                        />
                        <span class="ms-2">Entrega programada</span>
                      </kendo-formfield-->
                    </label>
                  </div>
                  <div class="col-6 mt-2 ms-auto">
                    <kendo-formfield *ngIf="isInvoiceStore9Or10() === true" orientation="horizontal"
                      showHints="initial">
                      <label class="k-label">Prioridade de Entrega</label>

                      <ul class="k-radio-list k-list-horizontal">
                        <li class="k-radio-item">
                          <label>
                            <input type="radio" #medium value="B" kendoRadioButton formControlName="shippingPriority"
                              (blur)="setDataDelivery()" />
                            <span class="ms-2">Entrega</span>
                          </label>
                        </li>

                        <li class="k-radio-item">
                          <label>
                            <input type="radio" #medium value="M" kendoRadioButton formControlName="shippingPriority"
                              (blur)="setDataDelivery()" />
                            <span class="ms-2">Retira</span>
                          </label>
                        </li>

                        <li class="k-radio-item">
                          <label>
                            <input type="radio" #medium value="A" kendoRadioButton formControlName="shippingPriority"
                              (blur)="setDataDelivery()" />
                            <span class="ms-2">Delivery</span>
                          </label>
                        </li>
                      </ul>
                    </kendo-formfield>
                    <kendo-formfield *ngIf="isInvoiceStore9Or10() === false" orientation="horizontal"
                      showHints="initial">
                      <label class="k-label">Prioridade de Entrega</label>

                      <ul class="k-radio-list k-list-horizontal">
                        <li class="k-radio-item">
                          <label>
                            <input type="radio" #medium value="B" kendoRadioButton formControlName="shippingPriority"
                              (blur)="setDataDelivery()" />
                            <span class="ms-2">Entrega</span>
                          </label>
                        </li>

                        <li class="k-radio-item">
                          <label>
                            <input type="radio" #medium value="A" kendoRadioButton formControlName="shippingPriority"
                              (blur)="setDataDelivery()" />
                            <span class="ms-2">Delivery</span>
                          </label>
                        </li>
                      </ul>
                    </kendo-formfield>
                  </div>

                  <div class="col-12 mt-2">
                    <kendo-formfield>
                      <label class="w-100">
                        <span>Observações do Pedido</span>
                        <kendo-textbox [maxlength]="50" formControlName="notesText1" (blur)="setDataDelivery()">
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                    <kendo-formfield>
                      <kendo-textbox [maxlength]="50" formControlName="notesText2" (blur)="setDataDelivery()">
                      </kendo-textbox>
                    </kendo-formfield>
                  </div>
                  <div class="col-12 mt-2">
                    <kendo-formfield>
                      <label class="w-100">
                        <span>Observações de Entrega</span>
                        <kendo-textbox [maxlength]="75" formControlName="notesDeliveryText1" (blur)="setDataDelivery()">
                        </kendo-textbox>
                      </label>
                    </kendo-formfield>
                    <kendo-formfield>
                      <kendo-textbox [maxlength]="75" formControlName="notesDeliveryText2" (blur)="setDataDelivery()">
                      </kendo-textbox>
                    </kendo-formfield>
                    <kendo-formfield>
                      <kendo-textbox [maxlength]="75" formControlName="notesDeliveryText3" (blur)="setDataDelivery()">
                      </kendo-textbox>
                    </kendo-formfield>
                  </div>
                </div>
                <div class="row me-0 ms-0 justify-content-end align-items-end"
                  style="margin-top: 20px; margin-bottom: 0">
                  <div class="col-4 text-end">
                    <button kendoButton class="btn-prior">
                      <span class="text-btn-prior text-center" (click)="activePageAddress()">Retornar</span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <!-- Coluna 2 -->
      <div class="col-md-6 col-12">
        <!--Resumo do Pedido-->
        <div class="row w-100">
          <div class="col-12">
            <span class="title-resumo">Resumo do Pedido</span>
          </div>
          <div class="card-resume mt-3">
            <div class="row w-100 p-0 justify-content-end">
              <div class="col-12 m-0 mt-3">
                <span class="sub-title-resume">Revisar Detalhes do Pedido</span>
              </div>
              <form class="p-3" [formGroup]="formResumeOrder">
                <div class="row w-100 m-0 mt-2 align-items-end">
                  <div class="col-6 text-card-order">Valor do pedido</div>
                  <div *ngIf="totalCart$" class="col-6 ms-auto text-end order-value">
                    {{ totalCart$ | async | currency }}
                  </div>
                </div>
                <div class="row w-100 m-0 mt-2 align-items-end">
                  <div class="col-6 text-card-order">Peso do pedido</div>
                  <div class="col-6 ms-auto text-end order-value">
                    {{ totalWeight | number : "1.3-3" }} Kg
                  </div>
                </div>

                <div class="row w-100 m-0 p-0 mt-2 align-items-center">
                  <!-- Texto: Lançar taxa de entrega -->
                  <div class="col-4 col-sm-5 col-md-6 text-card-order text-center text-md-start">
                    Lançar taxa de entrega
                  </div>

                  <!-- Input e Botão -->
                  <div class="col-8 col-sm-7 col-md-6">
                    <div class="row d-flex align-items-center justify-content-between">
                      <!-- Input numérico -->
                      <div class="col-7 col-sm-6 col-md-6 mb-2 mb-sm-0">
                        <input class="input-numeric form-control w-100" type="number" disabled="true"
                          formControlName="taxValue" #taxvalue />
                      </div>
                      <!-- Botão Alterar -->
                      <div class="col-5 col-sm-6 col-md-6 text-center text-md-end">
                        <button kendoButton class="btn-flat-azul w-100 w-sm-auto" (click)="showConfirmationTax()">
                          Alterar
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row w-100 m-0 p-0 mt-2 align-items-center">
                  <!-- Texto: Lançar taxa de entrega -->
                  <div class="col-4 col-sm-5 col-md-6 text-card-order text-center text-md-start">
                    Desconto sobre o total
                  </div>

                  <!-- Input e Botão -->
                  <div class="col-8 col-sm-7 col-md-6">
                    <div class="row d-flex align-items-center justify-content-between">
                      <!-- Input numérico -->
                      <div class="col-7 col-sm-6 col-md-6 mb-2 mb-sm-0">
                        <input class="input-numeric form-control w-100" type="number" formControlName="discount"
                          #discount />
                      </div>
                      <!-- Botão Alterar -->
                      <div class="col-5 col-sm-6 col-md-6 text-center text-md-end">
                        <button kendoButton class="btn-flat-azul w-100 w-sm-auto" (click)="applyDiscountOrder()">
                          Aplicar
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              <div class="col-12 w-100">
                <hr class="dropdown-divider" />
              </div>
              <div class="col-12 p-0">
                <div class="row w-100 ps-3 pe-0 align-items-center">
                  <!-- VALOR TOTAL -->
                  <div class="col-12 col-sm-6 d-flex flex-column">
                    <span class="d-block label-text-total ms-2">VALOR TOTAL</span>
                    <span *ngIf="shopping$ | async" class="label-total ms-2">
                      {{
                      (shopping$ | async).vlpedido + getTaxValue() | currency
                      }}
                    </span>
                  </div>

                  <!-- Botões -->
                  <div class="col-12 col-sm-6 p-0 mt-3 mt-sm-0">
                    <div class="row w-100 m-0 p-0 d-flex justify-content-between">
                      <div class="col-6 p-1">
                        <!-- <button kendoButton class="btn-pre-order w-100" [disabled]="isLoadingPreOrder"
                          [icon]="loadingIconPreOrder" (click)="showConfirmation()">
                          <span *ngIf="!isLoadingPreOrder" class="text-btn-order">Fechar orçamento</span>
                        </button> -->

                        <button *ngIf="!isLoadingPreOrder" kendoButton class="btn-pre-order w-100"
                          (click)="showConfirmation()" [disabled]="isLoadingPreOrder" [icon]="loadingIconOrder">
                          <span class="text-btn-order">Fechar orçamento</span>
                        </button>
                        <kendo-loader *ngIf="isLoadingPreOrder" size="small"></kendo-loader>



                      </div>
                      <div class="col-6 p-1">
                        <button *ngIf="!isLoadingOrder" kendoButton class="btn-order w-100"
                          (click)="confirmCreateOrder()" [disabled]="isLoadingOrder" [icon]="loadingIconOrder">
                          <span class="text-btn-order">Fechar pedido</span>
                        </button>
                        <kendo-loader *ngIf="isLoadingOrder" size="small"></kendo-loader>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <app-confirmation *ngIf="openedConfirmation" opened="openedConfirmation" title="{{ titleMessage }}"
      message="{{ messageConfirmation }}" textButtonConfirmation="{{ textButtonConfirmation }}"
      textButtonCancel="{{ textButtonCancel }}" (resultEvent)="returnConfirmation($event)"></app-confirmation>
    <app-auth-user *ngIf="openedAuthUser" opened="openedConfirmation" title="{{ titleMessage }}"
      (resultEvent)="returnAuthUser($event)"></app-auth-user>
  </div>

  <footer>
    <div class="container-fluid home-footer">
      <div class="row align-items-center justify-content-center">
        <div class="col-12 text-center">
          <span class="text-center text-footer">
            &copy; 2022 App Soluti Soluções em aplicativos moveis
          </span>
        </div>
      </div>
    </div>
  </footer>
  <div kendoDialogContainer></div>
  <div *ngIf="openInformation">
    <app-message-information opened="true" title="Autorização de desconto"
      message="Ops! Desconto autorizado inferior ao desconto informado." information="Percentual autorizado para o usuário insuficiente para desconto informado. (Desconto autorizado: {{
        percentAuth | number
      }}%)" (resultEvent)="closeInformation($event)"></app-message-information>
  </div>

  <div *ngIf="showInformation">
    <app-message-information opened="showInformation" title="{{ titleInformation }}" message="{{ messageInformation }}"
      information="{{ informationDescription }}" (resultEvent)="returnShowInformation()"></app-message-information>
  </div>

  <div *ngIf="showInformationCreateOrder">
    <app-message-information opened="showInformationCreateOrder" title="{{ titleInformation }}"
      message="{{ messageInformation }}" information="{{ informationDescription }}"
      (resultEvent)="closeSale()"></app-message-information>
  </div>

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

  <app-confirmation *ngIf="openedConfirmationOrder" opened="openedConfirmationOrder" title="{{ titleMessage }}"
    message="{{ messageConfirmation }}" detailMessage="{{ informationDelivery }}"
    textButtonConfirmation="{{ textButtonConfirmation }}" textButtonCancel="{{ textButtonCancel }}"
    (resultEvent)="createOrder($event)"></app-confirmation>

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

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

  <app-discount-item-sales *ngIf="showDiscountItem" opened="showDiscountItem" title="Desconto por Item"
    textButtonConfirmation="{{ textButtonConfirmation }}" textButtonCancel="{{ textButtonCancel }}"
    [shoppingItem]="itemSelect" (resultEvent)="returnDiscountItem($event)"></app-discount-item-sales>

  <app-create-customer-modal *ngIf="showCreateCustomer" openedDialog="showCreateCustomer"
    (resultEvent)="returnCreateCustomer($event)">
  </app-create-customer-modal>
  <app-select-customer *ngIf="showSelectCustomer" openedDialog="showSelectCustomer"
    (resultEvent)="resultSelectCustomer($event)">
  </app-select-customer>
  <app-create-address-modal *ngIf="showCreateAddress" openedDialog="showCreateAddress"
    [customerId]="customer.customerId" (resultEvent)="returnCreateAddress($event)">
  </app-create-address-modal>

  <app-select-address *ngIf="showSelectAddress" openedDialog="showSelectAddress" [customerId]="customer.customerId"
    (resultEvent)="returnSelectAddress($event)">
  </app-select-address>

  <kendo-window [top]="100" [left]="50" title="Orçamento de venda" [(state)]="windowState" *ngIf="openedPrintPreOrder"
    (close)="openClosePrintPreOrder(false)">
    <stimulsoft-viewer-angular [requestUrl]="urlPrintPreOrder" [action]="'InitViewer'" [width]="'95%'"
      [height]="'800px'"></stimulsoft-viewer-angular>
  </kendo-window>

  <kendo-window modal="true" [top]="100" [left]="50" title="Pedido de venda" [(state)]="windowState"
    *ngIf="openedPrintOrder" (close)="openClosePrintOrder(false)">
    <stimulsoft-viewer-angular [requestUrl]="urlPrintOrder" [action]="'InitViewerOrder'" [width]="'95%'"
      [height]="'800px'"></stimulsoft-viewer-angular>
  </kendo-window>
</div>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
  aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <app-shopping-item-modal [item]="itemSelect"></app-shopping-item-modal>
</div>

<kendo-dialog *ngIf="showDialogDiscountOrder" (close)="closeDialogDiscountOrder()" [width]="500"
  autoFocusedElement="#inputDiscount">
  <kendo-dialog-titlebar style="background-color: rgb(34, 34, 61); color: white">
    <div class="justify-content-center text-center" style="font-size: 18px; line-height: 1.3em; color: white">
      <span class="k-icon k-i-user d-inline"></span>
      <h5 class="d-inline ms-2">Pedido de venda</h5>
    </div>
  </kendo-dialog-titlebar>
  <div class="container-fluid">
    <form class="k-form row" [formGroup]="formDiscountOrder">
      <legend class="title-page w-100">Conceder desconto sobre o pedido</legend>
      <div class="form-group col-md-6">
        <label class="k-form-field">
          <span class="d-block">Valor do pedido</span>
          <input currencyMask class="d-block w-100 text-input" formControlName="value" disabled [options]="{
              prefix: 'R$ ',
              thousands: '.',
              decimal: ',',
              spinners: false
            }" />
        </label>
      </div>
      <div class="form-group col-md-6" *ngIf="userManager">
        <label class="k-form-field">
          <span>% Margem</span>
          <input currencyMask class="d-block w-100 text-input" formControlName="profit" disabled [options]="{
              prefix: '',
              thousands: '.',
              decimal: ',',
              spinners: false
            }" />
        </label>
      </div>
      <div class="form-group col-md-6">
        <label class="k-form-field">
          <span>Percentual de desconto</span>
          <input (blur)="calcDiscountOrderValue()" id="inputDiscount" currencyMask class="d-block w-100 text-input"
            formControlName="discount" [options]="{
              prefix: '',
              thousands: '.',
              decimal: ',',
              spinners: false
            }" />
        </label>
      </div>
      <div class="form-group col-md-6">
        <label class="k-form-field">
          <span>Valor de desconto</span>
          <input (blur)="calcPercentOrderDiscount()" id="discountValue" currencyMask class="d-block w-100 text-input"
            formControlName="discountValue" [options]="{
              prefix: 'R$ ',
              thousands: '.',
              decimal: ',',
              spinners: false
            }" />
        </label>
      </div>
      <div class="form-group col-md-6">
        <label class="k-form-field">
          <span>Valor líquido</span>
          <input currencyMask class="d-block w-100 text-input" formControlName="netValue" disabled [options]="{
              prefix: 'R$ ',
              thousands: '.',
              decimal: ',',
              spinners: false
            }" />
        </label>
      </div>
      <div class="form-group col-md-6" *ngIf="userManager">
        <label class="k-form-field">
          <span>% Margem Líquida</span>
          <input currencyMask class="d-block w-100 text-input" formControlName="netProfit" disabled [options]="{
              prefix: '',
              thousands: '.',
              decimal: ',',
              spinners: false
            }" />
        </label>
      </div>
    </form>
  </div>
  <kendo-dialog-actions [layout]="actionsLayout">
    <button kendoButton (click)="closeDialogDiscountOrder()">Cancelar</button>
    <button kendoButton (click)="confirmDiscountOrder()" themeColor="primary">
      Aplicar
    </button>
  </kendo-dialog-actions>
</kendo-dialog>

<kendo-dialog title="Selecione o modelo do orçamento" animation="zoom" *ngIf="openedModelPrintPreOrder"
  (close)="closeModelPrintPreOrder('Cancelar')" [minWidth]="250" [width]="450">
  <form class="k-form" [formGroup]="formModelPreOrder">
    <kendo-formfield showHints="initial">
      <label class="k-label">Selecione o modelo de orçamento</label>
      <ul class="k-radio-list">
        <li class="k-radio-item">
          <label>
            <input type="radio" #bobina value="B" kendoRadioButton formControlName="model" />
            <span class="ms-2">Bobina</span>
          </label>
        </li>
        <li class="k-radio-item">
          <label>
            <input type="radio" #bobina value="P" kendoRadioButton formControlName="model" />
            <span class="ms-2">Bobina sem Preço</span>
          </label>
        </li>

        <!--li class="k-radio-item"></li-->
        <li class="k-radio-item">
          <label>
            <input type="radio" #bobina value="A" kendoRadioButton formControlName="model" />
            <span class="ms-2">Formulário A4</span>
          </label>
        </li>
      </ul>
    </kendo-formfield>
  </form>
  <kendo-dialog-actions>
    <button kendoButton (click)="closeModelPrintPreOrder('Não')">
      Cancelar
    </button>
    <button kendoButton (click)="closeModelPrintPreOrder('Sim')" themeColor="primary">
      Imprimir
    </button>
  </kendo-dialog-actions>
</kendo-dialog>

<kendo-dialog title="Pré-cadastro de cliente" animation="zoom" *ngIf="openedPreCustomer"
  (close)="closeModelPreCustomer('Cancelar')" [minWidth]="250" [width]="450">
  <form class="k-form" [formGroup]="formPreCustomer">
    <fieldset class="k-form-fieldset">
      <kendo-formfield>
        <kendo-label [for]="document" text="CPF/CNPJ*" type="number"></kendo-label>
        <input #document formControlName="document" kendoTextBox (blur)="searchCustomer()" />
        <kendo-formerror>Error: Número do CPF é obrigatório</kendo-formerror>
      </kendo-formfield>
      <kendo-formfield>
        <kendo-label [for]="name" text="Nome*"></kendo-label>
        <input #name formControlName="name" kendoTextBox />
        <kendo-formerror>Error: Nome é obrigatório</kendo-formerror>
      </kendo-formfield>
      <kendo-formfield>
        <kendo-label [for]="cellPhone" text="Celular"></kendo-label>
        <input #cellPhone formControlName="phone" type="number" kendoTextBox />
      </kendo-formfield>
    </fieldset>
  </form>
  <kendo-dialog-actions>
    <button kendoButton (click)="closeModelPreCustomer('Não')">Cancelar</button>
    <button kendoButton (click)="closeModelPreCustomer('Sim')" themeColor="primary">
      Gravar
    </button>
  </kendo-dialog-actions>
</kendo-dialog>

<kendo-dialog modal="true" title="Selecione o modelo do pedido" animation="zoom" *ngIf="openedModelPrintOrder"
  (close)="closeModelPrintOrder('Cancelar')" [minWidth]="250" [width]="450">
  <form class="k-form" [formGroup]="formModelOrder">
    <kendo-formfield showHints="initial">
      <label class="k-label">Selecione o modelo de pedido</label>
      <ul class="k-radio-list">
        <li class="k-radio-item">
          <label>
            <input type="radio" #bobina value="B" kendoRadioButton formControlName="model" />
            <span class="ms-2">Bobina</span>
          </label>
        </li>
        <li class="k-radio-item">
          <label>
            <input type="radio" #bobina value="A" kendoRadioButton formControlName="model" />
            <span class="ms-2">Formulário A4</span>
          </label>
        </li>
      </ul>
    </kendo-formfield>
  </form>
  <kendo-dialog-actions>
    <button kendoButton (click)="closeModelPrintOrder('Não')">Cancelar</button>
    <button kendoButton (click)="closeModelPrintOrder('Sim')" themeColor="primary">
      Imprimir
    </button>
  </kendo-dialog-actions>
</kendo-dialog>

<kendo-dialog *ngIf="showProductsWithoutTax" (close)="closeProductsWithoutTax()" [width]="950" [height]="500"
  title="Produtos sem tributação">
  <kendo-grid [data]="productsWithoutTax">
    <kendo-grid-column field="productId" title="Código" [width]="40"></kendo-grid-column>
    <kendo-grid-column field="description" title="Descrição" [width]="250">
    </kendo-grid-column>
    <kendo-grid-column field="package" title="Embalagem" [width]="60">
    </kendo-grid-column>
    <kendo-grid-column field="uf" title="Estado" [width]="40">
    </kendo-grid-column>
  </kendo-grid>

  <kendo-dialog-actions>
    <button kendoButton themeColor="primary" (click)="closeProductsWithoutTax()">
      Fechar
    </button>
  </kendo-dialog-actions>
</kendo-dialog>

<kendo-dialog *ngIf="showConfirmUser" (close)="closeConfirmUser()" [width]="450" title="Liberar taxa de entrega">
  <div>
    <form class="k-form" [formGroup]="userForm">
      <kendo-formfield showErrors="initial">
        <label class="w-100">
          <span>Nome do usuário </span>
          <kendo-textbox formControlName="userName" [clearButton]="true" #userName required></kendo-textbox>
        </label>
        <kendo-formerror *ngIf="userForm.controls.userName.errors?.required">Error: Informe o nome do
          usuário</kendo-formerror>
      </kendo-formfield>

      <kendo-formfield showErrors="initial">
        <label class="w-100">
          <span>Senha</span>

          <input kendoTextBox type="password" #password formControlName="password" />
        </label>
        <kendo-formerror *ngIf="userForm.controls.password.errors?.required">Error: Informe a senha do
          usuário</kendo-formerror>
      </kendo-formfield>

      <kendo-formfield>
        <label class="w-100">
          <span class="ls-text">Motivo para liberação da taxa de entrega</span>
          <kendo-textbox type="text" formControlName="notation">
          </kendo-textbox>
        </label>

        <kendo-formerror>Erro: A senha é obrigatória!</kendo-formerror>
      </kendo-formfield>
    </form>
  </div>
  <kendo-dialog-actions>
    <button kendoButton themeColor="primary" (click)="closeConfirmUser()">
      Autorizar
    </button>
  </kendo-dialog-actions>
</kendo-dialog>

<!-- <kendo-dialog *ngIf="showSelectDeliveryTax" (close)="confirmSelectDeliveryTax(false)"
  title="Opções de entrega para o endereço" [width]="850">
  <kendo-grid [data]="dataDeliveryTax" [resizable]="true" [scrollable]="true" [loading]="loadingDeliveryTax"
    [selectable]="true" (selectionChange)="selectDeliveryTax($event)" style="height: 100hv; width: 100wv">
    <ng-template kendoGridNoRecordsTemplate>
      <h4>Sem registros para serem exibidos.</h4>
    </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="(min-width: 450px)" field="store" title="Filial" [width]="90">
    </kendo-grid-column>
    <kendo-grid-column media="(min-width: 450px)" field="carrierName" title="Transportadora" [width]="180">
    </kendo-grid-column>
    <kendo-grid-column media="(min-width: 450px)" field="cityName" title="Cidade de Entrega" [width]="120">
    </kendo-grid-column>
    <kendo-grid-column media="(min-width: 450px)" field="deliveryTime" title="Prazo de Entrega" [width]="150">
    </kendo-grid-column>

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

<kendo-dialog *ngIf="showSelectDeliveryTax" (close)="confirmSelectDeliveryTax(false)"
  title="Opções de entrega para o endereço" class="responsive-dialog">
  <kendo-grid [data]="dataDeliveryTax" [resizable]="true" [scrollable]="true" [loading]="loadingDeliveryTax"
    [selectable]="true" (selectionChange)="selectDeliveryTax($event)" style="height: 100hv; width: 100wv">
    <ng-template kendoGridNoRecordsTemplate>
      <h4>Sem registros para serem exibidos.</h4>
    </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>

    <!-- columns for mid-size devices -->
    <kendo-grid-column media="(min-width: 769px)" field="store" title="Filial" [width]="90">
    </kendo-grid-column>
    <kendo-grid-column media="(min-width: 769px)" field="carrierName" title="Transportadora" [width]="180">
    </kendo-grid-column>
    <kendo-grid-column media="(min-width: 769px)" field="cityName" title="Cidade de Entrega" [width]="120">
    </kendo-grid-column>
    <kendo-grid-column media="(min-width: 769px)" field="deliveryTime" title="Prazo de Entrega" [width]="150">
    </kendo-grid-column>
    <kendo-grid-column media="(min-width: 769px)" field="deliveryValue" title="Valor Frete" [width]="100"
      [class]="{ 'text-end': true }">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.deliveryValue | currency }}
      </ng-template>
    </kendo-grid-column>

    <!-- responsive column for small devices -->
    <kendo-grid-column media="(max-width: 768px)" title="Opções de Entrega">
      <ng-template kendoGridCellTemplate let-dataItem>
        <div class="delivery-card">
          <h6>{{ dataItem.carrierName }} - {{ dataItem.cityName }}</h6>
          <dl class="responsive-details">
            <div class="details-row">
              <dt>
                <span class="label-card">Filial: {{ dataItem.store }}</span>
              </dt>
              <dd>
                <span class="label-card">Prazo: {{ dataItem.deliveryTime }}</span>
              </dd>
            </div>
            <div class="details-row">
              <dt>
                Valor Frete:
                <span class="freight-value">R$ {{ dataItem.deliveryValue | number : "1.2-2" }}</span>
              </dt>
            </div>
          </dl>
        </div>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid>
</kendo-dialog>

<kendo-dialog *ngIf="showAuthPartner" (close)="closeAuthPartner(false)" [width]="450"
  title="Autorizar parceiro da venda">
  <div>
    <form class="k-form" [formGroup]="userForm">
      <kendo-formfield showErrors="initial">
        <label class="w-100">
          <span>Nome do usuário</span>
          <kendo-textbox formControlName="userName" [clearButton]="true" #userName required></kendo-textbox>
        </label>
        <kendo-formerror *ngIf="userForm.controls.userName.errors?.required">Error: Informe o nome do
          usuário</kendo-formerror>
      </kendo-formfield>

      <kendo-formfield showErrors="initial">
        <label class="w-100">
          <span>Senha</span>

          <input kendoTextBox type="password" #password formControlName="password" />
        </label>
        <kendo-formerror *ngIf="userForm.controls.password.errors?.required">Error: Informe a senha do
          usuário</kendo-formerror>
      </kendo-formfield>
    </form>
  </div>
  <kendo-dialog-actions>
    <button kendoButton themeColor="primary" (click)="closeAuthPartner(true)">
      Autorizar
    </button>
  </kendo-dialog-actions>
</kendo-dialog>

<kendo-dialog title="Pedido de venda" *ngIf="showDeliveryStore" [width]="650">
  <div class="k-form d-block">
    <legend>Informe a loja que o cliente irá fazer a retirada</legend>
    <label>
      <span class="d-block">Lojas disponíveis</span>
      <kendo-combobox class="mt-2" #country textField="name" valueField="id" [data]="storePlaces$ | async"
        [kendoDropDownFilter]="{ operator: 'contains' }" (selectionChange)="setStorePlace($event)">
      </kendo-combobox>
    </label>
  </div>
  <kendo-dialog-actions>
    <button kendoButton themeColor="primary" (click)="closeDeliveryStore(true)">
      Confirmar
    </button>
    <button kendoButton themeColor="secondary" (click)="closeDeliveryStore(false)">
      Cancelar
    </button>
  </kendo-dialog-actions>
</kendo-dialog>