{# Modal: Associer des images du pack aux déclinaisons (position 1) #}
<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 */
  .row-image .image_picker_selector {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
  }

  .row-image .image_picker_selector li {
    position: relative;
    width: calc(20% - 6.4px) !important; /* 5 colonnes */
    height: 110px !important;
    margin: 0 !important;
    float: none !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;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }

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

  .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; }

  .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: calc(33.333% - 6px) !important; /* 3 colonnes */
      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 method="post"
      action="{{ path('pack_declination_images_save', { id: pack.id }) }}"
      class="modal-affect-decl">

  <div class="modal-header">
    <h5 class="modal-title">
      <i class="fa fa-images me-2 text-primary"></i>
      Associer des images aux déclinaisons (position 1)
    </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 valeur (position 1) 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">
    {% if position1Values|length == 0 %}
      <div class="alert alert-warning mb-0">
        Aucune valeur position 1 commune à tous les produits du pack.
      </div>
    {% else %}
      <div class="affect-helper">
        <i class="fa fa-lightbulb me-1 text-warning"></i>
        Sélectionnez images → choisissez valeur → <strong>Affecter</strong> → <strong>Confirmer</strong>.
      </div>

      <div class="row g-2">
        {# ===== Col gauche : Valeurs communes (position 1) ===== #}
        <div class="col-12 col-lg-4">
          <div class="affect-panel">
            <div class="affect-panel-title">Valeurs (position 1)</div>

            <div id="declination-list" class="list-group decl-list">
              {% for id, label in position1Values %}
                <button type="button"
                        class="list-group-item list-group-item-action decl-item"
                        data-value="{{ id }}">
                  {{ label }}
                </button>
              {% endfor %}
            </div>

            <input type="hidden" name="imageDeclinationMap" id="pack-image-declination-map">
          </div>
        </div>

        {# ===== Col droite : Images pack (picker) + journal ===== #}
        <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"
                      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 valeur active">
                <i class="fa fa-check-circle me-2"></i>
                Affecter
              </button>
            </div>

            <div class="row-image">
              <select id="pack_image_declination_select_file" class="image-picker show-html" multiple>
                <option value=""></option>

                {% for item in pack.picture %}
                  {# IMPORTANT:
                     - On utilise item.id comme "imageId"
                     - On affiche les badges via imageDeclinationMap[item.id] => liste d'IDs
                     - On convertit ces IDs en labels via position1Values (map)
                  #}

                  {% set selectedIds = attribute(imageDeclinationMap, item.id)|default([]) %}
                  {% set badges = [] %}

                  {% for opt in declinationOptions %}
                    {% if opt.id in selectedIds %}
                      {% set badges = badges|merge([opt.label]) %}
                    {% endif %}
                  {% endfor %}


                  <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="{{ selectedIds|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>
    {% endif %}
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Fermer</button>

    {% if position1Values|length > 0 %}
      <button type="submit"
              class="btn btn-dark btn-sm loader-submit-modal"
              id="save_pack_image_declination"
              disabled>
        Confirmer
      </button>
    {% endif %}
  </div>
</form>

<script>
(function () {
  // ===== Helpers =====
  function escapeHtml(str) {
    return String(str || '')
      .replaceAll('&', '&amp;')
      .replaceAll('<', '&lt;')
      .replaceAll('>', '&gt;')
      .replaceAll('"', '&quot;')
      .replaceAll("'", '&#039;');
  }

  function getActiveDeclId() {
    var $active = $('#modal_content .decl-item.active');
    return $active.length ? String($active.data('value')) : '';
  }

  function getActiveDeclLabel() {
    var $active = $('#modal_content .decl-item.active');
    return $active.length ? $.trim($active.text()) : '';
  }

  function getSelectedImageIds() {
    var idsFromLi = $('#modal_content .row-image .image_picker_selector li.selected')
      .map(function () {
        var v = $(this).find('input[type=checkbox],input[type=radio]').val();
        return String(v || '').trim();
      }).get().filter(Boolean);

    if (idsFromLi.length) return idsFromLi;

    return $('#modal_content #pack_image_declination_select_file option:selected')
      .map(function () { return String($(this).val() || '').trim(); })
      .get().filter(Boolean);
  }


  function updateSelectedCount() {
    var ids = getSelectedImageIds();
    var count = ids.length;
    $('#modal_content #selected-images-count').text(
      count + (count <= 1 ? ' image sélectionnée' : ' images sélectionnées')
    );
  }


  function setSaveEnabled(enabled) {
    $('#modal_content #save_pack_image_declination').prop('disabled', !enabled);
  }

  function addLogRow(type, msg) {
    var cls = (type === 'warning') ? 'status-warning' : '';
    var dot = (type === 'warning') ? 'status-warning' : 'status-success';
    var $tbody = $('#modal_content .table_image_line tbody');

    var html = ''
      + '<tr class="status-row ' + cls + '">'
      +   '<td>'
      +     '<span class="status-chip d-inline-flex align-items-center gap-2">'
      +       '<span class="status-dot"></span>'
      +       '<span class="status-msg">' + escapeHtml(msg) + '</span>'
      +     '</span>'
      +   '</td>'
      + '</tr>';

    $tbody.prepend(html);
  }

  // Badge overlay inside image_picker LI
  function refreshBadges() {
    var $select = $('#modal_content #pack_image_declination_select_file');
    var $opts = $select.find('option').filter(function () {
      return String($(this).val() || '').trim() !== '';
    });

    $('#modal_content .row-image .image_picker_selector li').each(function (idx) {
      var $li = $(this);

      // mapping le plus fiable: ordre des <li> == ordre des options (hors option vide)
      var $opt = $opts.eq(idx);
      if (!$opt.length) return;

      var labels = String($opt.attr('data-decl-labels') || '').trim();
      var affected = labels !== '';

      $li.toggleClass('is-affected', affected);

      var $badge = $li.find('.declination-badge');
      if (!$badge.length) {
        $badge = $('<span class="declination-badge"></span>');
        $li.append($badge);
      }

      if (affected) {
        $badge.removeClass('badge-unassigned').addClass('badge-assigned').text(labels);
      } else {
        $badge.removeClass('badge-assigned').addClass('badge-unassigned').text('Non affectée');
      }
    });

    // Désélectionner toutes les images après affectation
    $select.find('option:selected').prop('selected', false);

    var picker = $select.data('picker') || $select.data('imagepicker');
    if (picker && typeof picker.sync_picker_with_select === 'function') {
      picker.sync_picker_with_select();
    } else {
      $('#modal_content .row-image .image_picker_selector li')
        .removeClass('selected')
        .find('.thumbnail')
        .removeClass('selected');
    }

    $select.trigger('change'); // met à jour le compteur


  }



  // Build JSON map from options => { imageId: [declIds...] }
  function buildMapFromOptions() {
    var out = {};
    $('#modal_content #pack_image_declination_select_file option').each(function () {
      var val = $(this).val();
      if (!val) return;
      var declIds = String($(this).attr('data-decl-ids') || '').trim();
      var arr = declIds ? declIds.split(',').filter(Boolean) : [];
      out[val] = arr;
    });
    return out;
  }

  // ===== Init image picker =====
  var $select = $('#modal_content #pack_image_declination_select_file');
  if (!$select.length) return;

  $select.imagepicker({
    show_label: false,
    hide_select: true
  });
  setTimeout(function () {
    refreshBadges();
    updateSelectedCount();
  }, 0);


  // Some versions: plugin instance attached like this
  // (we keep it compatible)
  $select.data('picker', $select.data('picker') || $select.data('imagepicker'));

  // Init tooltips (Bootstrap 5)
  try {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('#modal_content [data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); });
  } catch (e) {}

  // First render
  updateSelectedCount();
  refreshBadges();

  var initialMap = buildMapFromOptions();
  setSaveEnabled(Object.keys(initialMap).length > 0);
  $('#modal_content #pack-image-declination-map').val(JSON.stringify(initialMap));


  // Update count on select changes
  $('#modal_content').on('change', '#pack_image_declination_select_file', function () {
    updateSelectedCount();
  });

  // Decl list behavior
  $('#modal_content').on('click', '.decl-item', function () {
    $('#modal_content .decl-item').removeClass('active');
    $(this).addClass('active');
  });

  // Affecter button
  $('#modal_content').on('click', '#btn-affecter-images', function () {
    var declId = getActiveDeclId();
    var declLabel = getActiveDeclLabel();

    if (!declId) {
      addLogRow('warning', 'Veuillez sélectionner une valeur (position 1) dans la liste.');
      return;
    }

    // get selected images via image-picker
    var imageIds = getSelectedImageIds();


    if (!imageIds.length) {
      addLogRow('warning', 'Veuillez sélectionner au moins une image.');
      return;
    }

    // Apply mapping to each selected option
    imageIds.forEach(function (imgId) {
      var $opt = $('#modal_content #pack_image_declination_select_file option[value="'+imgId+'"]');

      // Keep MULTI decl per image (like original select2 multiple)
      var arr = [String(declId)];
      var labels = [declLabel];

      $opt.attr('data-decl-ids', arr.join(','));
      $opt.attr('data-decl-labels', labels.join(' / '));
      $opt.attr('data-affected', '1');

      $opt.attr('data-affected', labels.length ? '1' : '0');

      addLogRow('success', 'Image #' + imgId + ' affectée à : ' + declLabel);
    });

    refreshBadges();

    $('#modal_content #pack-image-declination-map').val(JSON.stringify(buildMapFromOptions()));

    setSaveEnabled(true);
  });

  // Submit: serialize map into hidden input
  $('#modal_content').on('submit', 'form.modal-affect-decl', function () {
    var map = buildMapFromOptions();
    $('#modal_content #pack-image-declination-map').val(JSON.stringify(map));
  });

})();
</script>