<!-- Card de Produtos -->
<kendo-card>
  <kendo-scrollview
    [data]="product.images"
    [width]="imageWidth"
    [height]="imageHeight"
    [arrows]="true"
  >
    <ng-template let-item="item">
      <div class="div-product-img">
        <a href="#">
          <!--img
                            src="../../../../assets/icones/icon-oferta.svg"
                            alt=""
                            class="mt-2 position-absolute end-5"
                            style="height: 20px; width: 15px"
                          /-->
          <span
            *ngIf="product.listPrice - product.salePrice > 0.01"
            class="badge rounded-pill text-white mt-2 me-2 position-absolute end-0"
            style="opacity: 0.8; background-color: #fd7e14"
            title="{{ product.offPercent }}% de desconto sobre preço a prazo"
            ><small class="fs-6"
              >{{ product.offPercent | number : "1.0-0" }}% Off</small
            ></span
          >
          <img
            class="product-img mt-2"
            kendoCardMedia
            src="{{ item }}"
            draggable="true"
          />
        </a>
      </div>
    </ng-template>
  </kendo-scrollview>
  <div>
    <kendo-card-header>
      <h1 kendoCardTitle class="truncar-2l fw-bold">
        {{ product.title }}
      </h1>
      <div kendoCardSubtitle>
        <div class="row">
          <div class="col-4">
            <div *ngIf="product.productType == 'A'">
              <span
                class="badge p-2 rounded-pill text-white"
                style="opacity: 0.8; background-color: #3f14fd"
              >
                <span style="font-size: 0.8rem">Autosserviço</span></span
              >
            </div>
            <div *ngIf="product.productType == 'S'">
              <span
                class="badge p-2 rounded-pill text-white"
                style="opacity: 0.8; background-color: hsl(345, 98%, 54%)"
              >
                <span style="font-size: 0.8rem">Showroom</span></span
              >
            </div>
          </div>
          <div class="col-6 ms-auto d-flex justify-content-end">
            <img
              src="../../../../assets/icones/icon-oferta.svg"
              style="height: 25px; width: 25px"
              alt=""
            />
            <img
              src="../../../../assets/icones/icon-oport.svg"
              style="height: 25px; width: 25px"
              alt=""
            />
          </div>
        </div>
        <div
          *ngIf="product.stock > 0"
          class="row mt-2 justify-content-center align-items-center"
          style="height: 40px; background-color: green"
        >
          <div class="col-12 text-center">
            <span *ngIf="product.unity !== 'M2'" class="text-white fs-6 fw-bold"
              >{{ product.stock | number : "1.0-0" }}
              {{ product.unity }} disponível</span
            >
            <span *ngIf="product.unity === 'M2'" class="text-white fs-6 fw-bold"
              >{{ product.stock | number : "1.3-3" }}
              {{ product.unity }} disponível</span
            >
          </div>
          <div class="col-12 text-center">
            <small *ngIf="product.unity !== 'M2'" class="text-white"
              >{{ product.store_stock | number : "1.0-0" }}
              {{ product.unity }} disponível na loja</small
            >
            <small *ngIf="product.unity === 'M2'" class="text-white"
              >{{ product.store_stock | number : "1.3-3" }}
              {{ product.unity }} disponível na loja</small
            >
          </div>
        </div>
        <div
          *ngIf="product.stock <= 0"
          class="row mt-2 justify-content-center align-items-center"
          style="height: 25px; background-color: red"
        >
          <div class="col-12 text-center">
            <span class="text-white fs-6 fw-bold">Produto indisponível</span>
          </div>
        </div>
      </div>
    </kendo-card-header>
    <kendo-card-body>
      <div class="row justify-content-center align-items-center">
        <div *ngIf="product.offPercent <= 0" class="col-12 text-center">
          <span class="price">{{ product.salePrice | currency }}</span>
        </div>
        <div
          *ngIf="product.offPercent > 0"
          class="col-12"
          style="background-color: rgba(245, 245, 108, 0.993)"
        >
          <span class="fs-6 text-decoration-line-through"
            >De <strong>{{ product.listPrice | currency }}</strong></span
          ><span> por</span>
        </div>
        <div
          *ngIf="product.offPercent > 0"
          class="col-12"
          style="background-color: rgba(245, 245, 108, 0.993)"
        >
          <span class="price">{{ product.salePrice | currency }}</span>
        </div>
      </div>

      <div
        *ngIf="product.stock == 0"
        class="row justify-content-center align-items-center"
      >
        <div
          class="col-12 text-center"
          style="background-color: rgba(245, 245, 108, 0.993)"
        >
          <span
            class="fs-6 fw-bold label-notify"
            data-bs-toggle="modal"
            data-bs-target="#staticBackdrop"
            >Avise-me quando chegar</span
          >
          <!--button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            Launch static backdrop modal
          </button-->
          <div
            class="modal fade"
            id="staticBackdrop"
            data-bs-backdrop="static"
            data-bs-keyboard="false"
            tabindex="-1"
            aria-labelledby="staticBackdropLabel"
            aria-hidden="true"
          >
            <app-modal-notify-stock
              [product]="product"
            ></app-modal-notify-stock>
          </div>
        </div>
      </div>
    </kendo-card-body>
    <kendo-card-actions *ngIf="product.stock > 0">
      <div
        *ngIf="product.stock > 0"
        class="row w-100 justify-content-center align-items-center me-2"
      >
        <div *ngIf="!quantityOk" class="col-12">
          <small class="i-stock"
            >Quantidade acima do estoque disponível na loja</small
          >
        </div>
        <div class="col-8">
          <form [formGroup]="formQuantity">
            <kendo-textbox
              class="text-center"
              style="width: 140px"
              formControlName="quantity"
            >
              <ng-template kendoTextBoxPrefixTemplate>
                <a class="btn text-center" (click)="minusQuantity(product)"
                  ><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" (click)="addQuantity(product)"
                  ><i class="bi bi-plus-circle"></i
                ></a>
              </ng-template>
            </kendo-textbox>
          </form>
        </div>

        <div class="col-4">
          <button
            *ngIf="product.base === 'S'"
            #addButton
            class="btn btn-success"
            [disabled]="true"
            title="Produto tintométrico: adicione cor no detalhe do produto"
          >
            Adicionar
          </button>
          <button
            *ngIf="existsPreCustomer() && product.base !== 'S'"
            #addButton
            class="btn btn-success"
            [disabled]="!quantityOk"
            (click)="addProductCart(product)"
          >
            Adicionar
          </button>

          <button
            *ngIf="!existsPreCustomer() && product.base !== 'S'"
            #addButton
            class="btn btn-success"
            [disabled]="!quantityOk"
            (click)="addProductCart(product)"
            type="button"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
          >
            Adicionar
          </button>

          <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <app-pre-customer></app-pre-customer>
          </div>
        </div>
      </div>
    </kendo-card-actions>
  </div>
</kendo-card>
<!-- Card de Produtos -->
