templates/ayuda/asociarse.html.twig line 1

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


{% block title %}Hello HomeController!{% endblock %}

{% block body %}

<img class="d-none backgroundImage" src="/images/img29.jpg" />
<div class="py-4 text-center header-ayuda">
    <img class="logo mb-2 mb-lg-4" src="/images/logo_tierraalavista.png" />
    <br>
    <div class="p-2 title">
        <h4 class="mb-0 py-0 px-4">{{qi.getTexto('titulo-asociarse', locale)}}</h4>
    </div>
</div>
<div class="wp-ayuda">
    {% if submit == 'nosubmit' %}
        {% if form_errors(form)|length > 0 %}
            <div class="alert alert-warning">
                {{ form_errors(form) }}
            </div>
        {% endif %}
        {{ form_start(form) }}
            <div id="datos-form">
                <div>
                    {{ qi.getTextoBig('texto-asociarse', locale) | raw }}
                </div>
                <h3 class="text-center">{{qi.getTexto('titulo-nuevo-asociado', locale)}}</h3>
                <div class="row">
                    <div class="col-6 col-xl-5 form-group">
                        {{ form_widget(form.nombre, {'attr': {'id': 'nombre', 'placeholder': qi.getTexto('texto-input-nombre', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-5 form-group">
                        {{ form_widget(form.apellido, {'attr': {'id': 'apellidos', 'placeholder': qi.getTexto('texto-input-apellidos', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-2 form-group">
                        {{ form_widget(form.genero, {'attr': {'id': 'genero'} }) }}
                    </div>
                    <div class="col-6 col-xl-1 form-group">
                        {{ form_widget(form.idAsociado, {'attr': {'id': 'idAsociado', 'placeholder': 'ID'} }) }}
                    </div>
                    <div class="col-6 col-xl-2 form-group">
                        {{ form_widget(form.identificacion, {'attr': {'id': 'identificacion', 'placeholder': qi.getTexto('texto-input-identificacion', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-7 form-group">
                        {{ form_widget(form.email, {'attr': {'id': 'email', 'placeholder': qi.getTexto('texto-input-correo-electronico', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-2 form-group">
                        {{ form_widget(form.celular, {'attr': {'id': 'celular', 'placeholder': qi.getTexto('texto-input-celular', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-2 form-group">
                        {{ form_widget(form.pais, {'attr': {'id': 'pais', 'placeholder': qi.getTexto('texto-input-pais', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-4 form-group">
                        {{ form_widget(form.departamento, {'attr': {'id': 'depto_estado', 'placeholder': qi.getTexto('texto-input-departamento-estado', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-4 form-group">
                        {{ form_widget(form.ciudad, {'attr': {'id': 'ciudad_municipio', 'placeholder': qi.getTexto('texto-input-ciudad-municipio', locale)  } }) }}
                    </div>
                    <div class="col-6 col-xl-2 form-group">
                        {{ form_widget(form.password, {'attr': {'id': 'password', 'placeholder': qi.getTexto('texto-input-contraseña', locale)  , 'type': 'password'  } }) }}
                    </div>
                    <div class="col-6 col-xl-5 form-group">
                        {{ form_widget(form.ocupacion, {'attr': {'id': 'ocupacion', 'placeholder':  qi.getTexto('texto-input-ocupacion', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-5 form-group">
                        {{ form_widget(form.compania, {'attr': {'id': 'compania', 'placeholder': qi.getTexto('texto-input-compañia', locale) } }) }}
                    </div>
                    <div class="col-6 col-xl-2 form-group">
                        {{ form_widget(form.cargo, {'attr': {'id': 'compania', 'placeholder': qi.getTexto('texto-input-cargo', locale)  } }) }}
                    </div>
                </div>
                <div class="text-center py-5">
                    <button id="btn-asociarme-datos-form" class="btn-form">{{qi.getTexto('btn-asociarse', locale)}}</button>
                </div>
                <div class="text-center mt-3">
                    <div class="mb-5">
                        {{qi.getTextoBig('texto-iniciar-sesion-asociarse', locale)|raw}}
                    </div>
                    <div>
                        {{qi.getTextoBig('texto-politica-terminos-condiciones-asociarse', locale)|raw}}
                    </div>
                </div>
            </div>
            <div id="documento-form" style="display: none;">
                <div>
                    {{qi.getTextoBig('texto-upload-file-asociarse', locale)|raw}}
                </div>
                <div class="text-center">
                    <label for="registration_form_archivo_file" class="cursor-pointer"><img src="/images/svg/documento.svg" alt="Documento icono"></label>
                    <div style="width: 75%; margin: 0 auto;">
                        {{ form_widget(form.archivo, {'attr': {'id': 'archivo', 'accept': '.jpg, .png, .pdf', 'required': 'required'} }) }}
                        <div class="progress mt-3" id="progress" style="display: none;">
                            <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0; background-color: #2f1c0e;">0%</div>
                        </div>
                    </div>
                </div>
                <div class="text-center py-5" id="btn-submit-form">
                    <button type="submit" class="btn-form">{{qi.getTexto('btn-enviar', locale)}}</button>
                </div>
            </div>
        {{ form_end(form) }}
    {% else %}
        <div class="alert alert-success">
            <h2>{{qi.getTexto('texto-exclamacion-listo', locale)}}</h2>
            <h3>{{qi.getTexto('texto-solicitud-completada-exito', locale)}}</h3>
        </div>
    {% endif %}
</div>

<script>
    const datosForm = document.getElementById('datos-form');
    const documentoForm = document.getElementById('documento-form');
    const btnAsociarmeDatosForm = document.getElementById('btn-asociarme-datos-form');

    btnAsociarmeDatosForm.addEventListener("click", (e) => {
        e.preventDefault();
        datosForm.style.display = "none";
        documentoForm.style.display = "block";
    })

    function _(el) {
        return document.getElementById(el);
    }



    _("registration_form_archivo_file").addEventListener("change", validarPesoFile);

    function uploadFile() {
        let file = _("registration_form_archivo_file").files[0];

        _("progress").style.display = "block";

        let progressPercent = 0;

        let intervalAnimationProgressBar = setInterval(() => {
                progressPercent+=10;
                _("progressBar").style.width = `${progressPercent}%`;
                _("progressBar").innerText = `${progressPercent}%`;
                if (progressPercent === 100) {
                    clearInterval(intervalAnimationProgressBar);
                }
        }, 100);
    }


    function validarPesoFile () {
        let sizeFile = _("registration_form_archivo_file").files[0].size;

        // console.log("Peso: " + sizeFile);

        if (sizeFile > 2097152) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: `{{qi.getTexto('texto-validación-archivo-grande', locale)}}`,
                confirmButtonText: 'Ok'
            })
        } else {
            uploadFile();
        }
    }
</script>
{% endblock %}