<div class="p-2 d-flex flex-column wrapper">
  <h4>Consulta de pedidos</h4>

  <div class="row mt-4">
    <div class="col-12">
      <form [formGroup]="formFilterOrder">
        <!-- Filtro de Filial -->
        <div class="row">
          <div class="col-md-6 col-sm-12">
            <label>
              <span>Filial de venda</span>
              <kendo-combobox [data]="store$ | async" textField="shortName" valueField="id"
                placeholder="Selecione a filial de venda..." (selectionChange)="selectedStore($event)"></kendo-combobox>
            </label>
          </div>
          <div class="col-md-6 col-sm-12 mt-3 mt-md-0">
            <label>
              <span class="d-block">Número do pedido</span>
              <kendo-textbox [(value)]="filterPreOrder.idOrder"></kendo-textbox>
            </label>
          </div>
        </div>

        <!-- Data e CPF/CNPJ -->
        <div class="row mt-3">
          <div class="col-md-6 col-sm-12">
            <label>
              <span class="d-block">Data do pedido</span>
              <kendo-daterange class="d-flex gap-3 align-items-center">
                <kendo-floatinglabel text="Início" id="dtinicio">
                  <kendo-dateinput kendoDateRangeStartInput [(value)]="filterPreOrder.start"></kendo-dateinput>
                </kendo-floatinglabel>
                <kendo-floatinglabel text="Término" id="dtfim">
                  <kendo-dateinput kendoDateRangeEndInput [(value)]="filterPreOrder.end"></kendo-dateinput>
                </kendo-floatinglabel>
              </kendo-daterange>
            </label>
          </div>
          <div class="col-md-6 col-sm-12 mt-3 mt-md-0">
            <label>
              <span class="d-block">CPF / CNPJ ou</span>
              <span class="d-block">Código do Cliente</span>
              <kendo-textbox formControlName="document" placeholder="Informe o CPF ou CNPJ do cliente"></kendo-textbox>
            </label>
          </div>
        </div>

        <!-- Nome do Cliente -->
        <div class="row mt-3">
          <div class="col-12">
            <label class="w-100">
              <span class="d-block">Nome do cliente</span>
              <kendo-textbox formControlName="nameCustomer"
                placeholder="Informe o nome ou razão social do cliente"></kendo-textbox>
            </label>
          </div>
        </div>

        <!-- Botão Pesquisar -->
        <div class="mt-3 text-center">
          <button kendoButton [disabled]="isLoading" [icon]="loadingIcon" (click)="getOrders()">Pesquisar</button>
        </div>
      </form>
    </div>

    <!-- Grid -->
    <div class="col-12 mt-4 flex-fill">
      <kendo-grid [kendoGridBinding]="orders" [sortable]="true" [loading]="isLoading" [height]="280"
        (edit)="selectedOrder($event)" (remove)="showItensOrder($event)">
        <kendo-grid-command-column title="Ações" width="190">
          <ng-template kendoGridCellTemplate let-dataItem>
            <div style="display: flex; align-items: center; gap: 10px;">
              <button kendoGridEditCommand icon="edit"></button>
              <button kendoGridRemoveCommand icon="binoculars"></button>
              <button kendoButton icon="printer" (click)="showItensOrder2(dataItem)"></button>
              <!-- <button
                kendoButton
                class="p-1"
                (click)="openReceivePix(true, dataItem)"
              >
                <div class="logo-pix"></div>
              </button> -->
            </div>
          </ng-template>

        </kendo-grid-command-column>
        <kendo-grid-column *ngFor="let col of columns" [field]="col.field" [title]="col.title" [width]="col.width"
          [class]="{ 'text-end': col.textEnd }">
          <ng-template *ngIf="col.field == 'orderValue'" kendoGridCellTemplate let-dataItem>
            <span>{{ dataItem.orderValue | currency }}</span>
          </ng-template>
        </kendo-grid-column>
      </kendo-grid>
    </div>
  </div>

  <div *ngIf="showInformation">
    <app-message-information opened="true" title="Pedido de venda" [message]="messageInformation"
      [information]="informationDescription" (resultEvent)="closeInformation($event)"></app-message-information>
  </div>

  <div *ngIf="showInformationSeller">
    <app-message-information opened="true" title="Pedido de venda" message="Pedido não pode ser alterado!"
      information="Pedido de outro vendedor, somente o vendedor responsável da venda poderá alterar o pedido."
      (resultEvent)="closeInformationSeller($event)"></app-message-information>
  </div>

  <div class="k-loading-panel" *ngIf="loadingPanelVisible">
    <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">Loading...</div>
    </div>
  </div>
</div>

<kendo-dialog title="Itens do pedido" animation="zoom" *ngIf="openedItensOrder"
  (close)="closeModelItensOrder('Cancelar')" [minWidth]="250" [width]="1200" [height]="450">
  <kendo-grid [kendoGridBinding]="orderItens" style="width: 1150px" [scrollable]="true">
    <kendo-grid-column field="productId" title="Código" [width]="70"></kendo-grid-column>
    <kendo-grid-column field="description" title="Descrição" [width]="250">
    </kendo-grid-column>
    <kendo-grid-column field="package" title="Embalagem" [width]="80">
    </kendo-grid-column>
    <kendo-grid-column field="color" title="Cor" [width]="100">
    </kendo-grid-column>
    <kendo-grid-column field="local" title="Ambiente" [width]="100">
    </kendo-grid-column>
    <kendo-grid-column [class]="{ 'text-end': true }" field="price" title="P.Venda" [width]="80">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span>{{ dataItem.price | currency }}</span>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column [class]="{ 'text-end': true }" field="quantity" title="Qtde" [width]="60">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span>{{ dataItem.quantity | number : "1.0-3" }}</span>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column [class]="{ 'text-end': true }" field="subTotal" title="Valor Total" [width]="80">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span>{{ dataItem.subTotal | currency }}</span>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid>
</kendo-dialog>

<kendo-dialog 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-window [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>

<kendo-window [top]="100" [left]="50" title="Recibo de PIX" [(state)]="windowState" *ngIf="openedPrintReceivePix"
  (close)="closePrintReceivePix('Não')">
  <stimulsoft-viewer-angular [requestUrl]="urlPrintCreditPix" [action]="'InitViewerComprovantePix'" [width]="'95%'"
    [height]="'800px'"></stimulsoft-viewer-angular>
</kendo-window>

<kendo-dialog title="Recebimento via PIX" animation="zoom" *ngIf="showReceivePix" (close)="closeReceivePix('Cancelar')"
  [minWidth]="250" [width]="450">
  <div *ngIf="!showQrCode">
    <form class="k-form" [formGroup]="formReceivePix">
      <kendo-formfield showHints="initial">
        <label class="k-label">Informe o valor a ser recebido via PIX</label>
        <!-- <kendo-numerictextbox
          [style.width.px]="170"
          name="pixValue"
          formControlName="pixValue"
          [min]="1"
        >
        </kendo-numerictextbox> -->
        <input type="number" kendoNumerictextbox formControlName="pixValue" />
      </kendo-formfield>
    </form>
    <kendo-dialog-actions>
      <button kendoButton (click)="closeReceivePix('Não')">Cancelar</button>
      <button kendoButton (click)="closeReceivePix('Sim')" themeColor="primary">
        Gerar
      </button>
    </kendo-dialog-actions>
  </div>

  <div *ngIf="showQrCode">
    <div class="row w-100 justify-content-center">
      <div class="col-4">
        <label>
          <span class="d-block">Pedido</span>
          <span>{{orderSelected.orderId}}</span>
        </label>
      </div>
      <div class="col-8">
        <label>
          <span class="d-block">Cliente</span>
          <span>{{orderSelected.customerName}}</span>
        </label>
      </div>
      <div class="col-4">
        <label>
          <span class="d-inline">Valor: </span>
          <span>{{pixValue | currency }}</span>
        </label>
      </div>
    </div>

    <div class="row w-100 justify-content-center" style="height: 200px">
      <div class="col-6">
        <kendo-qrcode class="w-100 h-100" [encoding]="encoding" [value]="qrCodePix">
        </kendo-qrcode>
      </div>
    </div>
    <div class="row w-100 mb-3">
      <div class="col-12">
        <kendo-textbox readonly="true" [value]="qrCodePix" [selectOnFocus]="true"></kendo-textbox>
      </div>
    </div>
    <kendo-dialog-actions>
      <button kendoButton (click)="closeReceivePix('Não')">Fechar</button>
    </kendo-dialog-actions>
  </div>
</kendo-dialog>