{% extends 'App/_include/_layout.security.html.twig' %}
{% block content %}
    {{ form_start(form_registration,{'attr':{'id':'formRegistration','class':'cell'}}) }}
    <div class="grid-x align-center align-middle" style="height: 100vh">
        <div class="cell small-11 medium-8 large-4 callout login_box">
            <div class="grid-x grid-padding-x">
                <div class="cell">
                    <div class="box-title">
                        <div><img src="{{ asset('images/logo_ad6_kanban_edit_blue.svg') }}" style="width:75px;margin-bottom: 0.3rem" alt="AD6 KanbanEdit"></div>
                        <div>AD6-Kanban<span class="text-light">Edit 21c</span></div>
                    </div>
                </div>
            </div>
            <div id="container_step1" class="grid-x grid-padding-x">
                <div class="cell">
                    <div class="progress-container">
                        <div class="counter">{{ 'registration.progress'|trans({'%step%': 1,'%steps%': 3}) }}</div>
                        <div class="step-progress">
                            <div class="progress step done"></div>
                            <div class="progress step"></div>
                            <div class="progress step"></div>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <p class="text-center lead text-light">{{ 'registration.step_1.title'|trans }}</p>
                    <p class="text-center mt-1 mb-1">{{ 'registration.step_1.subtitle'|trans({'%url%': url('anonymous_subscription_plan')})|raw }}</p>
                </div>
                <div class="cell small-12 mt-1">
                    {{ form_label(form_registration.email) }}
                    {{ form_widget(form_registration.email,{'attr':{'data-parsley-email-can-be-used':true}}) }}
                </div>
                <div class="cell small-12 text-right mt-1">
                    <button id="btn_step1" type="button" class="button">{{ 'next'|trans }}</button>
                </div>
            </div>
            <div id="container_step2" class="grid-x grid-padding-x" style="display: none">
                <div class="cell">
                    <div class="progress-container">
                        <div class="counter">{{ 'registration.progress'|trans({'%step%': 2,'%steps%': 3}) }}</div>
                        <div class="step-progress">
                            <div class="progress step done"></div>
                            <div class="progress step done"></div>
                            <div class="progress step"></div>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <p class="text-center lead text-light">{{ 'registration.step_2.title'|trans }}</p>
                </div>
                <div class="cell small-12 mt-1">
                    <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 class="cell small-12 ">
                            {{ form_label(form_registration.lastName) }}
                            {{ form_widget(form_registration.lastName) }}
                        </div>
                    </div>
                </div>
                <div class="cell small-12 text-right mt-1">
                    <button id="btn_step2" type="button" class="button">{{ 'next'|trans }}</button>
                </div>
            </div>
            <div id="container_step3" class="grid-x grid-padding-x" style="display: none">
                <div class="cell">
                    <div class="progress-container">
                        <div class="counter">{{ 'registration.progress'|trans({'%step%': 3,'%steps%': 3}) }}</div>
                        <div class="step-progress">
                            <div class="progress step done"></div>
                            <div class="progress step done"></div>
                            <div class="progress step"></div>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <p class="text-center lead text-light">{{ 'registration.step_3.title'|trans }}</p>
                </div>
                <div class="cell small-12 mt-1">
                    <div class="grid-x grid-padding-x">
                        <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 shrink">
                            <div>
                                {{ form_widget(form_registration.agree) }}
                            </div>
                        </div>
                        <div class="cell auto">
                            {{ 'registration.step_3.agree_t_and_c'|trans({'%url_t_and_c%': url('anonymous_t_anc_c') })|raw }}
{#                            J'accepte les <a href="{{ url('anonymous_t_anc_c') }}" target="_blank">conditions generales de ventes</a> et les <a href="https://www.albert-deloin.fr/politique-de-confidentialite/" target="_blank">termes de confidentialité</a>#}
                        </div>
                    </div>
                </div>
                <div class="cell small-12 text-right mt-1">
                    <button id="btn_submit_registration" type="button" class="button">{{ 'registration.button.submit'|trans }}</button>
                </div>
            </div>
            <div class="grid-x grid-padding-x">
                <div class="cell text-center">
                    <a href="{{ url('app_login')}}">{{ 'registration.i_have_account'|trans }}</a>
                </div>
            </div>
        </div>
    </div>
    {{ form_end(form_registration) }}
{% 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'),
                btn_step_1 = $('#btn_step1'),
                btn_step_2 = $('#btn_step2'),
                btn_submit_registration = $('#btn_submit_registration'),
                container_step_1 = $('#container_step1'),
                container_step_2 = $('#container_step2'),
                container_step_3 = $('#container_step3')
            ;
            let parseleyForm = $(form).parsley(parsley_options);

            $(container_step_1).find(':input').attr('data-parsley-group', 'block-step-1');
            $(container_step_2).find(':input').attr('data-parsley-group', 'block-step-2');
            $(container_step_3).find(':input').attr('data-parsley-group', 'block-step-3');
           //let input_email_parsley = input_email.parsley(parsley_options);
           //  $(input_email).parsley(parsley_options).on('field:success', function() {
           //     $(btn_step_1).removeClass('disabled');
           //  });
           //  $(input_email).parsley(parsley_options).on('field:error', function() {
           //      $(btn_step_1).addClass('disabled');
           //  });

            $(btn_step_1).click(function(){
                //parseleyForm.validate({group:'block-step-1'});
                parseleyForm.whenValid({group:'block-step-1'}).done(function(){
                    $(container_step_1).fadeOut('300',function(){
                        $(container_step_2).fadeIn();
                    });
                });
            });

            $(btn_step_2).click(function(){
                parseleyForm.validate({group:'block-step-2'});
                parseleyForm.whenValid({group:'block-step-2'}).done(function(){
                    $(container_step_2).fadeOut('300',function(){
                        $(container_step_3).fadeIn();
                    });
                });
            });

            $(btn_submit_registration).unbind('click');
            $(btn_submit_registration).bind('click', function(){
                parseleyForm.validate({group:'block-step-3'});
                parseleyForm.whenValid({group:'block-step-3'}).then(function(){
                    $(btn_submit_registration).html(btn_spin);
                    $(form).submit();
                });
            });




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