<header class="sticky-top">
  <app-header-system></app-header-system>
</header>

<div class="container d-flex flex-column mt-3">
  <div class="col-12">
    <div *ngIf="saleProduct" class="container">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-xl-4">
          <div *ngIf="images.length == 0">
            <img
              class="px-2 py-2"
              src="assets/amico.png"
              [ngStyle]="{ minWidth: width }"
              draggable="false"
            />
          </div>

          <kendo-scrollview
            *ngIf="images.length > 0"
            [data]="images"
            [width]="width"
            [height]="height"
            [pageable]="pageable"
          >
            <ng-template let-item="item">
              <img
                class="px-2 py-2"
                src="{{ item }}"
                [ngStyle]="{ minWidth: width }"
                draggable="false"
              />
            </ng-template>
          </kendo-scrollview>
        </div>
        <div class="d-flex flex-column col-12 col-sm-12 col-md-12 col-xl-4">
          <h4 class="d-block">{{ saleProduct.title }}</h4>
          <div class="row align-items-end">
            <div class="col-6">
              <span
                class="badge rounded-pill text-white mt-2"
                style="background-color: #fd7e14"
                >Código: {{ saleProduct.idProduct }}</span
              >
            </div>
            <div class="col-6">
              <div *ngIf="saleProduct.productType == 'A'">
                <span
                  class="badge rounded-pill text-white"
                  style="opacity: 0.8; background-color: #3f14fd"
                >
                  <small>Autosserviço</small></span
                >
              </div>
              <div *ngIf="saleProduct.productType == 'S'">
                <span
                  class="badge rounded-pill text-white"
                  style="opacity: 0.8; background-color: hsl(345, 98%, 54%)"
                >
                  <small>Showroom</small></span
                >
              </div>
            </div>
          </div>
          <!--div class="d-block">
            <span
              class="badge rounded-pill text-white mt-2"
              style="background-color: #fd7e14"
              >Código: {{ saleProduct.idProduct }}</span
            >
            <span
            class="badge rounded-pill text-white mt-2"
            style="background-color: #fd7e14"
            >{{ saleProduct.offPercent }}</span
          >
          </div-->
          <div class="mt-5">
            <h4 class="d-block">Descrição</h4>
            <span class="truncar-3l" style="text-align: justify">{{
              saleProduct.description
            }}</span>
            <div class="mt-3 text-end">
              <span
                class="lbl-seemore"
                kendoPopoverAnchor
                [popover]="myPopover"
                showOn="click"
                >veja mais...</span
              >
            </div>
          </div>
          <kendo-popover
            #myPopover
            [animation]="myAnimation"
            [width]="300"
            body="{{ saleProduct.description }}"
          >
          </kendo-popover>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-xl-4">
          <div class="">
            <form class="k-form" [formGroup]="form">
              <div class="mt-3">
                <div class="row">
                  <div class="col-8">
                    <span class="price">
                      {{ saleProduct.salePrice | currency: "BRL" }}
                      <small>/ {{ saleProduct.unity }}</small
                      ><br />
                    </span>
                    <strong
                      (click)="getInstallment()"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      style="cursor: pointer"
                      >ou 10x de R$
                      {{ saleProduct.salePrice / 10 | number: "1.2-2" }} sem
                      juros</strong
                    >
                  </div>
                  <div
                    class="col-4 text-end"
                    *ngIf="saleProduct.offPercent != 0"
                  >
                    <span
                      class="badge rounded-pill text-white mt-2 end-0"
                      style="opacity: 0.9; background-color: #fd7e14"
                      title="{{
                        saleProduct.offPercent
                      }}% de desconto sobre preço a prazo"
                      ><small
                        >{{ saleProduct.offPercent }}% desconto</small
                      ></span
                    >
                  </div>
                </div>

                <hr />
              </div>
              <label [for]="qtde">Quantidade </label>

              <kendo-textbox
                #qtde
                class="text-center"
                style="width: 160px"
                formControlName="quantity"
              >
                <ng-template kendoTextBoxPrefixTemplate>
                  <a class="btn text-center"
                    ><i class="bi bi-dash-circle"></i
                  ></a>
                  <kendo-textbox-separator></kendo-textbox-separator>
                </ng-template>
                <ng-template kendoTextBoxSuffixTemplate>
                  <kendo-textbox-separator></kendo-textbox-separator>
                  <a class="btn text-center"
                    ><i class="bi bi-plus-circle"></i
                  ></a>
                </ng-template>
              </kendo-textbox>

              <!--div #qtde class="d-flex flex-row">
                <button
                  kendoButton
                  icon="plus"
                  (click)="changeQuantity(true)"
                ></button>
                <kendo-numerictextbox
                  style="width: 50px"
                  format="n0"
                  [value]="quantity"
                  [spinners]="false"
                  [min]="1"
                  [max]="1000"
                  [autoCorrect]="true"
                >
                </kendo-numerictextbox>
                <button
                  kendoButton
                  icon="minus"
                  (click)="changeQuantity(false)"
                ></button>
              </div-->

              <div class="d-flex flex-column mt-3">
                <label [for]="stock">Selecione a loja de estoque</label>
                <kendo-multicolumncombobox
                  class="w-100"
                  #stock
                  [data]="stock$ | async"
                  [textField]="'store'"
                  [valueField]="'store'"
                  [placeholder]="'Selecione a loja ...'"
                  [valuePrimitive]="true"
                  formControlName="stockStore"
                  [(value)]="data.store"
                >
                  <kendo-combobox-column
                    [field]="'store'"
                    [title]="'Loja'"
                    [width]="60"
                  >
                  </kendo-combobox-column>
                  <kendo-combobox-column
                    [field]="'storeName'"
                    [title]="'Nome da Loja'"
                    [width]="150"
                  >
                  </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]="'Transf'"
                    [width]="60"
                  >
                    <ng-template
                      kendoMultiColumnComboBoxColumnCellTemplate
                      let-dataItem
                    >
                      {{ dataItem.transfer }}
                    </ng-template>
                  </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-multicolumncombobox>
              </div>

              <div class="mt-2 w-100">
                <button
                  class="btn btn-warning w-100"
                  KendoButton
                  data-bs-toggle="modal"
                  data-bs-target="#rupturaModal"
                  (click)="showRuptura()"
                >
                  Informar falta de estoque
                </button>
              </div>

              <kendo-formfield showHints="initial">
                <label class="k-label">Tipo de entrega</label>
                <ul class="k-radio-list">
                  <li class="k-radio-item">
                    <input
                      type="radio"
                      #retiraImediata
                      value="RI"
                      kendoRadioButton
                      formControlName="deliveryType"
                    />
                    <kendo-label
                      class="k-radio-label"
                      [for]="retiraImediata"
                      text="Retira Imediata"
                    ></kendo-label>
                  </li>

                  <li class="k-radio-item">
                    <input
                      type="radio"
                      #retiraPosterior
                      kendoRadioButton
                      value="RP"
                      formControlName="deliveryType"
                    />
                    <kendo-label
                      class="k-radio-label"
                      [for]="retiraPosterior"
                      text="Retira Posterior"
                    ></kendo-label>
                  </li>

                  <!-- <li class="k-radio-item">
                    <input
                      type="radio"
                      #retiraPosterior
                      kendoRadioButton
                      value="RA"
                      formControlName="deliveryType"
                    />
                    <kendo-label
                      class="k-radio-label"
                      [for]="retiraPosterior"
                      text="Retira Posterior (Imediata)"
                    ></kendo-label>
                  </li> -->

                  <li class="k-radio-item">
                    <input
                      type="radio"
                      #Entrega
                      kendoRadioButton
                      value="EN"
                      formControlName="deliveryType"
                    />
                    <kendo-label
                      class="k-radio-label"
                      [for]="Entrega"
                      text="Entrega"
                    ></kendo-label>
                  </li>

                  <li class="k-radio-item">
                    <input
                      type="radio"
                      #Encomenda
                      kendoRadioButton
                      value="EF"
                      formControlName="deliveryType"
                    />
                    <kendo-label
                      class="k-radio-label"
                      [for]="Encomenda"
                      text="Encomenda"
                    ></kendo-label>
                  </li>
                </ul>
                <kendo-formhint
                  >Informe a forma de entrega do produto</kendo-formhint
                >
                <kendo-formerror
                  >Error: O tipo de entrega é uma informação obrigatório para
                  confirmar a compra.</kendo-formerror
                >
              </kendo-formfield>

              <div class="mt-2 w-100">
                <label [for]="description">Descrição auxiliar</label>
                <kendo-textbox
                  #description
                  formControlName="auxDescription"
                  placeholder="Informe a descrição auxiliar do produto"
                ></kendo-textbox>
              </div>

              <div class="k-form-buttons">
                <button
                  KendoButton
                  class="btn btn-dark w-100"
                  (click)="createItemShopping()"
                >
                  Incluir Produto
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 mt-3" *ngIf="product">
    <kendo-tabstrip (tabSelect)="onTabSelect($event)">
      <kendo-tabstrip-tab
        [title]="'Características técnicas'"
        [selected]="true"
      >
        <ng-template kendoTabContent>
          <div class="row">
            <div class="col-8">
              <table class="table table-striped">
                <tbody>
                  <tr>
                    <th scope="row">Tipo</th>
                    <td *ngIf="saleProduct.productType == 'A'">Autosserviço</td>
                    <td *ngIf="saleProduct.productType == 'S'">Showroom</td>
                  </tr>
                  <tr>
                    <th scope="row">Ean</th>
                    <td>{{ product.ean }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Altura</th>
                    <td>{{ product.altura }}cm</td>
                  </tr>
                  <tr>
                    <th scope="row">Largura</th>
                    <td>{{ product.largura }}cm</td>
                  </tr>
                  <tr>
                    <th scope="row">Comprimento</th>
                    <td>{{ product.comprimento }}cm</td>
                  </tr>
                  <tr>
                    <th scope="row">Marca</th>
                    <td>{{ product.brand.description }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Peso bruto</th>
                    <td>{{ product.peso }}kg</td>
                  </tr>
                  <tr>
                    <th scope="row">Peso líquido</th>
                    <td>{{ product.pesoLiquido }}kg</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </ng-template>
      </kendo-tabstrip-tab>
    </kendo-tabstrip>
  </div>
</div>

<!-- Modal Parcelamento -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Parcelamento</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <kendo-grid [data]="installment$ | async" scrollable="none">
          <kendo-grid-column field="installment" width="130">
            <ng-template
              kendoGridHeaderTemplate
              let-column
              let-columnIndex="columnIndex"
            >
              <span>Parcela</span>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="installmentValue" width="200">
            <ng-template
              kendoGridHeaderTemplate
              let-column
              let-columnIndex="columnIndex"
            >
              <span>Valor da Parcela</span>
            </ng-template>
          </kendo-grid-column>
        </kendo-grid>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Fechar
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Ruptura de Estoque -->
<div
  class="modal fade"
  id="rupturaModal"
  tabindex="-1"
  aria-labelledby="rupturaModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rupturaModalLabel">
          Informar ruptura de estoque
        </h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>

      <div class="modal-body">
        <!--Formulario -->
        <form class="k-form" [formGroup]="formRuptura">
          <kendo-formfield>
            <kendo-label [for]="document" text="CPF / CNPJ"></kendo-label>
            <kendo-textbox
              #document
              formControlName="document"
              required
            ></kendo-textbox>
            <kendo-formerror
              *ngIf="formRuptura.controls.document.errors?.required"
              >Error: CPF / CNPJ é obrigatório</kendo-formerror
            >
          </kendo-formfield>

          <kendo-formfield>
            <kendo-label [for]="name" text="Nome"></kendo-label>
            <kendo-textbox
              #name
              formControlName="name"
              required
            ></kendo-textbox>
            <kendo-formerror *ngIf="formRuptura.controls.name.errors?.required"
              >Error: Nome do cliente é obrigatório</kendo-formerror
            >
          </kendo-formfield>

          <kendo-formfield>
            <kendo-label [for]="cellPhone" text="Celular"></kendo-label>
            <kendo-textbox
              #cellPhone
              formControlName="cellPhone"
              required
            ></kendo-textbox>
            <kendo-formerror
              *ngIf="formRuptura.controls.cellPhone.errors?.required"
              >Error: Número do telefone celular é obrigatório</kendo-formerror
            >
          </kendo-formfield>

          <kendo-formfield>
            <kendo-label [for]="email" text="EMail"></kendo-label>
            <kendo-textbox
              #email
              formControlName="email"
              required
            ></kendo-textbox>
            <kendo-formerror *ngIf="formRuptura.controls.email.errors?.required"
              >Error: Informe o email do cliente</kendo-formerror
            >
          </kendo-formfield>

          <kendo-formfield>
            <kendo-label [for]="descritpion" text="Produto"></kendo-label>
            <kendo-textbox
              formControlName="description"
              [disabled]="true"
              #descritpion
            ></kendo-textbox>
          </kendo-formfield>

          <kendo-formfield>
            <kendo-label [for]="quantity" text="Quantidade"></kendo-label>
            <kendo-textbox
              formControlName="quantityRupture"
              [disabled]="false"
              #quantity
            ></kendo-textbox>
          </kendo-formfield>
        </form>
        <!--Formulario-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Fechar
        </button>
        <button
          type="button"
          class="btn btn-primary"
          data-bs-dismiss="modal"
          (click)="registerRuptura()"
        >
          Salvar
          <span class="k-icon k-i-loading"></span>
        </button>
      </div>
      <div></div>
    </div>
  </div>
</div>
