<app-header-shopping 
  (filterSelected)="onFilterSelected($event)"
  (productsFound)="onProductsFound($event)"
  (searchTriggered)="onSearchFromChild($event)"
>
</app-header-shopping>

<!-- <header>
  <app-header-system></app-header-system>
</header> -->

<div class="container" style="margin-top: 85px">
  <div class="row mt-2 g-0" style="height: 83vh">
    <div class="col-3 flex-fill container-menu-categorias">
      <legend class="k-form-legend legend-departments" (click)="selectedCategory(null, true)">
        Todos Departamentos
      </legend>
      <div>
        <kendo-treeview style="width: 100%" [nodes]="data" textField="text" kendoTreeViewExpandable
          kendoTreeViewHierarchyBinding childrenField="items" textField="text" kendoTreeViewSelectable selected="text"
          [(selectedKeys)]="selectedKeys" (selectionChange)="selectedCategory($event)">
          <ng-template kendoTreeViewNodeTemplate let-dataItem>
            {{ dataItem.text }}
          </ng-template>
        </kendo-treeview>
      </div>
      <legend class="k-form-legend mt-3">Marcas</legend>

      <div *ngIf="brands && brands.length > 0" style="
          height: 300px;
          max-height: 300px;
          overflow-y: scroll;
          overflow-x: hidden;
        ">
        <kendo-treeview style="width: 100%" kendoTreeViewHierarchyBinding [nodes]="brands" textField="description"
          [kendoTreeViewCheckable]="{ mode: 'multiple' }" kendoTreeViewSelectable selectBy="description" customCheck
          [(checkedKeys)]="selectedBrandKeys" (checkedChange)="selectedBrand()">
        </kendo-treeview>
      </div>
      <!-- Filtros padrão -->
      <div class="mt-5">
        <legend class="k-form-legend">Filtros</legend>
        <div>
          <input type="checkbox" kendoCheckBox [(ngModel)]="onlyWithStock" />
          <span class="ms-2">Somente produtos com estoque</span>
        </div>
        <div>
          <label>
            <span>Filial de estoque</span>
            <kendo-combobox [data]="store$ | async" textField="id" valueField="id"
              (selectionChange)="selectedStore($event)">
            </kendo-combobox>
          </label>

          <label class="k-label d-block mt-2">
            <input type="checkbox" kendoCheckBox [(ngModel)]="productPromotion" />
            <span class="ms-2">Produtos em promoção</span>
          </label>
          <label class="k-label d-block mb-3">
            <span>Faixa de desconto</span>
            <kendo-rangeslider [(ngModel)]="percentOff" [min]="minPercentOff" [max]="maxPercentOff"
              [smallStep]="smallStep" [largeStep]="largeStep"></kendo-rangeslider>
          </label>

          <label class="k-label d-block">
            <input type="checkbox" kendoCheckBox [(ngModel)]="markdown" />
            <span class="ms-2">Produtos que baixaram de preço</span>
          </label>

          <label class="k-label d-block">
            <input type="checkbox" kendoCheckBox [(ngModel)]="oportunity" />
            <span class="ms-2">Oportunidades</span>
          </label>

          <label class="k-label d-block">
            <input type="checkbox" kendoCheckBox [(ngModel)]="offers" />
            <span class="ms-2">Ofertas imperdíveis</span>
          </label>
          <div class="mt-3 mb-5 w-100">
            <button kendoButton (click)="getFilterProducts()">
              Aplicar Filtros
            </button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="!loading" class="col-9 flex-fill" #listProducts>
      <div class="row">
        <div class="col-6">
          <span *ngIf="products" class="label-search d-block">Produtos localizados</span>
          <span *ngIf="products">{{ products.length }} produtos encontrados</span>
        </div>
        <div class="col-4 ms-auto mb-2">
          <span class="label-search d-block">Ordernar por</span>
          <kendo-combobox [allowCustom]="true" [data]="listOrderBy" textField="text" valueField="field"
            [(ngModel)]="selectedOrderBy" (valueChange)="orderByProductChange($event)" [clearButton]="false">
          </kendo-combobox>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <kendo-listview style="width: 100%; height: 100%" [height]="heightListProducts" [data]="products"
            (scrollBottom)="loadMoreProducts()">
            <ng-template kendoListViewItemTemplate let-dataItem="dataItem" let-isLast="isLast">
              <app-product-card [product]="dataItem" (returnProduct)="receiveProductCard($event)"></app-product-card>
            </ng-template>
          </kendo-listview>
        </div>
      </div>
    </div>

    <div *ngIf="loading" class="col-9 flex-fill">
      <div class="k-loading-panel">
        <div class="k-loading-panel-mask"></div>
        <div class="k-loading-panel-wrapper">
          <div class="k-loading-panel-text text-center">
            <kendo-loader style="justify-content: center" type="infinite-spinner" themeColor="primary" size="large">
            </kendo-loader>
          </div>
          <div class="k-loading-panel-text text-center">
            Aguarde, carregando produtos...
          </div>
        </div>
      </div>

      <div class="row w-100 h-100 justify-content-center align-items-center">
        <div class="col-4"></div>
      </div>

      <!--div class="row w-100 h-100 justify-content-center align-items-center">
        <div class="col-4" style="background-color: blue">
          <kendo-loader
          class="text-center"
          [type]="'infinite-spinner'"
          [themeColor]="'primary'"
          [size]="'large'"
        >
        </kendo-loader>
        </div>

        <span>Aguarde, carregando produtos</span>
      </div-->
    </div>
  </div>
</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]="shoppingItens" (cellClick)="editHandler($event)" (edit)="updateQuantity($event)">
      <kendo-grid-column>
        <ng-template kendoGridCellTemplate let-dataItem>
          <!-- template for mobile -->
          <div class="row">
            <div class="col-4">
              <img *ngIf="!dataItem.image" src="assets/amico.png" alt="" style="width: 85px; height: 100px" />
              <img *ngIf="dataItem.image" src="{{ dataItem.image }}" alt="" 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>

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

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

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