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

{% trans_default_domain 'FOSUserBundle' %}

{% block title %}
    {{ "title" | trans({}, "SocialLogin") }}
{% endblock %}
{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <div class="register-card">
                    <h2><i class="fa fa-user-plus"></i> {{ 'header' | trans({}, 'SocialLogin') }}</h2>
                    <p class="register-subtitle">{{ 'registration.fill_info'|trans|default('أكمل بياناتك لإنشاء حسابك') }}</p>

                    {% 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 %}
                    {% for flashMessage in app.flashes('error') %}
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            {{ flashMessage }}
                        </div>
                    {% endfor %}

                    <form action="{{ path(formAction) }}" enctype="multipart/form-data" method="POST" class="registration_register" novalidate>

                        {{ form_row(registrationForm._token) }}

                        {# Hidden field carries the social auth token back to the controller #}
                        <input type="hidden" name="{{ tokenFieldName }}" value="{{ token }}" />

                        {# ── Username ── #}
                        <div class="reg-field">
                            <label for="{{ registrationForm.username.vars.id }}">
                                <i class="fa fa-user"></i> {{ 'form.username'|trans }}
                            </label>
                            {{ form_widget(registrationForm.username, {'attr': {'class': 'form-control', 'placeholder': 'form.placeholder.username'|trans, 'autocomplete': 'username'}}) }}
                            {{ form_errors(registrationForm.username) }}
                        </div>

                        <hr class="reg-section-divider">

                        {# ── Country ── #}
                        <div class="reg-field">
                            <label for="{{ registrationForm.country.vars.id }}">
                                <i class="fa fa-globe"></i> {{ 'form.country'|trans }}
                            </label>
                            {{ form_widget(registrationForm.country, {'attr': {'class': 'form-control'}}) }}
                            {{ form_errors(registrationForm.country) }}
                        </div>

                        {# ── Cell ── #}
                        <div class="reg-field">
                            <label for="{{ registrationForm.cell.vars.id }}">
                                <i class="fa fa-phone"></i> {{ 'form.cell'|trans }} <span class="optional-hint">({{ 'form.optional'|trans }})</span>
                            </label>
                            {{ form_widget(registrationForm.cell, {'attr': {'class': 'form-control', 'placeholder': 'form.placeholder.cell'|trans}}) }}
                            {{ form_errors(registrationForm.cell) }}
                        </div>

                        {# ── Birth Year ── #}
                        <div class="reg-field">
                            <label for="{{ registrationForm.birthYear.vars.id }}">
                                <i class="fa fa-calendar"></i> {{ 'form.birth_year'|trans }} <span class="optional-hint">({{ 'form.optional'|trans }})</span>
                            </label>
                            {{ form_widget(registrationForm.birthYear, {'attr': {'class': 'form-control'}}) }}
                            {{ form_errors(registrationForm.birthYear) }}
                        </div>

                        {# ── Academic Interests (Select2 tags) ── #}
                        <div class="reg-field">
                            <label>
                                <i class="fa fa-tags"></i> {{ 'form.academic_interests'|trans }}
                            </label>
                            <select id="academic_interests_select" class="form-control" multiple="multiple">
                            </select>
                            <input type="hidden" id="academic_interests_hidden" name="{{ registrationForm.academicInterests.vars.full_name }}" value="" />
                            <small class="help-block" style="color:#999">{{ 'form.academic_interests_note'|trans }}</small>
                            <small class="help-block">{{ 'form.academic_interests_help'|trans }}</small>
                        </div>

                        {# ── Newsletter Subscription ── #}
                        <div class="public-profile-toggle">
                            {{ form_widget(registrationForm.subscribeNewsletter) }}
                            <label for="{{ registrationForm.subscribeNewsletter.vars.id }}">{{ 'form.subscribe_newsletter'|trans }}</label>
                        </div>

                        {# ── Public Profile (inverted: checked = private) ── #}
                        <div class="public-profile-toggle">
                            {{ form_widget(registrationForm.publicProfile) }}
                            <label for="{{ registrationForm.publicProfile.vars.id }}">{{ 'registration.publicProfile'|trans }}</label>
                        </div>

                        {# ── reCaptcha ── #}
                        {% if registrationForm.reCaptcha is defined %}
                            <div class="recaptcha-wrapper">
                                {{ form_widget(registrationForm.reCaptcha, {'attr': {'data-toggle': 'reCaptcha', 'data-type': 'checkbox'}}) }}
                            </div>
                            {{ form_errors(registrationForm.reCaptcha) }}
                        {% endif %}

                        {{ form_errors(registrationForm) }}

                        <button type="submit" class="register-submit-btn" onclick="if(typeof gtag==='function')gtag('event','sign_up',{event_category:'User',method:'social'})">
                            <i class="fa fa-user-plus"></i> {{ 'layout.register'|trans }}
                        </button>
                    </form>

                </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 () {
            // Country Select2
            $('#social_form_country').select2({
                placeholder: {% if app.request.locale == "en" %} "Search for your country..." {% else %} "اختر بلدك" {% endif %},
                width:'100%',
                allowClear: true,
                dir: 'rtl',
            });

            // Birth Year Select2
            $('#social_form_birthYear').select2({
                width: '100%',
                placeholder: {% if app.request.locale == "en" %} "Select birth year" {% else %} "اختر سنة الميلاد" {% endif %},
                allowClear: true,
                dir: 'rtl'
            });

            // Academic Interests - Select2 with tags + AJAX search
            $('#academic_interests_select').select2({
                tags: true,
                width: '100%',
                minimumInputLength: 2,
                dir: 'rtl',
                placeholder: {% if app.request.locale == "en" %} "Type to search interests..." {% else %} "اكتب للبحث عن اهتماماتك الأكاديمية..." {% endif %},
                ajax: {
                    url: Routing.generate('shamra_academia_get_tag_suggestions'),
                    dataType: 'json',
                    type: 'GET',
                    quietMillis: 50,
                    data: function(params) {
                        return { term: params.term };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return { text: item.context, id: item.context };
                            })
                        };
                    },
                    cache: true
                },
                tokenSeparators: [','],
                maximumSelectionLength: 10
            }).on('change', function() {
                var vals = $(this).val();
                $('#academic_interests_hidden').val(vals ? vals.join(',') : '');
                // Clear validation error when user selects interests
                var $container = $(this).closest('.reg-field');
                $container.find('.interests-error').remove();
                $container.find('.select2-container').css('border-color', '');
            });
        });

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

        var config = {
            form : 'form.registration_register',
            validate : {
                'social_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') }}'
                },
                'social_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 ) {
            if($(this).find('.validating-server-side').length){
                return false;
            }
            {# Validate academic interests #}
            var interestsVal = $('#academic_interests_hidden').val();
            if (!interestsVal || interestsVal.trim() === '') {
                var $container = $('#academic_interests_select').closest('.reg-field');
                $container.find('.interests-error').remove();
                $container.append('<span class="interests-error help-block" style="color:#a94442">{{ 'form.academic_interests_required'|trans({},'FOSUserBundle') }}</span>');
                $container.find('.select2-container').css('border-color', '#a94442');
                e.preventDefault();
                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();
                });
        $('#social_form_username').change(function() {
            $(this).val($(this).val().trim());
        });
    </script>
{% endblock %}