{% extends '@PrestaShop/Admin/layout.html.twig' %}

{% block content %}
<div class="row content">
    {% include '@Modules/polarisprestatheme/views/templates/admin/nav.html.twig' %}

  <div class="card col-10">
    <div class="card-header">
      <h3 class="card-header-title">Ordre des blocs de la page d’accueil</h3>
    </div>
    
    <p class="intro-form">Cette page vous permet de réorganiser l’ordre d’affichage des sections de la page d’accueil.<br>
    - Faites simplement glisser chaque bloc en cliquant et en maintenant le clic sur les points à gauche, puis déplacez-le pour modifier sa position.<br>
    - L’ordre choisi sera appliqué automatiquement sur le front-office.
    </p>
    <div class="card-body">
      <ul id="sortable-blocks" class="list-group">
        {% for block in blocks %}
          <li class="list-group-item d-flex align-items-center" data-id="{{ block.id }}">
            <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 cursor-move" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z"/></svg>
            {{ block.label }}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <script>
    $(function () {
      $('#sortable-blocks').sortable({
        handle: '.cursor-move',
        update: function () {
          const order = [];
          $('#sortable-blocks li').each(function () {
            order.push($(this).data('id'));
          });

          $.post('{{ ajax_url }}', {order: order}, function (res) {
            if (res.success) {
              console.log('Ordre mis à jour !');
            }
          });
        }
      });
    });
  </script>
{% endblock %}