<div id="process-steps">
    
    <div id="step1-view">
        <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="char">
                            <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="company_name">
                                    Nombre de empresa<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="company_name" required="1" data-fill-with="company_name" id="company_name">
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char">
                            <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="social">
                                    Razón Social
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="social" data-fill-with="social" id="social">
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom">
                            <div class="row s_col_no_resize s_col_no_bgcolor align-items-center">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="template_pdf">
                                    Plantilla PDF<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9 d-flex align-items-center">
                                    <input type="text" class="form-control me-3 align-left" id="template_file_name" name="template_file_name" readonly="" placeholder="Nombre del archivo">
                                    <button type="button" class="custom-file-button" onclick="document.getElementById('template_pdf').click();">
                                        Subir Archivo
                                    </button>
                                    <input type="file" id="template_pdf" name="Plantilla" class="hidden-file-input" onchange="handleFileChange('template_pdf', 'template_file_name')" required="">
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom">
                            <div class="row s_col_no_resize s_col_no_bgcolor align-items-center">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="specification_pdf">
                                    Pliego PDF<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9 d-flex align-items-center">
                                    <input type="text" class="form-control me-3 align-left" id="specification_file_name" name="specification_file_name" readonly="" placeholder="Nombre del archivo">
                                    <button type="button" class="custom-file-button" onclick="document.getElementById('specification_pdf').click();">
                                    Subir Archivo
                                    </button>
                                    <input type="file" id="specification_pdf" name="Pliego" class="hidden-file-input" onchange="handleFileChange('specification_pdf', 'specification_file_name')" required="">
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char">
                            <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="procesamiento">
                                    Tipo de procesamiento
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="procesamiento" data-fill-with="procesamiento" id="procesamiento">
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" 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="aditional">
                                    Detalles adicionales
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input resizable-textarea align-left" name="aditional" id="aditional" rows="4" placeholder="Escriba los detalles aquí..."></textarea>
                                </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;">
        
        <section class="s_timeline_list pb88 o_colored_level pt88">
            <div class="o_container_flex">
                <div class="row">
                    <div class="col-lg-12 o_colored_level">
                        <div class="s_timeline_list_wrapper pt-3">
                            
                            <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"></div>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"></span>
                                <strong class="o_default_snippet_text">Resumen Ejecutivo</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
                                </textarea>
                            </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"></div>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"></span>
                                <strong class="o_default_snippet_text">Objetivos</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Consectetur adipiscing elit. Mauris massa. Vestibulum lacinia arcu eget nulla. Pellentesque nibh.
                                </textarea>
                            </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"></div>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"></span>
                                <strong class="o_default_snippet_text">Preguntas y aclaraciones</strong>
                                <div class="accordion" id="questionsAccordion">
                                    
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                                <span class="flex-grow-1">¿Cuáles son los servicios que ofrece la compañía?</span>
                                                <span class="status-label ms-3 pending" id="statusOne">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusOne"></textarea>
                                            </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"></textarea>
                                            </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"></textarea>
                                            </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"></div>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"></span>
                                <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.
                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <style>
            /* General */
            body, html {
                margin: 0;
                padding: 0;
            }
        
            .s_timeline_list {
                padding-top: 0 !important; /* Eliminar padding superior */
                padding-bottom: 0 !important; /* Opcional: Eliminar padding inferior */
            }
        
            .o_container_small {
                margin-top: 0 !important; /* Eliminar margen superior */
                padding-top: 0 !important; /* Ajustar el padding superior */
            }
        
            .s_timeline_list_wrapper {
                padding-top: 0; /* Asegurar que no haya espacio superior */
                margin-top: 0; /* Asegurar que esté alineado */
            }
        
            .s_timeline_list_row {
                padding-top: 10px; /* Opcional: espacio entre filas */
                margin-top: 0; /* Eliminar espacio adicional */
            }
        
            /* Línea vertical y puntos */
            .o_dot_line {
                left: 0; /* Línea alineada al borde izquierdo */
                border-left: 2px solid #ccc;
            }
        
            .o_dot {
                width: 12px;
                height: 12px;
                background-color: #3498db;
                left: 0;
                top: 8px;
            }
        
            /* Títulos */
            .s_timeline_list_row strong {
                display: block;
                margin-bottom: 10px;
                font-size: 16px;
                color: #333;
                font-weight: 600;
                text-align: left;
            }
        
            /* Campos de texto */
            textarea {
                width: 100%;
                min-height: 80px;
                padding: 10px;
                font-size: 14px;
                line-height: 1.5;
                border: 1px solid #ccc;
                border-radius: 4px;
                resize: none;
                overflow: hidden;
                background-color: #f9f9f9;
            }
        
            textarea[readonly] {
                color: #555;
                background-color: #f9f9f9;
            }

        </style>
       
        <button type="button" onclick="goToNextStep(3)">Siguiente</button>
    </div>

    
    <div id="step3-view" style="display: none;">
        <h3>Paso 3: Generación de propuesta</h3>
        <p>Estamos generando la propuesta.</p>
        <button type="button" onclick="goToNextStep(4)">Siguiente</button>
    </div>

    
    <div id="step4-view" style="display: none;">
        <h3>Paso 4: Resultado Final</h3>
        <p>Propuesta generada exitosamente. Descárgala aquí:</p>
        <a href="#" class="btn btn-success">Descargar Propuesta</a>
    </div>
</div>
<script>
    // Función para mostrar el paso siguiente y ocultar el anterior
    function showStep(stepNumber) {
        // Ocultar todas las vistas
        document.querySelectorAll('#process-steps > div').forEach(view => {
            view.style.display = 'none';
        });

        // Mostrar la vista del paso actual
        document.getElementById(`step${stepNumber}-view`).style.display = 'block';

        // Actualizar la sombra en los pasos de la barra de progreso
        updateProcessStep(stepNumber);
    }

    // Actualiza la sombra del paso actual en la barra de progreso
    function updateProcessStep(activeStep) {
        document.querySelectorAll('.s_process_step').forEach((step, index) => {
            if (index + 1 === activeStep) {
                // Añadir el estilo box-shadow al paso activo
                step.style.boxShadow = "rgba(0, 0, 0, 0.15) 0px 8px 16px 0px";
            } else {
                // Eliminar el box-shadow del resto de pasos
                step.style.boxShadow = "none";
            }
        });
    }


    function handleFileChange(inputId, fileNameId) {
        const fileInput = document.getElementById(inputId);
        const fileNameField = document.getElementById(fileNameId);

        if (fileInput.files.length > 0) {
            fileNameField.value = fileInput.files[0].name; // Mostrar el nombre del archivo
        } else {
            fileNameField.value = ''; // Limpiar si no hay archivo
        }
    }

    async function submitCustomForm() {
        const form = document.getElementById("customForm");
        const formData = new FormData(form); // Crear un objeto FormData con los datos del formulario

        try {
            /*const response = await fetch("https://y0ffvtoa30.execute-api.eu-west-1.amazonaws.com/PRO/request", {
                method: "POST",
                body: formData,
            });

            if (response.ok) {*/
                //alert("Formulario enviado exitosamente.");
                form.reset(); // Limpiar el formulario después del envío exitoso
                document.getElementById("template_file_name").value = ""; // Limpiar nombre de archivo
                document.getElementById("specification_file_name").value = ""; // Limpiar nombre de archivo
                showStep(2);
           /* } else {
                alert("Hubo un error al enviar el formulario.");
            }*/
        } catch (error) {
            console.error("Error al enviar el formulario:", error);
            alert("Hubo un error al enviar el formulario.");
        }
    }

    // Ir al siguiente paso manualmente
    function goToNextStep(step) {
        showStep(step);
    }

    document.addEventListener("DOMContentLoaded", function () {
    // Establecer el paso inicial
        updateProcessStep(1);

    });
</script>