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

{% block localstyle %}
<style>
    .list-sort {
        padding:10px;
        background-color: var(--bs-card-cap-bg);
        border: var(--bs-card-border-width) solid var(--bs-card-border-color);
        border-radius: var(--bs-card-inner-border-radius);
    }
</style>
{% endblock %}

{% block body %}
    <h1 class="page-header">Gestion des Catégories de Document </h1>


    <a class="btn btn-success" href="{{ path('app_'~access~'_documentcategory_submit') }}">Ajouter</a>
    {% if auditUse and (access=="admin" or access=="audit") %}
        <a class="btn btn-secondary float-end" href="{{ path('app_'~access~'_audit_render',{entityname:'Documentcategory'}) }}"><i class="fas fa-eye fa-fw"></i> Audit</a>
    {% endif %}    
    </p>
    
    <div class="card mt-4">
        <div class="card-header">
            <i class="fa fa-table fa-fw"></i> Liste des Catégories de Document
        </div>

        {% set childs=[] %}
        <div class="card-body">
            <ul class="list-sort">
                {% for documentcategory in documentcategorys %}
                    {{ render(path("app_"~access~"_documentcategory_render",{id:documentcategory.id})) }}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

{% block localscript %}
<script>

function updateItems() {
        roworder=0;
        $('.itemcat').each(function(i) {
            // Order
            roworder++;
            
            // On récupère id et order
            var id = $(this).data('id');

            // On récupère le parent
            var parent=$(this).parents('.itemcat').data('id');
            //if(id==parent) parent=null;

            console.log({id: id, parent:parent, roworder: roworder});
            
            // Mise à jour en base de l'order
            $.ajax({
                method: "POST",
                url: "{{ path('app_'~access~'_documentcategory_order') }}",
                data: {
                    id:id,
                    parent:parent,
                    roworder:roworder
                }                   
            });              
        });
    }
    
    $( ".list-sort" ).sortable({
        connectWith: ".list-sort",
        items: ".itemcat",
        placeholder: "item placeholder",
        stop: updateItems
    });
    

</script>
{% endblock %}