{% extends 'admin/base.html.twig' %}

{% block content %}
    <ol class="breadcrumb breadcrumb-quirk">
        <li><a href="{{ path('admin_homepage') }}"><i class="fa fa-home mr5"></i> {{ 'common.home'|trans }}</a></li>
        <li class="active"><i class="fa fa-bars mr5"></i> {{ 'admin.menu.index.title'|trans }}</li>
    </ol>

    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <div class="row">
                    <h4 class="panel-title col-md-9">
                        {{ 'admin.menu.index.title_sub_menu'|trans }}
                    </h4>

                    <div class="col-md-3">
                        <a class="btn btn-success btn-quirk btn-sm pull-right mr10"
                           href="{{ path ('admin_menu_create', {'groupId': group.id}) }}">
                            {{ 'admin.menu.index.create'|trans }}
                        </a>
                        <a class="btn btn-warning btn-quirk btn-sm pull-right mr10"
                           href="{{ path ('admin_menu_index', {'groupId': group.id}) }}">
                            {{ 'common.back'|trans }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row mb15">
                    <div class="col-md-3">
                        {{ group.title }} / {{ menuItem.title }}
                    </div>
                </div>

                <table class="table table-hover" id="sortable">
                    <thead>
                    <tr>
                        <th>Titre</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    {% for subMenuItem in subMenu %}
                        <tr style="cursor: move" class="first-level-item" id="{{ subMenuItem.id }}">
                            <td style="width: 80%">{{ subMenuItem.title }}</td>
                            <td>
                                <a class="btn btn-primary btn-sm btn-quirk" title="{{ 'common.action.edit'|trans }}"
                                   href="{{ path('admin_menu_edit', {'groupId': group.id, 'id': subMenuItem.id}) }}">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                </a>
                                <a class="btn btn-danger btn-sm btn-quirk delete-message"
                                   title="{{ 'common.action.delete'|trans }}"
                                   href="{{ path('admin_menu_delete', {'groupId': group.id, 'id': subMenuItem.id}) }}">
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                </a>

                            </td>
                        </tr>

                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
{% endblock %}
{% block view_js %}
    {{ append_js_code("$('.delete-message').click(function(){
           if (!confirm('" ~ 'admin.contact.action.confirm'|trans ~ "')){
               return false;
           }
       });
       ") }}
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#group-list').on('change', function () {
                return window.location.href = $(this).val();
            });
        });

        $("#sortable").sortable({
            items: ".first-level-item",
            update: function (event, ui) {
                $("#sortable").sortable("disable");
                subMenuItemOrder = new Array();
                $('#sortable .first-level-item').each(function () {
                    subMenuItemOrder.push($(this).attr('id'));
                });
                $.ajax({
                    method: "POST",
                    url: "{{ path('admin_menu_order', {'groupId': group.id}) }}",
                    data: {
                        orders: subMenuItemOrder
                    },
                    success: function (data) {
                        $("#sortable").sortable("enable");
                    }
                });
            }
        });
    </script>
{% endblock %}