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

{% block title %}
<title>Mon profil</title>
{% endblock %}

{% block content %}
    <div class="main_tools">
        <button class="button update round no-mb" data-open="modalEditProfile"><i class="fa fa-edit"></i></button>
        <button class="button round purple changePasswordUser no-mb" title="Change mon mot de passe"><i class="fa fa-key"></i></button>
    </div>
    <div class="cell small-12">
        <h1>Mon Profil</h1>
    </div>
    <div class=" cell small-12 medium-6 columns myProfile">
        <p class="listing"><span>Genre</span><span>{% if user.gender %}{{ user.gender.name }}{% else %}Non renseigné{% endif %}</span></p>
        <p class="listing"><span>Nom</span><span>{% if user.lastName %}{{ user.lastName }}{% endif %}</span></p>
        <p class="listing"><span>Prénom</span><span>{% if user.firstName %}{{ user.firstName }}{% endif %}</span></p>
        <p class="listing"><span>Email</span><span>{% if user.email %}{{ user.email }}{% endif %}</span></p>
        <p class="listing"><span>Téléphone</span><span>{% if user.phone %}{{ user.phone|phoneNumber }}{% endif %}</span></p>
        <p class="listing"><span>Identifiant</span><span>{% if user.username %}{{ user.username }}{% endif %}</span></p>
    </div>
    <div class="cell small-12 medium-6 columns myProfile">
        <div class="title-2 underscore">Mes 20 dernières connexions :</div>
        {% if lastLogins|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 lastLogins %}
                    <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="modalEditProfile" data-reveal>
        <div class="reveal-title">Editer mon profil</div>
        <div class="reveal-body">
            {{ form_start(formEditUser, {'attr': {'id': 'formEditUser'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-4 text-right">{{ form_label(formEditUser.gender) }}</div>
                <div class="cell small-8">{{ form_widget(formEditUser.gender) }}</div>
                <div class="cell small-4 text-right">{{ form_label(formEditUser.firstName) }}</div>
                <div class="cell small-8">{{ form_widget(formEditUser.firstName) }}</div>
                <div class="cell small-4 text-right">{{ form_label(formEditUser.lastName) }}</div>
                <div class="cell small-8">{{ form_widget(formEditUser.lastName) }}</div>
                <div class="cell small-4 text-right">{{ form_label(formEditUser.email) }}</div>
                <div class="cell small-8">{{ form_widget(formEditUser.email) }}</div>
                <div class="cell small-4 text-right">{{ form_label(formEditUser.phone) }}</div>
                <div class="cell small-8">{{ form_widget(formEditUser.phone) }}</div>
            </div>
            {{ form_end(formEditUser) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button cancel">Retour</button>
            <button class="button save" id="btnSubmitFormEditProfile">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 () {

            $('#btnSubmitFormEditProfile').click(function () {
                $(this).html(btn_spin);
                $('#formEditUser').submit();
            });

            $('.changePasswordUser').click(function () {
                var url = "{{ url('user_profile_change_password', {'user': user.id }) }}";
                var data = {token:"{{ csrf_token('user_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 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 %}