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



{% block content %}

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

    <div class="container-admin">
        <div class="header">
            <h4 class="card-header-title">Configuration des sous menus</h4>
            <p class="intro-form">Cette section vous permet de gérer les sous-menus associés à un menu principal.<br>
                    - Cliquez sur l’icône de visibilité pour activer ou désactiver un bloc<br>
                    - Utilisez les icônes d’édition et de suppression pour modifier ou supprimer une colonne.<br>
                    - Faites glisser les points dans la colonne Position pour réorganiser l’ordre d’affichage.<br>
                    - Cliquez sur l’icône <span class="material-icons">topic</span> en haut à droite pour ajouter une nouvelle colonne de sous-categorie dans votre menu.<br>
                    - Cliquez sur l’icône <span class="material-icons">image</span> en haut à droite pour ajouter une nouvelle colonne de media dans votre menu.<br><br>

                    Chaque élément ajouté correspond à une colonne dans le menu déroulant. exemple : une colonne "vetements"  une colonne "chaussures" et une colonne media.<br>
            </p>
        </div>
        <div class="tab-content">
            <div class="panel-heading">Sous-menu
                <a class="action-link add-category" style="float:right" href="{{path('admin_presta_child_menu' , {id: -1, action:'add',parent_id: parent_id})}}"><span class="material-icons">topic</span></a>
                <a class="action-link add-media" style="float:right" href="{{path('admin_presta_media_menu' , {id: -1, action:'add',parent_id: parent_id})}}"><span class="material-icons">image</span></a>
            </div>

            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Contenu</th>
                        <th>Etat</th>
                        <th>Position</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="children-list" data-id-parent="{{ parent_id }}">
                    {% for columnIndex, menu in menus %}
                        
                       
                        <tr data-id="{{columnIndex}}">
                            <td>{{ loop.index }}</td>
                            <td>
                           
                                {% if menu.type == "media" %}
                                    Média
                                {% else %}
                                    Catégorie
                                {% endif %}
                            </td>
                            <td>
                              <a href="#" class="toggle-visibility" 
                                    data-id="{{ menu.sourceIndex }}" 
                                    data-column="{{columnIndex}}"
                                    data-objet={% if menu.type == "media" %}"configMenuMedia"{% else %}"configMenuChild"{% endif %}
                                    data-url="{{ path('admin_presta_toggle_visibility') }}">
                                    {% if  menu.isVisible %}
                                        <span style="color:green" class="material-icons">check</span>
                                    {% else %}
                                        <span style="color:red" class="material-icons">close</span>
                                    {% endif %}
                                </a>
                            </td>
                            <td class="drag-handle">
                                <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>
                            </td>
                            <td>
                            {% if menu.type == "media" %}
                                <a href="{{ path('admin_presta_media_menu', {id: menu.sourceIndex, action: 'edit', parent_id: parent_id , column : menu.columnIndex } )}}">
                                    <span class="material-icons">edit</span>
                                </a>
                                <a href="{{ path('admin_presta_media_menu', {id: menu.sourceIndex , action: 'delete', parent_id: parent_id ,column : menu.columnIndex}) }}">
                                    <span class="material-icons">delete</span>
                                </a>
                            {% else %}
                                <a href="{{ path('admin_presta_child_menu', {id: menu.sourceIndex, action: 'edit', parent_id: parent_id, column : menu.columnIndex} )}}">
                                    <span class="material-icons">edit</span>
                                </a>
                                <a href="{{ path('admin_presta_child_menu', {id: menu.sourceIndex , action: 'delete', parent_id: parent_id, column : menu.columnIndex}) }}">
                                    <span class="material-icons">delete</span>
                                </a>
                            {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    const list = document.getElementById('children-list');
    const idParent = list.dataset.idParent;

    new Sortable(list, {
        animation: 150,
        handle: '.cursor-move',
        onEnd: function () {
        const order = [];
        list.querySelectorAll('#children-list tr').forEach(row => {
            order.push(parseInt(row.dataset.id)); // columnIndex
        });

        fetch('{{ path("admin_menu_child_reorder") }}', {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({
            id_parent: parseInt(idParent),
            order: order // [1, 2] ou [2, 1] etc.
            })
        });
        }
    });
</script>

{% endblock %}
