{% load i18n sekizai_tags addcss acomea_tag %}

{% if settings.has_socials %}
    {% load socialaccount %}
    {% providers_media_js %}
    <div class="row">
        <div class="col-xs-6 text-right">
            <a class="btn btn-sm btn-social btn-facebook {% if flavour == "mobile" %} btn-block{% endif %}"
               href="{% provider_login_url 'facebook' method='js_sdk' next=redirect_url %}">
                <span class="fa fa-facebook"></span> Sign-in with Facebook
            </a>
            <br>
        </div>
        <div class="col-xs-6 text-left">
            <a class="btn btn-sm btn-social btn-google {% if flavour == "mobile" %} btn-block{% endif %}"
               href="{% provider_login_url 'google' next=redirect_url %}">
                <span class="fa fa-google"></span> Sign-in with Google
            </a>
        </div>
    </div>
    <div id="text-divider">
        <h2><span> oppure </span></h2>
    </div>
{% endif %}

{% if tracerequest_form %}
    {% if tracerequest_form.is_valid and settings.registration_thanks_url %}
        {% addtoblock "js" %}
            <script type="text/javascript">
                window.top.location.href = "{{ settings.registration_thanks_url }}";
            </script>
        {% endaddtoblock %}
    {% elif tracerequest_form.is_valid and settings.password_present %}
        <h3>Grazie per esserti registrato al sito di AcomeA</h3>
        <div class="recap box_utente row">
            <div class="col-sm-4 image">
                <img src="{{ STATIC_URL }}profilo/img/user_registered.png" alt=""/>
            </div>
            <div class="col-sm-8 testo">
                <p>
                    A breve riceverai via email un link per completare l'attivazione dell'account.</br></br>
                    Per informazioni puoi <a href="mailto:info@acomea.it">contattarci</a>.
                </p>
            </div>
        </div>
    {% elif tracerequest_form.is_valid and not settings.password_present %}
        <h3>Ancora un piccolo passo...</h3>
        <div class="recap box_utente row">
            <div class="col-sm-4 image">
                <img src="{{ STATIC_URL }}profilo/img/user_registered.png" alt=""/>
            </div>
            <div class="col-sm-8 testo">
                <p>
                    Per completare il processo, clicca sul link di conferma che abbiamo inviato al tuo indirizzo
                    email.</br></br>
                    Per informazioni puoi <a href="mailto:info@acomea.it">contattarci</a>.
                </p>
            </div>
        </div>
    {% else %}
        <div class="tracerequest" style="background-color: #{{ settings.background_color }};" id="TraceRequest-section-{{ settings.id }}">
            <div class="col-sm-12">

                <!-- NON FIELD ERRORS -->
                {% if tracerequest_form.non_field_errors %}
                    {% for error in tracerequest_form.non_field_errors %}
                        <div class="alert alert-danger">
                            <a class="close" data-dismiss="alert">&times;</a>
                            {{ error }}<br>
                        </div>
                    {% endfor %}
                {% endif %}

                {% comment %}
                    <!-- FIELD ERRORS -->
                    {% if tracerequest_form.errors %}
                        <div class="alert alert-danger">
                            <a class="close" data-dismiss="alert">&times;</a>
                            {% trans 'Please correct below errors' %}
                        </div>
                    {% endif %}
                {% endcomment %}

                <form class="form-horizontal"
                      action='{{ action_url }}{% if settings.id_for_anchor %}#{{settings.id_for_anchor}}{% endif %}'
                      method="POST" id="TraceRequest{{ settings.id }}"
                      role="form">
                    {% csrf_token %}
                    <input type="hidden" name="tracerequest_submit" value="{{ settings.id }}">
                    <!-- FIRST_NAME -->
                    {% if tracerequest_form.first_name %}
                        <div class="form-group{% if tracerequest_form.first_name.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.first_name.label|slugify }}">
                                {{ tracerequest_form.first_name.label }}
                                {% if tracerequest_form.first_name.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.first_name|addcss:'form-control' }}
                                {% if tracerequest_form.first_name.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.first_name.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- LAST_NAME -->
                    {% if tracerequest_form.last_name %}
                        <div class="form-group{% if tracerequest_form.last_name.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.last_name.label|slugify }}">
                                {{ tracerequest_form.last_name.label }}
                                {% if tracerequest_form.last_name.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.last_name|addcss:'form-control' }}
                                {% if tracerequest_form.last_name.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.last_name.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- EMAIL -->
                    {% if tracerequest_form.email %}
                        <div class="form-group{% if tracerequest_form.email.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.email.label|slugify }}">
                                {{ tracerequest_form.email.label }}
                                {% if tracerequest_form.email.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.email|addcss:'form-control' }}
                                {% if tracerequest_form.email.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.email.errors }}</small>
                                    </span>
                                {% endif %}
                            </div>

                        </div>
                    {% endif %}
                    <!-- PHONE -->
                    {% if tracerequest_form.phone %}
                        <div class="form-group{% if tracerequest_form.phone.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.phone.label|slugify }}">
                                {{ tracerequest_form.phone.label }}
                                {% if tracerequest_form.phone.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.phone|addcss:'form-control' }}
                                {% if tracerequest_form.phone.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.phone.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- USERNAME -->
                    {% if tracerequest_form.username %}
                        <div class="form-group{% if tracerequest_form.username.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.username.label|slugify }}">
                                {{ tracerequest_form.username.label }}
                                <span tabindex="0" class="glyphicon glyphicon-info-sign" role="button"
                                      data-toggle="tooltip" data-placement="top"
                                      title="La username può contenere solo lettere, numeri ed i caratteri: . + - _"></span>
                                {% if tracerequest_form.username.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.username|addcss:'form-control' }}
                                {% if tracerequest_form.username.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.username.errors }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- PASSWORD -->
                    {% if tracerequest_form.password %}
                        <div class="form-group{% if tracerequest_form.password.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.password.label|slugify }}">
                                {{ tracerequest_form.password.label }}
                                <span tabindex="0" class="glyphicon glyphicon-info-sign" role="button"
                                      data-toggle="tooltip" data-placement="top"
                                      title="La password deve essere composta da almeno 8 caratteri (ASCII). Ricorda di inserire almeno una lettera ed un numero."></span>
                                {% if tracerequest_form.password.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.password|addcss:'form-control' }}
                                {% if tracerequest_form.password.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.password.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- PASSWORD_CONFIRM -->
                    {% if tracerequest_form.password_confirm %}
                        <div class="form-group{% if tracerequest_form.password_confirm.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.password_confirm.label|slugify }}">
                                {{ tracerequest_form.password_confirm.label }}
                                {% if tracerequest_form.password_confirm.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.password_confirm|addcss:'form-control' }}
                                <i class="icon-ok" id="password-check-ok-icon" style="margin-left: 10px; display: none;"
                                   title="le password coincidono"></i>

                                <div id="password_strenght"></div>
                                {% if tracerequest_form.password_confirm.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.password_confirm.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- MESSAGE -->
                    {% if tracerequest_form.message %}
                        <div class="form-group{% if tracerequest_form.message.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.message.label|slugify }}">
                                {{ tracerequest_form.message.label }}
                                {% if tracerequest_form.message.field.required %} *{% endif %}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.message|addcss:'form-control' }}
                                {% if tracerequest_form.message.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.message.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- CAPTCHA -->
                    {% if tracerequest_form.captcha %}
                        <div class="form-group{% if tracerequest_form.captcha.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.captcha.label|slugify }}">
                                {{ tracerequest_form.captcha.label }}
                            </label>

                            <div class="col-sm-8">
                                {{ tracerequest_form.captcha|addcss:'form-control' }}
                                {% if tracerequest_form.captcha.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.captcha.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}

                    <!-- AUTH TRATTAMENTO DATI -->
                    {% if tracerequest_form.auth_trattamento_dati %}
                        <div class="form-group{% if tracerequest_form.auth_trattamento_dati.errors %} has-error{% endif %}">
                            <label class="col-sm-4"
                               for="id_{{ tracerequest_form.auth_trattamento_dati.label|slugify }}">
                            </label>

                            <div class="col-sm-8 small">
                                {{ settings.auth_trattamento_dati_message.body|safe }}
                                <div class="radio">
                                    {{ tracerequest_form.auth_trattamento_dati|addcss:'radio-inline' }}
                                </div>
                                {% if tracerequest_form.auth_trattamento_dati.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.auth_trattamento_dati.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- AUTH MATERIALE COMMERCIALE -->
                    {% if tracerequest_form.auth_materiale_commerciale %}
                        <div class="form-group{% if tracerequest_form.auth_materiale_commerciale.errors %} has-error{% endif %}">
                            <label class="col-sm-4"
                                   for="id_{{ tracerequest_form.auth_materiale_commerciale.label|slugify }}">
                                {% comment %}
                                    {{ tracerequest_form.auth_materiale_commerciale.label }}
                                    {% if tracerequest_form.auth_materiale_commerciale.field.required %} *{% endif %}
                                {% endcomment %}
                            </label>

                            <div class="col-sm-8 small">
                                {{ settings.auth_materiale_commerciale_message.body|safe }}
                                <div class="radio">
                                    {{ tracerequest_form.auth_materiale_commerciale|addcss:'radio-inline' }}
                                </div>
                                {% if tracerequest_form.auth_materiale_commerciale.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.auth_materiale_commerciale.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- AUTH SOCIETA TERZE -->
                    {% if tracerequest_form.auth_societa_terze %}
                        <div class="form-group{% if tracerequest_form.auth_societa_terze.errors %} has-error{% endif %}">
                            <label class="col-sm-4" for="id_{{ tracerequest_form.auth_societa_terze.label|slugify }}">
                                {% comment %}
                                    {{ tracerequest_form.auth_societa_terze.label }}
                                    {% if tracerequest_form.auth_societa_terze.field.required %} *{% endif %}
                                {% endcomment %}
                            </label>

                            <div class="col-sm-8 small">
                                {{ settings.auth_societa_terze_message.body|safe }}
                                <div class="radio">
                                    {{ tracerequest_form.auth_societa_terze|addcss:'radio-inline' }}
                                </div>
                                {% if tracerequest_form.auth_societa_terze.errors %}
                                    <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.auth_societa_terze.errors|striptags }}</small>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- PROFESSIONALE -->
                    {% if tracerequest_form.professionale %}
                        <div class="form-group {% if tracerequest_form.professionale.errors %} has-error{% endif %}">
                            <div class="col-sm-offset-4 col-sm-8">
                                <div class="well well-sm">
                                    <div class="checkbox">
                                        <label>
                                            {{ tracerequest_form.professionale }}
                                            <small>
                                                Dichiaro inoltre di operare professionalmente nel settore finanziario
                                                <br>
                                                (es. Consulente finanziario, Private Banker...).
                                            </small>
                                        </label>
                                    </div>
                                    {% if tracerequest_form.professionale.errors %}
                                        <span id="helpBlock" class="help-block">
                                        <small>{{ tracerequest_form.professionale.errors|striptags }}</small>
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    <!-- SUBMIT -->
                    <div class="row">
                        <div class="col-sm-offset-4 col-sm-8">
                            {% if settings.image_button %}
                                <a href="#" id="image-submit{{ settings.id }}">
                                    <img
                                            src="{{ settings.image_button.url }}" alt="{{ settings.name }}"
                                            title="{{ settings.name }}"
                                            />
                                </a>
                            {% else %}
                                <button
                                        type="submit" style="color: #fff;" class="btn btn-rounded btn-gradient text-semibold"
                                        value="{% trans settings.text_button %}" id="invia">
                                    {{ settings.text_button }}
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </form>
                <hr/>
            </div>
        </div>
    {% endif %}
{% endif %}

{% addtoblock "js" %}
    <script type="text/javascript">
        $(document).ready(function () {
            $("#image-submit{{ settings.id }}").click(function (e) {
                e.preventDefault();
                $("#TraceRequest{{ settings.id }}").submit();
            });
        });
    </script>
{% endaddtoblock %}
{% addtoblock "js" %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
            // $("#id_password").change(function () {
            //     passwordStrength($(this).val());
            // });
            function checkPasswordsMatch() {
                $("#id_password, #id_password_confirm").keyup(function () {
                    var password1 = $("#id_password").val();
                    var password2 = $("#id_password_confirm").val();
                    if (password1.length > 0 && password2.length > 0 && password1 == password2) {
                        $("#password-check-ok-icon").show();
                    } else {
                        $("#password-check-ok-icon").hide();
                    }
                })
            }

            function passwordStrength(password) {
                var desc = new Array();
                desc[1] = desc[0] = "Insicura";
                desc[2] = "Media";
                desc[3] = "Migliore";
                desc[4] = "Forte";
                desc[5] = "Molto Forte";
                var score = 0;

                if (( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) && password.length > 7) score++;
                if ((password.match(/\d+/)) && password.length > 7)score++;
                if (( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) && password.length > 7) score++;
                if ((password.length > 12) && password.length > 7) score++;
                if ((password.length > 10) && password.length > 7) score++;
                if ((password.length > 8) && password.length > 7) score++;
                if (password.length == 0) {
                    $("#password_strenght").text("");
                }
                else {
                    $("#password_strenght").text(desc[score]);
                }
            }
        })
    </script>
{% endaddtoblock %}