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

{% block stylesheets %}
    <style>
        body {
            padding-top: 100px;
        }

        .wrapper-choose-username {
            margin-bottom: 120px;
        }
    </style>

{% endblock %}
{% block title %}
    {{ "title" | trans({}, "SocialLogin") }}
{% endblock %}
{% block body %}
    <div class="container">
        <div class="row ">
            <div class="col-md-7 col-md-push-3">
                <h3>{{ 'header' | trans({}, 'SocialLogin') }}</h3>
                <hr>
            </div>
        </div>
        <div class="row wrapper-choose-username">
                {% 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 class="col-md-6 col-md-push-3">
                <form action="{{ path('facbook_form') }}" enctype="multipart/form-data" method="POST" class="form-horizontal registration_register" novalidate>
                    
                    {{form_row(registrationForm._token)}}
                    
                    <input type="hidden" name="fbAuthResponse" value="{{token}}" />

                    <div class="form-group">
                        <label for="{{ registrationForm.username.vars.id }}" class="col-md-4 control-label"> {{ 'form.username'|trans({},'FOSUserBundle')}} </label>
                        <div class="col-md-8">
                            {{ form_widget(registrationForm.username, {'attr':{'class' : 'form-control' , 'placeholder' : 'form.placeholder.username'|trans({},'FOSUserBundle')}}) }}
                            {{ form_errors(registrationForm.username) }}
                        </div>
                    </div>
                
                    {% if registrationForm.studyField is defined %}
                        <div class="form-group">
                            <label for="{{ registrationForm.studyField.vars.id }}" class="col-md-4 control-label">{{ 'form.study_field' | trans({},'FOSUserBundle') }} <span style="color:grey;font-size:11px"> ({{ 'form.parantheses' | trans({},'FOSUserBundle') }}) </span></label>
                            <div class="col-md-8">
                                {{ form_widget(registrationForm.studyField) }}
                                {{ form_errors(registrationForm.studyField) }}
                            </div>
                        </div>
                    {% endif %}
                    <div class="form-group">
                        <label for="{{ registrationForm.country.vars.id }}" class="col-md-4 control-label"> {{ 'form.country'|trans({},'FOSUserBundle')}} </label>
                        <div class="col-md-8">
                            {{ form_widget(registrationForm.country, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.country'|trans({},'FOSUserBundle')}}) }}
                            {{ form_errors(registrationForm.country) }}
                        </div>
                    </div>
                
                    <div class="form-group">
                        <label for="{{ registrationForm.cell.vars.id }}" class="col-md-4 control-label"> {{ 'form.cell'|trans({},'FOSUserBundle')}} </label>
                        <div class="col-md-8">
                            {{ form_widget(registrationForm.cell, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.cell'|trans({},'FOSUserBundle')}}) }}
                            {{ form_errors(registrationForm.cell) }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ registrationForm.gender.vars.id }}" class="col-md-4 control-label"> {{ 'form.gender'|trans({},'FOSUserBundle')}} </label>
                        <div class="col-md-8">
                            {{ form_widget(registrationForm.gender, {'attr':{'class' : 'form-control'}}) }}
                            {{ form_errors(registrationForm.gender) }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ registrationForm.birthdate.vars.id }}" class="col-md-4 control-label"> {{ 'form.birthdate'|trans({},'FOSUserBundle')}} </label>
                        <div class="col-md-8">
                            {{ form_widget(registrationForm.birthdate) }}
                            {{ form_errors(registrationForm.birthdate) }}
                        </div>
                    </div>
                    {% if registrationForm.reCaptcha is defined %}
                        <div class="form-group">
                            <label  class="col-md-4 control-label"></label>
                            <div  class="col-md-8">
                                {{ form_errors(registrationForm.reCaptcha) }}
                                {{ form_widget(registrationForm.reCaptcha,
                                    {'attr': {'data-toggle':'reCaptcha',
                                        'data-type':'checkbox',
                                    }}) }}
                            </div>
                        </div>
                    {% endif %}
                    {{ form_errors(registrationForm) }}
                    <hr>
                    <div class="form-group text-center">
                        <input type="submit" value=" {{ 'layout.register'|trans({},'FOSUserBundle')}} " class="btn btn-default btn-lg shamra-btn"  />
                    </div>
                </form>

            </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: "اختر بلدك",
                width:'100%',
            });
        });

        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 : {
                'facebook_form[username]' : {
                    validation : 'required, length, custom, server',
                    regexp: '^[a-zA-Z][a-zA-Z0-9\_\.]+$',
                    url : '{{ path('register_ajax_validation',{fieldName:"username.fb"}) }}',
                    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') }}'
                },
                'facebook_form[cell]' : {
                    validation : 'custom',
                    optional: true,
                    regexp: "^[0-9\-+\(\) \.,#*a-zA-Z]+$",
                    'error-msg-custom': "{{ 'Registration.validation.cell.invalid' | trans({},'UserBundle') }}"
                },
                'terms' : {
                    validation : 'required',
                    'error-msg-required': "{{ 'Registration.validation.terms.required' | trans({},'UserBundle') }}"
                }
            }
        };


        $('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();
                });
        $('#facebook_form_username').change(function() {
            $(this).val($(this).val().trim());
          if($(this).val().indexOf(' ') >= 0){

          }

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