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

<?= $this->section('title') ?>
Gestionar
<?= $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') ?>
Gestionar solicitud <b><?=$formulario["nombre"] ?? 'desconocido'?></b> <br>
#<b class="text-primary"><?=$respuesta["uniqid"]?></b><br>Estado: <b class="text-dark"><?=ucfirst($respuesta["estado"])?></b>
<?= $this->endSection() ?>

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

<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>

<?php 
    if (!isset($show_gestion_form)) {
        ?> 
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Realizar gestión</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label">
                                        Tipo de gestión <i class="text-danger">*</i>
                                    </label>
                                    <select class="form-control" id="tipo_gestion" onchange="onTipoGestionChange()">
                                        <option value="gestion">Registrar Gestión</option>
                                        <option value="derivacion">Derivar a otro usuario</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3 d-none" id="grupo_usuario_asignado">
                                <div class="form-group">
                                    <label class="form-label">
                                        Derivar a usuario <i class="text-danger">*</i>
                                    </label>
                                    <select class="form-control form-select" id="usuario_asignado_id">
                                        <option value="">- Seleccione usuario -</option>
                                        <?php foreach ($usuarios as $u): ?>
                                            <option value="<?= $u['id'] ?>"> 
                                                <?= esc($u['nombre']) ?>  ( <?= esc($u['email']) ?>)
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>


                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label" for="#estado_respuesta_gestion">Estado de la solicitud <i class="text-danger">*</i></label>
                                    <select class="form-control" id="estado_respuesta_gestion" data-validate="required">
                                        <option value="">-Seleccione estado-</option>
                                        <?php 
                                            foreach (ESTADOS_RESPUESTA as $key => $estado) {
                                            ?>
                                                <option value="<?=$estado["estado"]?>"
                                                    <?=$estado["estado"]==$respuesta["estado"] ? 'selected': ''?>
                                                ><?=$estado["titulo"]?></option>
                                            <?php
                                            }
                                        ?>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12 mb-3">
                                <div class="form-group">
                                    <label class="form-label" for="#comentarios_gestion">Comentarios</label>
                                    <textarea class="form-control" rows="5" id="comentarios_gestion"></textarea>
                                </div>
                            </div>

                            <div class="col-md-12 mb-3">
                                <div class="form-group">
                                    <label class="form-label">
                                        Adjuntar archivos
                                    </label>
                                    <div id="contenedor-archivos">
                                        <div class="input-group mb-2 archivo-item">
                                            <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>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-outline-primary btn-sm mt-2" onclick="agregarArchivo()">
                                        <i class="fa-solid fa-plus"></i> Agregar otro archivo
                                    </button>
                                </div>
                            </div>


                            <div class="col-md-12 mb-3">
                                <button class="btn btn-primary" onclick="enviarGestion();">Enviar gestión</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <?php
    }
?>


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Historial de Gestiones</h5>
            </div>
            <div class="card-body">
                <div class="gestiones-render">
                    <?=view('modulos/gestiones_component',["gestiones"=>$gestiones])?>
                </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() ?>
