{% extends '::base2.html.twig' %}
{% block title %}Gestion Utilisateurs - Liste{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}

{% block body %}

    <div class="page-wrapper">
        <!-- BEGIN HEADER -->
        <div class="page-header navbar navbar-fixed-top">
            {% include 'client_buyer/header.html.twig' %}
        </div>
        <!-- END HEADER -->

        <!-- BEGIN HEADER & CONTENT DIVIDER -->
        <div class="clearfix"> </div>
        <!-- END HEADER & CONTENT DIVIDER -->

        <!-- BEGIN CONTAINER -->
        <div class="page-container">
            <!-- BEGIN SIDEBAR -->
            <div class="page-sidebar-wrapper">
                <!-- BEGIN SIDEBAR -->
                <div class="page-sidebar navbar-collapse collapse">
                    {% include 'client_buyer/menu.html.twig' %}
                </div>
                <!-- END SIDEBAR -->
            </div>
            <!-- END SIDEBAR -->

            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div style="background: #eef1f5;" class="page-content">
                    <!-- BEGIN PAGE BAR -->
                    <div class="page-bar">
                        <ul class="page-breadcrumb">
                            <li>
                                <a href="#">Gestion des Utilisateurs</a>
                                <i class="fa fa-circle"></i>
                            </li>
                            <li>
                                <a href="#">Liste Utilisateurs</a>
                            </li>
                        </ul>
                    </div>
                    <!-- END PAGE BAR -->

                    <!-- BEGIN PAGE TITLE-->
                    <h1 class="page-title">Gestion des Utilisateurs
                        <small>Tous</small>
                    </h1>
                    <!-- END PAGE TITLE-->

                    <!-- BEGIN PAGE HEADER-->
                    <div class="row">
                        <div class="col-md-12">

                            <!-- BEGIN SAMPLE TABLE PORTLET-->
                            <div class="portlet light bordered">
                                {% include '@MillesimaActions/flashBag.html.twig' %}

                                <div class="portlet-title" style="padding-bottom: 10px;">
                                    <a href="{{ path('millesima_client_achetteur_user') }}" class="btn add">
                                        <i class="icon-user"></i> Ajouter un nouveau Utilisateur
                                    </a>
                                </div>
                                <div class="portlet-body">
                                    <div class="table-responsive" style="overflow: hidden">
                                        <table class="table" id="myTable">
                                            <thead>
                                                <tr>
                                                    <th> # </th>
                                                    <th> Nom & Prénom </th>
                                                    <th> Phone </th>
                                                    <th> Email </th>
                                                    <th> Rôle </th>
                                                    <th> Action </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for user in compte.utilisateurs %}
                                                    {% if app.user.salt != user.salt %}
                                                    <tr id-user="{{ user.id }}" id-compte="{{ compte.id }}">
                                                        <td> {{ user.id }} </td>
                                                        <td> {{ user.firstname }} {{ user.lastname }}</td>
                                                        <td> <b>Mobile:</b> {{ user.phonenumber }} <br> <b>Tel:</b> {{ user.telnumber }} </td>
                                                        <td> {{ user.email }} </td>
                                                        <td>
                                                            {% if user.function == 'USER_R' %}
                                                                Répresentant
                                                            {% elseif user.function == 'USER_D' %}
                                                                Demandeur
                                                            {% else %}
                                                                Acheteur
                                                            {% endif %}
                                                        </td>
                                                        <td>
                                                            <a href="{{ path('millesima_client_achetteur_user_edit', {'salt' : user.salt}) }}" class="btn green-steel btn-xs" title="Modifier"><i class="fa fa-pencil"></i></a>
                                                            <a data-toggle="modal" data-target="#delete{{ user.salt }}"  class="btn btn-danger btn-xs" title="Supprimer"><i class="fa fa-trash-o"></i></a>
                                                            {% if user.function == 'USER_D' %}
                                                                <button type="button" title="Acheteurs" class="btn yellow-haze btn-xs btn-affect-acheteurs" id="add_acheteur" id-compte="" id-user="" data-toggle="modal" data-target="#acheteur-affectation-modal">
                                                                    <i class="fa fa-user" aria-hidden="true"></i>
                                                                </button>
                                                            {% endif %}
                                                            {% if user.function == 'USER_R' %}
                                                                <button type="button" title="Demandeurs" class="btn yellow-soft btn-xs btn-affect-demandeurs" id="add_demandeur" id-compte="" id-user="" data-toggle="modal" data-target="#demandeur-affectation-modal">
                                                                    <i class="fa fa-user" aria-hidden="true"></i>
                                                                </button>
                                                            {% endif %}
                                                        </td>
                                                    </tr>
                                                    <!-- modal -->
                                                    <div id="delete{{ user.salt }}" class="modal fade bs-delete-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                                        <div class="modal-dialog modal-md">
                                                            <div class="modal-content">

                                                                <div class="modal-header">
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                                                                    </button>
                                                                    <h4 class="modal-title" id="myModalLabel2">Are you sure you want to delete this user?</h4>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                    <a href="{{ path('millesima_client_achetteur_user_delete', {'salt' : user.salt}) }}" class="btn btn-danger ">Supprimer</a>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    {% endif %}
                                                {% endfor %}
                                                <!-- Modal Affectation Demandeurs -->
                                                <div class="modal fade" id="demandeur-affectation-modal" role="dialog">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">

                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                                <h4 class="modal-title">Affecter des Demandeurs</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div id="loading"style=" text-align: center;"></div>
                                                                <div class="row" style="padding-right: 20px;padding-left: 20px;" id="affectation_demandeur_ajax_response"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- End Modal Affectation Demandeurs -->
                                                <!-- Modal Affectation Acheteurs -->
                                                <div class="modal fade" id="acheteur-affectation-modal" role="dialog">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                                <h4 class="modal-title">Affecter des Acheteurs</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div id="loading"style=" text-align: center;"></div>
                                                                <div class="row" style="padding-right: 20px;padding-left: 20px;" id="affectation_acheteur_ajax_response"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- End Modal Affectation Acheteurs -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- END SAMPLE TABLE PORTLET-->

                        </div>

                    </div>
                    <!-- END PAGE HEADER-->

                </div>
                <!-- END CONTENT BODY -->
            </div>
            <!-- END CONTENT -->
        </div>
        <!-- END CONTAINER -->

        <!-- BEGIN FOOTER -->
        <div class="page-footer">
            {% include 'commun/footer.html.twig' %}
        </div>
        <!-- END FOOTER -->
    </div>

    {% block javascripts %}
        {{ parent() }}

        <script>
            //Affectation des demandeurs
            $("button.btn-affect-demandeurs").click(function () {
                $("button.btn-affect-demandeurs").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                $("button.btn-affect-demandeurs").attr('id-user', $(this).closest('tr').attr('id-user'));
                $("button#btn-demandeur-affectation").attr('id-user', $(this).closest('tr').attr('id-user'));
                var URL1 = Routing.generate('millesima_client_achetteur_ajax_get_demandeur_by_account', {'id' : $("#add_demandeur").attr('id-compte'),'idU' : $("#add_demandeur").attr('id-user') } );
                {% set loadingSA =  asset('back/assets/global/img/ajax-loading.gif')  %}
                $("#add_demandeur_ajax_response").html("<img src = '{{ loadingSA }}' />");
                var request = $.ajax({
                    url: URL1,
                    method: "POST",
                }).done(function (msg) {
                    $("#affectation_demandeur_ajax_response").html(msg);
                }).fail(function (jqXHR, textStatus) {
                    console.log(textStatus);
                });
            });

            //Affectation des acheteurs
            $("button.btn-affect-acheteurs").click(function () {
                $("button.btn-affect-acheteurs").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                $("button.btn-affect-acheteurs").attr('id-user', $(this).closest('tr').attr('id-user'));
                $("button.btn-acheteur-affectation").attr('id-user', $(this).closest('tr').attr('id-user'));
                var URL2 = Routing.generate('millesima_client_achetteur_ajax_get_acheteur_by_account', {'id' : $("#add_acheteur").attr('id-compte'),'idU' : $("#add_acheteur").attr('id-user') } );
                {% set loadingSA =  asset('back/assets/global/img/ajax-loading.gif')  %}
                $("#add_acheteur_ajax_response").html("<img src = '{{ loadingSA }}' />");
                var request = $.ajax({
                    url: URL2,
                    method: "POST",
                }).done(function (msg) {
                    $("#affectation_acheteur_ajax_response").html(msg);
                }).fail(function (jqXHR, textStatus) {
                    console.log(textStatus);
                });
            });
        </script>
    {% endblock %}

{% endblock %}