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

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    Gestion des utilisateurs clients
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-header block-header-default bg-gray">
            <h4 class="font-w700">
                Liste des utilisateurs
            </h4>
            <div>
                <button type="button" style="margin-left: 8px;" class="btn btn-sm btn-primary" data-toggle="tooltip" onclick="createUser()">
                    <i class="fa fa-plus mr-5"></i>Soumettre une demande d'ajout utilisateur
                </button>
            </div>
        </div>
        <div class="block-content block-content-full">
            <!-- DataTables functionality is initialized with .js-dataTable-full class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
            <table class="table table-bordered table-vcenter js-dataTable-full">
                <thead>
                <tr>
                    <th><b>Informations</b></th>
                </tr>
                </thead>
                <tbody>

                {% for user in users %}


                    <tr>
                        <td class="d-none d-sm-table-cell">
                            <b>Nom</b> : {{ user.name }}
                            <br>
                            <b>Prénom</b> : {{ user.firstname }}
                            <br>
                            <b>Email</b> : {{ user.email }}
                            <br>
                            <b>Nom du client</b> : {{ user.customerName}}
                            <br>
                            <b>Agence du client</b> : {{ user.Agence}}
                            <br>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Dynamic Table Full -->


{% endblock %}

{% block modal %}
{% endblock  %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            var tableArticle = $(".js-dataTable-full");
            tableArticle.DataTable({
                fixedHeaders: true,
                "paging": false,
                "order": [[ 0, "asc" ]],
                columnDefs:[
                    {orderable:false,targets:[1]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucun utilisateur",
                    "zeroRecords": "La recherche ne donne aucun résultat"
                }
            });

            $('#DataTables_Table_0_filter input').focus();

            // detect enter keypress
            $('#DataTables_Table_0_filter input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    $('#DataTables_Table_0_filter input').select();
                }
            });
        });

        function redirect(url) {
            window.location.replace(url);
        }

        function redirectEdit(userId) {
            redirect("{{ path('edit_user') }}?userId=" + userId);
        }

        function createUser() {
            redirect("{{ path('add_user_client') }}");
        }

    </script>
{% endblock %}