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

<?= $this->section('title') ?>
Historial
<?= $this->endSection() ?>

<?= $this->section('css') ?>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<?= $this->endSection() ?>

<?= $this->section('pageTitle') ?>
Historial de cambios #<?=$respuesta["id"]?><br>

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

<?= $this->section('pageContent') ?>

<button 
class="btn btn-primary mb-3"
onclick="history.back()">⬅ Volver</button>


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Información</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-bordered table-stripped" style="">
                            <?php 
                                $usuario_creador=json_decode($respuesta["usuario_creador"],true);
                            ?>
                            <tr>
                                <td>
                                    <b class="">Organización</b>
                                </td>
                                <td>
                                    <?=$organizacion["nombre"]?>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b class="">ID Usuario creador</b>
                                </td>
                                <td>
                                    <?=$usuario_creador["id"]?>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b class="">Nombre usuario</b>
                                </td>
                                <td>
                                    <?=$usuario_creador["nombre"]?>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b class="">Email Usuario creador</b>
                                </td>
                                <td>
                                    <?=$usuario_creador["email"]?>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b class="">Fecha de modificación</b>
                                </td>
                                <td>
                                    <?=date('d-m-Y H:i', strtotime($respuesta["fecha_modificacion"]))?>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-bordered table-stripped" style="">
                           
                            <tr>
                                <td>
                                    <b class="">Organización ID</b>
                                </td>
                                <td>
                                    <?=$organizacion["id"]?>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b class="">ID Respuesta original</b>
                                </td>
                                <td>
                                    <?=$respuesta["respuesta_id"]?>
                                </td>
                            </tr>
                                <tr>
                                <td>
                                    <b class="">ID Respuesta historial</b>
                                </td>
                                <td>
                                    <?=$respuesta["id"]?>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                
            </div>
        </div>

    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Detalles de la solicitud</h5>
            </div>
            <div class="card-body">
                <div class="accordion" id="accordionFormulario">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingFormulario">
                            <button class="accordion-button collapsed" type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapseFormulario"
                                aria-expanded="false"
                                aria-controls="collapseFormulario">
                                📄 Click para expandir formulario
                            </button>
                        </h2>

                        <div id="collapseFormulario"
                            class="accordion-collapse collapse"
                            aria-labelledby="headingFormulario"
                            data-bs-parent="#accordionFormulario">

                            <div class="accordion-body">
                                <!-- AQUÍ VA TU FORM.IO -->
                                <div class="form-render"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>


<?= $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>
    <?php
    $formSchema = json_decode($formulario['esquema'] ?? '', true);
    $formData   = json_decode($respuesta['data'], true);
    ?>
    document.addEventListener("DOMContentLoaded", function () {

        const schema = <?= json_encode($formSchema) ?>;
        const data   = <?= json_encode($formData) ?>;

        Formio.createForm(document.querySelector('.form-render'), schema, {
            readOnly: true,
            renderMode: 'html'
        }).then(function(form) {
            form.submission = {
                data: data
            };

            // Deshabilita todo (extra seguridad)
            form.disabled = true;
        });

    });
</script>

<script>
function onTipoGestionChange() {
    const tipo   = document.getElementById('tipo_gestion').value;
    const estado = document.getElementById('estado_respuesta_gestion');
    const grupoUsuario = document.getElementById('grupo_usuario_asignado');

    if (tipo === 'derivacion') {
        estado.value = 'pendiente';
        estado.setAttribute('disabled', 'disabled');
        grupoUsuario.classList.remove('d-none');
    } else {
        estado.removeAttribute('disabled');
        grupoUsuario.classList.add('d-none');
        document.getElementById('usuario_asignado_id').value = '';
    }
}
</script>

<script>
function agregarArchivo() {
    const contenedor = document.getElementById('contenedor-archivos');

    const div = document.createElement('div');
    div.classList.add('input-group', 'mb-2', 'archivo-item');

    div.innerHTML = `
        <input type="file" class="form-control archivo-input">
        <button class="btn btn-outline-danger" type="button" onclick="eliminarArchivo(this)">
            <i class="fa-solid fa-trash"></i>
        </button>
    `;

    contenedor.appendChild(div);
}

function eliminarArchivo(btn) {
    const item = btn.closest('.archivo-item');
    if (item) item.remove();
}
</script>


<script>
function enviarGestion(){
    if (validator(["#estado_respuesta_gestion"])) {
        const tipo   = document.getElementById('tipo_gestion').value;
        const estado = document.getElementById('estado_respuesta_gestion').value;
        const comentarios = document.getElementById('comentarios_gestion').value;
        
        const usuarioAsignado = document.getElementById('usuario_asignado_id')?.value;

        const archivosInputs = document.querySelectorAll('.archivo-input');

      

        // Validaciones
        let campos = ["#comentarios_gestion"];

        if (tipo === 'gestion') {
            campos.push("#estado_respuesta_gestion");
        }

        if (tipo === 'derivacion' && !usuarioAsignado) {
            alert('Debe seleccionar un usuario para derivar.');
            return;
        }


        const formData = new FormData();

        formData.append('respuesta_id', '<?= $respuesta["id"] ?>');
        formData.append('tipo', tipo);
        formData.append('estado', estado);
        formData.append('comentarios', comentarios);

        if (tipo === 'derivacion') {
            formData.append('usuario_asignado_id', usuarioAsignado);
        }

        // Archivos
        archivosInputs.forEach(input => {
            if (input.files.length > 0) {
                formData.append('archivos[]', input.files[0]);
            }
        });
        loading();
        fetch('<?= site_url("modulos/guardar_gestion") ?>', {
            method: 'POST',
            body: formData,
        })
        .then(r => r.json())
        .then(resp => {
            stopLoading();
            if (resp.success) {
                                    
                Swal.fire({
                    title: 'Gestión guardada',
                    text: 'La gestión ha sido guardada correctamente.',
                    icon: 'success',
                    confirmButtonText: 'Aceptar'
                }).then(() => {
                    // Recargar la página
                   window.location.href='<?= site_url("modulos/bandeja") ?>'; 
                });
            } else {
                Swal.fire({
                    title: 'Error',
                    text: resp.message || 'Ha ocurrido un error al guardar la gestión.',
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                });
            }
        })
        .catch(err => {
            stopLoading();
            console.error(err);
            Swal.fire({
                title: 'Error',
                text: 'Ha ocurrido un error al guardar la gestión.',
                icon: 'error',
                confirmButtonText: 'Aceptar'
            });
        });
    }
}
</script>

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