<!-- Modal -->
  <div
    class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg"
  >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <form *ngIf="product" [formGroup]="form">
          <div class="row">
            <div class="col-4">
              <img *ngIf="item" src="{{ item.image }}" />
              <img
                *ngIf="!item || !item.image"
                src="../../../../assets/img/image-product.svg"
              />
            </div>
            <div class="col-8">
              <div class="title-product">{{ product.smallDescription }}</div>
              <div class="name-ecommerce">{{ product.title }}</div>
              <div class="brand-product">
                <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">{{ item.ean }}</span>
                <!--span class="ms-2 d-inline">•</span>
            <span-- class="ms-2 d-inline">{{ product.idProvider }}</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">
                <div class="col">
                  <div *ngIf="product.offPercent > 0" class="mt-2">
                    <span class="modal-list-price">de</span>
                    <span class="ms-1 modal-value-list-price">{{
                      product.listPrice | currency
                    }}</span>
                    <span class="ms-1 modal-list-price">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">{{
                          product.salePrice | currency
                        }}</span>
                      </div>
                      <div class="col-2 p-0">
                        <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 {{ product.salePrice / 10 | currency }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div *ngIf="product.unity == 'MT'">
                <span class="label-unity d-inline"
                  >Preço da caixa
                  {{ product.salePrice * product.mutiple | currency }}</span
                >
              </div>
              <div *ngIf="product.unity == 'M2'">
                <span class="label-unity d-inline"
                  >Preço da caixa
                  {{ product.salePrice * product.mutiple | currency }}</span
                >
              </div>
              <div *ngIf="product.offPercent == 0" class="mt-2">
                <span class="label-price"></span>
                <span class="ms-1 list-price"></span>
                <span class="ms-1 label-price"></span>
              </div>
              <div class="mt-1">
                <kendo-multicolumncombobox
                  class="w-100"
                  #stock
                  [data]="stocks"
                  [textField]="'store'"
                  [valueField]="'store'"
                  [placeholder]="'Selecione a filial retira'"
                  [valuePrimitive]="true"
                  formControlName="store"
                  [(value)]="item.stockStore"
                >
                  <kendo-combobox-column
                    [field]="'store'"
                    [title]="'Loja'"
                    [width]="60"
                  >
                  </kendo-combobox-column>
                  <kendo-combobox-column
                    [field]="'quantity'"
                    [title]="'Estoque'"
                    [width]="80"
                  >
                    <ng-template
                      kendoMultiColumnComboBoxColumnCellTemplate
                      let-dataItem
                    >
                      {{ dataItem.quantity }}
                    </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]="'breakdown'"
                    [title]="'Avaria'"
                    [width]="80"
                  >
                    <ng-template
                      kendoMultiColumnComboBoxColumnCellTemplate
                      let-dataItem
                    >
                      {{ dataItem.breakdown }}
                    </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>
              </div>

              <!--div class="row mt-2 ms-1 w-100">
              <div class="data-stock pe-0 me-0">
                <div class="row d-flex w-100 justify-content-between">
                  <div class="col-6">
                    <span class="stock-text">Estoque loja</span>
                  </div>
                  <div class="col-6 text-end">
                    <span *ngIf="product.unity !== 'M2'" class="stock-text">
                      {{ product.store_stock | number: "1.0-0" }}
                      {{ product.unity }}
                    </span>
                    <span *ngIf="product.unity === 'M2'" class="stock-text"
                      >{{ product.store_stock | number: "1.3-3" }}
                      {{ product.unity }}</span
                    >
                  </div>
                </div>
                <div class="row d-flex w-100 justify-content-between">
                  <div class="col-6">
                    <span class="stock-text">Estoque geral</span>
                  </div>
                  <div class="col-6 text-end">
                    <span *ngIf="product.unity !== 'M2'" class="stock-text">
                      {{ product.stock | number: "1.0-0" }}
                      {{ product.unity }}
                    </span>
                    <span *ngIf="product.unity === 'M2'" class="stock-text"
                      >{{ product.stock | number: "1.3-3" }}
                      {{ product.unity }}</span
                    >
                  </div>
                </div>
              </div>
            </div-->
            </div>
          </div>

          <div class="row mt-2 w-100">
            <div class="col-12 pe-0">
              <kendo-expansionpanel title="Descrição do produto">
                {{ product.description }}
              </kendo-expansionpanel>
            </div>

            <div class="col-12 mt-3">
              <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>
                </div>
                <div class="col-4">
                  <div class="row">
                    <div class="col-10">
                      <span class="modal-price">
                        {{ product.salePrice | currency }}
                      </span>
                    </div>
                    <div class="col-2">
                      <img
                        class="modal-img-edit"
                        src="../../../../assets/icones/edit.svg"
                        alt=""
                      />
                    </div>
                  </div>
                  <div *ngIf="product.unity == 'MT'">
                    <input type="checkbox" #notification kendoCheckBox />
                    <kendo-label
                      class="k-checkbox-label label-add"
                      [for]="notification"
                      text="Adicione 10% (0,00m2)"
                    ></kendo-label>
                  </div>
                  <div *ngIf="product.unity == 'M2'">
                    <input type="checkbox" #notification kendoCheckBox />
                    <kendo-label
                      class="k-checkbox-label label-add"
                      [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>Selecione tipo de entrega</span>
                    <kendo-combobox
                      [data]="dataDelivery"
                      textField="description"
                      valueField="type"
                      formControlName="deliveryType"
                      [valuePrimitive]="true"
                      required
                    >
                    </kendo-combobox>
                  </label>
                </div>
              </div>
            </div>

            <div class="row mt-3 w-100 p-0">
              <div class="col-12">
                <button
                  kendoButton
                  class="btn-add-cart w-100"
                  (click)="addProductCard(product)"
                >
                  <span>Adicionar ao carrinho</span>
                </button>
              </div>
              <div *ngIf="error" class="col-8">
                <span
                  >Não foi possível completar a inclusão deste item, houve um
                  erro {{ error.message }}</span
                >
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          Understood
        </button>
      </div>
    </div>
  </div>
