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

{% block activeLiMembreBureau %}class="active"{% endblock %}
{% block activeMembreBureau %}class="active"{% endblock %}
{% block body %}
    <link rel="stylesheet" href="{{ asset("assets/Backoffice/js/datatables/datatables.css") }}" type="text/css"/>
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href=""><i class="fa fa-home"></i> Tableau de board</a></li>
                <li><a href="#">Membres de bureau</a></li>
                <li class="active">Liste des membres</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Membres de bureau</h3>
            </div>

            <section class="panel panel-default">
                <header class="panel-heading">
                    Liste des membres
                    <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i>
                </header>
                <div class="table-responsive">
                    <table class="table table-striped m-b-none" data-ride="datatables" id="listUser">
                        <thead>
                        <tr>
                            <th width="15%">Nom & Prénom</th>
                            <th width="15%">الاسم</th>                                                        
                            <th width="15%">Chambre</th>                                                     
                            <th width="15%">Téléphone</th>
                            <th width="10%">Membre bureau</th>
                            <th width="15%">Poste de bureau</th>
                            <th width="15%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for u in membres %}
                            <tr>
                                <td>{{ u.nom }} {{ u.prenom }}</td>
                                <td>{{ u.nomAr }} {{ u.prenomAr }}</td>
                                <td>
                                {% if u.chambre == 'MED' %} LA MÉDITÉRRANÉE
                                {% elseif  u.chambre == 'NORD' %} L'ATLANTIQUE-NORD
                                {% elseif  u.chambre == 'CENTRE' %} L'ATLANTIQUE-CENTRE
                                {% elseif  u.chambre == 'SUD' %} L'ATLANTIQUE-SUD
                                {% endif %}
                                </td>
                                <td>{{ u.tel }}</td>
                                <td>
                                {% if u.ifBureau == 1 %} OUI
                                {% elseif  u.ifBureau == 0 %} NON
                                {% endif %}

                                </td>
                                <td>
                                {% if u.posteBureau == 1 %} Présidant
                                {% elseif  u.posteBureau == 21 %} 1ère Vice-Présidant
                                {% elseif  u.posteBureau == 22 %} 2ème Vice-Présidant
                                {% elseif  u.posteBureau == 23 %} 3ème Vice-Présidant
                                {% elseif  u.posteBureau == 24 %} 4ème Vice-Présidant
                                {% elseif  u.posteBureau == 3 %} Assesseur
                                {% elseif  u.posteBureau == 4 %} Trésorier
                                {% elseif  u.posteBureau == 5 %} Trésorier Adjoint
                                {% elseif  u.posteBureau == 6 %} Secrétaire
                                {% elseif  u.posteBureau == 7 %} Secrétaire Adjoint
                                {% elseif  u.posteBureau == 0 %} ---
                                {% endif %}

                                </td>
                                <td>
                                    <a href="/updateMembreBureau/{{ u.id }}" class="btn btn-sm btn-info">Modifier</a>
                                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteMembre({{ u.id }})">Supprimer</button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <br/><br/>
            </section>
        </section>
    </section>

{% endblock %}
{% block js %}
    <script src="{{ asset("assets/Backoffice/js/datatables/jquery.dataTables.min.js") }}"></script>
    <script type="text/javascript">

        $("#listUser").DataTable( {
            "oLanguage": {
                "sUrl": "/assets/Backoffice/js/datatables/french-datatable.json"
            },
            "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
            "sPaginationType": "full_numbers"
        } );

    function deleteMembre(id){
            noty({
                text: "Etes vous sûr de vouloir supprimer le compte ?",
                type: 'confirm',
                theme: 'relax',
                layout: 'center',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                },
                buttons     : [
                    {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                        var url = '/deleteMembreBureau/?id='+id;
                        $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                        $.ajax({
                            type: 'get',
                            url: url,
                            success: function(data){
                                if(data=="OK"){
                                    window.location.reload();
                                }
                                else{
                                    errorMsg("une erreur s'est produite");
                                    $('.fadeMe').animate({opacity: 0.0}, 900,setInvisible);
                                }


                            }
                        });

                        $noty.close();


                    }
                    },
                    {addClass: 'btn btn-danger', text: 'Non', onClick: function ($noty) {
                        $noty.close();

                    }
                    }
                ]
            });
        }
     

        function errorMsg(message) {
            noty({
                text: message,
                type: 'error',
                theme: 'relax',
                layout: 'topCenter',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                }
            });
        }
    </script>
{% endblock %}