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

<main>
  <div class="container page-product mt-3">
    <div class="row">
      <!-- <div class="col-12 p-0 backMenu">
        <a href="/#/product-list" style="text-decoration: none"><span
            style="font-size: 0.8rem; color: #ec7e31; font-weight: bold">
            < Retorna a lista de produtos</span></a>
      </div> -->

      <!-- Botão de voltar -->
      <div class="col-12 p-0 backMenu">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div>
            <span
              style="
                font-size: 0.8rem;
                color: #ec7e31;
                font-weight: bold;
                cursor: pointer;
              "
              (click)="goBack()"
            >
              &lt; Retorna à lista de produtos
            </span>
          </div>
          <div>
            <a href="#comprejunto" class="col-6 botao-compre-similar"
              >Compre junto</a
            >
            <a href="#similar" class="col-6 botao-compre-similar">Similar</a>
          </div>
        </div>
      </div>

      <div class="col-12 my-3">
        <div class="title-product">{{ product.smallDescription }}</div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-5" style="height: 570px">
        <kendo-scrollview
          [data]="product.images"
          [width]="imageWidth"
          [height]="imageHeight"
          [arrows]="true"
          [pageable]="false"
        >
          <ng-template let-item="item">
            <div style="height: 100%">
              <img kendoCardMedia src="{{ item }}" draggable="true" />
            </div>
          </ng-template>
        </kendo-scrollview>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-7">
        <form [formGroup]="form">
          <div class="name-ecommerce">{{ product.title }}</div>
          <div class="brand-product mt-2">
            <span class="d-inline">{{ product.brand }}</span>
            <span class="ms-2 d-inline">•</span>
            <span class="ms-2 d-inline">{{ product.idProduct }}</span>
            <span class="ms-2 d-inline">•</span>
            <span class="ms-2 d-inline">{{ product.ean }}</span>
          </div>
          <div class="mt-2">
            <span
              *ngIf="product.productType == 'S'"
              class="d-inline tag-showroom tag-text"
              >SHOWROOM</span
            >
            <span
              *ngIf="product.productType == 'A'"
              class="d-inline tag-autosservico tag-text"
              >AUTOSSERVIÇO</span
            >
            <span
              *ngIf="product.campaign == 'S'"
              class="d-inline tag-campaign tag-text"
              >CAMPANHA</span
            >
            <span
              *ngIf="product.opportunity == 'S'"
              class="d-inline tag-opportunity tag-text"
              >OPORTUNIDADE</span
            >
          </div>
          <div class="row mt-2">
            <div class="col-12">
              <div *ngIf="product.offPercent > 0" class="mt-2">
                <span class="modal-list-price" style="font-size: 16px">de</span>
                <span
                  class="ms-1 modal-value-list-price"
                  style="font-size: 16px; font-weight: 700"
                  >{{ product.listPrice | currency }}</span
                >
                <span class="ms-1 modal-list-price" style="font-size: 16px"
                  >por</span
                >
              </div>
              <div *ngIf="product.offPercent == 0" class="mt-2"></div>
              <div class="col">
                <div class="row justify-content-start align-items-center">
                  <div class="col-4 p-0 ps-2">
                    <span class="d-inline sale-price">{{
                      salePrice | currency
                    }}</span>
                    <span
                      *ngIf="product.offPercent > 0"
                      class="d-inline ms-3 card-off text-off"
                      >-{{ product.offPercent | number : "1.0-0" }}%</span
                    >
                  </div>
                  <div class="col-1 p-0">
                    <span class="label-unity d-block">POR</span>
                    <span class="label-unity d-block">{{ product.unity }}</span>
                  </div>
                  <div class="col-3 p-0">
                    <span class="modal-label-installment d-block">EM 10X</span>
                    <span class="modal-label-installment d-block"
                      >de {{ salePrice / 10 | currency }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="product.unity == 'MT'">
            <span class="label-unity d-inline"
              >Preço da caixa {{ salePrice * product.mutiple | currency }}</span
            >
          </div>
          <div *ngIf="product.unity == 'M2'">
            <span class="label-unity d-inline"
              >Preço da caixa {{ salePrice * product.mutiple | currency }}</span
            >
          </div>
          <div *ngIf="product.offPercent == 0" class="mt-1">
            <span class="label-price"></span>
            <span class="ms-1 list-price"></span>
            <span class="ms-1 label-price"></span>
          </div>
          <div class="mt-1 w-100">
            <label class="w-100">
              <span>Filial Retira</span>
              <kendo-multicolumncombobox
                class="w-100"
                #stock
                [data]="stock$ | async"
                [textField]="'storeName'"
                [valueField]="'store'"
                [placeholder]="'Selecione a filial retira'"
                [valuePrimitive]="true"
                formControlName="store"
                [(value)]="data.store"
              >
                <kendo-combobox-column
                  [field]="'store'"
                  [title]="'Loja'"
                  [width]="50"
                >
                </kendo-combobox-column>
                <kendo-combobox-column
                  [field]="'storeName'"
                  [title]="'Nome da Loja'"
                  [width]="200"
                >
                </kendo-combobox-column>
                <kendo-combobox-column
                  [field]="'allowDelivery'"
                  [title]="'Entrega'"
                  [width]="60"
                >
                  <ng-template
                    kendoMultiColumnComboBoxColumnCellTemplate
                    let-dataItem
                  >
                    <input
                      readonly
                      type="checkbox"
                      class="cursor-default"
                      kendoCheckBox
                      [checked]="dataItem.allowDelivery"
                    />
                  </ng-template>
                </kendo-combobox-column>
                <kendo-combobox-column
                  [field]="'quantity'"
                  [title]="'Estoque'"
                  [width]="80"
                >
                  <ng-template
                    kendoMultiColumnComboBoxColumnCellTemplate
                    let-dataItem
                  >
                    {{ dataItem.quantity | number : "1.3-3" }}
                  </ng-template>
                </kendo-combobox-column>
                <kendo-combobox-column
                  [field]="'work'"
                  [title]="'Pertence'"
                  [width]="60"
                >
                  <ng-template
                    kendoMultiColumnComboBoxColumnCellTemplate
                    let-dataItem
                  >
                    <input
                      readonly
                      type="checkbox"
                      class="cursor-default"
                      kendoCheckBox
                      [checked]="dataItem.work"
                    />
                  </ng-template>
                </kendo-combobox-column>
                <kendo-combobox-column
                  [field]="'blocked'"
                  [title]="'Bloq'"
                  [width]="70"
                >
                  <ng-template
                    kendoMultiColumnComboBoxColumnCellTemplate
                    let-dataItem
                  >
                    {{ dataItem.blocked }}
                  </ng-template>
                </kendo-combobox-column>

                <kendo-combobox-column
                  [field]="'transfer'"
                  [title]="'Transf'"
                  [width]="70"
                >
                  <ng-template
                    kendoMultiColumnComboBoxColumnCellTemplate
                    let-dataItem
                  >
                    {{ dataItem.transfer }}
                  </ng-template>
                </kendo-combobox-column>
              </kendo-multicolumncombobox>
            </label>
          </div>

          <div class="row mt-2 w-100">
            <div
              *ngIf="product.unity == 'MT' || product.unity == 'M2'"
              class="col-12 mt-3"
            >
              <span>{{ calcBoxProduct(product) }} caixa(s)</span>
            </div>
            <div class="col-12">
              <div class="row">
                <div class="col-8">
                  <div class="d-inline">
                    <button class="d-inline modal-btn-quantity">
                      <div
                        class="text-center"
                        style="color: white; font-weight: bold"
                        (click)="minusQuantity(product)"
                      >
                        <span>-</span>
                      </div>
                    </button>
                    <input
                      kendoTextBox
                      class="d-inline modal-quantity text-center"
                      type="number"
                      formControlName="quantity"
                    />
                    <button
                      class="d-inline modal-btn-quantity"
                      (click)="addQuantity(product)"
                    >
                      <div
                        class="text-center"
                        style="color: white; font-weight: bold"
                      >
                        <span>+</span>
                      </div>
                    </button>
                    <div
                      *ngIf="shoppingService.getExistsLotProduct()"
                      class="d-inline"
                    >
                      <button
                        *ngIf="shoppingService.getExistsLotProduct()"
                        class="ms-3 d-inline modal-btn-quantity"
                        style="width: 70px"
                        (click)="openLotProduct()"
                      >
                        <div
                          class="text-center"
                          style="color: white; font-weight: bold"
                        >
                          <span>Lotes</span>
                        </div>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="col-4">
                  <div class="row">
                    <div *ngIf="!editPrice" class="col-10 text-end">
                      <span class="modal-price">
                        {{ salePrice | currency }}
                      </span>
                    </div>
                    <div *ngIf="editPrice" class="col-10 text-end">
                      <span>
                        <input
                          #inputPrice
                          currencyMask
                          class="d-block i-price"
                          formControlName="price"
                          [options]="{
                            prefix: 'R$ ',
                            thousands: '.',
                            decimal: ',',
                            spinners: false
                          }"
                        />
                      </span>
                    </div>
                    <div class="col-2 p-0">
                      <img
                        *ngIf="
                          !editPrice &&
                          (product.base == '' || product.base == 'N')
                        "
                        class="modal-img-edit"
                        src="../../../../assets/icones/edit.svg"
                        (click)="editingPrice()"
                      />
                      <i
                        *ngIf="editPrice"
                        class="d-inline bi bi-check-square modal-img-edit"
                        style="color: green"
                        (click)="confirmPrice()"
                      ></i>
                      <i
                        *ngIf="editPrice"
                        class="d-inline bi bi-x-square modal-img-edit ms-2"
                        style="color: red"
                        (click)="editingPrice()"
                      ></i>
                    </div>
                  </div>
                  <div *ngIf="product.unity == 'MT'">
                    <input
                      type="checkbox"
                      #notification
                      kendoCheckBox
                      formControlName="addUpQuantity"
                      (click)="addQuantityM2()"
                    />
                    <kendo-label
                      class="k-checkbox-label label-addUpQuantity"
                      [for]="notification"
                      text="Adicione 10% (0,00m2)"
                    ></kendo-label>
                  </div>
                  <div *ngIf="product.unity == 'M2'">
                    <input
                      type="checkbox"
                      #notification
                      kendoCheckBox
                      formControlName="addUpQuantity"
                      (click)="addQuantityM2()"
                    />
                    <kendo-label
                      class="k-checkbox-label label-addUpQuantity"
                      [for]="notification"
                      text="Adicione 10% (0,00m2)"
                    ></kendo-label>
                  </div>
                </div>
              </div>
              <div class="row mt-2">
                <div class="col-12">
                  <label class="title-form-column w-100">
                    <span>Ambiente</span>
                    <kendo-textbox formControlName="environment">
                    </kendo-textbox>
                  </label>
                </div>
                <div class="col-12 mt-2">
                  <label class="title-form-column w-100">
                    <span>Selecione tipo de entrega</span>
                    <kendo-combobox
                      [data]="dataDelivery"
                      textField="description"
                      valueField="type"
                      formControlName="deliveryType"
                      [valuePrimitive]="true"
                      required
                    >
                    </kendo-combobox>
                  </label>
                </div>
                <div *ngIf="product.base == 'S'" class="col-12">
                  <div class="mt-2 box-tintometric w-100">
                    <label class="w-100">
                      <span>Preço (Tintométrico)</span>
                      <input
                        kendoTextBox
                        type="number"
                        formControlName="price"
                      />
                    </label>
                    <label class="w-100">
                      <span>Descrição auxiliar</span>
                      <input
                        class="text-muted"
                        kendoTextBox
                        disabled
                        type="text"
                        formControlName="description"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>

        <div>
          <button
            kendoButton
            [disabled]="this.editPrice"
            class="btn-add-cart m-0 mt-3 w-100"
            (click)="addProductCard(product)"
          >
            <span>Adicionar ao carrinho</span>
          </button>
        </div>
      </div>

      <div class="col-12 mb-5">
        <div class="row mt-2 mx-0 w-100 p-0 justify-content-end">
          <div class="col-6 p-0">
            <span class="description-product">Descrição do produto</span>
          </div>
          <div class="col-6 p-0 text-end">
            <span class="description-more" (click)="isShowDescription()">{{
              textShowMore
            }}</span>
          </div>
        </div>
        <div class="row w-100 mx-0 p-0">
          <div class="col p-0">
            <div class="dropdown-divider"></div>
          </div>
        </div>
        <div *ngIf="showDescription" class="row w-100 mx-0 p-0">
          <span style="max-height: 250px; overflow: scroll; overflow-x: hidden">
            {{ product.description }}
          </span>
        </div>
      </div>

      <div class="col-12 mb-5" id="comprejunto">
        <div class="row mt-2 mx-0 w-100 p-0 justify-content-end">
          <div class="col-12 p-0">
            <span class="description-product">Compre junto</span>
          </div>
          <div class="col-12 p-0">
            <div class="dropdown-divider"></div>
          </div>
        </div>
        <div class="row w-100 mx-0 p-0 g-2">
          <!-- <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div> -->

          <div
            *ngFor="let productbuyTogether of productsBuyTogether"
            class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3"
          >
            <div class="card h-100">
              <div style="height: 250px">
                <span
                  *ngIf="productbuyTogether.offPercent > 0"
                  class="position-absolute top-0 start-0 badge rounded-pill bg-danger m-2 opacity-50"
                  style="z-index: 999; font-size: 0.9rem"
                  >-{{ productbuyTogether.offPercent | number : "1.0-0" }}%
                  off</span
                >
                <kendo-scrollview
                  [data]="productbuyTogether.images"
                  [width]="imageWidth"
                  [height]="imageHeight"
                  [arrows]="true"
                  [pageable]="false"
                >
                  <ng-template let-item="item">
                    <div style="height: 100%">
                      <img kendoCardMedia src="{{ item }}" draggable="true" />
                    </div>
                  </ng-template>
                </kendo-scrollview>
              </div>

              <div class="card-body">
                <div class="card-title" style="height: 48px">
                  {{ productbuyTogether.title }}
                </div>
                <div class="row mt-2">
                  <div class="col-12">
                    <div *ngIf="productbuyTogether.offPercent > 0" class="mt-2">
                      <span class="modal-list-price" style="font-size: 16px"
                        >de</span
                      >
                      <span
                        class="ms-1 modal-value-list-price"
                        style="font-size: 16px; font-weight: 700"
                        >{{ productbuyTogether.listPrice | currency }}</span
                      >
                      <span
                        class="ms-1 modal-list-price"
                        style="font-size: 16px"
                        >por</span
                      >
                    </div>
                    <div
                      *ngIf="productbuyTogether.offPercent == 0"
                      class="mt-2"
                    ></div>
                    <div class="col-12">
                      <div class="row justify-content-start align-items-center">
                        <div class="col-8 p-0 ps-2">
                          <span class="d-inline sale-price">{{
                            productbuyTogether.salePrice | currency
                          }}</span>
                        </div>
                        <div class="col-1 p-0">
                          <span class="label-unity d-block">{{
                            productbuyTogether.unity
                          }}</span>
                        </div>
                        <div class="col-3 p-0">
                          <span class="modal-label-installment d-block"
                            >EM 10X</span
                          >
                          <span class="modal-label-installment d-block"
                            >de
                            {{
                              productbuyTogether.salePrice / 10 | currency
                            }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <button
                  kendoButton
                  class="btn-add-cart m-0 mt-3 w-100"
                  (click)="openCloseProductTogether(productbuyTogether, true)"
                >
                  <span>Adicionar</span>
                </button>
              </div>
            </div>
          </div>

          <!-- <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <button
                  kendoButton
                  [disabled]="this.editPrice"
                  class="btn-add-cart m-0 mt-3 w-100"
                  (click)="addProductCard(product)"
                >
                  <span>Adicionar</span>
                </button>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div> -->
        </div>
      </div>
      <div class="col-12 mb-5" id="similar">
        <div class="row mt-2 mx-0 w-100 p-0 justify-content-end">
          <div class="col-12 p-0">
            <span class="description-product">Similar</span>
          </div>
          <div class="col-12 p-0">
            <div class="dropdown-divider"></div>
          </div>
        </div>
        <div class="row w-100 mx-0 p-0 g-2">
          <!-- <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div> -->

          <div
            *ngFor="let productSimilar of productsSimilar"
            class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3"
          >
            <div class="card h-100">
              <div style="height: 250px">
                <span
                  *ngIf="productSimilar.offPercent > 0"
                  class="position-absolute top-0 start-0 badge rounded-pill bg-danger m-2 opacity-50"
                  style="z-index: 999; font-size: 0.9rem"
                  >-{{ productSimilar.offPercent | number : "1.0-0" }}%
                  off</span
                >
                <kendo-scrollview
                  [data]="productSimilar.images"
                  [width]="imageWidth"
                  [height]="imageHeight"
                  [arrows]="true"
                  [pageable]="false"
                >
                  <ng-template let-item="item">
                    <div style="height: 100%">
                      <img kendoCardMedia src="{{ item }}" draggable="true" />
                    </div>
                  </ng-template>
                </kendo-scrollview>
              </div>

              <div class="card-body">
                <div class="card-title" style="height: 48px">
                  {{ productSimilar.title }}
                </div>
                <div class="row mt-2">
                  <div class="col-12">
                    <div *ngIf="productSimilar.offPercent > 0" class="mt-2">
                      <span class="modal-list-price" style="font-size: 16px"
                        >de</span
                      >
                      <span
                        class="ms-1 modal-value-list-price"
                        style="font-size: 16px; font-weight: 700"
                        >{{ productSimilar.listPrice | currency }}</span
                      >
                      <span
                        class="ms-1 modal-list-price"
                        style="font-size: 16px"
                        >por</span
                      >
                    </div>
                    <div
                      *ngIf="productSimilar.offPercent == 0"
                      class="mt-2"
                    ></div>
                    <div class="col-12">
                      <div class="row justify-content-start align-items-center">
                        <div class="col-8 p-0 ps-2">
                          <span class="d-inline sale-price">{{
                            productSimilar.salePrice | currency
                          }}</span>
                        </div>
                        <div class="col-1 p-0">
                          <span class="label-unity d-block">{{
                            productSimilar.unity
                          }}</span>
                        </div>
                        <div class="col-3 p-0">
                          <span class="modal-label-installment d-block"
                            >EM 10X</span
                          >
                          <span class="modal-label-installment d-block"
                            >de
                            {{ productSimilar.salePrice / 10 | currency }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <button
                  kendoButton
                  class="btn-add-cart m-0 mt-3 w-100"
                  (click)="openCloseProductSimilar(productSimilar, true)"
                >
                  <span>Adicionar</span>
                </button>
              </div>
            </div>
          </div>

          <!-- <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <button
                  kendoButton
                  [disabled]="this.editPrice"
                  class="btn-add-cart m-0 mt-3 w-100"
                  (click)="addProductCard(product)"
                >
                  <span>Adicionar</span>
                </button>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-4 col-lg-3">
            <div class="card" style="width: 18rem">
              <img src="..." class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>

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

  <div *ngIf="showLotProduct">
    <kendo-dialog
      opened="showLotProduct"
      title="Lote do produto"
      width="700px"
      height="600px"
      (close)="returnShowLotProduct()"
      (resultEvent)="returnShowLotProduct()"
    >
      <kendo-grid
        [data]="view"
        id="productsGrid"
        (cellClick)="cellClickHandler($event)"
      >
        <div *ngIf="formGroup">
          <button kendoButton [disabled]="!formGroup.valid" (click)="saveRow()">
            Save
          </button>
          <button kendoButton themeColor="primary" (click)="cancelHandler()">
            Cancel
          </button>
        </div>
        <kendo-grid-column field="storeId" title="Filial"></kendo-grid-column>
        <kendo-grid-column field="lotProduct" title="Lote"></kendo-grid-column>
        <kendo-grid-column
          field="quantitySale"
          title="Qt Já vendida"
        ></kendo-grid-column>
        <kendo-grid-column
          field="quantityStock"
          title="Qtde Disponível"
        ></kendo-grid-column>
        <!-- <kendo-grid-column
          field="quantity"
          editor="numeric"
          title="Qt Venda"
        ></kendo-grid-column> -->
      </kendo-grid>
    </kendo-dialog>
  </div>
</main>

<!-- <kendo-window [(width)]="windowWidth" [(height)]="windowHeight" title="{{ productTogether.title }}" class="responsive-modal"
  *ngIf="openProductTogether" (close)="openCloseProductTogether(productTogether, false)">
  <div class="container page-product mt-3">
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-5" style="height: 250px">
        <kendo-scrollview [data]="productTogether.images" [width]="imageWidth" [height]="imageHeight" [arrows]="true"
          [pageable]="false">
          <ng-template let-item="item">
            <div style="height: 100%">
              <img kendoCardMedia src="{{ item }}" draggable="true" />
            </div>
          </ng-template>
        </kendo-scrollview>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-7">
        <form [formGroup]="formProductTogether">
          <div class="name-ecommerce">{{ productTogether.title }}</div>
          <div class="brand-product mt-2">
            <span class="d-inline">{{ productTogether.brand }}</span>
            <span class="ms-2 d-inline">•</span>
            <span class="ms-2 d-inline">{{ productTogether.idProduct }}</span>
            <span class="ms-2 d-inline">•</span>
            <span class="ms-2 d-inline">{{ productTogether.ean }}</span>
          </div>
          <div class="mt-2">
            <span *ngIf="productTogether.productType == 'S'" class="d-inline tag-showroom tag-text">SHOWROOM</span>
            <span *ngIf="productTogether.productType == 'A'"
              class="d-inline tag-autosservico tag-text">AUTOSSERVIÇO</span>
            <span *ngIf="productTogether.campaign == 'S'" class="d-inline tag-campaign tag-text">CAMPANHA</span>
            <span *ngIf="productTogether.opportunity == 'S'"
              class="d-inline tag-opportunity tag-text">OPORTUNIDADE</span>
          </div>
          <div class="row mt-2">
            <div class="col-12">
              <div *ngIf="productTogether.offPercent > 0" class="mt-2">
                <span class="modal-list-price" style="font-size: 16px">de</span>
                <span class="ms-1 modal-value-list-price" style="font-size: 16px; font-weight: 700">{{
                  productTogether.listPrice | currency }}</span>
                <span class="ms-1 modal-list-price" style="font-size: 16px">por</span>
              </div>
              <div *ngIf="productTogether.offPercent == 0" class="mt-2"></div>
              <div class="col">
                <div class="row justify-content-start align-items-center">
                  <div class="col-6 p-0 ps-2">
                    <span class="d-inline sale-price">{{
                      productTogether.salePrice | currency
                      }}</span>
                    <span *ngIf="productTogether.offPercent > 0" class="d-inline ms-3 card-off text-off">-{{
                      productTogether.offPercent | number : "1.0-0"
                      }}%</span>
                  </div>
                  <div class="col-1 p-0">
                    <span class="label-unity d-block">POR</span>
                    <span class="label-unity d-block">{{
                      productTogether.unity
                      }}</span>
                  </div>
                  <div class="col-3 p-0">
                    <span class="modal-label-installment d-block">EM 10X</span>
                    <span class="modal-label-installment d-block">de {{ productTogether.salePrice / 10 | currency
                      }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="product.unity == 'MT'">
            <span class="label-unity d-inline">Preço da caixa
              {{
              productTogether.salePrice * productTogether.mutiple | currency
              }}</span>
          </div>
          <div *ngIf="product.unity == 'M2'">
            <span class="label-unity d-inline">Preço da caixa
              {{
              productTogether.salePrice * productTogether.mutiple | currency
              }}</span>
          </div>
          <div *ngIf="productTogether.offPercent == 0" class="mt-1">
            <span class="label-price"></span>
            <span class="ms-1 list-price"></span>
            <span class="ms-1 label-price"></span>
          </div>

          <div class="col-12 mt-2">
            <kendo-formfield showErrors="always">
              <label class="title-form-column w-100">
                <span>Selecione tipo de entrega</span>
                <kendo-combobox [data]="dataDelivery" textField="description" valueField="type"
                  formControlName="deliveryType" [valuePrimitive]="true" required>
                </kendo-combobox>
              </label>
              <kendo-formerror *ngIf="
                  formProductTogether.controls.deliveryType.errors?.required
                ">Erro: Informe o tipo de entrega para o produto</kendo-formerror>
            </kendo-formfield>
          </div>

          <div class="mt-1 w-100">
            <kendo-formfield showErrors="end">
              <label class="w-100">
                <span>Filial Retira</span>
                <kendo-multicolumncombobox class="w-100" #stock [data]="stockProductTogether$ | async"
                  [textField]="'store'" [valueField]="'store'" [placeholder]="'Selecione a filial retira'"
                  [valuePrimitive]="true" formControlName="store" [(value)]="dataProductTogether.store"
                  (selectionChange)="setStockProductTogether($event)">
                  <kendo-combobox-column [field]="'store'" [title]="'Loja'" [width]="60">
                  </kendo-combobox-column>
                  <kendo-combobox-column [field]="'allowDelivery'" [title]="'Entrega'" [width]="80">
                    <ng-template kendoMultiColumnComboBoxColumnCellTemplate let-dataItem>
                      <input readonly type="checkbox" class="cursor-default" kendoCheckBox
                        [checked]="dataItem.allowDelivery" />
                    </ng-template>
                  </kendo-combobox-column>
                  <kendo-combobox-column [field]="'quantity'" [title]="'Estoque'" [width]="100">
                    <ng-template kendoMultiColumnComboBoxColumnCellTemplate let-dataItem>
                      {{ dataItem.quantity | number : "1.3-3" }}
                    </ng-template>
                  </kendo-combobox-column>
                  <kendo-combobox-column [field]="'work'" [title]="'Pertence'" [width]="80">
                    <ng-template kendoMultiColumnComboBoxColumnCellTemplate let-dataItem>
                      <input readonly type="checkbox" class="cursor-default" kendoCheckBox [checked]="dataItem.work" />
                    </ng-template>
                  </kendo-combobox-column>
                  <kendo-combobox-column [field]="'blocked'" [title]="'Bloqueada'" [width]="80">
                    <ng-template kendoMultiColumnComboBoxColumnCellTemplate let-dataItem>
                      {{ dataItem.blocked }}
                    </ng-template>
                  </kendo-combobox-column>

                  <kendo-combobox-column [field]="'transfer'" [title]="'Transferência'" [width]="80">
                    <ng-template kendoMultiColumnComboBoxColumnCellTemplate let-dataItem>
                      {{ dataItem.transfer }}
                    </ng-template>
                  </kendo-combobox-column>
                </kendo-multicolumncombobox>
              </label>
              <kendo-formerror *ngIf="
                  formProductTogether.controls.store.errors?.estoqueIndisponivel
                ">Erro: Estoque do filial selecionada inferior a quantidade da
                venda, selecione outra filial.</kendo-formerror>
            </kendo-formfield>
          </div>

          <div class="row mt-2 w-100">
            <div *ngIf="
                productTogether.unity == 'MT' || productTogether.unity == 'M2'
              " class="col-12 mt-3">
              <span>{{
                calcBoxProductProductTogether(productTogether)
                }}
                caixa(s)</span>
            </div>
            <div class="col-12">
              <div class="row">
                <div class="col-12">
                  <div class="d-inline">
                    <button class="d-inline modal-btn-quantity">
                      <div class="text-center" style="color: white; font-weight: bold"
                        (click)="minusQuantityProductTogether(productTogether)">
                        <span>-</span>
                      </div>
                    </button>
                    <input kendoTextBox class="d-inline modal-quantity text-center" type="number"
                      formControlName="quantity" />
                    <button class="d-inline modal-btn-quantity" (click)="addQuantityProductTogether(productTogether)">
                      <div class="text-center" style="color: white; font-weight: bold">
                        <span>+</span>
                      </div>
                    </button>
                  </div>
                </div>
                <div class="col-12 mt-3">
                  <div class="row">
                    <div *ngIf="!editPrice" class="col-10 text-start">
                      <span class="modal-price">
                        {{ productTogether.salePrice | currency }}
                      </span>
                    </div>
                    <div *ngIf="editPrice" class="col-10 text-start">
                      <kendo-formfield showErrors="end">
                        <input #inputPrice currencyMask class="d-block i-price" formControlName="price" [options]="{
                            prefix: 'R$ ',
                            thousands: '.',
                            decimal: ',',
                            spinners: false
                          }" />
                        <kendo-formerror *ngIf="
                            formProductTogether.controls.price.errors
                              ?.invalidPrice
                          ">Erro: Preço de venda inferior ao preço de tabela,
                          utilize a função de desconto para o
                          produto.</kendo-formerror>
                      </kendo-formfield>
                    </div>
                    <div class="col-2 p-0">
                      <img *ngIf="
                          !editPrice &&
                          (productTogether.base == '' ||
                            productTogether.base == 'N')
                        " class="modal-img-edit" src="../../../../assets/icones/edit.svg"
                        (click)="editingPriceProductTogether()" />
                      <i *ngIf="editPrice && !formProductTogether.controls.price.errors?.invalidPrice"
                        class="d-inline bi bi-check-square modal-img-edit" style="color: green"
                        (click)="confirmPriceProductTogether(productTogether)"></i>
                      <i *ngIf="editPrice" class="d-inline bi bi-x-square modal-img-edit ms-2" style="color: red"
                        (click)="editingPriceProductTogether()"></i>
                    </div>
                  </div>
                  <div *ngIf="productTogether.unity == 'MT'">
                    <input type="checkbox" #notification kendoCheckBox formControlName="addUpQuantity"
                      (click)="addQuantityM2ProductTogether()" />
                    <kendo-label class="k-checkbox-label label-addUpQuantity" [for]="notification"
                      text="Adicione 10% (0,00m2)"></kendo-label>
                  </div>
                  <div *ngIf="productTogether.unity == 'M2'">
                    <input type="checkbox" #notification kendoCheckBox formControlName="addUpQuantity"
                      (click)="addQuantityM2ProductTogether()" />
                    <kendo-label class="k-checkbox-label label-addUpQuantity" [for]="notification"
                      text="Adicione 10% (0,00m2)"></kendo-label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>

      <div>
        <button kendoButton [disabled]="this.editPrice || !formProductTogether.valid"
          class="btn-add-cart-product-together m-0 mt-3 w-100" (click)="addProductCardProductTogether(productTogether)">
          <span>Adicionar ao carrinho</span>
        </button>
      </div>
    </div>
  </div>
</kendo-window> -->

<!-- Modal novo para tablets -->
<div
  class="modal fade"
  id="productTogetherModal"
  tabindex="-1"
  aria-labelledby="productTogetherModalLabel"
  aria-hidden="true"
  [ngClass]="{ show: openProductTogether }"
  [style.display]="openProductTogether ? 'block' : 'none'"
  style="background-color: rgba(0, 0, 0, 0.5)"
>
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="productTogetherModalLabel">
          {{ productTogether?.title }}
        </h5>
        <button
          type="button"
          class="btn-close"
          aria-label="Close"
          (click)="openCloseProductTogether(null, false)"
        ></button>
      </div>
      <div class="modal-body">
        <div *ngIf="productTogether">
          <div class="container page-product mt-3">
            <div class="row">
              <div class="col-sm-12 col-md-6 col-lg-5" style="height: 250px">
                <kendo-scrollview
                  [data]="productTogether.images"
                  [width]="imageWidth"
                  [height]="imageHeight"
                  [arrows]="true"
                  [pageable]="false"
                >
                  <ng-template let-item="item">
                    <div style="height: 100%">
                      <img
                        kendoCardMedia
                        class="img-modal-prod"
                        src="{{ item }}"
                        draggable="true"
                      />
                    </div>
                  </ng-template>
                </kendo-scrollview>
              </div>

              <div class="col-sm-12 col-md-6 col-lg-7">
                <form [formGroup]="formProductTogether">
                  <div class="name-ecommerce">{{ productTogether.title }}</div>
                  <div class="brand-product mt-2">
                    <span class="d-inline">{{ productTogether.brand }}</span>
                    <span class="ms-2 d-inline">•</span>
                    <span class="ms-2 d-inline">{{
                      productTogether.idProduct
                    }}</span>
                    <span class="ms-2 d-inline">•</span>
                    <span class="ms-2 d-inline">{{ productTogether.ean }}</span>
                  </div>
                  <div class="mt-2">
                    <span
                      *ngIf="productTogether.productType == 'S'"
                      class="d-inline tag-showroom tag-text"
                      >SHOWROOM</span
                    >
                    <span
                      *ngIf="productTogether.productType == 'A'"
                      class="d-inline tag-autosservico tag-text"
                      >AUTOSSERVIÇO</span
                    >
                    <span
                      *ngIf="productTogether.campaign == 'S'"
                      class="d-inline tag-campaign tag-text"
                      >CAMPANHA</span
                    >
                    <span
                      *ngIf="productTogether.opportunity == 'S'"
                      class="d-inline tag-opportunity tag-text"
                      >OPORTUNIDADE</span
                    >
                  </div>
                  <div class="row mt-2">
                    <div class="col-12">
                      <div *ngIf="productTogether.offPercent > 0" class="mt-2">
                        <span class="modal-list-price" style="font-size: 16px"
                          >de</span
                        >
                        <span
                          class="ms-1 modal-value-list-price"
                          style="font-size: 16px; font-weight: 700"
                          >{{ productTogether.listPrice | currency }}</span
                        >
                        <span
                          class="ms-1 modal-list-price"
                          style="font-size: 16px"
                          >por</span
                        >
                      </div>
                      <div
                        *ngIf="productTogether.offPercent == 0"
                        class="mt-2"
                      ></div>
                      <div class="col">
                        <div
                          class="row justify-content-start align-items-center"
                        >
                          <div class="col-6 p-0 ps-2">
                            <span class="d-inline sale-price">{{
                              productTogether.salePrice | currency
                            }}</span>
                            <span
                              *ngIf="productTogether.offPercent > 0"
                              class="d-inline ms-3 card-off text-off"
                              >-{{
                                productTogether.offPercent | number : "1.0-0"
                              }}%</span
                            >
                          </div>
                          <div class="col-1 p-0">
                            <span class="label-unity d-block">POR</span>
                            <span class="label-unity d-block">{{
                              productTogether.unity
                            }}</span>
                          </div>
                          <div class="col-3 p-0">
                            <span class="modal-label-installment d-block"
                              >EM 10X</span
                            >
                            <span class="modal-label-installment d-block"
                              >de
                              {{
                                productTogether.salePrice / 10 | currency
                              }}</span
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="product.unity == 'MT'">
                    <span class="label-unity d-inline"
                      >Preço da caixa
                      {{
                        productTogether.salePrice * productTogether.mutiple
                          | currency
                      }}</span
                    >
                  </div>
                  <div *ngIf="product.unity == 'M2'">
                    <span class="label-unity d-inline"
                      >Preço da caixa
                      {{
                        productTogether.salePrice * productTogether.mutiple
                          | currency
                      }}</span
                    >
                  </div>
                  <div *ngIf="productTogether.offPercent == 0" class="mt-1">
                    <span class="label-price"></span>
                    <span class="ms-1 list-price"></span>
                    <span class="ms-1 label-price"></span>
                  </div>

                  <div class="col-12 mt-2">
                    <kendo-formfield showErrors="always">
                      <label class="title-form-column w-100">
                        <span>Selecione tipo de entrega</span>
                        <kendo-combobox
                          [data]="dataDelivery"
                          textField="description"
                          valueField="type"
                          formControlName="deliveryType"
                          [valuePrimitive]="true"
                          required
                        >
                        </kendo-combobox>
                      </label>
                      <kendo-formerror
                        *ngIf="
                          formProductTogether.controls.deliveryType.errors
                            ?.required
                        "
                        >Erro: Informe o tipo de entrega para o
                        produto</kendo-formerror
                      >
                    </kendo-formfield>
                  </div>

                  <div class="mt-1 w-100">
                    <kendo-formfield showErrors="end">
                      <label class="w-100">
                        <span>Filial Retira</span>
                        <kendo-multicolumncombobox
                          class="w-100"
                          #stock
                          [data]="stockProductTogether$ | async"
                          [textField]="'store'"
                          [valueField]="'store'"
                          [placeholder]="'Selecione a filial retira'"
                          [valuePrimitive]="true"
                          formControlName="store"
                          [(value)]="dataProductTogether.store"
                          (selectionChange)="setStockProductTogether($event)"
                        >
                          <kendo-combobox-column
                            [field]="'store'"
                            [title]="'Loja'"
                            [width]="60"
                          >
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'allowDelivery'"
                            [title]="'Entrega'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              <input
                                readonly
                                type="checkbox"
                                class="cursor-default"
                                kendoCheckBox
                                [checked]="dataItem.allowDelivery"
                              />
                            </ng-template>
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'quantity'"
                            [title]="'Estoque'"
                            [width]="100"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              {{ dataItem.quantity | number : "1.3-3" }}
                            </ng-template>
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'work'"
                            [title]="'Pertence'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              <input
                                readonly
                                type="checkbox"
                                class="cursor-default"
                                kendoCheckBox
                                [checked]="dataItem.work"
                              />
                            </ng-template>
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'blocked'"
                            [title]="'Bloqueada'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              {{ dataItem.blocked }}
                            </ng-template>
                          </kendo-combobox-column>

                          <kendo-combobox-column
                            [field]="'transfer'"
                            [title]="'Transferência'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              {{ dataItem.transfer }}
                            </ng-template>
                          </kendo-combobox-column>
                        </kendo-multicolumncombobox>
                      </label>
                      <kendo-formerror
                        *ngIf="
                          formProductTogether.controls.store.errors
                            ?.estoqueIndisponivel
                        "
                        >Erro: Estoque do filial selecionada inferior a
                        quantidade da venda, selecione outra
                        filial.</kendo-formerror
                      >
                    </kendo-formfield>
                  </div>

                  <div class="row mt-2 w-100">
                    <div
                      *ngIf="
                        productTogether.unity == 'MT' ||
                        productTogether.unity == 'M2'
                      "
                      class="col-12 mt-3"
                    >
                      <span
                        >{{
                          calcBoxProductProductTogether(productTogether)
                        }}
                        caixa(s)</span
                      >
                    </div>
                    <div class="col-12">
                      <div class="row">
                        <div class="col-12">
                          <div class="d-inline">
                            <button class="d-inline modal-btn-quantity">
                              <div
                                class="text-center"
                                style="color: white; font-weight: bold"
                                (click)="
                                  minusQuantityProductTogether(productTogether)
                                "
                              >
                                <span>-</span>
                              </div>
                            </button>
                            <input
                              kendoTextBox
                              class="d-inline modal-quantity text-center"
                              type="number"
                              formControlName="quantity"
                            />
                            <button
                              class="d-inline modal-btn-quantity"
                              (click)="
                                addQuantityProductTogether(productTogether)
                              "
                            >
                              <div
                                class="text-center"
                                style="color: white; font-weight: bold"
                              >
                                <span>+</span>
                              </div>
                            </button>
                          </div>
                        </div>
                        <div class="col-12 mt-3">
                          <div class="row">
                            <div *ngIf="!editPrice" class="col-10 text-start">
                              <span class="modal-price">
                                {{ productTogether.salePrice | currency }}
                              </span>
                            </div>
                            <div *ngIf="editPrice" class="col-10 text-start">
                              <kendo-formfield showErrors="end">
                                <input
                                  #inputPrice
                                  currencyMask
                                  class="d-block i-price"
                                  formControlName="price"
                                  [options]="{
                                    prefix: 'R$ ',
                                    thousands: '.',
                                    decimal: ',',
                                    spinners: false
                                  }"
                                />
                                <kendo-formerror
                                  *ngIf="
                                    formProductTogether.controls.price.errors
                                      ?.invalidPrice
                                  "
                                  >Erro: Preço de venda inferior ao preço de
                                  tabela, utilize a função de desconto para o
                                  produto.</kendo-formerror
                                >
                              </kendo-formfield>
                            </div>
                            <div class="col-2 p-0">
                              <img
                                *ngIf="
                                  !editPrice &&
                                  (productTogether.base == '' ||
                                    productTogether.base == 'N')
                                "
                                class="modal-img-edit"
                                src="../../../../assets/icones/edit.svg"
                                (click)="editingPriceProductTogether()"
                              />
                              <i
                                *ngIf="
                                  editPrice &&
                                  !formProductTogether.controls.price.errors
                                    ?.invalidPrice
                                "
                                class="d-inline bi bi-check-square modal-img-edit"
                                style="color: green"
                                (click)="
                                  confirmPriceProductTogether(productTogether)
                                "
                              ></i>
                              <i
                                *ngIf="editPrice"
                                class="d-inline bi bi-x-square modal-img-edit ms-2"
                                style="color: red"
                                (click)="editingPriceProductTogether()"
                              ></i>
                            </div>
                          </div>
                          <div *ngIf="productTogether.unity == 'MT'">
                            <input
                              type="checkbox"
                              #notification
                              kendoCheckBox
                              formControlName="addUpQuantity"
                              (click)="addQuantityM2ProductTogether()"
                            />
                            <kendo-label
                              class="k-checkbox-label label-addUpQuantity"
                              [for]="notification"
                              text="Adicione 10% (0,00m2)"
                            ></kendo-label>
                          </div>
                          <div *ngIf="productTogether.unity == 'M2'">
                            <input
                              type="checkbox"
                              #notification
                              kendoCheckBox
                              formControlName="addUpQuantity"
                              (click)="addQuantityM2ProductTogether()"
                            />
                            <kendo-label
                              class="k-checkbox-label label-addUpQuantity"
                              [for]="notification"
                              text="Adicione 10% (0,00m2)"
                            ></kendo-label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              <div>
                <button
                  kendoButton
                  [disabled]="this.editPrice || !formProductTogether.valid"
                  class="btn-add-cart-product-together m-0 mt-3 w-100"
                  (click)="addProductCardProductTogether(productTogether)"
                >
                  <span>Adicionar ao carrinho</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal para produtos similares -->
<div
  class="modal fade"
  id="productSimilarModal"
  tabindex="-1"
  aria-labelledby="productTogetherModalLabel"
  aria-hidden="true"
  [ngClass]="{ show: openProductSimilar }"
  [style.display]="openProductSimilar ? 'block' : 'none'"
  style="background-color: rgba(0, 0, 0, 0.5)"
>
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="productTogetherModalLabel">
          {{ productSimilar?.title }}
        </h5>
        <button
          type="button"
          class="btn-close"
          aria-label="Close"
          (click)="openCloseProductSimilar(null, false)"
        ></button>
      </div>
      <div class="modal-body">
        <div *ngIf="productSimilar">
          <div class="container page-product mt-3">
            <div class="row">
              <div class="col-sm-12 col-md-6 col-lg-5" style="height: 250px">
                <kendo-scrollview
                  [data]="productSimilar.images"
                  [width]="imageWidth"
                  [height]="imageHeight"
                  [arrows]="true"
                  [pageable]="false"
                >
                  <ng-template let-item="item">
                    <div style="height: 100%">
                      <img
                        kendoCardMedia
                        class="img-modal-prod"
                        src="{{ item }}"
                        draggable="true"
                      />
                    </div>
                  </ng-template>
                </kendo-scrollview>
              </div>

              <div class="col-sm-12 col-md-6 col-lg-7">
                <form [formGroup]="formProductSimilar">
                  <div class="name-ecommerce">{{ productSimilar.title }}</div>
                  <div class="brand-product mt-2">
                    <span class="d-inline">{{ productSimilar.brand }}</span>
                    <span class="ms-2 d-inline">•</span>
                    <span class="ms-2 d-inline">{{
                      productSimilar.idProduct
                    }}</span>
                    <span class="ms-2 d-inline">•</span>
                    <span class="ms-2 d-inline">{{ productSimilar.ean }}</span>
                  </div>
                  <div class="mt-2">
                    <span
                      *ngIf="productSimilar.productType == 'S'"
                      class="d-inline tag-showroom tag-text"
                      >SHOWROOM</span
                    >
                    <span
                      *ngIf="productSimilar.productType == 'A'"
                      class="d-inline tag-autosservico tag-text"
                      >AUTOSSERVIÇO</span
                    >
                    <span
                      *ngIf="productSimilar.campaign == 'S'"
                      class="d-inline tag-campaign tag-text"
                      >CAMPANHA</span
                    >
                    <span
                      *ngIf="productSimilar.opportunity == 'S'"
                      class="d-inline tag-opportunity tag-text"
                      >OPORTUNIDADE</span
                    >
                  </div>
                  <div class="row mt-2">
                    <div class="col-12">
                      <div *ngIf="productSimilar.offPercent > 0" class="mt-2">
                        <span class="modal-list-price" style="font-size: 16px"
                          >de</span
                        >
                        <span
                          class="ms-1 modal-value-list-price"
                          style="font-size: 16px; font-weight: 700"
                          >{{ productSimilar.listPrice | currency }}</span
                        >
                        <span
                          class="ms-1 modal-list-price"
                          style="font-size: 16px"
                          >por</span
                        >
                      </div>
                      <div
                        *ngIf="productSimilar.offPercent == 0"
                        class="mt-2"
                      ></div>
                      <div class="col">
                        <div
                          class="row justify-content-start align-items-center"
                        >
                          <div class="col-6 p-0 ps-2">
                            <span class="d-inline sale-price">{{
                              productSimilar.salePrice | currency
                            }}</span>
                            <span
                              *ngIf="productSimilar.offPercent > 0"
                              class="d-inline ms-3 card-off text-off"
                              >-{{
                                productSimilar.offPercent | number : "1.0-0"
                              }}%</span
                            >
                          </div>
                          <div class="col-1 p-0">
                            <span class="label-unity d-block">POR</span>
                            <span class="label-unity d-block">{{
                              productSimilar.unity
                            }}</span>
                          </div>
                          <div class="col-3 p-0">
                            <span class="modal-label-installment d-block"
                              >EM 10X</span
                            >
                            <span class="modal-label-installment d-block"
                              >de
                              {{
                                productSimilar.salePrice / 10 | currency
                              }}</span
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="product.unity == 'MT'">
                    <span class="label-unity d-inline"
                      >Preço da caixa
                      {{
                        productSimilar.salePrice * productSimilar.mutiple
                          | currency
                      }}</span
                    >
                  </div>
                  <div *ngIf="product.unity == 'M2'">
                    <span class="label-unity d-inline"
                      >Preço da caixa
                      {{
                        productSimilar.salePrice * productSimilar.mutiple
                          | currency
                      }}</span
                    >
                  </div>
                  <div *ngIf="productSimilar.offPercent == 0" class="mt-1">
                    <span class="label-price"></span>
                    <span class="ms-1 list-price"></span>
                    <span class="ms-1 label-price"></span>
                  </div>

                  <div class="col-12 mt-2">
                    <kendo-formfield showErrors="always">
                      <label class="title-form-column w-100">
                        <span>Selecione tipo de entrega</span>
                        <kendo-combobox
                          [data]="dataDelivery"
                          textField="description"
                          valueField="type"
                          formControlName="deliveryType"
                          [valuePrimitive]="true"
                          required
                        >
                        </kendo-combobox>
                      </label>
                      <kendo-formerror
                        *ngIf="
                          formProductSimilar.controls.deliveryType.errors
                            ?.required
                        "
                        >Erro: Informe o tipo de entrega para o
                        produto</kendo-formerror
                      >
                    </kendo-formfield>
                  </div>

                  <div class="mt-1 w-100">
                    <kendo-formfield showErrors="end">
                      <label class="w-100">
                        <span>Filial Retira</span>
                        <kendo-multicolumncombobox
                          class="w-100"
                          #stock
                          [data]="stockProductSimilar$ | async"
                          [textField]="'store'"
                          [valueField]="'store'"
                          [placeholder]="'Selecione a filial retira'"
                          [valuePrimitive]="true"
                          formControlName="store"
                          [(value)]="dataProductSimilar.store"
                          (selectionChange)="setStockProductSimilar($event)"
                        >
                          <kendo-combobox-column
                            [field]="'store'"
                            [title]="'Loja'"
                            [width]="60"
                          >
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'allowDelivery'"
                            [title]="'Entrega'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              <input
                                readonly
                                type="checkbox"
                                class="cursor-default"
                                kendoCheckBox
                                [checked]="dataItem.allowDelivery"
                              />
                            </ng-template>
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'quantity'"
                            [title]="'Estoque'"
                            [width]="100"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              {{ dataItem.quantity | number : "1.3-3" }}
                            </ng-template>
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'work'"
                            [title]="'Pertence'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              <input
                                readonly
                                type="checkbox"
                                class="cursor-default"
                                kendoCheckBox
                                [checked]="dataItem.work"
                              />
                            </ng-template>
                          </kendo-combobox-column>
                          <kendo-combobox-column
                            [field]="'blocked'"
                            [title]="'Bloqueada'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              {{ dataItem.blocked }}
                            </ng-template>
                          </kendo-combobox-column>

                          <kendo-combobox-column
                            [field]="'transfer'"
                            [title]="'Transferência'"
                            [width]="80"
                          >
                            <ng-template
                              kendoMultiColumnComboBoxColumnCellTemplate
                              let-dataItem
                            >
                              {{ dataItem.transfer }}
                            </ng-template>
                          </kendo-combobox-column>
                        </kendo-multicolumncombobox>
                      </label>
                      <kendo-formerror
                        *ngIf="
                          formProductSimilar.controls.store.errors
                            ?.estoqueIndisponivel
                        "
                        >Erro: Estoque do filial selecionada inferior a
                        quantidade da venda, selecione outra
                        filial.</kendo-formerror
                      >
                    </kendo-formfield>
                  </div>

                  <div class="row mt-2 w-100">
                    <div
                      *ngIf="
                        productSimilar.unity == 'MT' ||
                        productSimilar.unity == 'M2'
                      "
                      class="col-12 mt-3"
                    >
                      <span
                        >{{
                          calcBoxProductProductSimilar(productSimilar)
                        }}
                        caixa(s)</span
                      >
                    </div>
                    <div class="col-12">
                      <div class="row">
                        <div class="col-12">
                          <div class="d-inline">
                            <button class="d-inline modal-btn-quantity">
                              <div
                                class="text-center"
                                style="color: white; font-weight: bold"
                                (click)="
                                  minusQuantityProductSimilar(productSimilar)
                                "
                              >
                                <span>-</span>
                              </div>
                            </button>
                            <input
                              kendoTextBox
                              class="d-inline modal-quantity text-center"
                              type="number"
                              formControlName="quantity"
                            />
                            <button
                              class="d-inline modal-btn-quantity"
                              (click)="
                                addQuantityProductSimilar(productSimilar)
                              "
                            >
                              <div
                                class="text-center"
                                style="color: white; font-weight: bold"
                              >
                                <span>+</span>
                              </div>
                            </button>
                          </div>
                        </div>
                        <div class="col-12 mt-3">
                          <div class="row">
                            <div *ngIf="!editPrice" class="col-10 text-start">
                              <span class="modal-price">
                                {{ productSimilar.salePrice | currency }}
                              </span>
                            </div>
                            <div *ngIf="editPrice" class="col-10 text-start">
                              <kendo-formfield showErrors="end">
                                <input
                                  #inputPrice
                                  currencyMask
                                  class="d-block i-price"
                                  formControlName="price"
                                  [options]="{
                                    prefix: 'R$ ',
                                    thousands: '.',
                                    decimal: ',',
                                    spinners: false
                                  }"
                                />
                                <kendo-formerror
                                  *ngIf="
                                    formProductSimilar.controls.price.errors
                                      ?.invalidPrice
                                  "
                                  >Erro: Preço de venda inferior ao preço de
                                  tabela, utilize a função de desconto para o
                                  produto.</kendo-formerror
                                >
                              </kendo-formfield>
                            </div>
                            <div class="col-2 p-0">
                              <img
                                *ngIf="
                                  !editPrice &&
                                  (productSimilar.base == '' ||
                                    productSimilar.base == 'N')
                                "
                                class="modal-img-edit"
                                src="../../../../assets/icones/edit.svg"
                                (click)="editingPriceProductSimilar()"
                              />
                              <i
                                *ngIf="
                                  editPrice &&
                                  !formProductSimilar.controls.price.errors
                                    ?.invalidPrice
                                "
                                class="d-inline bi bi-check-square modal-img-edit"
                                style="color: green"
                                (click)="
                                  confirmPriceProductSimilar(productSimilar)
                                "
                              ></i>
                              <i
                                *ngIf="editPrice"
                                class="d-inline bi bi-x-square modal-img-edit ms-2"
                                style="color: red"
                                (click)="editingPriceProductSimilar()"
                              ></i>
                            </div>
                          </div>
                          <div *ngIf="productSimilar.unity == 'MT'">
                            <input
                              type="checkbox"
                              #notification
                              kendoCheckBox
                              formControlName="addUpQuantity"
                              (click)="addQuantityM2ProductSimilar()"
                            />
                            <kendo-label
                              class="k-checkbox-label label-addUpQuantity"
                              [for]="notification"
                              text="Adicione 10% (0,00m2)"
                            ></kendo-label>
                          </div>
                          <div *ngIf="productSimilar.unity == 'M2'">
                            <input
                              type="checkbox"
                              #notification
                              kendoCheckBox
                              formControlName="addUpQuantity"
                              (click)="addQuantityM2ProductSimilar()"
                            />
                            <kendo-label
                              class="k-checkbox-label label-addUpQuantity"
                              [for]="notification"
                              text="Adicione 10% (0,00m2)"
                            ></kendo-label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              <div>
                <button
                  kendoButton
                  [disabled]="this.editPrice || !formProductSimilar.valid"
                  class="btn-add-cart-product-together m-0 mt-3 w-100"
                  (click)="addProductCardProductSimilar(productSimilar)"
                >
                  <span>Adicionar ao carrinho</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </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]="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 cart-title-product">{{
                  dataItem.smallDescription
                }}</small>
              </div>
              <div class="col-12 mt-2 cart-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>
