{% extends 'App/_include/_layout.main.html.twig' %}

{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1>{{ 'profile.title'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
            </div>
        </div>
    </div>

    <div class="cell small-12 medium-6 mt-1-5 border_right pr-1">
        <h6 class="underlined text_primary_light mb-1">{{ 'profile.subtitle.email_username'|trans }}</h6>
        <div class="grid-x grid-padding-x">
            <div class="cell medium-6 small-12">{{ user.email }}</div>
            <div class="cell medium-6 small-12">
                <button class="button purple small mb-1" type="button" data-open="modalChangeEmail"><i class="fa fa-at"></i> {{ 'profile.button.change_email'|trans }}</button>
            </div>
        </div>
        <h6 class="underlined text_primary_light">{{ 'profile.subtitle.user'|trans }}</h6>
        {{ form_start(formEditProfile, {'attr': {'id': 'formEditProfile'}}) }}
        <div class="grid-x grid-padding-x">
            <div class="cell small-12 medium-2">
                {{ form_row(formEditProfile.gender) }}
            </div>
            <div class="cell small-12 medium-5">
                {{ form_row(formEditProfile.lastName) }}
            </div>
            <div class="cell small-12 medium-5">
                {{ form_row(formEditProfile.firstName) }}
            </div>
            <div class="cell small-12 medium-6">
                {{ form_row(formEditProfile.phone) }}
            </div>
            <div class="cell small-12 medium-6">
                {{ form_row(formEditProfile.locale) }}
            </div>
            <div class="cell small-12 text-right">
                <button type="button" class="button warning small mt-1-5" id="btn_submit_edit_profile"><i class="fa fa-pencil"></i>&nbsp;{{ 'edit'|trans }}</button>
            </div>
        </div>
        {{ form_end(formEditProfile) }}

        <h6 class="underlined text_primary_light mb-1 mt-2">{{ 'profile.subtitle.security'|trans }}</h6>
        <div class="grid-x grid-padding-x">
            <div class="cell small-12">
                <button class="button warning small" type="button" id="btn_modalChangePassword"><i class="fa fa-unlock-alt"></i> {{ 'profile.button.change_password'|trans }}</button>
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-6 mt-1-5 pr-1">
        <h6 class="underlined text_primary_light">{{ 'profile.subtitle.history_login'|trans }}</h6>
        {% if lastLogins|length > 0 %}
            <table class="style-light">
                <thead>
                <tr>
                    <th>{{ 'profile.property.date'|trans }}</th>
                    <th>{{ 'profile.property.ip'|trans }}</th>
                    <th>{{ 'profile.property.geolocalisation'|trans }}</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>{{ 'profile.message.no_login'|trans }}</div>
        {% endif %}
    </div>



    <div class="reveal" id="modalChangeEmail" data-reveal>
        <div class="reveal-title">{{ 'profile.modal.change_email.title'|trans }}</div>
        <div class="reveal-body" id="modalChangeEmail_body">
            {{ form_start(formChangeEmail, {'attr': {'id': 'formChangeEmail'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-12">{{ form_row(formChangeEmail.newEmail) }}</div>
                <div class="cell small-12">{{ form_row(formChangeEmail.newEmail) }}</div>
            </div>
            {{ form_end(formChangeEmail) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_change_email">{{ 'save'|trans }}</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">{{ 'profile.modal.change_password.title'|trans }}</div>
        <div class="reveal-body" id="modalChangePassword_body">

        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_change_password">{{ 'save'|trans }}</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(){
            let form_profile = $('#formEditProfile');
            let form_profile_parsley = $(form_profile).parsley(parsley_options);
            $('#btn_submit_edit_profile').click(function () {
                let btn_submit = this;
                form_profile_parsley.validate();
                form_profile_parsley.whenValid().then(function (){
                    $(btn_submit).html(btn_spin);
                    $(form_profile).submit();
                });
            });

            let form_change_email = $('#formChangeEmail'),
                btn_submit_form_change_email = $('#btn_submit_change_email');
            let form_parsley_change_email = $(form_change_email).parsley(parsley_options);
            $(btn_submit_form_change_email).click(function () {
                form_parsley_change_email.validate();
                form_parsley_change_email.whenValid().then(function () {
                    $(btn_submit_form_change_email).html(btn_spin);
                    $(form_change_email).submit();
                });
            });

            $('#btn_modalChangePassword').click(function () {
                var url = "{{ url('app_profile_change_password') }}";
                var data = {token:"{{ csrf_token('app_profile_change_password') }}"};
                $.ajax({
                    method: "GET",
                    url: url,
                    data: data,
                    success: function (response) {
                        $('#modalChangePassword_body').html(response);
                        $('#modalChangePassword').foundation('open');
                        let form_change_password = $('#formChangePassword'),
                            btn_submit_change_password = $('#btn_submit_change_password')
                            input_first = $('#change_password_plainPassword_first'),
                            input_second = $('#change_password_plainPassword_second'),
                            translators = {
                                'min_length' : "{{ 'password.min_length'|trans }}",
                                'min_digit' : "{{ 'password.min_digit'|trans }}",
                                'min_lowercase' : "{{ 'password.min_lowercase'|trans }}",
                                'min_uppercase' : "{{ 'password.min_uppercase'|trans }}",
                                'min_special_char' : "{{ 'password.min_special_char'|trans }}"
                            }
                        let form_change_password_parsley = $(form_change_password).parsley(parsley_options);
                        init_helper($('#helper'), translators);
                        $(input_first).on('input',function (){
                            update_helper($(input_first).val(), translators);
                        });
                        $(input_first).focusout(function(){
                            checkPassword(this);
                        });
                        $(input_second).focusout(function(){
                            if( checkPassword(input_first) && $(input_first).val() !== $(input_second).val()) {
                                $(input_second).addClass('is-invalid-input');
                            }
                            else {
                                $(input_second).removeClass('is-invalid-input');
                            }
                        });
                        $(btn_submit_change_password).click(function(){
                            let btn_submit = this;
                            form_change_password_parsley.validate();
                            if( checkPassword(input_first) && $(input_first).val() === $(input_second).val()) {
                                $(btn_submit).html(btn_spin);
                                $(form_change_password).submit();
                            }
                        });
                    }
                });
            });

        });
    </script>
{% endblock %}