{% extends 'Layout/layout.html.twig' %}

{% block title %} TIMEPAC ACADEMY: Register {% endblock %}

{% block content %}

    <section class="l-container l-container--maxHeight l-container--min-color">
        <div class="l-container__item l-container__item--min-size">
            <div class="l-regin">
                <form class="form-regin" action="{{ path('app_register') }}" method="post" id="form_regin">
                    

                    {% for flash_error in app.flashes('verify_email_error') %}
                        <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
                    {% endfor %}

                    <h3>{% trans %}Sign up{% endtrans %}</h3>

                    {{ form_start(registrationForm) }}
                    <div class="cntnt-field">


                        <div>
                            {{ form_label(registrationForm.name) }}
                            <span class="text-danger">*</span>
                        </div>
                        {{ form_widget(registrationForm.name) }}
                        {% if form_errors(registrationForm.name) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.name) }}
                        </div>
                        {% endif %}

                        <div>
                            {{ form_label(registrationForm.lastname) }}
                            <span class="text-danger">*</span>
                        </div>
                        {{ form_widget(registrationForm.lastname) }}
                        {% if form_errors(registrationForm.lastname) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.lastname) }}
                        </div>
                        {% endif %}

                        <div>
                            {{ form_label(registrationForm.country) }}
                        </div>
                        <div class="autocomplete">
                        {{ form_widget(registrationForm.country) }}
                        </div>
                        {% if form_errors(registrationForm.country) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.country) }}
                        </div>
                        {% endif %}

                        <div>
                            {{ form_label(registrationForm.company) }}
                        </div>
                        {{ form_widget(registrationForm.company) }}
                        {% if form_errors(registrationForm.company) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.company) }}
                        </div>
                        {% endif %}

                        <div>
                            {{ form_label(registrationForm.role_company) }}
                        </div>
                        {{ form_widget(registrationForm.role_company) }}
                        {% if form_errors(registrationForm.role_company) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.role_company) }}
                        </div>
                        {% endif %}

                        <div>
                            {{ form_label(registrationForm.email) }}
                            <span class="text-danger">*</span>
                        </div>
                        {{ form_widget(registrationForm.email) }}
                        {% if form_errors(registrationForm.email) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.email) }}
                        </div>
                        {% endif %}

                        <div>
                            {{ form_label(registrationForm.password) }}
                            <span class="text-danger">*</span>
                        </div>
                        {{ form_widget(registrationForm.password) }}
                        {% if form_errors(registrationForm.password) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.password) }}
                        </div>
                        {% endif %}

                        <div>
                            {{ form_label(registrationForm.repeatPassword) }}
                            <span class="text-danger">*</span>
                        </div>
                        {{ form_widget(registrationForm.repeatPassword) }}
                        {% if form_errors(registrationForm.repeatPassword) %}
                        <div class="error_div">
                            {{ form_errors(registrationForm.repeatPassword) }}
                        </div>
                        {% endif %}
                        
                        <div class="mb-2">
                            <a href="{{ path('terms') }}" class="small" target="_blank">{% trans %}Terms & conditions{% endtrans %}</a>
                        </div>

                        <div class="checkbox_box">
                        {{ form_widget(registrationForm.agreeTerms) }}
                        {{ form_label(registrationForm.agreeTerms)  }}
                        <span class="text-danger">*</span>
                        </div>

                        <div class="mb-2 mt-2">
                            <a href="{{ path('privacy') }}" class="small" target="_blank">{% trans %}Privacy policy{% endtrans %}</a>
                        </div>

                        <div class="checkbox_box">
                        {{ form_widget(registrationForm.agreePolicy) }}
                        {{ form_label(registrationForm.agreePolicy) }}
                        <span class="text-danger">*</span>
                        </div>
                        
                        
                        <div class="checkbox_box">
                        {{ form_widget(registrationForm.send_mails) }}
                        {{ form_label(registrationForm.send_mails) }}
                        <span class="text-danger">*</span>
                        </div>
                    </div>

                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                    <div class="cntnt-field cntnt-field--end">
                        <input type="submit" class="txt__bd1" value="{% trans %}Register{% endtrans %}">
                    </div>
                    {{ form_end(registrationForm) }}


                    {#
                        Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
                        See https://symfony.com/doc/current/security/remember_me.html

                        <div class="checkbox mb-3">
                            <label>
                                <input type="checkbox" name="_remember_me"> Remember me
                            </label>
                        </div>
                    #}

                </form>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    {# <script type="text/javascript" src="{{ asset('build/js/countries.js') }}"></script> #}
    <script>
        // Datos de ejemplo para el autocompletado
        var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "North Macedonia", "Norway", "Oman", "Pakistan", "Palau", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"];

        // Función para el autocompletado
        function autocomplete(input, arr) {
            var currentFocus;

            // Ejecutar esta función cuando se escriba en el campo de texto
            input.addEventListener("input", function(e) {
                var val = this.value;
                closeAllLists();
                if (!val) { return false;}
                currentFocus = -1;
                var divList = document.createElement("DIV");
                divList.setAttribute("id", this.id + "autocomplete-list");
                divList.setAttribute("class", "autocomplete-items");
                this.parentNode.appendChild(divList);
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
                        var divItem = document.createElement("DIV");
                        divItem.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
                        divItem.innerHTML += arr[i].substr(val.length);
                        divItem.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
                        divItem.addEventListener("click", function(e) {
                            input.value = this.getElementsByTagName("input")[0].value;
                            closeAllLists();
                        });
                        divList.appendChild(divItem);
                    }
                }
            });

            // Ejecutar esta función cuando se presione una tecla
            input.addEventListener("keydown", function(e) {
                var x = document.getElementById(this.id + "autocomplete-list");
                if (x) x = x.getElementsByTagName("div");
                if (e.keyCode == 40) {
                    currentFocus++;
                    addActive(x);
                } else if (e.keyCode == 38) {
                    currentFocus--;
                    addActive(x);
                } else if (e.keyCode == 13) {
                    e.preventDefault();
                    if (currentFocus > -1) {
                        if (x) x[currentFocus].click();
                    }
                }
            });

            function addActive(x) {
                if (!x) return false;
                removeActive(x);
                if (currentFocus >= x.length) currentFocus = 0;
                if (currentFocus < 0) currentFocus = (x.length - 1);
                x[currentFocus].classList.add("autocomplete-active");
            }

            function removeActive(x) {
                for (var i = 0; i < x.length; i++) {
                    x[i].classList.remove("autocomplete-active");
                }
            }

            function closeAllLists(elmnt) {
                var x = document.getElementsByClassName("autocomplete-items");
                for (var i = 0; i < x.length; i++) {
                    if (elmnt != x[i] && elmnt != input) {
                        x[i].parentNode.removeChild(x[i]);
                    }
                }
            }

            // Ejecutar esta función cuando se haga clic en cualquier parte del documento
            document.addEventListener("click", function (e) {
                closeAllLists(e.target);
            });
        }

        // Iniciar la función de autocompletado
        autocomplete(document.getElementById("registration_form_country"), countries);
    </script>
{% endblock %}