{# templates/superadmin_v2/users/sa_users_parameter.html.twig #}
{% extends 'superadmin_v2/superadmin.html.twig' %}

{% block title %}Modifier mot de passe - {{ parent() }}{% endblock %}

{% block body %}
    {{ render(controller('App\\Controller\\Superadmin\\SaLayoutController::breadcrumb', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

    <div class="section__content section__content--p30">
        {{ include('artisan_v2/layout/ar_debug.html.twig') }}

        {{ include('artisan_v2/layout/ar_alert.html.twig') }}

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <form class="form-horizontal" id="parametres_form" name="parametres_form" method="post" action="{{ path('superadmin_users_change_password') }}">
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-3 spa-col-label fg-m-bottom">
                                <label for="current_password" class="form-control-label spa-label">Mot de passe actuel</label>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <input type="password" id="current_password" name="current_password" class="form-control" autocomplete="none">
                            </div>
                            <div class="offset-md-3 col-md-8 fm-error" id="error-current-password"></div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-3 spa-col-label fg-m-bottom">
                                <label for="new_password" class="form-control-label spa-label">Nouveau mot de passe</label>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <input type="password" id="new_password" name="new_password" class="form-control" autocomplete="off">
                            </div>
                            <div class="offset-md-3 col-md-8 fm-error" id="error-new-password"></div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-3 spa-col-label fg-m-bottom">
                                <label for="confirm_password" class="form-control-label spa-label">Confirmer le nouveau mot de passe</label>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <input type="password" id="confirm_password" name="confirm_password" class="form-control" autocomplete="off">
                            </div>
                            <div class="offset-md-3 col-md-8 fm-error" id="error-confirm-password"></div>
                        </div>

                        <div class="row form-group m-t-20">
                            <div class="col col-md-3"></div>
                            <div class="col-12 col-md-2">
                                <button type="button" id="edit_parametres" class="btn btn-info btn-sm btn-block">
                                    <i class="zmdi zmdi-refresh"></i>&nbsp; Modifier
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{ include('superadmin_v2/layout/sa_footer.html.twig') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        function currentPasswordInvalid(empty_message, current_password_selector) {
            $('#error-current-password').html(empty_message);
            $(current_password_selector).addClass('is-invalid').on('focus', function () {
                console.log(11441144)
                $(this).removeClass('is-invalid');
                $('#error-current-password').html('');
            });
        }

        // <![CDATA[
        $(document).ready(function () {
            let current_password_selector = `form#parametres_form #current_password`;
            let check_current_pass = 0;

            $(document).on('click', '#edit_parametres', function () {

                let check = 0;
                let current_password_ = $(current_password_selector).val();
                if ($('form#parametres_form #current_password').val().length == 0) {
                    check += 1;
                    let empty_message = 'Veuillez insérer le mot de passe actuel';
                    currentPasswordInvalid(empty_message, current_password_selector);
                }

                if ($('form#parametres_form #new_password').val().length == 0) {
                    check += 1;
                    $('#error-new-password').html('Veuillez insérer le nouveau mot de passe');
                    $('form#parametres_form #new_password').addClass('is-invalid').on('focus', function () {
                        $(this).removeClass('is-invalid');
                        $('#error-new-password').html('');
                    });
                } else {
                    if ($('form#parametres_form #new_password').val().length < 4) {
                        check += 1;
                        $('#error-new-password').html('Le mot de passe doit comporter au moins 8 caractères');
                        $('form#parametres_form #new_password').addClass('is-invalid').on('focus', function () {
                            $(this).removeClass('is-invalid');
                            $('#error-new-password').html('');
                        });
                    }

                    if ($('form#parametres_form #new_password').val().length > 32) {
                        check += 1;
                        $('#error-new-password').html('Le mot de passe ne peut pas dépasser 12 caractères');
                        $('form#parametres_form #new_password').addClass('is-invalid').on('focus', function () {
                            $(this).removeClass('is-invalid');
                            $('#error-new-password').html('');
                        });
                    }
                }

                if (($('form#parametres_form #new_password').val().length > 0) && $('form#parametres_form #new_password').val() != $('form#parametres_form #confirm_password').val()) {
                    check += 1;
                    $('#error-confirm-password').html('Veuillez confirmer le nouveau mot de passe');
                    $('form#parametres_form #confirm_password').addClass('is-invalid').on('focus', function () {
                        $(this).removeClass('is-invalid');
                        $('#error-confirm-password').html('');
                    });
                }

                if (($('form#parametres_form #new_password').val().length > 0) && $('form#parametres_form #new_password').val() != $('form#parametres_form #confirm_password').val()) {
                    check += 1;
                    $('#error-confirm-password').html('Veuillez confirmer le nouveau mot de passe');
                    $('form#parametres_form #confirm_password').addClass('is-invalid').on('focus', function () {
                        $(this).removeClass('is-invalid');
                        $('#error-confirm-password').html('');
                    });
                }

                check += check_current_pass;

                if (check === 0) {
                    $('form#parametres_form').submit();
                    return true;
                } else {
                    return false;
                }
            });

            $(document).on('blur', current_password_selector, () => {
                let current_password = $(current_password_selector).val();
                console.log(current_password)
                if (current_password.length > 0) {
                    $.ajax({
                        url: '{{ path('superadmin_users_change_password') }}',
                        type: 'POST',
                        data: {check_password: 'check_password', current_password: current_password},
                        dataType: 'json',
                        success: (response) => {
                            if (!(response.password_correct)) {
                                check_current_pass += 1;
                                currentPasswordInvalid('Mot de passe incorrect', current_password_selector);
                            } else {
                                check_current_pass = 0;
                            }
                        },
                        error: (e) => {
                            console.error(e)
                        }
                    });
                }
            });
        });
        // ]]>
    </script>
{% endblock %}