Proceso de Generación de Propuesta

1 Cargar información

Cargue los detalles de la propuesta a realizar

2 Analisis de propuesta

Analice la información previa a la generación de la propuesta

3 Generación de propuesta

Procesado de información y generación de propesta definitiva

4 Resultado final

Descargue la información generada de acuerdo a sus especificaciones

Nombre de empresa*

Razón Social

Plantilla PDF*

Pliego PDF*

Tipo de procesamiento

Detalles adicionales

</div>
                            </div>
                        </div>
        
                        
                        <div class="col-12 text-end">
                            <button type="button" class="custom-submit-button" onclick="submitCustomForm()">Cargar</button>
                        </div>
                       
                    </div>
                </form>
            </div>
        </section>
        
        <style>
            /* Alinear las etiquetas y los campos a la izquierda */
            .align-left {
                text-align: left;
            }
        
            /* Hacer textarea más grande y ajustable */
            .resizable-textarea {
                min-height: 150px;
                resize: vertical; /* Permitir redimensionamiento vertical */
            }
        
            /* Botón personalizado para cargar archivos */
            .custom-file-button {
                display: inline-block;
                padding: 10px 20px;
                font-size: 16px;
                font-weight: 400;
                text-align: center;
                line-height: 24px;
                white-space: nowrap;
                background-color: rgb(231, 233, 237);
                color: rgb(33, 37, 41);
                border: 1px solid rgba(33, 37, 41, 0.15);
                border-radius: 6.4px;
                cursor: pointer;
                transition: background-color 0.05s ease-in-out, border-color 0.05s ease-in-out;
            }
        
            .custom-file-button:hover {
                background-color: rgb(200, 200, 200);
            }
        
            /* Ocultar elementos generados automáticamente por Odoo */
            .o_files_zone, .o_file_block, .o_add_files_button {
                display: none !important;
            }
        
            /* Ocultar el input de tipo archivo */
            .hidden-file-input {
                position: absolute;
                left: -9999px;
            }
        
            /* Botón personalizado para enviar formulario */
            .custom-submit-button {
                padding: 12px 30px;
                font-size: 18px;
                font-weight: 600;
                color: #fff;
                background-color: #007bff;
                border: 1px solid #007bff;
                border-radius: 6.4px;
                cursor: pointer;
                transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
            }
        
            .custom-submit-button:hover {
                background-color: #0056b3;
                border-color: #0056b3;
            }
            /* Asegura que todas las vistas tengan la misma altura */
            #process-steps {
                display: flex;
                flex-direction: column; /* Coloca las vistas una debajo de la otra */
                min-height: 500px; /* Altura mínima para todas las vistas */
                justify-content: space-between; /* Distribuye las vistas uniformemente */
            }

#process-steps > div {
                flex: 1; /* Cada vista ocupará el mismo espacio vertical */
                display: flex;
                flex-direction: column;
                justify-content: center; /* Centra el contenido verticalmente */
                align-items: center; /* Centra el contenido horizontalmente */
            }
        </style>
    </div>

<div id="step2-view" style="display: none;">
        <!--<div id="spinner-container">
            <p>Procesando...</p>
            <div class="spinner"></div>
        </div>
       <section class="s_website_form pt16 pb16" data-vcss="001" data-snippet="s_website_form" data-name="Formulario">
            <div class="container-fluid">
                <form action="/website/form/" id="customForm" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
                    <div class="s_website_form_rows row s_col_no_bgcolor">
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="textarea">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="executive_summary">
                                    Resumen Ejecutivo
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input align-left no-resize" name="executive_summary" id="executive_summary" rows="9" >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. 
                        
                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.

Objetivos

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. 
                        
                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.

-->

Resumen Ejecutivo

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Objetivos

        Consectetur adipiscing elit. Mauris massa. Vestibulum lacinia arcu eget nulla. Pellentesque nibh.

Preguntas y aclaraciones

</div>
                                        </div>
                                    </div>
                                
                                    
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingTwo">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                <span class="flex-grow-1">¿Cómo puedo contactar a soporte al cliente?</span>
                                                <span class="status-label ms-3 pending" id="statusTwo">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusTwo"/>
                                            </div>
                                        </div>
                                    </div>
                                
                                    
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingThree">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                <span class="flex-grow-1">¿Cuál es su política de devoluciones?</span>
                                                <span class="status-label ms-3 pending" id="statusThree">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusThree"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <script>
                                    // Función para actualizar el estado de una etiqueta
                                    function updateStatusLabel(textarea) {
                                        const statusId = textarea.getAttribute("data-status-id");
                                        const statusElement = document.getElementById(statusId);
                                
                                        if (textarea.value.trim() === "") {
                                            statusElement.textContent = "Pendiente"; // Mostrar "Pendiente" si no hay texto
                                            statusElement.classList.remove("responded");
                                            statusElement.classList.add("pending");
                                        } else {
                                            statusElement.textContent = "Respondida"; // Mostrar "Respondida" si hay texto
                                            statusElement.classList.remove("pending");
                                            statusElement.classList.add("responded");
                                        }
                                    }
                                
                                    // Inicializar el estado al cargar la página
                                    document.addEventListener("DOMContentLoaded", function () {
                                        document.querySelectorAll(".answer-text").forEach((textarea) => {
                                            // Actualizar el estado basado en el contenido inicial
                                            updateStatusLabel(textarea);
                                
                                            // Agregar el evento de entrada para actualizar dinámicamente
                                            textarea.addEventListener("input", function () {
                                                updateStatusLabel(this);
                                            });
                                        });
                                    });
                                </script>
                                
                                <style>
                                    /* Estilo del botón del acordeón */
                                    .accordion-button {
                                        background-color: #f8f9fa;
                                        color: #333;
                                        font-weight: bold;
                                        border: none;
                                        border-radius: 0;
                                        box-shadow: none;
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    }
                                
                                    .accordion-button:not(.collapsed) {
                                        color: #0056b3;
                                        background-color: #e9ecef;
                                    }
                                
                                    /* Etiquetas de estado */
                                    .status-label {
                                        font-size: 0.9rem;
                                        font-weight: 600;
                                        padding: 4px 10px;
                                        border-radius: 20px;
                                        margin-right: 10px; /* Margen derecho */
                                        text-align: center;
                                        min-width: 80px;
                                        transition: all 0.2s ease-in-out;
                                    }
                                
                                    /* Estado "Pendiente" */
                                    .status-label.pending {
                                        background-color: #ffc107; /* Amarillo */
                                        color: #856404; /* Texto oscuro */
                                        border: 1px solid #ffecb5;
                                    }
                                
                                    /* Estado "Respondida" */
                                    .status-label.responded {
                                        background-color: #28a745; /* Verde */
                                        color: #fff;
                                        border: 1px solid #1e7e34;
                                    }
                                
                                    /* Estilo del textarea */
                                    .accordion-body textarea {
                                        width: 100%;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        padding: 8px;
                                        font-size: 14px;
                                        line-height: 1.5;
                                        resize: none; /* Evita redimensionamiento */
                                    }
                                
                                    .accordion-body textarea::placeholder {
                                        color: #aaa;
                                    }

/* Evitar el cambio de estilo al seleccionar o enfocar un campo */

</style>
                            
                            </div>
                            
                            
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Detalles Adicionales</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Fusce nec tellus sed augue semper porta.

Proceso de Generación de Propuesta

1

Cargar información

2

Analisis de propuesta

3

Generación de propuesta

4

Resultado final

Paso 3: Generación de propuesta

Paso 4: Resultado Final

Paso 3: Generación de propuesta

Paso 4: Resultado Final

Proceso de Generación de&nbsp;Propuesta

1

Cargar información

2

Analisis de propuesta

3

Generación de propuesta

4

Resultado final

¿Cuáles son los servicios que ofrece la compañía? Pendiente

Paso 3: Generación de propuesta

Paso 4: Resultado Final

¿Cuáles son los servicios que ofrece la compañía? Pendiente

Paso 3: Generación de propuesta

Paso 4: Resultado Final

Proceso de Generación de Propuesta