{% 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">
        <h3 class="card-header-title">Menu de navigation</h3>
        <p class="intro-form">Cette section vous permet de gérer les blocs de menu principaux de votre site.<br>
            - Cliquez sur l’icône de visibilité pour activer ou désactiver un bloc<br>
            - Cliquez sur "Afficher" pour consulter ou gérer les sous-menus associés.<br>
            - Utilisez les icônes d’édition et de suppression pour modifier ou supprimer un bloc de menu.<br>
            - Faites glisser les points dans la colonne Position pour réorganiser l’ordre d’affichage.<br>
            - Cliquez sur l’icône “+” en haut à droite pour ajouter une nouvelle catégorie dans votre menu.
            </p>
        </div>
        <div class="tab-content">
            <div class="panel-heading">Menu
                <a class="action-link add-parent" style="float:right" href="{{path('admin_presta_parent_menu' , {id: -1, action:'add'})}}"><span class="material-icons">add</span></a>
            </div>
        
            <table>
                <thead>
                    <tr >
                        <th>ID</th>
                        <th>Catégorie</th>
                        <th>Etat</th>
                        <th>Position</th>
                        <th>Sous-menu</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="menu-parent-table">
                    {% for menu in menus %}
                        <tr data-id="{{ menu.menu.id }}">
                            <td>{{ loop.index }}</td>
                            <td>{{ menu.menu.name}}</td>
                            
                            <td>
                                <a href="#" class="toggle-visibility" 
                                    data-id="{{ loop.index0 }}" 
                                    data-objet="configMenuParent" 
                                    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>
                                <a class="btn btn-default" href="{{ path('admin_presta_show_child_menu', {parent_id: menu.menu.id})}}">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>
                                    Afficher
                                </a>
                            </td>
                            <td>
                                <a href="{{ path('admin_presta_parent_menu', {id: loop.index - 1, action: 'edit'}) }}">
                                    <span class="material-icons">edit</span>
                                </a>
                                <a href="{{ path('admin_presta_parent_menu', {id: loop.index - 1, action: 'delete'}) }}">
                                    <span class="material-icons">delete</span>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    new Sortable(document.getElementById('menu-parent-table'), {
        animation: 150,
        handle: '.drag-handle',
        onEnd: function () {
            const order = [];
            document.querySelectorAll('#menu-parent-table tr').forEach((row) => {
                order.push(row.dataset.id);
            });

            fetch('{{ path('admin_menu_parent_reorder') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ order: order })
            });
        }
    });
</script>

{% endblock %}
