{# === Onglet Photos déclinaison === #}
<div class="tab-pane fade {{ app.request.get('tab') == 'content_galery' ? 'show active' : '' }}"
     id="content_galery" role="tabpanel">

  {% if "PRODUIT_UPDATE" in rights %}
    {{ form_start(formFile, {
      action: path('produit_declination_value_file', {'id': declinaison.id}),
      method: 'POST',
      attr: { class: 'js-declination-upload-images-form' }
    }) }}

    <div class="p-4 bg-white rounded shadow-sm">
      <div class="alert alert-info d-flex align-items-start mb-4" role="alert">
        <i class="fas fa-info-circle me-2 fs-5 text-primary mt-1"></i>
        <div>
          <div><strong>Format recommandé web :</strong> ratio <strong>3:4</strong> (ex. <strong>900 × 1200 px</strong>), JPG/WEBP compressé.</div>
          <div class="small mt-1 mb-0 text-muted">
            Les images sélectionnées ne sont enregistrées qu’après clic sur <strong>Enregistrer les images</strong>.
          </div>
        </div>
      </div>

      {% if declinaison.picture %}
        <div class="gallery-grid mb-3">
          {% for item in declinaison.picture %}
            <div class="gallery-thumb-wrap">
              <img src="{{ vich_uploader_asset(item, 'file') }}"
                   alt="Image {{ item.id }}"
                   class="gallery-thumbnail">

              <button type="button"
                      class="thumb-action js-set-main-image-decli"
                      data-image-id="{{ item.id }}"
                      data-image-src="{{ vich_uploader_asset(item, 'file') }}"
                      title="Définir comme image principale"
                      data-bs-toggle="tooltip">
                Principale
              </button>


              {% if item.isSelected %}
                <span class="thumb-flag flag-product" title="Image principale" data-bs-toggle="tooltip">
                  <i class="fa fa-star"></i>
                </span>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="alert alert-warning text-center">
          Aucune image n’est disponible pour cette déclinaison.
        </div>
      {% endif %}

      <div class="custom-upload">
        <label class="fw-semibold mb-2 d-block">Ajouter des images</label>

        {{ form_widget(formFile.picture, {
          attr: {
            class: 'form-control m-input',
            accept: 'image/*',
            multiple: true
          }
        }) }}

        <small class="text-muted d-block mt-1">
          Formats acceptés : JPG, PNG — sélection multiple autorisée
        </small>

        <div class="d-flex align-items-center gap-2 mt-2">
          <span class="badge bg-light text-dark border" id="selectedFileCount">0 sélectionnée</span>
          <span class="small text-muted" id="selectedFileNames"></span>
        </div>

        <button type="button" id="clearAllSelectedImages" class="btn btn-sm btn-outline-danger">
          Tout effacer
        </button>

        <div id="selectedFilePreview" class="selected-preview-grid mt-2"></div>

        {# important: champ utilisé par l’action /file/{id} pour image principale #}
        <input type="hidden" name="selectFile" id="decliSelectFile" value="{{ declinaison.picture|filter(p => p.isSelected)|first ? (declinaison.picture|filter(p => p.isSelected)|first).id : '' }}">

        <div class="text-center mt-4">
          <button type="button" class="btn crm-btn-dark px-5 py-2 w-md-auto" id="saveDeclinaisonImagesBtn" data-direct-handler="1" onclick="window.DeclinaisonTabs && window.DeclinaisonTabs.submitPhotosForm && window.DeclinaisonTabs.submitPhotosForm(); return false;">
            Enregistrer les images
          </button>
        </div>
      </div>

      {{ form_errors(formFile) }}
      {{ form_rest(formFile) }}
      {{ form_end(formFile) }}
    </div>
  {% endif %}
</div>

<script>
(function () {
  var selectedDecliFiles = [];

  function syncInputFiles(input) {
    if (!input) return;
    var dt = new DataTransfer();
    selectedDecliFiles.forEach(function (file) { dt.items.add(file); });
    input.files = dt.files;
  }

  function renderSelectedPreviews() {
    var count = document.getElementById('selectedFileCount');
    var names = document.getElementById('selectedFileNames');
    var preview = document.getElementById('selectedFilePreview');
    var clearBtn = document.getElementById('clearAllSelectedImages');

    if (!count || !names || !preview) return;

    preview.innerHTML = '';
    names.textContent = '';
    count.textContent = selectedDecliFiles.length + (selectedDecliFiles.length > 1 ? ' selectionnees' : ' selectionnee');
    if (clearBtn) {
      clearBtn.style.display = selectedDecliFiles.length ? '' : 'none';
    }

    selectedDecliFiles.forEach(function (file, idx) {
      var reader = new FileReader();
      reader.onload = function (evt) {
        preview.insertAdjacentHTML('beforeend',
          '<div class="selected-preview-item position-relative" data-index="' + idx + '">' +
            '<button type="button" class="btn btn-sm btn-danger remove-selected-image" style="position:absolute;top:2px;right:2px;line-height:1;padding:2px 6px;border-radius:3px;">&times;</button>' +
            '<img src="' + evt.target.result + '" alt="" title="' + (file.name || '').replace(/"/g, '&quot;') + '">' +
          '</div>'
        );
      };
      reader.readAsDataURL(file);
    });
  }

  document.addEventListener('change', function (e) {
    var input = e.target.closest('#content_galery input[type="file"][name*="[picture]"]');
    if (!input) return;

    selectedDecliFiles = Array.from(input.files || []);
    syncInputFiles(input);
    renderSelectedPreviews();
  });

  document.addEventListener('click', function (e) {
    var removeBtn = e.target.closest('#content_galery .remove-selected-image');
    if (removeBtn) {
      e.preventDefault();
      var item = removeBtn.closest('.selected-preview-item');
      var idx = item ? parseInt(item.getAttribute('data-index') || '-1', 10) : -1;
      if (idx >= 0) {
        selectedDecliFiles.splice(idx, 1);
        var input = document.querySelector('#content_galery input[type="file"][name*="[picture]"]');
        syncInputFiles(input);
        renderSelectedPreviews();
      }
      return;
    }

    var clearBtn = e.target.closest('#clearAllSelectedImages');
    if (clearBtn) {
      e.preventDefault();
      selectedDecliFiles = [];
      var input = document.querySelector('#content_galery input[type="file"][name*="[picture]"]');
      if (input) {
        input.value = '';
        syncInputFiles(input);
      }
      renderSelectedPreviews();
    }
  });
})();

(function () {
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.js-set-main-image-decli');
    if (!btn) return;

    var imageId = btn.getAttribute('data-image-id') || '';
    var input = document.getElementById('decliSelectFile');
    if (input) input.value = imageId;

    document.querySelectorAll('#content_galery .js-set-main-image-decli').forEach(function (b) {
      b.classList.remove('is-loading');
    });
    btn.classList.add('is-loading');
  });
})();

(function () {
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.js-set-main-image-decli');
    if (!btn) return;

    var form = btn.closest('form');
    if (!form) return;

    var imageId = btn.getAttribute('data-image-id') || '';
    var imageSrc = btn.getAttribute('data-image-src') || '';
    var input = document.getElementById('decliSelectFile');
    if (input) input.value = imageId;

    var fd = new FormData();
    fd.append('selectFile', imageId);

    fetch(form.action, {
      method: 'POST',
      body: fd,
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(function (r) { return r.json(); })
      .then(function (data) {
        if (!data || !data.success) return;

        document.querySelectorAll('#content_galery .thumb-flag.flag-product').forEach(function (x) { x.remove(); });

        var wrap = btn.closest('.gallery-thumb-wrap');
        if (wrap && !wrap.querySelector('.thumb-flag.flag-product')) {
          wrap.insertAdjacentHTML('beforeend',
            '<span class="thumb-flag flag-product" title="Image principale"><i class="fa fa-star"></i></span>');
        }

        var preview = document.getElementById('decliMainImagePreview');
        var empty = document.getElementById('decliMainImageEmpty');

        if (preview) {
          preview.src = imageSrc;
        } else if (empty) {
          empty.outerHTML =
            '<div class="product-main-wrap">' +
              '<img id="decliMainImagePreview" src="' + imageSrc + '" alt="Image principale" class="img-fluid border shadow-sm product-main-image">' +
              '<span class="product-main-flag" title="Image principale"><i class="fa fa-star"></i></span>' +
            '</div>';
        }

        if (window.DeclinaisonTabs && typeof window.DeclinaisonTabs.refreshLeftSummary === 'function') {
          window.DeclinaisonTabs.refreshLeftSummary(function () {
            if (typeof toastr !== 'undefined') {
              toastr.success((data && data.message) ? data.message : 'Image principale mise a jour.');
            }
          });
          return;
        }

        if (typeof toastr !== 'undefined') {
          toastr.success((data && data.message) ? data.message : 'Image principale mise a jour.');
        }
      });
  });
})();

(function () {
  document.addEventListener('submit', function (e) {
    var form = e.target.closest('form.js-declination-upload-images-form');
    if (!form) return;
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
  });

  document.addEventListener('click', function (e) {
    var btn = e.target.closest('#saveDeclinaisonImagesBtn');
    if (!btn) return;
    if (btn.getAttribute('data-direct-handler') === '1') return;

    e.preventDefault();
    var form = btn.closest('form.js-declination-upload-images-form');
    if (!form) return;

    var fileInput = form.querySelector('input[type="file"][name*="[picture]"]');
    if (!fileInput || !fileInput.files || !fileInput.files.length) {
      if (typeof Swal !== 'undefined') {
        Swal.fire({
          icon: 'warning',
          title: 'Aucune image selectionnee',
          text: 'Selectionnez au moins une image avant l enregistrement.'
        });
      }
      return;
    }

    btn.disabled = true;

    fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
      .then(function (response) { return response.json(); })
      .then(function (data) {
        if (!data || !data.success) {
          throw new Error((data && data.message) || 'Erreur d enregistrement des images.');
        }

        if (window.DeclinaisonTabs && typeof window.DeclinaisonTabs.refreshTabAndSummary === 'function') {
          window.DeclinaisonTabs.refreshTabAndSummary('content_galery', function () {
            if (typeof toastr !== 'undefined') {
              toastr.success(data.message || 'Images ajoutees avec succes.');
            }
          });
          return;
        }

        if (typeof toastr !== 'undefined') {
          toastr.success(data.message || 'Images ajoutees avec succes.');
        }
      })
      .catch(function (error) {
        if (typeof Swal !== 'undefined') {
          Swal.fire({
            icon: 'error',
            title: 'Enregistrement impossible',
            text: error.message || 'Erreur d enregistrement des images.'
          });
        }
      })
      .finally(function () {
        btn.disabled = false;
      });
  });
})();
</script>