<div class="cs-card">
  <div class="row flex-fill">
    <div class="col-2 is-product p-0">
      <img *ngIf="product.urlImage" src="{{ product.images[0] }}" />
      <img
        *ngIf="!product.urlImage"
        src="../../../../assets/img/image-product.svg"
      />
    </div>
    <div class="col-6">
      <div class="title-product d-flex align-items-center">
        <!-- Ícone de campanha -->
        <div
          class="campaign-icon me-2"
          style="
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <!-- OURO -->
          <svg
            *ngIf="product.type_campaing === 'OURO'"
            viewBox="0 0 100 100"
            xmlns="http://www.w3.org/2000/svg"
            style="width: 16px; height: 16px"
          >
            <defs>
              <radialGradient id="goldGradient" cx="50%" cy="35%" r="65%">
                <stop offset="0%" stop-color="#fff8d6" />
                <stop offset="30%" stop-color="#ffd700" />
                <stop offset="60%" stop-color="#c99700" />
                <stop offset="100%" stop-color="#7a5c00" />
              </radialGradient>
              <radialGradient id="highlight" cx="30%" cy="25%" r="25%">
                <stop offset="0%" stop-color="white" stop-opacity="0.8" />
                <stop offset="100%" stop-color="white" stop-opacity="0" />
              </radialGradient>
            </defs>
            <circle cx="50" cy="50" r="45" fill="url(#goldGradient)" />
            <circle cx="50" cy="50" r="45" fill="url(#highlight)" />
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="#5a4500"
              stroke-width="2"
            />
          </svg>

          <!-- PRATA -->
          <svg
            *ngIf="product.type_campaing === 'PRATA'"
            viewBox="0 0 100 100"
            xmlns="http://www.w3.org/2000/svg"
            style="width: 16px; height: 16px"
          >
            <defs>
              <radialGradient id="silverGradient" cx="50%" cy="35%" r="65%">
                <stop offset="0%" stop-color="#f2f2f2" />
                <stop offset="25%" stop-color="#c9c9c9" />
                <stop offset="55%" stop-color="#8f8f8f" />
                <stop offset="80%" stop-color="#5a5a5a" />
                <stop offset="100%" stop-color="#2e2e2e" />
              </radialGradient>
              <radialGradient id="highlightSilver" cx="30%" cy="25%" r="25%">
                <stop offset="0%" stop-color="white" stop-opacity="0.85" />
                <stop offset="100%" stop-color="white" stop-opacity="0" />
              </radialGradient>
            </defs>
            <circle cx="50" cy="50" r="45" fill="url(#silverGradient)" />
            <circle cx="50" cy="50" r="45" fill="url(#highlightSilver)" />
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="#1a1a1a"
              stroke-width="2"
            />
          </svg>

          <!-- BRONZE -->
          <svg
            *ngIf="product.type_campaing === 'BRONZE'"
            viewBox="0 0 100 100"
            xmlns="http://www.w3.org/2000/svg"
            style="width: 16px; height: 16px"
          >
            <defs>
              <radialGradient id="bronzeGradient" cx="50%" cy="35%" r="65%">
                <stop offset="0%" stop-color="#fff3e0" />
                <stop offset="25%" stop-color="#d98c3b" />
                <stop offset="55%" stop-color="#b87333" />
                <stop offset="80%" stop-color="#7c4a21" />
                <stop offset="100%" stop-color="#3e2312" />
              </radialGradient>
              <radialGradient id="highlightBronze" cx="30%" cy="25%" r="25%">
                <stop offset="0%" stop-color="white" stop-opacity="0.7" />
                <stop offset="100%" stop-color="white" stop-opacity="0" />
              </radialGradient>
            </defs>
            <circle cx="50" cy="50" r="45" fill="url(#bronzeGradient)" />
            <circle cx="50" cy="50" r="45" fill="url(#highlightBronze)" />
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="#2a140a"
              stroke-width="2"
            />
          </svg>

          <!-- SEM ou NULL -->
          <div
            *ngIf="!product.type_campaing || product.type_campaing === 'SEM'"
            style="
              width: 16px;
              height: 16px;
              background-color: #fbfbfb;
              border: 1px solid #b1b1b1;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
            "
          >
            <span
              style="
                font-size: 10px;
                font-weight: bold;
                color: #dd2424;
                line-height: 1;
                margin: 0;
                padding: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              "
              >X</span
            >
          </div>
        </div>
        <span
          class="text-truncate"
          style="flex: 1; min-width: 0"
          [title]="product.smallDescription"
          >{{ product.smallDescription }}</span
        >
      </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="row">
        <div class="col-8">
          <div *ngIf="product.offPercent > 0" class="mt-2">
            <span class="label-price">de</span>
            <span class="ms-1 list-price">{{
              product.listPrice | currency
            }}</span>
            <span class="ms-1 label-price">por</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>
            <span class="d-inline sale-price">{{
              product.salePrice | currency
            }}</span>
            <span
              *ngIf="product.offPercent != null && product.offPercent > 0"
              class="d-inline ms-3 card-off text-off"
              >{{ product.offPercent | number : "1.0-0" }}%</span
            >
            <span
              class="d-inline"
              *ngIf="product.offPercent != null && product.offPercent > 0"
            >
              <img
                src="assets/img/img-produto_de_por.svg"
                alt=""
                style="width: 30px; height: 30px"
              />
            </span>
            <span class="d-inline" *ngIf="product.downPrice == 'S'">
              <img
                src="assets/img/img-prod-baixaram-preco.svg"
                alt=""
                style="width: 30px; height: 30px"
              />
            </span>
            <span class="d-inline" *ngIf="product.campaign == 'O'">
              <img
                src="assets/img/img-prod-oportunidade.svg"
                alt=""
                style="width: 30px; height: 30px"
              />
            </span>
            <span class="d-inline" *ngIf="product.campaign == 'I'">
              <img
                src="assets/img/img-prod-ofertas.svg"
                alt=""
                style="width: 30px; height: 30px"
              />
            </span>
            <span class="d-block label-installment"
              >ou em 10x de {{ product.salePrice / 10 | currency }}</span
            >
          </div>
          <div>
            <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>
        <div *ngIf="product.salePromotion_cash > 0" class="col-4">
          <span class="d-block label-installment" style="height: 15px"></span>
          <div>
            <span class="d-block label-promotion-cash">Preço a Vista</span>
            <span class="d-inline sale-promotion-cash">{{
              product.salePromotion_cash | currency
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="row mt-2">
        <div class="col-12">
          <button
            kendoButton
            fillMode="solid"
            class="button-solid"
            data-bs-toggle="modal"
            data-bs-target="#staticBackdrop"
            (click)="showModalProduct(product)"
          >
            <span class="button-solid-text">Ver mais</span>
          </button>
        </div>
      </div>
      <div class="row mt-3 ms-1 w-100 stock-card">
        <div class="data-stock p-2">
          <!-- Estoque Loja -->
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="stock-text">Estoque loja</span>
            <span class="stock-text text-end">
              <ng-container *ngIf="product.unity !== 'M2'">
                {{ product.store_stock | number : "1.0-0" }} {{ product.unity }}
              </ng-container>
              <ng-container *ngIf="product.unity === 'M2'">
                {{ product.store_stock | number : "1.3-3" }} {{ product.unity }}
              </ng-container>
            </span>
          </div>

          <!-- Estoque Disponível -->
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="stock-text">Estoque disponível</span>
            <span class="stock-text text-end">
              <ng-container *ngIf="product.unity !== 'M2'">
                {{ product.stock | number : "1.0-0" }} {{ product.unity }}
              </ng-container>
              <ng-container *ngIf="product.unity === 'M2'">
                {{ product.stock | number : "1.3-3" }} {{ product.unity }}
              </ng-container>
            </span>
          </div>

          <!-- Estoque Geral -->
          <div class="d-flex justify-content-between align-items-center">
            <span class="stock-text">Estoque geral</span>
            <span class="stock-text text-end">
              <ng-container *ngIf="product.unity !== 'M2'">
                {{ product.full_stock | number : "1.0-0" }} {{ product.unity }}
              </ng-container>
              <ng-container *ngIf="product.unity === 'M2'">
                {{ product.full_stock | number : "1.3-3" }} {{ product.unity }}
              </ng-container>
            </span>
          </div>
        </div>
      </div>

      <div class="row g-0 mt-2">
        <div class="col-6">
          <form [formGroup]="formQuantity">
            <div class="d-flex flex-row view-qtd">
              <div class="d-inline">
                <button class="button-quantity">
                  <div
                    class="button-quantity-text"
                    (click)="minusQuantity(product)"
                  >
                    <span>-</span>
                  </div>
                </button>
              </div>
              <input
                kendoTextBox
                class="quantity text-quantity text-center"
                type="number"
                formControlName="quantity"
              />
              <div class="d-inline">
                <button class="button-quantity" (click)="addQuantity(product)">
                  <div class="button-quantity-text">
                    <span>+</span>
                  </div>
                </button>
              </div>
            </div>
          </form>
        </div>
        <div class="col-6">
          <button
            kendoButton
            fillMode="outline"
            class="button-outline text-button-outline"
            (click)="addProductCart(product)"
          >
            Adicionar
          </button>
        </div>
      </div>
    </div>
  </div>

  <div kendoDialogContainer></div>
  <div kendoWindowContainer></div>
</div>

<!-- Modal detalhes do produto-->
<!--div *ngIf="productActual != null"
  class="modal fade"
  id="staticBackdrop"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content modal-product">
      <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">
        <div class="row">
          <div class="col-4">
            <img src="{{ productActual.urlImage }}" alt="" />
          </div>
          <div class="col-8">
            <div class="tile-product">{{ productActual.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>
            </div>
            <div *ngIf="product.offPercent > 0" class="mt-2">
              <span class="label-price">de</span>
              <span class="ms-1 list-price">{{ product.listPrice | currency }}</span>
              <span class="ms-1 label-price">por</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>
              <span class="d-inline sale-price">{{
                product.salePrice | currency
              }}</span>
              <span
                *ngIf="product.offPercent > 0"
                class="d-inline ms-3 card-off text-off"
                >-{{ product.offPercent | number: "1.0-0" }}%</span
              >
              <span class="d-block label-installment"
                >ou em 10x de {{ product.salePrice / 10 | currency }}</span
              >
            </div>
            <div>
              <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>
        </div>
      </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>
</div-->

<!-- Modal detalhes do produto-->
