{% extends 'minimal.html.twig' %}

{% block title %}Register{% endblock %}

{% block body %}

    <div class="col-12 col-md-4 peer pX-40 pY-30 h-100 bgc-white scrollable pos-r" style="min-width:420px">

        <h3 class="h3 mb-3 font-weight-normal">Registrate</h3>

        {# {% if error %}
            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}
        #}
        {{ form_start(registrationForm, {'attr': {'id': 'registration_form' } }) }}

        {{ form_errors(registrationForm) }}

        <div class="form-group">
            <label class="text-normal text-dark">RUC</label>
            <div class="input-group">
                {{ form_widget(registrationForm.ruc, {'attr': {'class': 'form-control', 'maxlength':'13', 'pattern':'.{5,}'}}) }}
                <span class="input-group-btn">
                                            <button id="buscarcontri" type="button" class="btn btn-default btn-flat">
                                                <i class="form-error-icon fa fa-search"></i>
                                            </button>
                                        </span>
            </div>
            {{ form_errors(registrationForm.ruc) }}
        </div>
        <div class="form-group">
            <label class="text-normal text-dark">Raz&oacute;n Social</label>
            {{ form_widget(registrationForm.razonSocial, {'attr': {'class': 'sv_uppercase form-control', 'maxlength':'200'}}) }}
            {{ form_errors(registrationForm.razonSocial) }}
        </div>
        <div class="form-group">
            <label class="text-normal text-dark">Email</label>
            {{ form_widget(registrationForm.email, {'attr': {'class': 'form-control', 'maxlength':'50'}}) }}
            {{ form_errors(registrationForm.email) }}
        </div>
        <div class="form-group">
            <label class="text-normal text-dark">Usuario</label>
            {{ form_widget(registrationForm.username, {'attr': {'class': 'form-control', 'maxlength':'13', 'pattern':'.{5,}'}}) }}
            {{ form_errors(registrationForm.username) }}
        </div>
        <div class="form-group">
            {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'form-control' }}) }}
            {{ form_errors(registrationForm.plainPassword) }}
        </div>
        
        
       <div class="form-group" style="font-size: 0.85rem;">
    <label style="display: flex; align-items: center; gap: 5px;">
        {{ form_widget(registrationForm.agreeTerms) }}
        <span><a href="{{ asset('terminos-uso.html') }}" target="_blank">términos y condiciones</a></span>
    </label>
    {{ form_errors(registrationForm.agreeTerms) }}
</div>

        <div class="form-group" style="font-size: 0.85rem;">
    <label style="display: flex; align-items: center; gap: 5px;">
        <input type="checkbox" id="politicas" name="politicas" required>
        <span>Acepto la <a href="{{ asset('politica-privacidad.html') }}" target="_blank">política de privacidad</a></span>
    </label>
</div>

 
        {% if server == 'remote' %}
            <div class="form-group">
                {% if error is defined  and error != null %}
                    <span class="invalid-feedback d-block"><span class="d-block">
                        <span class="form-error-icon badge badge-danger text-uppercase">Error</span> <span class="form-error-message">{{ error }}</span>
                    </span></span>
                    <br>
                {% endif %}
                <div class="g-recaptcha" data-sitekey="{{ gg_recaptcha_site_key }}" data-action="LOGIN" required></div>
            </div>
        {% endif %}
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Registrar</button>
            &nbsp;&nbsp;&nbsp;&nbsp;<a href="{{ path('app_login') }}" class="btn btn-info">Cancelar</a>
        </div>

        {{ form_end(registrationForm) }}
        <br>
        <br>
        <br>
        <br>
    </div>
    <div class="modalwait">

    </div>
{% endblock %}

{% block javascripts %}
    <script src=" {{ asset("core/vendor/jquery-2.2.3.min.js") }}"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        jQuery(function ($) {

            $body = $("body");

            var form = document.getElementById('registration_form');

            form.addEventListener('submit', function(event) {
                if (!grecaptcha.getResponse()) {
                    event.preventDefault();
                    alert('Debes completar el captcha para continuar :)');
                }
            });

            $('#buscarcontri').on('click', function () {
                $('#registration_form_razonSocial').val('');
                let aux = $('#registration_form_ruc').val();
                if(aux.length > 0) {
                    $body.addClass("loading");
                    $.post('{{ path('app_register_validcontri') }}', $('#registration_form').serialize())
                        .done(function (data) {
                            $body.removeClass("loading");
                            if(!data.error) {
                                $('#registration_form_razonSocial').val(data.message);
                            }
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            $body.removeClass("loading");

                        });
                }
            });

                {#
                let aux = $('#registration_form_ruc').val();
                if(aux.length > 0) {
                    $.ajax({
                        type: "GET",
                        url: '{{ path('app_register_validcontri') }}/'+$('#registration_form_ruc').val(),
                        //contentType: 'application/json; charset=utf-8',
                        //dataType: 'json',
                        //data: "{ 'number':'" + $('#registration_form_ruc').val() + "'}",
                        success: function (data) {
                            if (data.error === true)
                                alert(data.message);
                            else
                                console.log(data.message);
                        },
                        error: function (ui) {
                            console.log(data.responseText);
                        },
                        async: true,
                        beforeSend: function () {
                            //$body.addClass("loading");
                        },
                        complete: function () {

                        },
                    });

                }
            });#}

        });

    </script>

{% endblock %}