{% extends "@FOSUser/layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}

{% block fos_user_content %}

    <form id="fos_user_change_password" class="fos_user_change_password"
          action="{{ path("fos_user_change_password") }}"
          method="post">

        <div class="row">
            <div class="col-xl-12 col-lg-12 col-sm-12">
                <div class="form-group mb-1">
                    {{ form_label(form.current_password) }}
                    {{ form_widget(form.current_password ,{'attr':{'class':'check-input check-input-required'}}) }}
                    <div class="alert-validation-field alert_fos_user_resetting_form_plainPassword_first"></div>
                </div>
                <div class="form-group mb-1">
                    {{ form_label(form.plainPassword.first) }}
                    {{ form_widget(form.plainPassword.first ,{'attr':{'class':'check-input-strength check-input check-input-required'}}) }}
                    <div class="alert-validation-field alert_fos_user_change_password_form_plainPassword_first"></div>
                </div>
                <div class="password-strength-bloc mb-3">
                    <div class="password-strength-text d-none" id="password-strength-text">
                        <span>Fiabilité: </span>
                        <span class="password-strength-text-status"
                              id="password-strength-text-status"></span>
                    </div>
                    <div class="password-strength-bar" id="password-strength-bar">
                        <div class="password-strength-bar-progress"
                             id="password-strength-bar-progress"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-sm-12">
                <div class="mb-3">
                    {{ form_label(form.plainPassword.second) }}
                    {{ form_widget(form.plainPassword.second ,{'attr':{'class':'check-input check-input-required'}}) }}
                    <div class="alert-validation-field alert_fos_user_change_password_form_plainPassword_second"></div>
                </div>
            </div>
        </div>

        <div class="mb-3 text-center">
            <button type="button"
                    class="btn btn-primary validate-btn submit-form-password">{{ 'change_password.submit'|trans }}</button>
        </div>

        <div class="small">
            Allez vers la page accueil?
            <a href="{{ path('home') }}"> Page d'accueil</a>
        </div>

    </form>

{% endblock fos_user_content %}

{% block javascripts %}

    {{ parent() }}

    <script>
        $(".check-input-strength").on("keyup", function () {
            checkPasswordStrength($(this).val());
        });

        $('.fos_user_change_password .submit-form-password').on('click', function () {
            let bool = verifyRequiredFieldsAlert();
            if ($("#fos_user_change_password_form_plainPassword_first").val() != $("#fos_user_change_password_form_plainPassword_second").val()) {
                bool = false;
                $('.alert_fos_user_change_password_form_plainPassword_first').show().text('Les deux mots de passes ne sont pas identiques!');
            }
            if (bool) {
                var formData = new FormData();
                formData.set('oldPassword', $('#fos_user_change_password_form_current_password').val());
                formData.set('newPassword', $('#fos_user_change_password_form_plainPassword_first').val());
                $.ajax({
                    url: "{{ path('check_before_change_password_ajax') }}",
                    method: 'POST',
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            location.href = ("{{ path('home') }}");
                        } else if (response.status === 500) {
                            alertWarning.show().text(response.message);
                        } else {
                            alertDanger.show().text('Merci de contacter l\'admin!');
                        }
                    }
                });
            }
        });
    </script>

{% endblock %}