<?php 
    $formulario = get_formulario_by_id($formulario_id);
    
    if(isset($item) && isset($item_id)){
        $respuesta = get_respuesta_by_item($item,$item_id);
    }
    if (isset($respuesta_id)) {
        $respuesta = get_respuesta($respuesta_id);
    }
    if (empty($respuesta)) {
        $respuesta = [
            "data" => json_encode([]),
            "uniqid" => uniqid(), // evitar errores al guardar
        ];
    }

    if (!isset($formulario)) {
        ?>
        <div
            class="alert alert-danger"
            role="alert"
        >
            <strong>Atención</strong> No se encontró el formulario
        </div>
        
        <?php
    }
?>
<div id="renderForm"></div>

<link rel="stylesheet" href="<?= site_url('assets/css/formio.full.min.css')?>"></link>
<script src="<?= site_url('assets/js/formio.full.min.js')?>"></script>
<?php 
$respuestaData = [];



if (!empty($respuesta["data"])) {
    $decoded = json_decode($respuesta["data"], true);
    if (json_last_error() === JSON_ERROR_NONE) {
        $respuestaData = $decoded ?: [];
    }
}



?>
<script>
    const preloadData = <?= json_encode($respuestaData) ?>;

    const schema = <?=$formulario["esquema"] ?? '{}'?>;

    const translations_es = <?=FORMIO_TRADUCCION?>;

    // Wizard o formulario normal
    const displayMode = "<?=$formulario["pasos"] == 1 ? 'wizard' : 'form'?>";

    const options = {
        language: 'es',
        i18n: { es: translations_es },
        hooks: {
            beforeSubmit: function(submission, next) {
                console.log("Datos a enviar:", submission.data);
                next();
            }
        },
        buttonSettings: {
            showCancel: false
        },
           noAlerts: true,
        breadcrumbSettings: {
            clickable: false   // ← desactiva los chips
        },
        
    };

    // IMPORTANTE: forzar el tipo del display según parámetro
    schema.display = displayMode;


    // Renderizar formulario
    Formio.createForm(
        document.getElementById('renderForm'),
        schema,
        options
       
    ).then(function(form) {
        form.submission = { data: preloadData };
          // Cuando se cambia de página (siguiente)
        form.on('nextPage', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // Si quieres que pase lo mismo al retroceder
        form.on('prevPage', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        console.log("Formulario listo para completar");
        form.on('file.remove', (fileInfo, component) => {
            console.log("Eliminado solo del cliente");
            // Cancela URL del delete
            fileInfo.url = null;
            return false; // evita el DELETE
        });
        //levanta errores en swal
        
        // Evento cuando se completa
        form.on('submit', function(submission) {
            console.log("Formulario enviado:", submission.data);
            // Enviar datos al servidor
            var formData = new FormData();
            formData.append('json', JSON.stringify(submission.data));
            <?php 
                if (isset($item)) {
                   ?>
                    formData.append('item', '<?=$item?>');
                   <?php
                }
                 if (isset($item_id)) {
                    ?>
                    formData.append('item_id', '<?=$item_id?>');
                   <?php
                }
                 if (isset($formulario_id)) {
                    ?>
                    formData.append('formulario_id', '<?=$formulario_id?>');
                   <?php
                }
                 if (isset($respuesta_id)) {
                    ?>
                    formData.append('respuesta_id', '<?=$respuesta_id?>');
                   <?php
                }
            ?>
            loading();
            var opcionesFetch = {
                method: 'POST',
                body: formData,
            };
            var url='<?=base_url()?>modulos/save_response';
            
            fetch(url, opcionesFetch)
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                if (data.success) {
                    // Add your success logic here
                    stopLoading();
                    Swal.fire({
                        icon: 'success',
                        title: 'Correcto',
                        text: data.message
                    }).then((okay) => {
                        document.location.reload();
                    })
                } else {
                    stopLoading();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Error',
                        text: data.message
                    })
                }
            })
            .catch(function(error) {
                stopLoading();
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error
                })
            });

        });

       
    }).catch(err => console.error(err));

</script>