<?= $this->extend('layouts/master') ?>

<?= $this->section('title') ?>
Editar Módulo
<?= $this->endSection() ?>

<?= $this->section('css') ?>
<style>
    .fab-guardar {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 1080;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: 14px 18px;
        border: 0;
        border-radius: 999px;
        font-weight: 700;
        letter-spacing: .3px;
        color: #fff;
        background: linear-gradient(135deg, #ff5b5b, #ff8f1f);
        box-shadow: 0 10px 24px rgba(255, 91, 91, .35), 0 6px 12px rgba(0, 0, 0, .12);
        cursor: pointer;
        transition: transform .12s 
    ease, box-shadow .12s 
    ease, filter .12s 
    ease;
    }
</style>
<?= $this->endSection() ?>


<?= $this->section('pageContent') ?>
<div class="card mb-3">
    <div class="card-body">
        <h5 class="card-title fw-semibold mb-4">Editar Módulo</h5>

        <div class="row">
            <div class="col-md-12 mb-3">
                <label class="form-label" for="nombre">Nombre</label>
                <input type="text" class="form-control" name="nombre" id="nombre"
                value="<?= $formulario['nombre'] ?>"
                    data-validate="required,min-length" data-min-length="3">
            </div>


            <div class="col-md-12 mb-3">
                <label class="form-label require" for="activo">Activo</label>
                <select class="form-select" name="activo" id="activo" 
                        data-validate="required">
                    <option value="" selected disabled>Seleccione…</option>
                    <option value="1" <?=$formulario["activo"]==1 ? 'selected' : ''?>>Sí</option>
                    <option value="0" <?=$formulario["activo"]==0 ? 'selected' : ''?>>No</option>
                </select>
            </div>

            <div class="col-md-12 mb-3">
                <label class="form-label require" for="tipo_derivacion_inicial">Tipo de derivación inicial</label>
                 <select class="form-select" name="tipo_derivacion_inicial" id="tipo_derivacion_inicial" 
                        data-validate="required">
                    <option value="" selected>Seleccione…</option>
                    <?php 
                        foreach (TIPO_DERIVACION_MODULOS as $key => $value) {
                           ?>
                            <option value="<?= $value["value"] ?>" <?=$formulario["tipo_derivacion_inicial"]==$value["value"] ? 'selected' : ''?>><?= $value["name"] ?></option>
                           <?php
                        }
                    ?>
                </select>
            </div>

            <div class="col-md-12 mb-3" style="<?=$formulario["tipo_derivacion_inicial"]!='usuario_especifico' ? 'display: none;' : ''?>" id="div_usuario_derivacion_inicial">
                <label class="form-label" for="usuario_derivacion_inicial">Seleccione un usuario para la derivación inicial</label>
                <select class="form-select" id="usuario_derivacion_inicial" data-validate="required">
                    <option value="" selected>Seleccione…</option>
                    <?php 
                        foreach ($usuarios as $usuario) {
                           ?>
                            <option value="<?= $usuario["id"] ?>" <?=$formulario["usuario_derivacion_inicial"]==$usuario["id"] ? 'selected' : ''?>><?= $usuario["nombre"]?></option>
                           <?php
                        }
                    ?>
                </select>
            </div>

            <div class="col-md-12 mb-3"
                style="<?=$formulario["tipo_derivacion_inicial"]!='perfil_especifico' ? 'display: none;' : ''?>"
                id="div_perfil_derivacion_inicial">

                <label class="form-label" for="perfil_derivacion_inicial">
                    Seleccione un perfil para la derivación inicial
                </label>

                <select class="form-select" id="perfil_derivacion_inicial" data-validate="required">
                    <option value="" selected>Seleccione…</option>
                    <?php foreach ($perfiles as $perfil): ?>
                        <option value="<?= $perfil['id'] ?>"
                            <?= $formulario["perfil_derivacion_inicial"] == $perfil['id'] ? 'selected' : '' ?>>
                            <?= $perfil['nombre'] ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>


            <div class="col-md-12 mb-3">
                 <button class="btn btn-primary" onclick="save();">Guardar</button>
            </div>
           
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title fw-semibold mb-4">Configurar</h5>

        <div class="row">
            <div class="col-md-12 mb-3">
                <div id="designer"></div>
            </div>

           
        </div>
    </div>
</div>

<button id="btn-guardar-version" type="button" class="fab-guardar" aria-label="Guardar versión">
    <i class="bi bi-cloud-check-fill" aria-hidden="true"></i>
    <span class="fab-text">GUARDAR VERSIÓN</span>
</button>
<?= $this->endSection() ?>
<?= $this->section('pageTitle') ?>
Configurar Módulo
<?= $this->endSection() ?>
<?= $this->section('scripts') ?>

<link rel="stylesheet" href="<?= site_url('assets/css/formio.full.min.css')?>"></link>
<script src="<?= site_url('assets/js/formio.full.min.js')?>"></script>
<script>

    let listadoValidacion = [
        '#nombre',
        '#activo',
        '#tipo_derivacion_inicial'
    ];

    $('#tipo_derivacion_inicial').change(function () {
        const tipo = $(this).val();

        // Usuario específico
        if (tipo === 'usuario_especifico') {
            $('#div_usuario_derivacion_inicial').show();
            $('#div_perfil_derivacion_inicial').hide();

            if (!listadoValidacion.includes('#usuario_derivacion_inicial')) {
                listadoValidacion.push('#usuario_derivacion_inicial');
            }
            listadoValidacion = listadoValidacion.filter(i => i !== '#perfil_derivacion_inicial');

        // Perfil específico
        } else if (tipo === 'perfil_especifico') {
            $('#div_perfil_derivacion_inicial').show();
            $('#div_usuario_derivacion_inicial').hide();

            if (!listadoValidacion.includes('#perfil_derivacion_inicial')) {
                listadoValidacion.push('#perfil_derivacion_inicial');
            }
            listadoValidacion = listadoValidacion.filter(i => i !== '#usuario_derivacion_inicial');

        // Ninguno
        } else {
            $('#div_usuario_derivacion_inicial').hide();
            $('#div_perfil_derivacion_inicial').hide();

            listadoValidacion = listadoValidacion.filter(i =>
                i !== '#usuario_derivacion_inicial' &&
                i !== '#perfil_derivacion_inicial'
            );
        }
    });


    function save(){
        if (validator(listadoValidacion)) {
            var formData = new FormData();
   
            formData.append('nombre', document.getElementById('nombre').value);
            formData.append('tipo_derivacion_inicial', document.getElementById('tipo_derivacion_inicial').value);
            formData.append('activo', document.getElementById('activo').value);
            formData.append('usuario_derivacion_inicial', document.getElementById('usuario_derivacion_inicial').value);
            formData.append(
                'perfil_derivacion_inicial',
                document.getElementById('perfil_derivacion_inicial')?.value ?? null
            );

            loading();
            var opcionesFetch = {
                method: 'POST',
                body: formData,
            };
            var url='<?=site_url()?>modulos/update/<?= $formulario["id"]?>';
            
            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) => {
                        window.location.href = '<?= site_url('modulos') ?>';
                    })
                } else {
                    stopLoading();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Error',
                        text: data.message
                    })
                }
            })
            .catch(function(error) {
                stopLoading();
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error
                })
            });
        }
    }
</script>
<script type='text/javascript'>

        // Luego carga el builder 
        // Traducciones que tú defines
        const translations_es = <?=FORMIO_TRADUCCION?>;
        let builderInstance = null;
        Formio.builder(
            document.getElementById('designer'),
            <?=$formulario["esquema"]!=null ?  $formulario["esquema"]: '{}'?>,  // tu formulario
            {
            
                language: 'es',
                i18n: { es: translations_es },
                builder: {
            custom: {
                title: 'Personalizados',
                default: true,
                components: {
                filecustom: {
                    title: 'Archivo (Subida URL)',
                    key: 'filecustom',
                    icon: 'file',
                    schema: {
                    type: 'file',
                    label: 'Archivo',
                    key: 'archivo',
                    storage: 'url',
                    url: '<?=base_url()?>formio/upload',
                    fileKey: 'file'
                    }
                },
                rut: {
                    title: 'RUT',
                    key: 'rut',
                    icon: 'id-card',
                    schema: {
                    type: 'textfield',
                    label: 'RUT',
                    key: 'rut',
                    inputType: 'text',
                    validate: {
                        required: true,
                        custom: "valid=validarRut(input) ? true : 'RUT inválido'",
                        customPrivate: false
                    }
                    }
                }
                },
                
            }
            }
            }
        ).then(builder => {
            builderInstance = builder;

            //CORRECCIÓN ACORDEONES EN BOOTSTRAP 4
            document.addEventListener('click', function (ev) {
            const header = ev.target.closest('.form-builder-panel .card-header');
            if (!header) return;
            if (ev.target.closest('[data-bs-toggle="collapse"]')) return;

            const panel = header.closest('.form-builder-panel');
            if (!panel) return;
            const collapseEl = panel.querySelector('.accordion-collapse');
            if (!collapseEl) return;

            // Detecta Bootstrap versión
            const isBootstrap5 = typeof bootstrap !== 'undefined' && bootstrap.Collapse && typeof bootstrap.Collapse.getOrCreateInstance === 'function';

            if (isBootstrap5) {
                // Bootstrap 5
                const bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseEl, { toggle: false });
                bsCollapse.toggle();
            } else if (typeof $ !== 'undefined' && typeof $.fn.collapse === 'function') {
                // Bootstrap 4
                $(collapseEl).collapse('toggle');
            }
            });
            //END CORRECCIÓN ACORDEONES EN BOOTSTRAP 4
        });
      
        document.addEventListener('DOMContentLoaded', function(){
        const btn = document.getElementById('btn-guardar-version');
        if (!btn) return;

        btn.addEventListener('click', function(){
            // Si no tienes SweetAlert, reemplaza por confirm()
            if (typeof Swal === 'undefined') {
            if (confirm('¿Estás seguro de guardar esta versión del esquema?')) {
                guardarEsquema();
            }
            return;
            }

            Swal.fire({
            title: 'Guardar versión',
            text: '¿Estás seguro de guardar esta versión del esquema?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, guardar',
            cancelButtonText: 'Cancelar',
            reverseButtons: true,
            confirmButtonColor: '#28a745'
            }).then((result) => {
            if (result.isConfirmed) {
                guardarEsquema();
            }
            });
        });
        });

        function guardarEsquema() {
            loading();
            const esquema = builderInstance.schema;
            const formData = new FormData();
            formData.append('esquema', JSON.stringify(esquema));

            fetch('<?=site_url('modulos/api_save_esquema/'.$formulario["id"])?>', {
                method: 'POST',
                body: formData
            })
            .then(resp => resp.json())
            .then(data => {
            stopLoading();
            Swal.fire({
                icon:'success',
                title:'Correcto',
                text:'Esquema almacenado con éxito'
            })
            });
        }

        function saveConfig(){
            if (validator(["#nombre_form"])) {
                var formData = new FormData();
                formData.append('nombre', $('#nombre_form').val());
                formData.append('activo', $('#activo').is(':checked') ? 1 : 0);
                formData.append('pasos', $('#pasos').is(':checked') ? 1 : 0);
                formData.append('id', '<?=$formulario["id"]?>');
                loading();
                var opcionesFetch = {
                    method: 'POST',
                    body: formData,
                };
                var url='<?=base_url()?>formularios/api_save_config';
                
                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) => {
                            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
                    })
                });
            }
        }

    </script>
  
<?= $this->endSection() ?>