{% extends '@EasyAdmin/page/content.html.twig' %}
{% block content_title %}Modifier le Menu principal{% endblock %}

{% set has_batch_actions = batch_actions|length > 0 %}
{% block page_actions %}
    {% if filters|length > 0 %}
        <div class="datagrid-filters">
            {% block filters %}
                {% set applied_filters = ea.request.query.all['filters']|default([])|keys %}
                <div class="btn-group action-filters">
                    <a href="#" data-href="{{ ea_url().setAction('renderFilters').includeReferrer() }}" class="btn btn-secondary btn-labeled btn-labeled-right action-filters-button disabled {{ applied_filters ? 'action-filters-applied' }}" data-bs-toggle="modal" data-bs-target="#modal-filters">
                        <i class="fa fa-filter fa-fw"></i> {{ 'filter.title'|trans(ea.i18n.translationParameters, 'EasyAdminBundle') }}{% if applied_filters %} <span class="text-primary">({{ applied_filters|length }})</span>{% endif %}
                    </a>
                    {% if applied_filters %}
                        <a href="{{ ea_url().unset('filters') }}" class="btn btn-secondary action-filters-reset">
                            <i class="fa fa-close"></i>
                        </a>
                    {% endif %}
                </div>
            {% endblock filters %}
        </div>
    {% endif %}

    {% block global_actions %}
        <div class="global-actions">
            <a class="btn btn-secondary btn-uncollapse" href="#">Tout développer <i class="fa fa-plus"></i></a>
            <a class="btn btn-secondary btn-collapse" href="#">Tout replier <i class="fa fa-minus"></i></a>
            {% for action in global_actions %}
                {{ include(action.templatePath, { action: action }, with_context = false) }}
            {% endfor %}
        </div>
    {% endblock global_actions %}
{% endblock page_actions %}


{% block main %}
<div class="dd">
    <ol class="dd-list">
        {% for entity in entities %}
        <li class="dd-item {% if not entity.instance.active %}not-visible{% endif %}" data-id="{{ entity.instance.id }}">
            <div class="dd-handle" data-info="POS:{{ entity.instance.position }} - ID:{{ entity.instance.id }}">
                {{ entity.instance.title }}
                <em>{% if entity.instance.children.isEmpty %}{% if entity.instance.page is null %}{% if entity.instance.link == "#" %}Titre de section{% else %}Lien externe: {{ entity.instance.link|slice(0, 64) }}{% endif %}{% else %}Page: {{ entity.instance.page.title }}{% endif %}{% endif %}</em>
                <em>{% if not entity.instance.active %}Brouillon{% else %}Visible{% endif %}</em>
                <a class="dd-nodrag" href="{{ ea_url().setController('App\\Controller\\Admin\\MenuLinkCrudController').setAction('edit').setEntityId(entity.instance.id) }}"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                <a class="dd-nodrag delete-button" href="{{ path('admin_menu_delete', {id: entity.instance.id}) }}"><i class="fa fa-trash" aria-hidden="true"></i></a>
            </div>
            <ol class="dd-list">
                {% for entity_2 in entity.instance.children %}
                <li class="dd-item {% if not entity_2.active %}not-visible{% endif %}" data-id="{{ entity_2.id }}">
                    <div class="dd-handle" data-info="POS:{{ entity_2.position }} - ID:{{ entity_2.id }}">
                        {{ entity_2.title }}
                        <em></em>
                        <em>{% if not entity_2.active %}Brouillon{% else %}Visible{% endif %}</em>
                        <a class="dd-nodrag" href="{{ ea_url().setController('App\\Controller\\Admin\\MenuLinkCrudController').setAction('edit').setEntityId(entity_2.id) }}"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                        <a class="dd-nodrag delete-button" href="{{ path('admin_menu_delete', {id: entity_2.id}) }}"><i class="fa fa-trash" aria-hidden="true"></i></a>
                    </div>
                    <ol class="dd-list">
                        {% for entity_3 in entity_2.children %}
                        <li class="dd-item {% if not entity_3.active %}not-visible{% endif %}" data-id="{{ entity_3.id }}">
                            <div class="dd-handle" data-info="POS:{{ entity_3.position }} - ID:{{ entity_3.id }}">
                                {{ entity_3.title }}
                                <em>{% if entity_3.page is null %}{% if entity_3.link == "#" %}Titre de section{% else %}Lien externe: {{ entity_3.link|slice(0, 64) }}{% endif %}{% else %}Page: {{ entity_3.page.title }}{% endif %}</em>
                                <em>{% if not entity_3.active %}Brouillon{% else %}Visible{% endif %}</em>
                                <a class="dd-nodrag" href="{{ ea_url().setController('App\\Controller\\Admin\\MenuLinkCrudController').setAction('edit').setEntityId(entity_3.id) }}"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                <a class="dd-nodrag delete-button" href="{{ path('admin_menu_delete', {id: entity_3.id}) }}"><i class="fa fa-trash" aria-hidden="true"></i></a>
                            </div>
                        </li>
                        {% endfor %}
                    </ol>
                </li>
                {% endfor %}
            </ol>
        </li>
        {% endfor %}
    </ol>
</div>
<script>
var lastSaved = null;
function handleDrag(container,element){
    var data = [];
    if(lastSaved == JSON.stringify($('.dd').nestable('serialize'))) return;
    $(".dd-item").each(function(i, elem){
        elem = $(elem);
        data.push([elem.data("id"), elem.index(), (elem.parents(".dd-item").length > 0) ? elem.parents(".dd-item").data("id") : null]);
    })
    element.find(".dd-handle").addClass('loading');
    $.post(reorderRoute, JSON.stringify({data:data}), function(data) {
        notif(element, (data.code == 200) ? "success" : "error");
        lastSaved = JSON.stringify($('.dd').nestable('serialize'));
    });
}
function notif(element, message = "success"){
    if(!element.hasClass('.dd-handle')) element = element.find(".dd-handle")
    element.removeClass('loading');
    element.addClass(message);
    setTimeout(function(){
        element.removeClass(message);
    }, 800);
}
jQuery(function(){
    $('.dd').nestable({
        maxDepth:3,
        effect: { animation: 'fade', time: 'slow'},
        callback: handleDrag
    });
    lastSaved = JSON.stringify($('.dd').nestable('serialize'));
    $('.dd').nestable('collapseAll');
    $('.content-body').on('click','.delete-button', function(event){
        event.preventDefault();
        if(!confirm("Voulez-vous vraiment supprimer cet élément?")) return false;
        var $elem = $(this);
        $.get($elem.attr("href"), function(data) {
            $elem.parents(".dd-item").first().fadeOut(function(){
                $('.dd').nestable('remove', $elem.parents(".dd-item").first().data('id'));
            });
            lastSaved = JSON.stringify($('.dd').nestable('serialize'));
        });
    });
    $('.btn-uncollapse').click(function(){
        $('.dd').nestable('expandAll')
    })
    $('.btn-collapse').click(function(){
        $('.dd').nestable('collapseAll')
    })
});

var reorderRoute = "{{ path('admin_menu_reorder')|escape('js') }}";
var deleteRoute = "{{ path('admin_menu_delete', {id: 1})|escape('js') }}".replace("1", "$1");
</script>
{{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', with_context = false) }}
{% endblock %}