{# templates/client_v2/client_edit_password.html.twig #}
{% extends 'client_v2/client.html.twig' %}

{% block title %}Changer mon mot de passe - {{ parent() }}{% endblock %}
{% block description %}{% endblock %}

{% block body %}
    {{ include('client_v2/layout/client_mon_identifiant.html.twig') }}

    <section class="au-breadcrumb m-t-0">
        <div class="section__content section__content--p30">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12" style="padding-left:0;">
                        <div class="au-breadcrumb-content">
                            <div class="au-breadcrumb-left">
                                <ul class="list-unstyled list-inline au-breadcrumb__list">
                                    <li class="list-inline-item">Changer mon mot de passe</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="section__content section__content--p30">
        {# <div class="alert alert-info" role="alert">
            {{ debug|raw }}
        </div> #}
        {% if alert %}{{ alert|raw }}{% endif %}

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <form class="form-horizontal" id="client_edit_password_form" name="client_edit_password_form" method="post" action="{{ path('client_edit_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="client_edit_password_submit" class="btn btn-info btn-sm btn-block">
                                    <i class="zmdi zmdi-refresh"></i>&nbsp; Modifier
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{ render(controller('App\\Controller\\ClientController::footer')) }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $(document).on('click', '#client_edit_password_submit', function(){
            var ckeck = 0;

            if ($('form#client_edit_password_form #current_password').val().length == 0) {	
                ckeck += 1;
                $('#error-current-password').html('Veuillez insérer le mot de passe actuel');
                $('form#client_edit_password_form #current_password').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-current-password').html('');
                });
            }

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

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

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

            if (ckeck == 0) {
                $('form#client_edit_password_form').submit();
                return true;
            } else {
                return false;
            }
        });
    });
    // ]]>
    </script>
{% endblock %}