templates/conectar/form-conectar.html.twig line 1

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


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

{% block body %}

<div class="py-5">
    <div class="container-tierra">
            <div class="container-form">
                <form>
                    <div id="datos-form">
                        <div class="text-center">
                            <div class="px-xl-3">
                                <h1 class="mb-4 mb-xl-5 fw-bold">Enhora buena hoy partiremos a descubrir un nuevo mundo conectado!</h1>
                            </div>
                            <div class="px-xl-5">
                                <p class="mb-4 mb-xl-5">Para una conexión segura, el usuario debe poder representar legalmente el destino, experiencia, proyecto, negocio, conexion; por favor confirma tu información o edita tu perfil.</p>
                            </div>
                            <div class="mb-4">
                                <p class="text-end mb-3">Paso 1 de 2</p>
                                <div class="progress-bar upload-file">
                                    <div class="progress" style="width: 50%;"></div>
                                </div>
                            </div>
                        </div>
                        {% if app.user %}
                            {{ include('ayuda/datos-cuenta.html.twig') }}
                            <div class="text-center py-5 d-flex justify-content-center gap-3">
                                <a href="{{ path('perfil') }}" class="btn-g borde">{{qi.getTexto('edt-cuenta-btn', locale)}}</a>
                                <button type="button" id="btn-confirmar-datos-form" class="btn-g borde">{{qi.getTexto('confirmar-btn', locale)}}</button>
                            </div>
                        {% endif %}
                    </div>
                    <div id="file-form" style="display: none;">
                        <div class="mb-4">
                            <p class="text-end mb-3">Paso 2 de 2</p>
                            <div class="progress-bar upload-file">
                                <div class="progress" style="width: 80%;"></div>
                            </div>
                        </div>
                        <div class="text-center px-xl-3">
                            <h2 class="fw-bold mb-4 mb-xl-5">Completa el proceso de conexion segura cargado y enviado el certificado</h2>
                        </div>
                        <div class="px-xl-5">
                            <p class="text-center mb-4">Para una conexión segura, el usuario debe poder representar legalmente el destino; por favor confirma tu información o edita tu perfil.</p>
                        </div>
                        <div id="drop-file-area" class="drop-file-area">
                            <div id="file-instruction-content" class="text-center">
                                <div>
                                    <img src="/images/svg/file-upload.svg" alt="">
                                    <p><span>Click para cargar</span> o desliza el archivo aqui.</p>
                                    <p>(Peso Max : 2 MB)</p>
                                </div>
                            </div>
                            <input type="file" id="inmobiliaria_form_archivo_file">
                            <div id="file-upload-content" style="display: none;">
                                <div class="d-flex justify-content-between">
                                    <div class="d-flex">
                                        <img src="/images/svg/file-upload.svg" alt="">
                                        <div class="ms-3">
                                            <p id="file-name"></p>
                                            <p>200 KB</p>
                                        </div>
                                    </div>
                                    <div id="checkFileUpload" style="display: none;">
                                        <img src="/images/svg/check-circle-green.svg" alt="">
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-3 mt-4">
                                    <div class="progress-bar upload-file">
                                        <div id="progressBar" class="progress"></div>
                                    </div>
                                    <div id="progressPercentage"></div>
                                </div>
                            </div>
                        </div>
                        <div class="text-center mt-4">
                            <button type="submit" class="btn-g borde">Enviar y terminar</button>
                        </div>
                    </div>
                </form>
            </div>

    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const btnConfirmarDatosForm = document.getElementById('btn-confirmar-datos-form');

        const datosForm = document.getElementById('datos-form');
        const fileForm = document.getElementById('file-form');

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

    })
</script>


{% block javascripts_extra %}
    {{ encore_entry_script_tags('fileUpload') }}
{% endblock %}

{% endblock %}