<div class="container-fluid modal-product">
  <div class="row h-100">
    <div>
      <div class="modal-header">
        <button
          type="button"
          class="btn-close"
          (click)="onDialogClose()"
        ></button>
      </div>
    </div>
    <div class="col-12">
      <form [formGroup]="form">
        <div class="row">
          <div class="col-4">
            <!--Lista de imagens-->
            <kendo-scrollview
              [data]="product.images"
              [width]="imageWidth"
              [height]="imageHeight"
              [arrows]="true"
              [pageable]="false"
            >
              <ng-template let-item="item">
                <div class="div-product-img">
                  <img
                    class="is-product"
                    kendoCardMedia
                    src="{{ item }}"
                    draggable="true"
                  />
                </div>
              </ng-template>
            </kendo-scrollview>
            <!--FIM - lista de imagens-->
            <!-- <img
              class="is-product"
              *ngIf="product.images.length > 0"
              src="{{ product.images[0] }}"
            /> -->
            <img
              class="is-product"
              *ngIf="product.images.length == 0"
              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">{{ product.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">{{
                        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 {{ 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-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 fs-6"
                #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"
                >
                  <ng-template
                    kendoMultiColumnComboBoxColumnCellTemplate
                    let-dataItem
                  >
                    <small>
                      {{ dataItem.storeName }}
                    </small>
                  </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]="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]="'breakdown'"
                  [title]="'Avaria'"
                  [width]="80"
                >
                  <ng-template
                    kendoMultiColumnComboBoxColumnCellTemplate
                    let-dataItem
                  >
                    {{ dataItem.breakdown }}
                  </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>
            </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 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: 130px; overflow: scroll; overflow-x: hidden">
            {{ product.description }}
          </span>
        </div>

        <div class="row mt-3 w-100">
          <!--div class="col-12 pe-0">
            <kendo-expansionpanel title="Descrição do produto">
              {{ product.description }}
            </kendo-expansionpanel>
          </div-->
          <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-7">
                <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-5">
                <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">
                <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-3 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>
</div>

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

<div *ngIf="showLotProduct">
  <kendo-dialog
    opened="showLotProduct"
    title="Lote do produto"
    width="800px"
    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>
