<div class="container my-3 h-100">
  <h4 class="text-md-start text-center">Orçamentos Pendentes</h4>
  <div class="row mt-3">
    <div class="col">
      <form>
        <!-- Filial de Venda -->
        <div class="mb-3">
          <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>

        <!-- Data do Orçamento -->
        <div class="row gy-3">
          <div class="col-md-6">
            <label>
              <span class="d-block">Data do orçamento</span>
              <kendo-daterange>
                <kendo-floatinglabel text="Início">
                  <kendo-dateinput kendoDateRangeStartInput [(value)]="filterPreOrder.start"></kendo-dateinput>
                </kendo-floatinglabel>
                <kendo-floatinglabel text="Término">
                  <kendo-dateinput kendoDateRangeEndInput [(value)]="filterPreOrder.end"></kendo-dateinput>
                </kendo-floatinglabel>
                <kendo-daterange-popup
                  [animate]="{ type: 'fade', duration: 100, direction: 'down' }"></kendo-daterange-popup>
              </kendo-daterange>
            </label>
          </div>
          <div class="col-md-6">
            <label>
              <span class="d-block">Número do orçamento</span>
              <kendo-textbox [(value)]="filterPreOrder.idPreOrder"></kendo-textbox>
            </label>
          </div>
        </div>

        <!-- CPF/CNPJ e Nome do Cliente -->
        <div class="row mb-3">
          <div class="col-md-6">
            <label>
              <span class="d-block">CPF / CNPJ</span>
              <kendo-textbox [(value)]="filterPreOrder.document"></kendo-textbox>
            </label>
          </div>
          <div class="col-md-6">
            <label>
              <span class="d-block">Nome do cliente</span>
              <kendo-textbox [(value)]="filterPreOrder.nameCustomer"></kendo-textbox>
            </label>
          </div>
        </div>

        <!-- Botão de Pesquisar -->
        <div class="text-center text-md-start">
          <button kendoButton (click)="getPreOrders()" class="btn-primary">
            Pesquisar
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Tabela de Orçamentos -->
  <div class="col mt-3 w-100" style="background-color: blue">
    <kendo-grid [kendoGridBinding]="preOrders" [sortable]="true" [loading]="isLoading" [height]="600"
      (edit)="selectedPreOrder($event)" (remove)="showItensPreOrder($event)">
      <kendo-grid-command-column title="Ações" width="150">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button kendoGridEditCommand icon="edit"></button>
          <button kendoGridRemoveCommand icon="binoculars"></button>
          <button kendoButton icon="printer" (click)="showPrinterPreOrder(dataItem)"></button>
        </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 == 'value'" kendoGridCellTemplate let-dataItem>
          <span>{{ dataItem.value | currency }}</span>
        </ng-template>
        <ng-template *ngIf="col.field == 'customer'" kendoGridCellTemplate let-dataItem>
          <span *ngIf="dataItem.cpfPreCustomer == null && dataItem.idCustomer > 1">{{ dataItem.customer }}</span>
          <kendo-badge-container class="ms-2" *ngIf="dataItem.cpfPreCustomer != null && dataItem.idCustomer == 1">
            <span *ngIf="
                dataItem.cpfPreCustomer != null && dataItem.idCustomer == 1
              ">{{ dataItem.namePreCustomer }}</span>
            <kendo-badge [align]="align" [position]="position" *ngIf="
                dataItem.cpfPreCustomer != null && dataItem.idCustomer == 1
              " themeColor="error">PRE</kendo-badge>
          </kendo-badge-container>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>

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



  <kendo-dialog title="Itens do orçamento" animation="zoom" *ngIf="openedItensPreOrder"
    (close)="closeModelItensPreOrder('Cancelar')" [minWidth]="250" [width]="1200" [height]="450">
    <kendo-grid [kendoGridBinding]="preOrderItens" 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 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-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>