{% extends 'front/base.html.twig' %}

{% block title %}{{ Globals.getCompany().name }} | Configurer pack{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('front/assets/css/product-card.css') }}">
  <link rel="stylesheet" href="{{ asset('front/assets/css/listing.css') }}">
  <link rel="stylesheet" href="{{ asset('front/assets/css/indexDeclinaisonProduit.css') }}">
  <link rel="stylesheet" href="{{ asset('front/assets/css/packConfigure.css') }}">


{% endblock %}

{% block body %}
<main class="main" id="app" v-cloak>
  <div class="page-header breadcrumb-wrap">
    <div class="container">
      <a href="{{ path('pack_products') }}" class="btn btn-dark btn-sm">
        <i class="fi-rs-angle-left me-1"></i> Retour aux packs
      </a>
    </div>
  </div>

  <section class="mt-50 mb-50" v-if="selectedPack">
    <div class="container">
      <div class="row flex-row-reverse">
        <div class="col-lg-12">
          <div class="product-detail accordion-detail">
            <div class="row">

              {# Colonne image (style fiche produit) #}
              <div class="col-lg-7 col-md-6">

                <div class="pack-gallery-card">
                  <div class="detail-gallery pack-config-gallery">

                    <div class="gallery-main">
                      <img :src="imgUrl(currentMainImage)"
                          :alt="selectedPack.name"
                          loading="eager"
                          fetchpriority="high"
                          @click="openZoomImage && openZoomImage(currentMainImage)"
                          style="cursor: zoom-in;" />

                      <div class="gallery-badge" v-if="globalPos1Label">
                        <i class="fi-rs-palette me-1"></i> ${ globalPos1Label }
                      </div>
                    </div>

                  </div>
                </div>

                <div class="pack-variant-card mt-3" v-if="globalPos1Options && globalPos1Options.length">
                  <div class="pack-variant-head">
                    <div class="pack-variant-title">
                      Variante globale
                      <span class="pack-variant-sub" v-if="globalPos1Label">— ${ globalPos1Label }</span>
                    </div>
                    <div class="pack-variant-hint">S’applique à tous les produits (si disponible)</div>
                  </div>

                  <div class="attr-detail pack-variant-thumbs">
                    <ul class="color-thumbs">
                      <li v-for="entry in globalPos1Options"
                          :key="entry.id"
                          class="thumb-item"
                          :class="{ active: String(entry.id) === String(globalPos1Id) }"
                          @click="selectGlobalPos1(entry)"
                          :title="entry.name">
                        <img :src="imgUrl(entry.picture)" :alt="entry.name" loading="lazy" />
                        <span class="thumb-ring"></span>
                      </li>
                    </ul>
                  </div>
                </div>

              </div>

              {# Colonne infos / configuration (style fiche produit) #}
              <div class="col-lg-5 col-md-6">
                <div class="detail-info p-15 pack-detail-card">

                  <div class="pack-head">
                    <h1 class="pack-title">${ selectedPack.name }</h1>

                    <div class="pack-meta" v-if="selectedPack.reference">
                      <span class="pack-ref-badge">
                        <i class="fi-rs-label me-1"></i> Ref : ${ selectedPack.reference }
                      </span>
                    </div>
                  </div>

                  <div class="pack-price">
                    <div class="pack-price-main">
                      <span class="amount">${ Number(selectedPack.final_price_ttc || 0).toFixed(3) }</span>
                      <span class="currency">TND</span>
                    </div>

                    <div class="pack-price-sub" v-if="Number(selectedPack.remise || 0) > 0">
                      <span class="old">
                        ${ Number(selectedPack.price_ttc || 0).toFixed(3) } <span class="currency">TND</span>
                      </span>
                      <span class="discount">
                        -${ Number(selectedPack.remise || 0).toFixed(2) }%
                      </span>
                    </div>
                  </div>

                  <div class="pack-qty">
                    <div class="pack-qty-label">Quantité pack</div>

                    <div class="qty-control">
                      <button type="button"
                              class="qty-btn"
                              @click="incrementPackQty('-')"
                              :disabled="packQty <= 1"
                              aria-label="Diminuer la quantité">
                        −
                      </button>

                      <span class="qty-value" aria-live="polite">${ packQty }</span>

                      <button type="button"
                              class="qty-btn"
                              @click="incrementPackQty('+')"
                              aria-label="Augmenter la quantité">
                        +
                      </button>
                    </div>
                  </div>

                </div>


                  <div class="pack-summary-sticky mt-3" v-if="selectedPack">
                    <div class="pack-summary-card">
                      <div class="d-flex align-items-start justify-content-between gap-3">
                        <div>
                          <div class="pack-summary-title">Résumé du pack</div>
                          <div class="pack-summary-meta">
                            <span class="me-2"><b>${ configuredCount }</b> / ${ totalCount } configurés</span>
                            <span v-if="missingGlobalCount > 0" class="text-warning">
                              • Variante indisponible (${ missingGlobalCount })
                            </span>
                          </div>
                        </div>

                        <div class="text-end">
                          <div class="pack-summary-price">
                            ${ Number(summaryTotalPrice || 0).toFixed(3) } <sup>TND</sup>
                          </div>
                          <div class="small text-muted">
                            ${ Number(summaryUnitPrice || 0).toFixed(3) } TND / pack
                          </div>
                          <div class="pack-summary-qty">Qté: <b>${ packQty }</b></div>
                        </div>
                      </div>

                      <div class="pack-summary-progress mt-2">
                        <div class="progress" style="height:8px;">
                          <div class="progress-bar"
                              role="progressbar"
                              :style="{ width: progressPercent + '%' }"
                              :aria-valuenow="progressPercent"
                              aria-valuemin="0"
                              aria-valuemax="100"></div>
                        </div>
                        <div class="small text-muted mt-1">
                          <span v-if="canAddPackToCart">Prêt à ajouter au panier ✅</span>
                          <span v-else>${ ctaHint }</span>
                        </div>
                      </div>
                      <div class="pack-summary-mini mt-2" v-if="itemRows && itemRows.length">
                        <div class="pack-summary-mini-item"
                            v-for="(row, idx) in itemRows"
                            :key="'sum_' + (row.rowKey || idx)">
                          <img :src="imgUrl(row.previewImage)"
                              :alt="row.productName"
                              class="pack-summary-mini-img">

                          <div class="pack-summary-mini-txt">
                            <div class="n">${ row.productName }</div>
                            <div class="v" v-if="row.selectedDecl">
                              <span v-if="row.selectedDecl.pos1Label">${ row.selectedDecl.pos1Label }: ${ row.selectedDecl.pos1Value }</span>
                              <span v-if="row.selectedDecl.pos2Label"> • ${ row.selectedDecl.pos2Label }: ${ row.selectedDecl.pos2Value }</span>
                            </div>
                            <div class="v text-warning" v-else>À compléter</div>
                          </div>
                        </div>
                      </div>

                      <button class="btn btn-dark w-100 mt-2"
                              :disabled="!canAddPackToCart"
                              @click="addPackToCart">
                        <i class="fi-rs-shopping-cart me-1"></i>
                        Ajouter le pack
                      </button>

                      <button type="button"
                            class="btn-cta secondary w-100 mt-2"
                            :class="{ 'is-disabled': !canAddPackToCart }"
                            :disabled="!canAddPackToCart"
                            data-bs-toggle="tooltip"
                            data-placement="top"
                            :title="!canAddPackToCart
                              ? 'Complétez la configuration du pack avant achat immédiat'
                              : 'Ajouter le pack et ouvrir directement le panier'"
                            @click="buyNowPack">
                      <i class="me-1 fi-rs-shopping-bag"></i>
                      Acheter maintenant
                    </button>

                    </div>
                  </div>
                  <div id="pack-picked-head" class="pack-picked-head mt-3">
                    <div class="pack-picked-title">
                      <i class="fi-rs-box me-1"></i>
                      Produits du pack choisis
                    </div>
                    <div class="pack-picked-sub">
                      Aperçu des articles sélectionnés avant ajout au panier
                    </div>



                    <div class="pack-picked-grid mt-2" v-if="itemRows && itemRows.length">
                      <div class="pack-picked-card"
                          v-for="(row, idx) in itemRows"
                          :key="'thumb_' + (row.rowKey || idx)">
                        <div class="pack-picked-imgwrap">
                          <img :src="imgUrl(row.previewImage)"
                              :alt="row.productName"
                              class="pack-picked-img"
                              loading="lazy">
                        </div>

                        <div class="pack-picked-name" :title="row.productName">
                          ${ row.productName }
                        </div>

                        <div class="pack-picked-status" :class="{ ok: isRowComplete(row), warn: !isRowComplete(row) }">
                          <span v-if="isRowComplete(row)"><i class="fa fa-check-circle me-1"></i> Configuré</span>
                          <span v-else><i class="fa fa-exclamation-circle me-1"></i> À compléter</span>
                        </div>
                      </div>
                    </div>

                    <div v-else class="small text-muted mt-2">
                      Aucun produit dans ce pack.
                    </div>


                  </div>



                  <hr class="pack-sep my-3">


                   {# Tableau variantes pack #}
                  <div class="row mt-4 g-3">
                    <div class="col-12"
                      v-for="(row, idx) in itemRows"
                      :key="row.rowKey || (row.productId + '_' + idx)"
                      :id="'pack-row-' + (row.rowKey || (row.productId + '_' + idx))"
                      class="pack-row-anchor">

                      <div class="card border-0 shadow-sm rounded-3 pack-row-card"
                        :class="{ 'pack-row-incomplete': !isRowComplete(row) }">
                        <div class="card-body">
                          <div class="row g-3">

                            <div class="col-12 col-md-10">

                              <div class="pack-row-head mb-2">
                                <div class="pack-row-title">
                                  <h6 class="mb-0 pack-row-name">${ row.productName }</h6>

                                  <div class="pack-row-meta">
                                    <span class="pack-ref-chip">
                                      <i class="fi-rs-label me-1"></i> Ref. ${ row.productReference }
                                    </span>

                                    <template v-if="row.selectedDecl && row.selectedDecl.pos1Label">
                                      <span class="pack-attr-chip">
                                        <span class="k">${ row.selectedDecl.pos1Label }</span> :
                                        <span class="v">${ row.selectedDecl.pos1Value }</span>
                                      </span>
                                    </template>

                                    <template v-if="row.selectedDecl && row.selectedDecl.pos2Label">
                                      <span class="pack-attr-chip">
                                        <span class="k">${ row.selectedDecl.pos2Label }</span> :
                                        <span class="v">${ row.selectedDecl.pos2Value }</span>
                                      </span>
                                    </template>
                                  </div>
                                </div>

                                <div class="pack-row-alert" v-if="row.globalMissing">
                                  <span class="alert-pill">
                                    <i class="fa fa-exclamation-triangle me-1"></i>
                                    Variante "${ row.globalMissingLabel }" indisponible

                                  </span>
                                </div>
                              </div>

                              <div class="attr-detail mb-2 pack-row-colors">
                                <ul class="color-thumbs">
                                  <li v-for="entry in row.colors"
                                      :key="entry.id"
                                      class="thumb-item"
                                      :title="entry.name"
                                      :class="{ active: String(entry.id) === String(row.selectedPos1Id) }"
                                      @click="onRowColorClick(row, entry.id)">
                                    <img :src="imgUrl(entry.picture)" :alt="entry.name" loading="lazy">
                                    <span class="thumb-ring"></span>
                                  </li>
                                </ul>
                              </div>

                              <div class="mt-2 pack-sizes-wrap">
                                <div v-if="row.sizes && row.sizes.length" class="d-flex flex-wrap gap-2">
                                  <button
                                    v-for="entry in row.sizes"
                                    :key="entry.id"
                                    type="button"
                                    class="size-pill"
                                    :class="{
                                      active: String(entry.id) === String(row.selectedDeclId),
                                      'is-oos': Number(entry.qty) <= 0
                                    }"
                                    :disabled="Number(entry.qty) <= 0"
                                    @click.prevent="selectRowSize(row, entry)"
                                    :title="getRowSizeTooltip(entry)"
                                  >
                                    ${ entry.label }
                                  </button>
                                </div>

                                <div v-else class="small text-muted">
                                  Aucune variante position 2 disponible.
                                </div>
                              </div>

                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>


                  <button class="btn btn-outline-dark w-100" type="button"
                          @click="document.getElementById('pack-picked-head')?.scrollIntoView({behavior:'smooth', block:'start'})">
                    Voir le résumé
                  </button>
                </div>
              </div>
            </div>



          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mt-50 mb-50" v-else>
    <div class="container text-center text-muted">Chargement du pack...</div>
  </section>
</main>
{% endblock %}


{% block javascripts %}
  {{ parent() }}
  <script>
    window.PACK_SELECTED_ID = {{ selectedPackId|default(0) }};
    window.PACK_IMAGE_BASE = '{{ app.request.schemeAndHttpHost }}/images';

  </script>
  <script src="{{ asset('front/assets/scripts/pages/packConfigure.js') }}"></script>
{% endblock %}