{% extends 'AdminBundle::layout.html.twig' %}
{% block body %}
    <h3>
        Les catégories
        <button id="add_category" class="btn btn-success btn-xs">
            ajouter
        </button>
    </h3>
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-lg-20 col-md-20 col-sm-20 col-xs-20">

        </div>
    </div>
    <div class="row">
        <button id="ordering" class="btn btn-info btn-xs">ordonner</button>
        <table id="categories" class="ui-sortable ui-droppable" width="100%">
        {% for category in categories %}
            <tr id="{{ category.id }}" style="height:40px;" class="ui-draggable ui-draggable-handle ui-sortable-handle ui-draggable-dragging">
                <td>
                    <span style="color: #000000;">{{ category.label }}</span>
                    <em>[{{ category.slug }}]</em>
                </td>
                <td>
                    <a href="{{ path('admin_category_delete', {'id':category.id}) }}" class="btn btn-xs btn-danger">
                        supprimer
                    </a>
                    <a class="btn btn-xs btn-primary edit_category" data-id="{{ category.id }}">
                        mettre à jour
                    </a>
                </td>
            </tr>
        {% endfor %}
        </table>
    </div>
    <!-- Modal -->
    <div id="sectionModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Catégorie</h4>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript" src="{{ asset('jquery/jquery.tablednd.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#categories").tableDnD({
                onDragClass: "lineDrag"
            });

            $('#ordering').bind('click', function(e) {
                e.preventDefault();
                var data = {};
                $.each($('#categories > tbody > tr'), function(index, value) {
                    data[value.id] = index+1;
                });
                $.ajax({
                    url: '/admin/categories/ordering',
                    type: 'post',
                    data: {categories: data},
                    dataType: 'json',
                    success: function(response) {
                        location.reload();
                    }
                });
            });

            $('#add_category').bind('click', function (e) {
                e.preventDefault();
                $.ajax({
                    url: '/admin/category',
                    type: 'get',
                    dataType: 'html',
                    success: function (content) {
                        $('.modal-body').html(content);
                        jQuery.noConflict();
                        $('#sectionModal').modal('show');
                    }
                });
            });

            $('.edit_category').bind('click', function (e) {
                e.preventDefault();
                var id = $(this).data('id');
                $.ajax({
                    url: '/admin/category/' + id,
                    type: 'get',
                    dataType: 'html',
                    success: function (content) {
                        $('.modal-body').html(content);
                        jQuery.noConflict();
                        $('#sectionModal').modal('show');
                    }
                });
            });

        });
    </script>
{% endblock %}