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

{% block content %}
    <div class="main_tools">
        <button class="button round purple changePasswordUser no-mb" title="Changer le mot de passe"><i class="fa fa-key"></i></button>
        <button id="toggleUser" class="button round {% if user.isActive %}red{% else %}green{% endif %} no-mb" title="{% if user.isActive %}Désactiver{% else %}Activer{% endif %}"><i class="fa {% if user.isActive %}fa-lock{% else %}fa-unlock{% endif %}"></i></button>
    </div>

    <div class="cell small-12">
        <h1 class="mb-1">Utilisateur <b>{{ user.fullName('medium') }}</b> {% if not user.isActive %}<span class="txt_red">(inactif)</span>{% endif %}</h1>
        {{ form_start(formEditUser, {'attr': {'id': 'formEditUser'}}) }}
        <div class="grid-x grid-padding-x">
            <div class="cell small-6 medium-6">
                {{ form_row(formEditUser.gender) }}
                {{ form_row(formEditUser.lastName) }}
                {{ form_row(formEditUser.firstName) }}
                {{ form_row(formEditUser.email) }}
                {{ form_row(formEditUser.phone) }}
            </div>
            <div class="cell small-6 medium-6">
                <h5>Appartenance aux groupes</h5>
                <ul style="list-style: none;">
                    {% for group in formEditUser.groups.children %}
                        <li>
                        {{ form_widget(group) }}
                        {{ form_label(group) }}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {{ form_end(formEditUser) }}

    </div>

    <div class="cell small-12 text-right">
        <a class="small button cancel" href="{{ path('admin_users_list') }}" style="margin-right: 1rem">Annuler</a>
        <button class="small button save" type="submit" id="btnSubmitEditUser"><i class="ic ic-save"></i> modifier</button>
    </div>

    <div class="cell small-12">
        <h2 class="mb-1">Connexions</h2>
        {% if user.logins|length > 0 %}
            <table class="tbl--xs" width="100%" cellspacing="0">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Ip</th>
                    <th>Géolocalisation</th>
                </tr>
                </thead>
                <tbody>
                {% for login in user.logins %}
                    <tr>
                        <td>{{ login.date|date('d/m/Y H:i:s') }}</td>
                        <td>{{ login.ip }}</td>
                        <td>{% if login.city %}{{ login.city }} ({{ login.country }}){% endif %}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div>Pas de connexion enregistrée à ce jour</div>
        {% endif %}
    </div>

    {# MODAL #}


    <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 small cancel">Retour</button>
            <button class="button small 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 form_parsley = $('#formEditUser').parsley(parsley_options);

            $('#btnSubmitEditUser').click(function () {
                if (form_parsley.isValid()){
                    $(this).html(btn_spin);
                    $('#formEditUser').submit();
                }
            });

            $('#toggleUser').click(function () {
                var url = "{{ url('admin_users_toggle', {'user': user.id}) }}";
                var data = { token: "{{ csrf_token('admin_users_toggle') }}" };
                $.ajax({
                    method: "POST",
                    url: url,
                    data: data,
                    success: function (response) {
                        if(response.hasOwnProperty('redirect')){
                            window.location = response.redirect;
                        }
                    }
                })
            });

            $('.changePasswordUser').click(function () {
                var userId = {{ user.id }};
                var url = "{{ url('admin_users_change_password', {'user': user.id }) }}";
                var data = {token:"{{ csrf_token('admin_users_change_password') }}"};
                $.ajax({
                    method: "GET",
                    url: url,
                    data: data,
                    success: function (response) {
                        $('#modalChangePassword_body').html(response);
                        $('#modalChangePassword').foundation('open');
                        var inputFirst = $('#change_password_user_plainPassword_first'),
                            inputSecond = $('#change_password_user_plainPassword_second'),
                            btnSubmit = $('#btnChangePassword');
                        helper = $('#helper2');
                        $(inputFirst).focusin(function(){
                            $(helper).html("Le mot de passe doit contenir au minimum 8 caratctères").show();
                        });
                        $(inputFirst).focusout(function(){
                            $(helper).html("").hide();
                            checkPassword(inputFirst, helper);
                        });
                        $(inputSecond).focusout(function(){
                            var password = $(inputFirst).val();
                            if(password.length >= 8 && password != $(inputSecond).val()) {
                                $(helper).html("Les mots de passe ne sont pas indentiques").show();
                                $(inputSecond).addClass('is-invalid-input');
                            } else  checkPassword(inputFirst, helper);
                        });

                        $(btnSubmit).click(function () {
                            if($(inputFirst).val() != $(inputSecond).val()) {
                                $(helper).html("Les mots de passe ne sont pas indentiques").show();
                                $(inputSecond).addClass('is-invalid-input');
                                return false;
                            } else  $(helper).html("").hide();
                            if(checkPassword(inputFirst, helper)){
                                $.post(url, $('#formChangePassword').serialize(), function(response){
                                    if(response.hasOwnProperty('redirect')){
                                        window.location = response.redirect;
                                    } else {
                                    }
                                });
                                //$('#formChangePassword').submit();
                                $(btnSubmit).html('...');
                            }
                        });
                    }});
            });

            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;
            }
        });
    </script>
{% endblock %}