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

{% block title %}Organisation Menu{% endblock %}

{% block body %}
    <section class="container">
        {% include 'utils/file.ariane.html.twig' %} 
    	<br/>
        <h4 id="{{menu.code}}" data-title="main">{{menu.libelle}}</h4> <br/><br/>
        <h6>Gestion des positions de sous menus</h6><br />
        <hr/>
        <div class="d-flex justify-content-between">
            {% if menu.code == "main" %}
                 <a class="btn btn-secondary btn-sm" href="/menu/liste"><i class="bi bi-chevron-left"></i> Retour</a>
             {% else %}
             	 <a class="btn btn-secondary btn-sm" href="/menuGroupe/liste/{{ menu.code }}/main"><i class="bi bi-chevron-left"></i> Retour</a>
            {% endif %}  
           
            {% if menu.groupes|length > 0  %}
                <button class="btn btn-primary btn-sm" id="save"><i class="bi bi-save"></i> Enregistre</button>
            {% endif %}                 
        </div>
        <hr/> 
        <div style="width:100%;text-align:center;"><small>Veuillez déplacer les sous menus dans l'ordre souhaiter et enregistrez</small></div>
        <br/>
        <div class="loader" style="display:none;width:100%;text-align:center;" id="loader"><img src="{{ asset('images/ajax-loader.gif') }}" /></div>
        <div class="alert alert-light" role="alert" style="display:none;" id="message"></div>
        <br/><br/>
        <table class="draggable-table" id="table">
            <thead>
                <tr>
                    <th scope="col" style="text-align:center;">Code</th>
                    <th scope="col" style="text-align:center;">Groupe</th>
                    <th scope="col" style="text-align:center;">Ordre</th>
                </tr>
            </thead>
            <tbody>
                {% if menu.groupes|length > 0  %}
                    {% for obj in menu.groupes|sort((a, b) => a.position <=> b.position) %}
                        <tr>
                            <td style="text-align:center;">{{obj.code}}</td>
                            <td style="text-align:center;">{{obj.nom}}</td>
                            <td style="text-align:center;">{{obj.position}}</td>
                        </tr>
                    {% endfor %} 
                {% else %}
                    <tr><td colspan="2">Aucun groupe associé.</td></tr>
                {% endif %}            
            </tbody>        
        </table>
        <br/></br>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/table_draggrable.js') }}"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            $("#save").click(function(e){
                $("#message").css("display", "none");
                $("#loader").css("display", "block")
                var datas = { code: $("h4").attr("id"), listes: [] };
                var pos = 0;
                $('.draggable-table tbody tr').each(function(){
                    var idx = 0;
                    pos++;
                    $(this).find("td").each(function(){
                        idx++;
                        if(idx == 1){
                            datas.listes.push({code: $(this).text(), position: pos});
                        }
                    });                    
                });
                
                $.post( "/menu/sous-menu/organisation/save", datas, function( res ) {
                    var display = "none";
                    var classe = "alert alert-warning";
                    var message = res.message;
                    switch(res.type) {
                        case "error":
                            display = "block";
                            classe = "alert alert-danger";
                            break;
                        case "success":
                            display = "block";
                            classe = "alert alert-success";
                            break;
                        default:
                            display = "none";
                            classe = "alert alert-warning";
                    }
                    $("#loader").css("display", "none")
                    $("#message").attr("class", classe).css("display", display).text(message);
                }, "json");
            });
        });
    </script>
{% endblock %}