{# === Colonne gauche : résumé déclinaison === #}
{% set hasPromo = declinaison.produit.promotion
  and date(declinaison.produit.promotion.startAt) <= date()
  and date(declinaison.produit.promotion.endAt) >= date() %}

{% if hasPromo %}
  {% set discount = declinaison.produit.promotion.discountValue %}
  {% set price_ttc = declinaison.produit.priceTtc %}
  {% set price_remise = price_ttc - (declinaison.produit.promotion.discountType == 'percent' ? price_ttc * discount / 100 : discount) %}
{% endif %}

{% set totalStock = 0 %}
{% set reservedStock = 0 %}
{% for s in declinaison.stocks %}
  {% set totalStock = totalStock + (s.qtStock ?? 0) %}
  {% set reservedStock = reservedStock + (s.qtReserved ?? 0) %}
{% endfor %}

<div class="info-product">
  <div class="crm-panel p-3" id="product-info-card">

    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2 pb-2"
         style="border-bottom:1px dashed var(--crm-border);">
      <div>
        <div class="text-muted small mb-1">Référence déclinaison</div>
        <h2 class="mb-0 fw-bold" style="font-size:1.15rem; letter-spacing:.4px;">
          {{ declinaison.reference }}
        </h2>
      </div>

      <div class="d-flex flex-wrap crm-gap-md mt-2 mt-lg-0">
        <span class="badge badge-pill alert-expedie">Déclinaison</span>
        {% if hasPromo %}
          <span class="badge badge-pill alert-retour-en-cours">En promotion</span>
        {% endif %}
      </div>
    </div>

    <div class="fw-semibold" style="font-size:1.03rem; color:#1f2a37;">
      {{ declinaison.name }}
    </div>

    <div class="mt-2 small text-muted">
      {% for gv in declinaison.groupDeclinationValues %}
        <span class="me-2"><strong>{{ gv.declination.name }}:</strong> {{ gv.value.name }}</span>
      {% else %}
        <span>Aucune valeur</span>
      {% endfor %}
    </div>

    <div class="mt-3">
      {% if hasPromo %}
        <div class="d-flex align-items-baseline flex-wrap" style="gap:.6rem;">
          <span class="text-muted" style="text-decoration:line-through;">{{ price_ttc|number_format(3,'.',',') }} TND</span>
          <span class="fw-bold" style="font-size:1.15rem; color:var(--crm-primary);">{{ price_remise|number_format(3,'.',',') }} TND</span>
          <span class="text-danger fw-semibold small">
            -{{ discount }}{% if declinaison.produit.promotion.discountType == 'percent' %}%{% else %} TND{% endif %}
          </span>
        </div>
      {% else %}
        <div class="fw-bold" style="font-size:1.15rem; color:var(--crm-primary);">
          {{ declinaison.produit.priceTtc|number_format(3,'.',',') }} TND
        </div>
      {% endif %}
    </div>

    <div class="mt-3 pt-2 small text-muted d-flex flex-wrap"
         style="gap:.6rem; border-top:1px dashed var(--crm-border);">
      <span><i class="fa fa-cubes me-1 text-primary"></i>Stock: <strong>{{ totalStock }}</strong></span>
      <span><i class="fa fa-lock me-1 text-warning"></i>Réservé: <strong>{{ reservedStock }}</strong></span>
      <span><i class="fa fa-check-circle me-1 text-success"></i>Disponible: <strong>{{ totalStock - reservedStock }}</strong></span>
      <span><i class="fa fa-bell me-1 text-danger"></i>Seuil: <strong>{{ declinaison.alertStockMin ?? 0 }}</strong></span>
    </div>
  </div>

    <div class="row mt-2 d-flex product-images-row" id="decliMainImageBlock">
    <div class="col-12 d-flex justify-content-center align-items-center">
        {% set selected = declinaison.picture|filter(p => p.isSelected)|first %}
        {% if selected %}
        <div class="product-main-wrap">
            <img id="decliMainImagePreview"
                src="{{ app.request.getSchemeAndHttpHost() }}{{ vich_uploader_asset(selected, 'file') }}"
                alt="Image principale"
                class="img-fluid border shadow-sm product-main-image">
            <span class="product-main-flag" data-bs-toggle="tooltip" title="Image principale">
            <i class="fa fa-star"></i>
            </span>
        </div>
        {% else %}
        <div id="decliMainImageEmpty" class="text-muted small">Aucune image principale</div>
            {% endif %}
        </div>
    </div>

</div>