{% extends '@SyliusAdmin/layout.html.twig' %}

{% block content %}
  <div class="ui segment">
    <h2 class="ui header">Ajouter des photos de variantes</h2>
    <p>Nom de fichier attendu: <code>fournisseur-id.jpg</code> (ex: <code>desmartis-1921473.jpg</code>). Maximum 20 images par envoi.</p>
    <form class="ui form" id="photo-form" action="{{ path('admin_variant_photos_upload') }}" method="post" enctype="multipart/form-data">
      <div class="field">
        <label>Glisser-déposer vos images ci-dessous ou cliquez pour sélectionner</label>
        <div id="dropzone" class="ui placeholder segment" style="text-align:center; padding: 40px; border: 2px dashed #ddd; cursor: pointer;">
          <div class="ui icon header">
            <i class="images outline icon"></i>
            Déposez jusqu'à 20 images ici
          </div>
          <div class="inline">Formats acceptés: JPG, PNG, WEBP</div>
        </div>
        <input id="file-input" type="file" name="photos[]" multiple accept=".jpg,.jpeg,.png,.webp" style="display:none" />
      </div>
      <div id="selection" class="ui tiny segment" style="display:none"></div>
      <button class="ui primary button" type="submit">Uploader et lier</button>
    </form>
  </div>

  <script>
  (function(){
    const dz = document.getElementById('dropzone');
    const input = document.getElementById('file-input');
    const sel = document.getElementById('selection');
    const form = document.getElementById('photo-form');
    const MAX = 20;

    function updateList(files){
      const arr = Array.from(files);
      sel.style.display = arr.length ? '' : 'none';
      sel.innerHTML = '<strong>' + arr.length + ' fichier(s) sélectionné(s):</strong><ul style="margin:6px 0 0 16px">' + arr.slice(0,MAX).map(f => '<li>'+ f.name +'</li>').join('') + (arr.length>MAX ? '<li>… et ' + (arr.length-MAX) + ' ignoré(s)</li>' : '') + '</ul>';
    }

    dz.addEventListener('click', () => input.click());
    dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('blue'); });
    dz.addEventListener('dragleave', () => dz.classList.remove('blue'));
    dz.addEventListener('drop', e => {
      e.preventDefault(); dz.classList.remove('blue');
      const items = e.dataTransfer.files;
      if (!items || items.length === 0) return;
      // Limit to MAX files
      const list = new DataTransfer();
      const accept = ['image/jpeg','image/png','image/webp'];
      for (let i=0; i<items.length && list.files.length < MAX; i++) {
        if (accept.includes(items[i].type)) list.items.add(items[i]);
      }
      input.files = list.files;
      updateList(input.files);
    });
    input.addEventListener('change', () => updateList(input.files));
    form.addEventListener('submit', () => {
      if (input.files.length === 0) {
        alert('Sélectionnez au moins une image');
      }
    });
  })();
  </script>
{% endblock %}