<header>
  <app-header-sales></app-header-sales>
</header>

<div class="d-flex flex-column wrapper">
  <main class="container flex-fill">
    <div class="row w-100 h-100 justify-content-center title-top">
      <div class="col-12">
        <div class="dropdown">
          <div
            class="row justify-content-center align-items-center align-content-center"
          >
            <div class="col-12">
              <div
                class="row mx-0 justify-content-center align-items-center align-content-center"
              >
                <div class="col-12">
                  <span class="title-search ms-3"
                    >Pesquise o produto desejado</span
                  >
                </div>
                <div class="col-12 mt-3">
                  <div class="row">
                    <!-- Caixa de busca -->
                    <div class="col-12 col-md-9 mb-3 mb-md-0">
                      <kendo-textbox
                        class="search text-search w-100"
                        (keydown)="keyDownFunction($event)"
                        [formControl]="searchProduct"
                        placeholder="Descrição do produto"
                        type="text"
                        placeholder="Pesquise o produto desejado por aqui"
                      >
                        <ng-template kendoTextBoxPrefixTemplate>
                          <button
                            kendoButton
                            fillMode="clear"
                            icon="search"
                          ></button>
                          <kendo-textbox-separator></kendo-textbox-separator>
                        </ng-template>
                      </kendo-textbox>
                      <div *ngIf="existsProduct" class="dropdown-content">
                        <kendo-listview
                          [height]="400"
                          [data]="loadProducts"
                          containerClass="k-d-flex k-flex-col k-flex-nowrap"
                        >
                          <ng-template
                            kendoListViewItemTemplate
                            let-dataItem="dataItem"
                            let-isFirst="isFirst"
                          >
                            <app-card-product-list
                              class="contact"
                              [product]="dataItem"
                              [borderTop]="!isFirst"
                            >
                            </app-card-product-list>
                          </ng-template>
                        </kendo-listview>
                      </div>
                    </div>
                    <!-- Botão de busca -->
                    <div class="col-12 col-md-3">
                      <button
                        kendoButton
                        class="btn-search btn-search-text w-100"
                        (click)="filterProduct()"
                      >
                        Pesquisar
                      </button>
                    </div>
                  </div>
                </div>

                <div class="col-12 mt-5">
                  <span class="ms-3 label-categoria"
                    >Categorias de produtos</span
                  >
                </div>

                <div class="col-12">
                  <div class="row justify-content-center mt-1 g-2 grid-btn">
                    <div class="col-3 btn-filter">
                      <a (click)="filterPromotion()">
                        <div class="row w-100">
                          <div class="col-12">
                            <div class="row justify-content-center">
                              <div class="col-4">
                                <img
                                  class="text-center"
                                  src="assets/img/img-produto_de_por.svg"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                          <div class="col-12">
                            <span class="title-btn-filter">Produtos</span>
                          </div>
                          <div class="col-12">
                            <span class="sub-title-btn-filter"
                              >"DE" / "POR"</span
                            >
                          </div>
                        </div>
                      </a>
                    </div>
                    <div class="col-3 btn-filter">
                      <a (click)="filterMarkdown()">
                        <div class="row w-100">
                          <div class="col-12">
                            <div class="row justify-content-center">
                              <div class="col-4">
                                <img
                                  class="text-center"
                                  src="assets/img/img-prod-baixaram-preco.svg"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                          <div class="col-12">
                            <span class="title-btn-filter">Produtos</span>
                          </div>
                          <div class="col-12">
                            <span class="sub-title-btn-filter"
                              >baixaram de preço</span
                            >
                          </div>
                        </div>
                      </a>
                    </div>
                    <div class="col-3 btn-filter">
                      <a (click)="filterOportunity()">
                        <div class="row w-100">
                          <div class="col-12">
                            <div class="row justify-content-center">
                              <div class="col-4">
                                <img
                                  class="text-center"
                                  src="assets/img/img-prod-oportunidade.svg"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                          <div class="col-12">
                            <span class="title-btn-filter">Produtos</span>
                          </div>
                          <div class="col-12">
                            <span class="sub-title-btn-filter"
                              >Oportunidade</span
                            >
                          </div>
                        </div>
                      </a>
                    </div>
                    <div class="col-3 btn-filter">
                      <a (click)="filterOffers()">
                        <div class="row w-100">
                          <div class="col-12">
                            <div class="row justify-content-center">
                              <div class="col-4">
                                <img
                                  class="text-center"
                                  src="assets/img/img-prod-ofertas.svg"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                          <div class="col-12">
                            <span class="title-btn-filter">Produtos</span>
                          </div>
                          <div class="col-12">
                            <span class="sub-title-btn-filter"
                              >Ofertas imperdíveis</span
                            >
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Implementação baldinho -->
      <div class="col-xs-12 col-md-3" style="height: 300px">
        <div class="ms-2">
          <h4>
            <span>Data para entrega</span>
          </h4>
          <h2>
            <span>{{(squedule$ | async).dateDelivery | date:'dd/MM/yyyy':'UTC'}}</span>
          </h2>
        </div>
      </div>
      <div class="col-xs-12 col-md-7" style="height: 200px">
        <h4>Disponibilidade de entrega por dia</h4>

        <kendo-grid id="my-grid"
          [data]="(squedule$ | async).deliveries"
          [height]="200"
          [rowClass]="rowCallback">
          <kendo-grid-column field="dateDelivery" title="Data">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.dateDelivery | date:'dd/MM/yyyy':'UTC'  }}
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="dateDelivery" title="Dia">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.dateDelivery | date:'EEEE':'UTC'  }}
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="deliverySize" title="Capacidade (Ton)" [class]="{ 'text-end': true }"></kendo-grid-column>
          <kendo-grid-column field="saleWeigth" title="Vendas (Ton)" [class]="{ 'text-end': true }">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.saleWeigth | number : "1.0-3"  }}
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="avaliableDelivery" title="Cap Disp (Ton)" [class]="{ 'text-end': true }">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.avaliableDelivery | number : "1.0-3"  }}
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="delivery" title="Tem entrega?">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.delivery == "S" ? 'Sim' : 'Não'  }}
            </ng-template>
          </kendo-grid-column>
        </kendo-grid>
        <!--"dateDelivery": "2025-03-06T03:00:00.000Z",
    "delivery": "S",
    "deliverySize": 90,
    "saleWeigth": 90,
    "avaliableDelivery": 0  -->
      </div>
      <!-- Fim Implementação baldinho -->
    </div>
  </main>
  <footer>
    <div class="container-fluid home-footer">
      <div class="row align-items-center justify-content-center">
        <div class="col-12">
          <span class="text-center text-footer">
            &copy; 2022 App Soluti Soluções em aplicativos moveis
          </span>
        </div>
      </div>
    </div>
  </footer>
</div>

<!--Offcanvas cart sales-->
<div
  class="offcanvas offcanvas-end"
  tabindex="-1"
  id="offcanvasRight"
  aria-labelledby="offcanvasRightLabel"
>
  <div class="offcanvas-header">
    <div class="row w-100 align-items-center">
      <div class="col-10">
        <div class="row align-items-center justify-content-center">
          <div class="col-2">
            <img
              class="ms-1"
              src="assets/icones/cart.svg"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="col-10">
            <h5>Produtos adicionados</h5>
          </div>
        </div>
      </div>
      <div class="col-2 ms-auto">
        <button
          type="button"
          class="btn-close text-reset"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
        ></button>
      </div>
    </div>
  </div>
  <div class="offcanvas-body p-0">
    <kendo-grid [data]="shoppingItems$ | async">
      <kendo-grid-column>
        <ng-template kendoGridCellTemplate let-dataItem>
          <!-- template for mobile -->
          <div class="row">
            <div class="col-4">
              <img
                *ngIf="dataItem.image"
                src="{{ dataItem.image }}"
                style="width: 85px; height: 100px"
              />
              <img
                *ngIf="!dataItem.image"
                src="../../../../assets/img/image-product.svg"
                style="width: 85px; height: 100px"
              />
            </div>
            <div class="col-8 p-1">
              <div class="col-12">
                <small class="d-block title-product">{{
                  dataItem.smallDescription
                }}</small>
              </div>
              <div class="col-12 mt-2 sale-price">
                <span>{{ dataItem.price | currency : "BRL" }}</span>
              </div>
              <kendo-textbox
                #quantityCart
                class="text-center"
                style="width: 230px"
                [value]="dataItem.quantity"
                [readonly]="true"
                editor="numeric"
              >
                <ng-template kendoTextBoxPrefixTemplate>
                  <button
                    kendoButton
                    look="clear"
                    (click)="addQuantity(dataItem)"
                  >
                    <!--Adicionar quantidade -->
                    <span class="k-icon k-i-add"></span>
                  </button>
                </ng-template>
                <ng-template kendoTextBoxSuffixTemplate>
                  <button
                    kendoButton
                    look="clear"
                    (click)="minusQuantity(dataItem)"
                  >
                    <!--Reduzir quantidade-->
                    <span class="k-icon k-i-minus"></span>
                  </button>
                  <button kendoButton look="clear">
                    <!--Reduzir quantidade-->
                    <span
                      class="k-icon k-i-edit k-color-warning"
                      (click)="editShoppingItem(dataItem)"
                    ></span>
                  </button>
                  <button kendoButton look="clear">
                    <!--Reduzir quantidade-->
                    <span
                      class="k-icon k-i-delete k-color-error"
                      (click)="showConfirmationCancelItem(dataItem)"
                    ></span>
                  </button>
                </ng-template>
              </kendo-textbox>
              <span
                *ngIf="(updating$ | async) || (loading$ | async)"
                class="ms-2 k-icon k-i-loading"
              ></span>
            </div>
          </div>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>
  <div class="offcanvas-footer">
    <div class="row g-0">
      <div class="col-6">
        <button
          kendo-button
          class="btn-flat"
          data-bs-dismiss="offcanvas"
          (click)="cancelSale()"
        >
          <span class="text-btn-flat">Cancelar venda</span>
        </button>
      </div>
      <div class="col-6">
        <button
          kendo-button
          class="btn-blue"
          data-bs-dismiss="offcanvas"
          (click)="confirmSale('offcanvasRight')"
        >
          <span class="text-btn-blue">Finalizar venda</span>
        </button>
      </div>
    </div>
  </div>
</div>

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

<div kendoDialogContainer></div>
