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

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

  <div class="container-admin">
    <div class="header">
      <h3 class="card-header-title">Page d'accueil</h3>
      <p class="intro-form">Composez votre page d'accueil en ajoutant des blocs et en les réorganisant par glisser-déposer</p>
      <div class="help">
         <p>Astuce : Glissez et déposez les blocs pour modifier leur ordre d'affichage sur votre page d'accueil. L'ordre des blocs ci-dessous correspond exactement à l'ordre d'affichage sur votre site.</p>
      </div>
    </div>
    
    <div class="tab-content">
        <div style="display:flex;justify-content:flex-end" class="panel-heading">
            <a class="btn btn-default">Ajouter un block</a>
        </div>
      <ul id="sortable-blocks" class="list-group">
        {% for block in blocks %}
          <li class="list-group-item d-flex align-items-center" data-type="{{ block.type }}" data-ref="{{ block.ref }}">
            <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 }}
            <div>
           

          {% if block.routeGroup != "" %}   
           <a href="{{ path( block.routeGroup , {action: 'edit' , id: block.id }) }}">
                <span class="material-icons">edit</span>
            </a>
           {% if block.route is same as "admin_presta_about" or block.route is same as "admin_presta_product_home" %} 
            <a href="{{ path( block.route , {action: 'edit', id:block.id, group_id: block.id }) }}">
                <span class="material-icons">visibility</span>
            </a>
           {% else %}
            <a href="{{ path( block.route , {action: 'edit', group_id: block.id }) }}">
                <span class="material-icons">visibility</span>
            </a>
           {% endif %}
          
            <a href="{{ path( block.routeGroup , { action: 'delete', id: block.id  }) }}"> 
                <span class="material-icons">delete</span>
           </a>
          {% else %}
            <a href="{{ path( block.route , { action: 'edit', id: 0}) }}">
                <span class="material-icons">edit</span>
            </a>
            <a href="{{ path( block.route , { action: 'delete', id: 0}) }}"> 
                <span class="material-icons">delete</span>
           </a>
          {% endif %}

       
            </div>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class="popup-block">
        <div class="header-popup">
          <h3>Ajouter un block</h3>
          <p>Sélectionnez le type de bloc que vous souhaitez ajouter à votre page d'accueil</p>
          <svg class="close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" data-fg-mmg10="0.26:0.3828:/src/app/components/ui/dialog.tsx:67:11:2415:9:e:XIcon:::::s:bsP:1"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
        </div>
       <div class="container-popup">

        <div class="card-block">
          <a href="{{ path('admin_presta_group_slider', {id: -1, action:'add'}) }}">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image w-5 h-5 text-blue-600" data-fg-eant12="22.8:22.3209:/src/app/components/AddBlockDialog.tsx:91:21:2755:42:e:Icon"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>
            </div>
            <div>
              <h3>Diaporama</h3>
              <p>Carrousel d'images</p>
            </div>
          </a>
        </div>

        <div class="card-block">
          <a href="{{ path('admin_presta_group_category', {id: -1, action:'add'}) }}">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid3x3 lucide-grid-3x3 w-5 h-5 text-blue-600" data-fg-eant12="22.8:22.3209:/src/app/components/AddBlockDialog.tsx:91:21:2755:42:e:Icon"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg>
            </div>
            <div>
              <h3>Catégories</h3>
              <p>Mise en avant des catégories </p>
            </div>
          </a>
        </div>


        <div class="card-block">
          <a href="{{ path('admin_presta_group_product_home', {id: -1,action:'add'})}}">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-5 h-5 text-blue-600" data-fg-eant12="22.8:22.3209:/src/app/components/AddBlockDialog.tsx:91:21:2755:42:e:Icon"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>
            </div>
            <div>
              <h3>Block produits</h3>
              <p>ajoute des produits sur la page d'accueils</p>
            </div>
          </a>
        </div>

        


        <div class="card-block">
          <a href="{{ path('admin_presta_group_about', {id: -1, action:'add'}) }}">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-store w-5 h-5 text-gray-600" data-fg-cedx10="22.7:22.4530:/src/app/components/DraggableBlock.tsx:120:11:3550:42:e:Icon"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"></path><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"></path><path d="M2 7h20"></path><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"></path></svg>
            </div>
            <div>
              <h3>Présentation de la boutique</h3>
              <p>Bloc de présentation de votre boutique</p>
            </div>
          </a>
        </div>

        <div class="card-block">
          <a href="{{ path('admin_presta_brand', {action:'add'})}}">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award w-5 h-5 text-gray-600" data-fg-cedx10="22.7:22.4530:/src/app/components/DraggableBlock.tsx:120:11:3550:42:e:Icon"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg>
            </div>
            <div>
              <h3>Marques partenaires</h3>
              <p>Logos de vos marques partenaires</p>
            </div>
          </a>
        </div>

        <div class="card-block">
          <a href="{{ path('admin_presta_group_reassurance' , {id: -1, action:'add'}) }}"> 
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M18.7022 5.78441L12.7878 3.24968C12.2847 3.03406 11.7153 3.03406 11.2122 3.24968L5.29778 5.78441C4.47855 6.13551 3.99051 6.98635 4.10106 7.87077L4.71405 12.7747C4.9342 14.5359 5.81517 16.1477 7.1787 17.284L10.7196 20.2347C11.4613 20.8528 12.5387 20.8528 13.2804 20.2347L16.8213 17.284C18.1848 16.1477 19.0658 14.5359 19.286 12.7747L19.8989 7.87077C20.0095 6.98635 19.5215 6.13551 18.7022 5.78441Z" stroke="#33363F" stroke-width="2" stroke-linecap="round"/><path d="M9 12L11.5687 14.5687C11.7918 14.7918 12.1633 14.7551 12.3383 14.4925L16 9" stroke="#33363F" stroke-width="2" stroke-linecap="round"/></svg>
            </div>
            <div>
              <h3>Garanties & services</h3>
              <p>Rassuré vos clients</p>
            </div>
          </a>
        </div>
        
       </div>
    </div>

  </div>

  <script>
    $(function () {
      $('#sortable-blocks').sortable({
        handle: '.cursor-move',
        update: function () {

        const order = [];

        $('#sortable-blocks li').each(function () {
          order.push({
            type: $(this).data('type'),
            ref: $(this).data('ref')
          });
        });

        $.ajax({
          url: '{{ ajax_url }}',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(order),
          success: function (res) {
            if (res.success) {
              console.log('Ordre mis à jour');
              console.log(order);
            }
          }
        });
      }
      });
    });
  </script>
{% endblock %}