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

{% block javascripts %}
    <script>
        //<![CDATA[
        $(function() {
            function changePosition(type, liste) {
                $.ajax({
                    type: "POST",
                    url: "{{ path('element_position') }}",
                    data: {
                        type: type,
                        list: liste
                    },
                    cache: false
                });
            }

            $("#sortableLevel1").sortable({
                update: function (event, ui) {
                    var listlevel1 = new Array(),
                        classelement = ui.item.context.className,
                        iselement = classelement.indexOf('containerLevel1');

                    $('.level1').each(function () {
                        listlevel1.push($(this).attr('data-elementid'));
                    });

                    if (listlevel1.length!=0 && iselement!= -1) {
                        changePosition('Menu', listlevel1);
                    }
                }
            });
            $("#sortableLevel1").disableSelection();

            $(".sortableLevel2").sortable({
                update: function (event, ui) {
                    var listlevel2 = new Array(),
                        classelement = ui.item.context.className,
                        iselement = classelement.indexOf('containerLevel2');

                    $(ui.item).parent('.sortableLevel2').children('.containerLevel2').each(function () {
                        listlevel2.push($(this).children('.level2').attr('data-elementid'));
                    });

                    if (listlevel2.length!=0 && iselement!= -1) {
                        changePosition('Menu', listlevel2);
                    }
                }
            });
            $(".sortableLevel2").disableSelection();

            $(".sortableLevel3").sortable({
                update: function (event, ui) {
                    var listlevel3 = new Array()
                        classelement = ui.item.context.className,
                        iselement = classelement.indexOf('containerLevel3');

                    $(ui.item).parent('.sortableLevel3').children('.containerLevel3').each(function () {
                        listlevel3.push($(this).children('.level3').attr('data-elementid'));
                    });

                    if (listlevel3.length!=0 && iselement!= -1) {
                        changePosition('Menu', listlevel3);
                    }
                }
            });
            $(".sortableLevel3").disableSelection();
        });
        //]]>
    </script>
{% endblock %}

{% block body %}
    {{ knp_menu_render('actions_menus') }}

    <div class="listDomaines" id="sortableLevel1">
        {% for level1 in menus %}
            <div class="containerLevel1 delete-element-container">
                <div class="level1 element {{ level1.typeTemplate.title }}" data-elementid="{{ level1.id|raw }}">
                    <a href="{{ path('admin_menu_edit', {'id':level1.id}) }}">{{ level1.title }}</a>

                    <ul class="element-actions">
                        {% if level1.typeTemplate.title in ['Simple', 'Liste', 'Presentation'] %}
                            <li>
                                <a href="{{ path('template', {'id':level1.id, 'title':level1.slug}) }}" target="_blank">Voir</a>
                            </li>
                        {% endif %}
                        <li>
                            <a class="edit" href="{{ path('admin_menu_edit', {'id':level1.id}) }}">
                                <span>{{ 'action.edit.label'|trans({}, 'action') }}</span>
                            </a>
                        </li>
                        <li>
                            <input
                                {% if level1.is_active %} checked="checked"{% endif %}
                                class="input-active"
                                data-type="Menu"
                                data-url="{{ path('element_actif')}}"
                                type="checkbox"
                                value="{{ level1.id }}"
                            />
                            <span class="checkbox"></span>
                        </li>
                        <li>
                            <a class="delete-element" href="{{ path('admin_menu_delete', {'id':level1.id, 'type':'Menu'}) }}">
                                <span>{{ 'action.delete.label'|trans({}, 'action') }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="sortableLevel2">
                    {% for level2 in level1.children %}
                        <div class="containerLevel2 delete-element-container">
                            <div class="level2 element {{ level2.typeTemplate.title }}" data-elementid="{{ level2.id|raw }}">
                                <a href="{{ path('admin_menu_edit', {'id':level2.id}) }}">{{ level2.title }}</a>

                                <ul class="element-actions">
                                    {% if level2.typeTemplate.title in ['Simple', 'Liste', 'Presentation'] %}
                                        <li>
                                            <a href="{{ path('template_level2', {'id':level2.id, 'title':level2.slug, 'idlevel1':level1.id, 'titlelevel1':level1.slug}) }}" target="_blank">Voir</a>
                                        </li>
                                    {% endif %}
                                    <li>
                                        <a  class="edit" href="{{ path('admin_menu_edit', {'id':level2.id}) }}">
                                            <span>{{ 'action.edit.label'|trans({}, 'action') }}</span>
                                        </a>
                                    </li>
                                    <li>
                                        <input
                                            {% if level2.is_active %} checked="checked"{% endif %}
                                            class="input-active"
                                            data-type="Menu"
                                            data-url="{{ path('element_actif')}}"
                                            type="checkbox"
                                            value="{{ level2.id }}"
                                        />
                                        <span class="checkbox"></span>
                                    </li>
                                    <li>
                                        <a class="delete-element" href="{{ path('admin_menu_delete', {'id':level2.id, 'type':'Menu'}) }}">
                                            <span>{{ 'action.delete.label'|trans({}, 'action') }}</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="sortableLevel3">
                                {% for level3 in level2.children %}
                                    <div class="containerLevel3 delete-element-container">
                                        <div class="level3 element {{ level3.typeTemplate.title }}" data-elementid="{{ level3.id|raw }}">
                                            <a href="{{ path('admin_menu_edit', {'id':level3.id}) }}">{{ level3.title }}</a>

                                            <ul class="element-actions">
                                                {% if level3.typeTemplate.title in ['Simple', 'Liste', 'Presentation'] %}
                                                    <li>
                                                        <a href="{{ path('template_level3', {'id':level3.id, 'title':level3.slug, 'idlevel1':level1.id, 'titlelevel1':level1.slug, 'idlevel2':level2.id, 'titlelevel2':level2.slug}) }}" target="_blank">Voir</a>
                                                    </li>
                                                {% endif %}
                                                <li>
                                                    <a  class="edit" href="{{ path('admin_menu_edit', {'id':level3.id}) }}">
                                                        <span>{{ 'action.edit.label'|trans({}, 'action') }}</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <input
                                                        {% if level3.is_active %} checked="checked"{% endif %}
                                                        class="input-active"
                                                        data-type="Menu"
                                                        data-url="{{ path('element_actif')}}"
                                                        type="checkbox"
                                                        value="{{ level3.id }}"
                                                    />
                                                    <span class="checkbox"></span>
                                                </li>
                                                <li>
                                                    <a class="delete-element" href="{{ path('admin_menu_delete', {'id':level3.id, 'type':'Menu'}) }}">
                                                        <span>{{ 'action.delete.label'|trans({}, 'action') }}</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
