{% extends "layout.html.twig" %}

{% trans_default_domain 'security' %}

{% block title %}
    {{ 'title.register'|trans }}
{% endblock title %}

{% block body %}

    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-sm-offset-3">
                <div class="page-header col-sm-offset-2">
                    <h2 style="color:#00a550">{{ 'registration.user_registration' |trans({}, 'FOSUserBundle') }}</h2>
                </div>

                {% for flashMessage in app.session.flashbag.get('user_register_invitation_note') %}
                    <div class="alert alert-info alert-dismissible" role="alert">
                        {{ flashMessage | trans({},'UserBundle') }}
                    </div>
                {% endfor %}

                <div>
                    {% include "registration/register_content.html.twig" %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block css %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/vendor/jquery-form-validator-theme-default-rtl.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/register.css') }}" />

{% endblock %}

{% block scripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>
    <script src="{{ asset('bundles/user/js/vendor/form-validator/jquery.form-validator.min.js') }}"></script>
    <script src="{{ asset('bundles/user/js/vendor/form-validator/ar.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#registration_form_studyField").select2({width:'100%'});
            $('#registration_form_country').select2({
                placeholder: {% if app.request.locale == "en" %} "choose your country" {% else %} "اختر بلدك" {% endif %},
                width:'100%',
            });
        });
        $registration_invited_link = $('a#registration_invited_link');
        $registration_invited_link.click(function(e){
            e.preventDefault();
            var $field = $('#reg_inviter_field_wrapper').show();
            $(this).parent().addClass('animated fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                $(this).remove();
            });
        });
        if($('#registration_form_inviter').val()){
            $registration_invited_link.click();
        }


        var $errorEl = $(".form-error-block:first").parent().parent().parent();
        if($errorEl.length){
            $('html, body').animate({
                scrollTop: $errorEl.offset().top
            }, 1000);
        }

        {# TODO: translation to validation translation #}
        var config = {
            // ordinary validation config
            form : 'form.registration_register',
            // reference to elements and the validation rules that should be applied
            validate : {
                'registration_form[username]' : {
                    validation : 'required, length, custom, server',
                    regexp: '^[a-zA-Z][a-zA-Z0-9\_\.]+$',
                    url : '{{ path('register_ajax_validation',{fieldName:"username"}) }}',
                    length : 'min4',
                    'error-msg-required': "{{ 'Registration.validation.username.required' | trans({},'UserBundle') }}",
                    'error-msg-custom': "{{ 'fos_user.username.not_valid' | trans({},'validators') }}",
                    'error-msg-length': "{{ 'Registration.validation.username.length' | trans({},'UserBundle') }}",
                    help: '{{ 'Registration.validation.username.help' | trans({},'UserBundle') }}'
                },
                'registration_form[email]' : {
                    validation : 'required, email, server',
                    'error-msg-required': "{{ 'Registration.validation.email.required' | trans({},'UserBundle') }}",
                    'error-msg-email': "{{ 'Registration.validation.email.invalid' | trans({},'UserBundle') }}",
                    url : '{{ path('register_ajax_validation',{fieldName:"email"}) }}'
                },
                'registration_form[plainPassword][first]' : {
                    validation : 'psw_required, length',
                    length : 'min8',
                    'error-msg-length': "{{ 'Registration.validation.password.length' | trans({},'UserBundle') }}",
                    help: "{{ 'Registration.validation.password.help' | trans({},'UserBundle') }}"
                },
                'registration_form[plainPassword][second]' : {
                    validation : 'cpsw_required, confirmation',
                    'error-msg-confirmation': "{{ 'Registration.validation.password.confirmation' | trans({},'UserBundle') }}",
                    confirm : "registration_form[plainPassword][first]"
                },
                'registration_form[firstName]' : {
                    validation : 'required, custom',
                    regexp: '^[^&<>]+$',
                    'error-msg-custom': "{{ 'Registration.validation.html_entities' | trans({},'UserBundle') }}",
                    'error-msg-required': "{{ 'Registration.validation.fname.required' | trans({},'UserBundle') }}"
                },
                'registration_form[lastName]' : {
                    validation : 'required, custom',
                    regexp: '^[^&<>]+$',
                    'error-msg-custom': "{{ 'Registration.validation.html_entities' | trans({},'UserBundle') }}",
                    'error-msg-required': "{{ 'Registration.validation.lname.required' | trans({},'UserBundle') }}"
                },
                'registration_form[cell]' : {
                    validation : 'custom',
                    optional: true,
                    regexp: "^[0-9\-+\(\) \.,#*a-zA-Z]+$",
                    'error-msg-custom': "{{ 'Registration.validation.cell.invalid' | trans({},'UserBundle') }}"
                },
                'registration_form[captcha]' : {
                    validation : 'required',
                    regexp: '^[^&<>]+$',
                    'error-msg-custom': "{{ 'Registration.validation.html_entities' | trans({},'UserBundle') }}",
                    'error-msg-required': "{{ 'Registration.validation.captcha.required' | trans({},'UserBundle') }}"
                },
                'terms' : {
                    validation : 'required',
                    'error-msg-required': "{{ 'Registration.validation.terms.required' | trans({},'UserBundle') }}"
                }
            }
        };


        // Add custom validation rule
        $.formUtils.addValidator({
            name : 'psw_required',
            validatorFunction : function(value, $el, config, language, $form) {
                return value !== "";

            },
            errorMessage : '{{ 'Registration.validation.password.required' | trans({},'UserBundle') }}',
            errorMessageKey: 'psw_required'
        });
        // Add custom validation rule
        $.formUtils.addValidator({
            name : 'cpsw_required',
            validatorFunction : function(value, $el, config, language, $form) {
                return value !== "";

            },
            errorMessage : '{{ 'Registration.validation.password.crequired' | trans({},'UserBundle') }}',
            errorMessageKey: 'cpsw_required'
        });

        $('form.registration_register').submit(function( e ) {
            //validator submit form if a field is validated from server even
            // if other field not yet validated from server (its validation request is pending)
            // Hack: don't submit until all fields are finished validating
            if($(this).find('.validating-server-side').length){
                return false;
            }
        });

        $.validate({
            modules : 'jsconf, security',
            language : jquery_validator_language_ar,
            onModulesLoaded : function() {
                $.setupValidation( config );
            }
        });

        $('form.registration_register input')
                .on('focus', function(){
                    $(this).siblings('.form-error-block').remove();
                });
        $('#registration_form_username').change(function() {
            $(this).val($(this).val().trim());
          if($(this).val().indexOf(' ') >= 0){

          }

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