{% extends 'base.html.twig' %}

{% block title %} Edit password {% endblock %}

{% block stylesheets %}

    {{ parent() }}

{% endblock stylesheets %}

{% block breadcrumbs %}
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-sm-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ path('home') }}">
                                <i data-feather="home"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item active"><a href="">Update my password</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="text-primary">Update my password</h5>
                    <div class="card-header-right">
                        <span class="text-right">

                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <form class="form_edit_profil" id="form_edit_pwd">
                        <div class="row justify-content-center">
                        <div class="col-xl-4 col-lg-12 col-sm-12">
                            <div class="row">
                                <div class="col-xl-12 col-lg-12 col-sm-12">
                                    <div class="form-group mb-1">
                                        <label for="fos_user_change_password_form_current_password"
                                               class="required">Current Password</label>
                                        <input type="password"
                                               id="fos_user_change_password_form_current_password"
                                               name="fos_user_change_password_form[current_password]"
                                               autocomplete="current-password"
                                               class="check-input check-input-required form-control">
                                        <div class="alert-validation-field alert_fos_user_change_password_form_current_password"></div>
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lg-12 col-sm-12">
                                    <div class="form-group mb-1">
                                        <label for="fos_user_change_password_form_plainPassword_first"
                                               class="required">New Password</label>
                                        <input type="password"
                                               id="fos_user_change_password_form_plainPassword_first"
                                               name="fos_user_change_password_form[plainPassword][first]"
                                               autocomplete="new-password"
                                               class="check-input-strength check-input check-input-required form-control">
                                        <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>Reliability: </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>#}
{#                            <div class="row">#}
                                <div class="col-xl-12 col-lg-12 col-sm-12">
                                </div>
                                <div class="col-xl-12 col-lg-12 col-sm-12">
                                    <div class="form-group mb-1">
                                        <label for="fos_user_change_password_form_plainPassword_second"
                                               class="required">Repeat new password</label>
                                        <input type="password"
                                               id="fos_user_change_password_form_plainPassword_second"
                                               name="fos_user_change_password_form[plainPassword][second]"
                                               autocomplete="new-password"
                                               class="check-input check-input-required form-control">
                                        <div class="alert-validation-field alert_fos_user_change_password_form_plainPassword_second"></div>
                                    </div>
                                </div>
                            </div>

                            </div>
                        </div>
                    </form>
                    <div class="row mt-3 edit-pwd-action-bloc ">
                        <div class="text-center">
                            <a href="{{ path('home') }}" class="btn btn-outline-primary cancel-edit-pwd-action">Cancel</a>
                            <button class="btn btn-primary validate-edit-pwd-action">Validate</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}

    {{ parent() }}

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

    $(document).on('click', '.validate-edit-pwd-action', function () {
        let bool = true,
            currentPasswordVal = $('#fos_user_change_password_form_current_password').val(),
            passwordFirstVal = $('#fos_user_change_password_form_plainPassword_first').val(),
            passwordSecondVal = $('#fos_user_change_password_form_plainPassword_second').val(),
            passwordStrength = $("#password-strength-text");

        bool = verifyRequiredFieldsAlert();
        if((currentPasswordVal !== "" || passwordFirstVal !== "" || passwordSecondVal !== "") &&
            (currentPasswordVal === "" || passwordFirstVal === "" || passwordSecondVal === "" || passwordFirstVal !== passwordSecondVal )) {
            bool = verifyRequiredFieldsAlert();
            if (passwordFirstVal !== passwordSecondVal) {
                bool = false;
                $('.alert_fos_user_change_password_form_plainPassword_first').show().text('The two passwords are not the same!');
                $('#fos_user_change_password_form_plainPassword_first').addClass('is-invalid');
                $('#fos_user_change_password_form_plainPassword_second').addClass('is-invalid');
            }
        }

        if (bool) {
            $('#fos_user_change_password_form_plainPassword_first').removeClass('is-invalid');
            $('#fos_user_change_password_form_plainPassword_second').removeClass('is-invalid');
            let formData = new FormData(document.getElementById('form_edit_pwd'));
            if(currentPasswordVal !== "")
            {
                formData.set('user[oldPassword]', currentPasswordVal);
                formData.set('user[newPassword]', passwordFirstVal);
            }
            $.ajax({
                url: "{{ path('edit_password_ajax') }}",
                method: 'POST',
                enctype: 'multipart/form-data',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function (response) {
                    if (response.status === 200) {
                        showNotify("Success", response.message, 'info');
                        location.href = ("{{ path('home') }}");
                    } else if (response.status === 500) {
                        showNotify("Warning", response.message, 'warning');
                    } else {
                        showNotify("Error", 'Thank you for contacting the admin!', 'danger');
                    }
                }
            });
        }
    });

</script>
{% endblock %}