{% extends 'Admin/_include/_layout.sidebar.html.twig' %}

{% block content %}
    <div class="main_tools">
        <button class="button save small" data-open="modalAddUser"><i class="fa fa-plus"></i> Ajouter un utilisateur</button>
    </div>

    <div class="cell small-12">
        <h1 class="mb-1">Liste des utilisateurs</h1>
        <table id="user_list" class="display dataTable" style="width: 100%;" role="grid" aria-describedby="example_info">
            <thead>
            <tr role="row">
                <th>Nom Prénom</th>
                <th>Email</th>
                <th>Identifiant</th>
                <th>Statut</th>
            </tr>
            </thead>

            <tfoot>
            <tr>
                <th>Nom Prénom</th>
                <th>Email</th>
                <th>Identifiant</th>
                <th>Statut</th>
            </tr>
            </tfoot>
            <tbody>
            {% for user in users %}
                <tr role="row" data-href="{{ url('admin_users_view', {'user':user.id}) }}" style="cursor: pointer;">
                    <td>{{ user.fullName('long') }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.username }}</td>
                    <td class="{% if user.isActive %}txt_green{% else %}txt_red{% endif %}">{% if user.isActive %}Actif{% else %}Désactivé{% endif %}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    {# MODAL #}

    <div class="reveal" id="modalAddUser" data-reveal>
        <div class="reveal-title">Ajouter un utilisateur</div>
        <div class="reveal-body">
            {{ form_start(formAddUser, {'attr': {'id': 'formAddUser'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-3 text-right">{{ form_label(formAddUser.gender) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUser.gender) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddUser.lastName) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUser.lastName) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddUser.firstName) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUser.firstName) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddUser.plainPassword) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUser.plainPassword) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddUser.email) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUser.email) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddUser.phone) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUser.phone) }}</div>
                <div class="small-9 small-offset-3 cell"><p id="helper" class="help-text"></p></div>
            </div>
            {{ form_end(formAddUser) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">Retour</button>
            <button class="button small save" id="btnSubmitformAddUser">Enregistrer</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalChangePassword" data-reveal>
        <div class="reveal-title">Changer un mot de passe</div>
        <div class="reveal-body">
            <div id="modalChangePassword_body" class="modal-body">

            </div>
        </div>
        <div class="reveal-footer">
            <button data-close class="button cancel">Retour</button>
            <button class="button save" id="btnChangePassword">Modifier</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function () {

            var emailAlreadyChecked = false;
            var inputEmail = $('#add_security_user_email');
            var inputPassword = $('#add_security_user_plainPassword');
            var helper = $('#helper');
            var form_parsley = $('#formAddUser').parsley(parsley_options);

            $(inputPassword).focusin(function(){
                $(helper).html("Le mot de passe doit contenir au minimum 8 caratctères").show();
            });
            $(inputPassword).focusout(function(){
                $(helper).html("").hide();
                checkPassword(inputPassword,helper);
            });
            $(inputEmail).focusout(function(){
                $(helper).html("").hide();
                checkEmail(inputEmail,helper);
            });


            $('#btnSubmitformAddUser').click(function () {
                var button = $(this);
                var helper = $('#helper');
                $('input[required]').each(function(){
                    var val = $(this).val();
                    if(val.length < 1){
                        $(this).addClass('is-invalid-input');
                    } else {
                        $(this).removeClass('is-invalid-input');
                    }
                });
                if(checkPassword(inputPassword,helper) && (emailAlreadyChecked || checkEmail(inputEmail,helper))){
                    if (form_parsley.isValid()){
                        $(button).html(btn_spin);
                        $('#formAddUser').submit();
                    }
                }
            });

            function checkPassword(element, helper){
                var no_error = false;
                var msg_helper = "Le mot de passe doit contenir au minimum 8 caratctères";
                var msg_error = "Le mot de passe saisi ne correspond pas aux critères (8 caractères minimum)";
                //var helper = $('#helper');
                var password = $(element).val();
                if (password.length < 8 ) {
                    $(element).addClass('is-invalid-input');
                    $(helper).html(msg_error).show();

                } else {
                    $(element).removeClass('is-invalid-input');
                    no_error = true
                }
                return no_error;
            }

            $('input[required]').focusout(function(){
                var val = $(this).val();
                if(val.length < 1){
                    $(this).addClass('is-invalid-input');
                } else {
                    $(this).removeClass('is-invalid-input');
                }
            });

            function checkEmail(element,helper){
                var email = $(element).val();
                var regExEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if(regExEmail.test(email)){
                    $(helper).html('').hide();
                    $(element).removeClass('is-invalid-input');
                    return checkUniqueEmail(element,helper);
                } else {
                    $(helper).html('Cette adresse email ne semble pas valide').show();
                    $(element).addClass('is-invalid-input');
                    return false;
                }
            }
            function checkUniqueEmail(element,helper){
                var no_error = true;
                var msg_error_empty = "L'email ne peut être vide";
                var email = $(element).val();
                helper.html('').hide();
                var data = {'token': "{{ csrf_token('tokenForCheckEmail')  }}", 'email':email};
                $.ajax({
                    url : "{{ path('admin_ajax_check_email') }}",
                    data : JSON.stringify(data),
                    dataType: 'json',
                    method: 'POST',
                    success : function(response){
                        if(response && response.hasOwnProperty('code')){
                            if(response.code === '00') {
                                no_error = true;
                                $(helper).html('').hide();
                                $(element).removeClass('is-invalid-input');
                                emailAlreadyChecked = true;
                            }
                            else {
                                $(helper).html(response.msg).show();
                                $(element).addClass('is-invalid-input');
                                emailAlreadyChecked = false;
                            }
                        }
                        return no_error;
                    }
                });
            }
        });

        (function($) {
            "use strict";
            var datatableFrench = {
                "sProcessing":     "Traitement en cours...",
                "sSearch":         "Rechercher&nbsp;:",
                "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
                "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                "sInfoPostFix":    "",
                "sLoadingRecords": "Chargement en cours...",
                "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
                "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
                "oPaginate": {
                    "sFirst":      "Premier",
                    "sPrevious":   "Pr&eacute;c&eacute;dent",
                    "sNext":       "Suivant",
                    "sLast":       "Dernier"
                },
                "oAria": {
                    "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                    "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                }
            };

            var user_list = $('#user_list');
            user_list.dataTable({
                language:datatableFrench,
                "order": [
                    [0, "ASC"]
                ],
                iDisplayLength: -1,
            });
            user_list.children('tbody').on( 'click', 'tr', function (e) {
               window.location = $(this).attr('data-href');
           } );
        })(jQuery);
    </script>
{% endblock %}