{# Modal: Associer des images aux déclinaisons #}
<style>
  .modal-affect-decl .modal-content {
    border-radius: 12px;
    overflow: hidden;
  }

  .modal-affect-decl .modal-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: .7rem .9rem;
  }

  .modal-affect-decl .modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
  }

  .modal-affect-decl .modal-body {
    background: #f8fafc;
    max-height: 72vh;
    overflow-y: auto;
    padding: .75rem;
  }

  .affect-helper {
    font-size: .82rem;
    color: #475569;
    margin-bottom: .6rem;
    background: #eef4ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: .45rem .6rem;
  }

  .affect-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .55rem;
  }

  .affect-panel-title {
    font-size: .82rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .45rem;
  }

  .decl-list {
    max-height: 54vh;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  .decl-list .decl-item {
    font-size: .83rem;
    padding: .45rem .6rem;
    border: 0;
    border-bottom: 1px solid #eef2f7;
  }

  .decl-list .decl-item:last-child {
    border-bottom: 0;
  }

  .decl-list .decl-item.active {
    background: #e8f0ff;
    color: #0f172a;
    font-weight: 700;
  }

  .declination-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
  }

  #selected-images-count {
    font-size: .78rem;
    border: 1px solid #dbe3ea;
    border-radius: 999px;
    padding: .2rem .55rem;
    background: #f8fafc;
    color: #334155;
  }

  /* Image picker: taille plus lisible + image complète */
  .row-image .image_picker_selector {
    margin: 0 !important;
    padding: 0 !important;
  }

  .row-image .image_picker_selector li {
    position: relative;
    width: 78px !important;
    height: 104px !important; /* ratio ~3:4 */
    margin: 0 8px 8px 0 !important;
    overflow: visible !important;
  }

  .row-image .image_picker_selector li .thumbnail {
    width: 78px !important;
    height: 104px !important;
    border-radius: 3px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px;
  }

  .row-image .image_picker_selector li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* affiche toute l’image */
    object-position: center center !important;
    border-radius: 3px !important;
    background: #fff;
  }

  /* Badges d’affectation */
  .row-image .image_picker_selector li .declination-badge {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    z-index: 3;
    font-size: .63rem;
    line-height: 1.15;
    border-radius: 999px;
    padding: 2px 5px;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .row-image .image_picker_selector li .declination-badge.badge-assigned {
    background: rgba(22, 163, 74, .93);
    color: #fff;
  }

  .row-image .image_picker_selector li .declination-badge.badge-unassigned {
    background: rgba(100, 116, 139, .90);
    color: #fff;
  }

  .row-image .image_picker_selector li.is-affected .thumbnail {
    border-color: #16a34a !important;
  }

  /* Etat sélectionné clair (clic utilisateur) */
    .row-image .image_picker_selector li .thumbnail {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .row-image .image_picker_selector li.selected .thumbnail,
    .row-image .image_picker_selector li .thumbnail.selected {
    border: 2px solid #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .22) !important;
    transform: translateY(-1px);
    }

    .row-image .image_picker_selector li.selected::after {
    content: "\f00c";
    font-family: "FontAwesome";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    color: #fff;
    background: #2563eb;
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;
    }

  .table_image_line td {
    font-size: .78rem;
    padding: .35rem .45rem;
  }

  .modal-affect-decl .modal-footer {
    border-top: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    justify-content: center;
    gap: .55rem;
    padding: .65rem .85rem;
  }

  @media (max-width: 991.98px) {
    .decl-list { max-height: 180px; }
  }

  @media (max-width: 767.98px) {
    .row-image .image_picker_selector li {
      width: 68px !important;
      height: 92px !important;
      margin: 0 6px 6px 0 !important;
    }

    .row-image .image_picker_selector li .thumbnail {
      width: 68px !important;
      height: 92px !important;
    }

    .declination-toolbar {
      flex-direction: column;
      align-items: stretch;
    }

    #btn-affecter-images {
      width: 100%;
    }
  }

  .table_image_line .status-row td { padding: .45rem .5rem; }
    .table_image_line .status-chip .status-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #16a34a;
    }
    .table_image_line .status-row.status-warning .status-dot { background: #f59e0b; }
    .table_image_line .status-msg { font-size: .78rem; color: #334155; }

</style>

<form name="add_image_declination"
      method="post"
      action="{{ path('add_produit_declination_file', {'id': produit.id }) }}"
      enctype="multipart/form-data"
      class="modal-affect-decl js-declination-images-form">

  <div class="modal-header">
    <h5 class="modal-title">
      <i class="fa fa-images me-2 text-primary"></i>
      Associer des images aux déclinaisons
    </h5>
    <div class="d-flex align-items-center gap-2">
      <i class="fa fa-info-circle text-info"
         data-bs-toggle="tooltip"
         data-bs-placement="left"
         title="Sélectionnez une ou plusieurs images, choisissez une déclinaison puis cliquez sur Affecter."></i>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
  </div>

  <div class="modal-body">
    <div class="affect-helper">
      <i class="fa fa-lightbulb me-1 text-warning"></i>
      Sélectionnez images → choisissez déclinaison → <strong>Affecter</strong> → <strong>Confirmer</strong>.
    </div>

    <div class="row g-2">
      <div class="col-12 col-lg-4">
        <div class="affect-panel">
          <div class="affect-panel-title">Déclinaisons</div>

          <div id="declination-list" class="list-group decl-list">
            {% set array = [] %}
            {% for produitDeclination in produit.produitDeclinationValues %}
              {% for groupValue in produitDeclination.groupDeclinationValues %}
                {% if groupValue.declination.position == 1 and groupValue.value.name not in array %}
                  {% set array = array|merge([groupValue.value.name]) %}
                  <button type="button"
                          class="list-group-item list-group-item-action decl-item"
                          data-value="{{ groupValue.value.id }}">
                    {{ groupValue.value.name }}
                  </button>
                {% endif %}
              {% endfor %}
            {% endfor %}
          </div>

          <input type="hidden" class="upload-file-declination" value="" />
          <input type="hidden" id="max-images-per-declination" value="5" />
          <input type="hidden" name="imageDeclinationMap" id="image-declination-map">
        </div>
      </div>

      <div class="col-12 col-lg-8">
        <div class="affect-panel">
          <div class="declination-toolbar">
            <span id="selected-images-count">0 image sélectionnée</span>

            <button type="button"
                    id="btn-affecter-images"
                    onclick="affectImagesToDeclination()"
                    class="btn btn-success btn-sm d-inline-flex align-items-center justify-content-center"
                    data-bs-toggle="tooltip"
                    title="Affecter les images sélectionnées à la déclinaison active">
              <i class="fa fa-check-circle me-2"></i>
              Affecter
            </button>
          </div>

          <div class="row-image">
            <select id="add_image_declination_select_file" class="image-picker show-html" multiple>
              <option value=""></option>
              {% for item in produit.picture %}
                {% set key = item.imageName %}
                {% set badges = declByImage[key]|default([]) %}
                {% set declIds = declIdsByImage[key]|default([]) %}

                <option
                  value="{{ item.id }}"
                  data-img-src="{{ absolute_url(vich_uploader_asset(item, 'file')) }}"
                  data-img-label=" "
                  data-affected="{{ badges|length > 0 ? '1' : '0' }}"
                  data-decl-labels="{{ badges|join(' / ')|e('html_attr') }}"
                  data-decl-ids="{{ declIds|join(',') }}">
                </option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="affect-panel mt-2">
          <div class="affect-panel-title mb-1">Journal d’affectation</div>
          <div class="m-section__content">
            <table class="table table-sm table_image_line mb-0">
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Fermer</button>
    <button type="submit"
            id="save_add_image_declination"
            name="add_image_declination[0][save]"
            class="btn btn-dark btn-sm loader-submit-modal"
            disabled>
      Confirmer
    </button>
  </div>
</form>