{# templates/artisan_v2/configuration/ar_parametres.html.twig #}
{% extends 'artisan_v2/artisan.html.twig' %}

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

{% block body %}
    {{ render(controller('App\\Controller\\Artisan\\ArLayoutController::arServiceClient' )) }}

    {{ render(controller('App\\Controller\\Artisan\\ArLayoutController::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('artisan_parametres') }}">
                        <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>

            {{ include('artisan_v2/layout/ar_footer.html.twig') }}
        </div>
    </div>
{% endblock %}

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

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

            if ($('form#parametres_form #new_password').val().length == 0) {	
                ckeck += 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 < 8) {	
                    ckeck += 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 > 12) {	
                    ckeck += 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()) {	
                ckeck += 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 (ckeck == 0) {
                $('form#parametres_form').submit();
                return true;
            } else {
                return false;
            }
        });
    });
    // ]]>
    </script>
{% endblock %}