{% extends 'App/_include/_layout.security.html.twig' %}
{% block content %}
    <div class="cell small-11 medium-8 large-4 callout login_box">
    <div class="grid-x">
        <div class="cell">
            <div class="box-title">Kanban<span class="text-light">Edit</span></div>
            {{ form_start(form_registration,{'attr':{'id':'formRegistration'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell shrink">
                    {{ form_label(form_registration.gender) }}
                    {{ form_widget(form_registration.gender) }}
                </div>
                <div class="cell auto">
                    {{ form_label(form_registration.firstName) }}
                    {{ form_widget(form_registration.firstName) }}
                </div>
            </div>
            <div class="grid-x grid-padding-x">
                <div class="cell small-12 ">
                    {{ form_label(form_registration.lastName) }}
                    {{ form_widget(form_registration.lastName) }}
                </div>
                <div class="cell small-12 ">
                    {{ form_label(form_registration.email) }}
                    {{ form_widget(form_registration.email,{'attr':{'data-parsley-email-can-be-used':true}}) }}
                </div>
                <div class="cell small-12">
                    {{ form_label(form_registration.customer.nom) }}
                    {{ form_widget(form_registration.customer.nom) }}
                </div>
                <div class="cell small-12">
                    {{ form_label(form_registration.customer.pays) }}
                    {{ form_widget(form_registration.customer.pays) }}
                </div>
                <div class="cell small-12 text-right">
                    <button id="btn_submit_registration" type="button" class="button">{{ 'registration.button.submit'|trans }}</button>
                </div>
                 </div>
            {{ form_end(form_registration) }}
        </div>
    </div>
    <div class="grid-x">
        <div class="cell text-center">
            <a href="{{ url('app_login')}}">{{ 'registration.i_have_account'|trans }}</a>
        </div>
    </div>
    </div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            window.Parsley.addValidator('emailCanBeUsed', {
                validateString: function(value) {
                    let data = {
                        value: value,
                        token: "{{ csrf_token('anonymous_ajax_check_email') }}"
                    };
                    let url = "{{ url('anonymous_ajax_check_email') }}";
                    let xhr = $.getJSON(url,data);

                    return xhr.then(function(json) {
                        let deferred = $.Deferred();
                        if(json.hasOwnProperty('error') && eval(json.error)){
                            return deferred.reject("{{ 'registration.error.email_cant_be_used'|trans }}");
                        }
                        else {
                            return deferred.resolve(true);
                        }
                    });
                },
            });
            let form = $('#formRegistration');
            let parseleyForm = $(form).parsley(parsley_options);
            let btn_submit_registration = $('#btn_submit_registration');
            $(btn_submit_registration).unbind('click');
            $(btn_submit_registration).bind('click', function(){
                parseleyForm.validate();
                parseleyForm.whenValid().then(function(){
                    $(btn_submit_registration).html('...');
                    $(form).submit();
                });
            });

        });
    </script>
{% endblock %}