{% extends 'AdminBundle::layout.html.twig' %}
{% block body %}
    <h3>
        Les projets
        <a class="btn btn-success btn-xs" href="{{ path('admin_project_create') }}">
            ajouter
        </a>
    </h3>
    <br/>
    <br/><br/>
    <table id="projects" class="ui-sortable ui-droppable" width="100%">
        <thead>
            <tr>
                <td width="2%"></td>
                <td width="60%">
                    <span style="font-size: 20px;">Nom (société)</span>
                    <button id="ordering" class="btn btn-info btn-xs">ordonner</button>
                </td>
                <td width="30%"><span style="font-size: 20px;">Actions</span></td>
            </tr>
            <tr style="height:10px;"></tr>
        </thead>
        <tbody>
        {% for project in projects %}
            <tr id="{{ project.id }}" style="height:40px;" class="ui-draggable ui-draggable-handle ui-sortable-handle ui-draggable-dragging">
                <td></td>
                <td>
                    {{ project.title }}<em style="font-size: 11px; display: inline-block; margin: 0 0 0 15px;">({{ project.company }})</em>
                </td>
                <td>
                    <a class="btn btn-danger btn-xs" href="{{ path('admin_project_delete', {'id': project.id}) }}">
                        supprimer
                    </a>
                    <a class="btn btn-primary btn-xs" href="{{ path('admin_project_edit', {'id': project.id}) }}">
                        mettre à jour
                    </a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript" src="{{ asset('jquery/jquery.tablednd.min.js') }}"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $("#projects").tableDnD({
                onDragClass: "lineDrag"
            });

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

        });

    </script>
{% endblock %}