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

{% block title %}{% trans %}Sign in{% endtrans %}{% endblock %}

{% block body %}
    {% form_theme form.plan 'form/form_plan_register.html.twig' %}

    {{ form_start(form, {'attr': {'class': 'form-init'}}) }}
        <h5 class="text-left font-weight-bold mb-5 title_form_part">{% trans %}Data_Provider{% endtrans %}</h5>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.email) }}
                    {{ form_errors(form.email) }}
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group has-icon"><i class="icon-user-secret"></i>
                    {{ form_widget(form.password) }}
                    {{ form_errors(form.password) }}
                    <span toggle="#provider_password" class="fa fa-fw fa-eye field-icon toggle-password" style="cursor:pointer;"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group has-icon focused"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.companyName) }}
                    {{ form_errors(form.companyName) }}
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.cif) }}
                    {{ form_errors(form.cif) }}
                    <span
                        class="fa fa-fw fa-info field-icon"
                        data-toggle="popover"
                        data-html="true"
                        data-placement="bottom"
                        title="{{ 'register.form.cif'|trans }}"
                        data-content="
                            {% for c in countries %}
{{ c.name ~ ': ' ~ c.fiscalDocName ~ '<br>' }}
                            {% endfor %}
                        "
                        style="cursor:pointer;"></span>
                </div>
            </div>
        </div>
        <div class="register-separator"></div>
        <h5 class="text-left font-weight-bold mt-5 mb-5 title_form_part">{% trans %}Billing_Address{% endtrans %}</h5>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.billingAddress) }}
                    {{ form_errors(form.billingAddress) }}
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.postalCode) }}
                    {{ form_errors(form.postalCode) }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.population) }}
                    {{ form_errors(form.population) }}
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.country) }}
                    {{ form_errors(form.country) }}
                </div>
            </div>
             <div class="col-md-6">
                <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                    {{ form_widget(form.phone) }}
                    {{ form_errors(form.phone) }}
                </div>
            </div>
        </div>
        <div class="register-separator"></div>
        <h5 class="text-left font-weight-bold mt-5 mb-5 title_form_part">{% trans %}Select_Plan{% endtrans %}</h5>
        <div class="row">
            <div class="col-12">
                {{ form_row(form.plan) }}
            </div>
        </div>
        <div class="text-center mt-5">
            <div class="form-check" style = "display: flex;
                justify-content: center;
                align-items: center;
                align-content: center;">
                {{ form_row(form.termconditionscheck) }}
                <label class="form-check-label espacio" for="flexCheckDefault">
                    Acepto las <a href="https://www.piolapp.com/politica-de-uso" target="_blank"> políticas de uso</a>
                </label>
            </div>
        </div>
        <div class="text-center mt-5">
            <div class="g-recaptcha" data-sitekey="6LebgqorAAAAAP5i4Zas3y5MmKStJbm5_MnVHkzn"></div>
        </div>
        <div class="text-center mt-5">
            <button class="btn btn-primary btn-payment-reg" type="submit">
                {% trans %}Proceed_to_payment{% endtrans %}
            </button>
        </div>
    {{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="{{ asset('js/provider.js') }}"></script>

    <script type="text/javascript">
        $(".toggle-password").click(function() {

        $(this).toggleClass("fa-eye fa-eye-slash");
            var input = $($(this).attr("toggle"));
            if (input.attr("type") == "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });

        $(".toggle-password-repeat").click(function() {

        $(this).toggleClass("fa-eye fa-eye-slash");
            var input = $($(this).attr("toggle"));
            if (input.attr("type") == "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });

    </script>

    <script type="text/javascript">
        json_plan_price = "{{path('json_plan_price')}}"
         
    </script>
    <script src="{{ asset('js/register.js') }}"></script>
{% endblock %}