<?php if (!empty($_SESSION['created_process'])): ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            Swal.fire({
                title: "¡Trámite creado exitosamente!",
                html: `<strong>N° Expediente:</strong> <?= $_SESSION['created_process']['num_exped'] ?><br>
                       <strong>Procedimiento:</strong> <?= $_SESSION['created_process']['procedure'] ?><br>
                       <strong>Asunto:</strong> <?= $_SESSION['created_process']['subject'] ?><br>
                       <strong>Folios:</strong> <?= $_SESSION['created_process']['folios'] ?><br>
                       <strong>Clave:</strong> <?= $_SESSION['created_process']['key'] ?><br>
                       <strong>Fecha de Ingreso:</strong> <?= $_SESSION['created_process']['entry_date'] ?><br>`,
                icon: "success",
                confirmButtonText: "Aceptar",
            }).then((result) => {
                if (result.isConfirmed) {
                    <?php if ($_SESSION['role'] === 'UGEL' || $_SESSION['role'] === 'ADMIN'): ?>
                        Swal.fire({
                            title: "¿Deseas imprimir el voucher?",
                            icon: "question",
                            showCancelButton: true,
                            confirmButtonText: "Sí, Imprimir",
                            cancelButtonText: "No, más tarde",
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = '<?= BASE_HREF . 'voucher/' . $_SESSION['created_process']['id'] . '/print' ?>';
                            }
                        });
                    <?php endif; ?>
                }
            });
        });
    </script>
    <?php unset($_SESSION['created_process']); ?>
<?php endif; ?>



<h2 class="page-title">Crear Trámite</h2>

<p>
    Estimada/o ciudadana/o:
</p>

<p>
    Bienvenida/o a la Mesa de Partes Digital de la UGEL Corongo, esta plataforma facilitará la presentación de sus documentos de forma digital sin necesidad de la presentación física del documento.
</p>

<p>
    El horario de atención de la Mesa de Partes Digital es de lunes a domingo, las 24 horas del día.
</p>

<p>
    Para el cómputo de plazos, estos serán calculados dependiendo de la hora de presentación:
</p>

<ul>
    <li>Los documentos presentados entre las 00:00 y las 23:59 horas de un día hábil, se consideran presentados en mismo día hábil.</li>
    <li>Los documentos presentados los sábados, domingos y feriados o cualquier otro día inhábil, se considerarán recibidos al día hábil siguiente de su presentación.</li>
</ul>

<p>
    Para iniciar su trámite debe llenar el siguiente <strong>FORMULARIO</strong>, siguiendo las indicaciones de la <strong>GUÍA PARA LA PRESENTACIÓN DE DOCUMENTOS ONLINE</strong>.
</p>

<p>
    Los documentos deben ser presentados debidamente firmados y serán recibidos bajo el principio de presunción de veracidad establecido en la Ley Nº 27444, Ley del Procedimiento Administrativo General, por lo que es importante señalar que, como USUARIA/O de la Mesa de Partes Digital de la UGEL Corongo, usted es responsable de la información que consigne en el presente <strong>FORMULARIO</strong>.
</p>





<div class="row">
    <div class="col-md-12">
        <div class="card shadow mb-4">
            <div class="card-header">
                <strong class="card-title">Formulario</strong>
            </div>
            <div class="card-body">
                <form id="formTramite" action="<?= BASE_ACTION ?>processes" method="POST" enctype="multipart/form-data">

                    <?php if ($_SESSION['role'] !== 'COMUNITY'): ?>

                        <h5 class="mb-3">Administrado</h5>
                        <div class="form-group">
                            <div class="d-flex align-items-center justify-content-between">
                                <label class="mb-0">Modo de búsqueda</label>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="searchModeSwitch">
                                    <label class="custom-control-label" for="searchModeSwitch">Nombres / Razón Social</label>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="dniHidden" name="dni">
                        <input type="hidden" id="rucHidden" name="ruc">

                        <div class="form-group">
                            <label id="dniLabel" for="dni">DNI/RUC</label>
                            <div class="input-group">
                                <input type="text" id="dni" class="form-control" placeholder="Ingrese el número de documento" required onkeydown="detectarEnter(event)">
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-info" onclick="buscarAdministrado()">Buscar</button>
                                </div>
                            </div>
                            <small id="searchHelper" class="form-text text-muted">Use 8 dígitos para DNI o 11 dígitos para RUC.</small>
                        </div>

                        <div id="mensajeNoEncontrado" class="alert alert-warning mt-2" style="display: none;">
                            Usuario no encontrado, por favor ingrese sus datos.
                        </div>

                        <div id="resultadosBusqueda" class="mt-3" style="display:none;"></div>

                        <div id="datosAdministrado" style="display: none;">

                            <div id="personaContainer" style="display:none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="paternal_surname">Apellido Paterno</label>
                                            <input type="text" name="paternal_surname" class="form-control" id="paternal_surname" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="maternal_surname">Apellido Materno</label>
                                            <input type="text" name="maternal_surname" class="form-control" id="maternal_surname" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="name">Nombre</label>
                                    <input type="text" id="name" class="form-control" readonly>
                                </div>
                            </div>

                            <!-- 🔹 Contenedor de persona jurídica (RUC) -->
                            <div id="empresaContainer" style="display:none;">
                                <div class="form-group">
                                    <label for="ruc">RUC</label>
                                    <input type="text" id="ruc" class="form-control" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="company_name">Razón Social</label>
                                    <input type="text" id="company_name" class="form-control" readonly>
                                </div>
                            </div>

                            <!-- 🔹 Campos comunes -->
                            <div class="form-group">
                                <label for="phone">Teléfono</label>
                                <input type="text" id="phone" class="form-control" readonly>
                            </div>
                            <div class="form-group">
                                <label for="email">Correo Electrónico</label>
                                <input type="email" id="email" class="form-control" readonly>
                            </div>
                        </div>


                        <button type="button" class="btn btn-success mt-2" id="btnRegistrar" style="display: none;" onclick="mostrarFormularioRegistro()">Ingresar Datos de Usuario</button>

                    <?php elseif ($_SESSION['role'] === 'COMUNITY'): ?>

                        <input type="hidden" name="dni" value="<?= $user->dni ?>">

                    <?php endif; ?>

                    <h5 class="mb-3 mt-4">Detalles de Trámite</h5>
                    <div class="form-group">
                        <label for="procedure_id">Procedimiento</label>
                        <select id="procedure_id" name="procedure_id" class="form-control" required>
                            <option value="">Seleccione un Procedimiento</option>
                            <?php foreach ($procedures as $procedure) : ?>
                                <option value="<?= $procedure->id ?>"><?= $procedure->description ?></option>
                            <?php endforeach; ?>
                            <option value="other">OTROS</option>
                        </select>
                    </div>

                    <div class="form-group" id="other_procedure_container" style="display:none;">
                        <label for="other_procedure">Especifique el procedimiento</label>
                        <input type="text" id="other_procedure" name="other_procedure" class="form-control" placeholder="Ingrese el procedimiento">
                    </div>

                    <div class="form-group">
                        <label for="folios">Folios</label>
                        <input type="number" name="folios" class="form-control" id="folios" required min="0">
                    </div>
                    <div class="form-group">
                        <label for="subject">Asunto</label>
                        <textarea class="form-control" name="subject" id="subject" rows="4" required></textarea>
                    </div>

                    <div class="form-group">
                        <label for="rationale">Fundamentación</label>
                        <textarea class="form-control" name="rationale" id="rationale" rows="4" required></textarea>
                    </div>

                    <?php if ($_SESSION['role'] !== 'COMUNITY') : ?>
                        <h5 class="mb-3 mt-4">Destino</h5>
                        <div class="form-group">
                            <label>Área</label>
                            <input type="text" id="area" name="area" class="form-control" readonly>
                        </div>

                        <div class="form-group">
                            <label>Tipo de Grupo</label>
                            <input type="text" id="group_type" name="group_type" class="form-control" readonly>
                        </div>

                        <div class="form-group">
                            <label>Grupo</label>
                            <input type="text" id="group" name="group" class="form-control" readonly>
                        </div>

                        <div class="form-group">
                            <label>Subgrupo</label>
                            <input type="text" id="subgroup" class="form-control" readonly>
                        </div>
                    <?php endif; ?>

                    <h5 class="mb-3 mt-4">Archivos Adjuntos</h5>
                    <div class="form-group">
                        <label for="file-upload" class="form-label">Subir Archivos <small class="text">(Solo PDF, máx. 5 MB)</small></label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="file-upload" name="files[]" multiple accept="application/pdf">
                            <label class="custom-file-label" for="file-upload">Seleccionar archivos</label>
                        </div>
                        <ul id="file-list" class="list-group mt-2"></ul>
                    </div>

                    <div class="buttons-container d-flex justify-content-start mt-3">
                        <a href="<?= BASE_HREF ?>areas" class="btn btn-secondary mr-2">Cancelar</a>
                        <button type="submit" class="btn btn-primary" id="btnGuardar">Guardar</button>
                    </div>
                </form>

                <!-- Modal de registro -->


                <div class="modal fade" id="modalRegistro" tabindex="-1" aria-labelledby="modalRegistroLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalRegistroLabel">Registrar Nuevo Usuario</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>

                            <div class="modal-body">
                                <form id="formRegistro" onsubmit="return registrarUsuario(event)">
                                    <input type="hidden" id="dniRegistro">

                                    <!-- 🔹 Campos para persona natural -->
                                    <div id="camposPersona">
                                        <div class="form-group">
                                            <label for="paternalSurnameRegistro">Apellido Paterno</label>
                                            <input type="text" id="paternalSurnameRegistro" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label for="maternalSurnameRegistro">Apellido Materno</label>
                                            <input type="text" id="maternalSurnameRegistro" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label for="nameRegistro">Nombre</label>
                                            <input type="text" id="nameRegistro" class="form-control">
                                        </div>
                                    </div>

                                    <!-- 🔹 Campos para persona jurídica -->
                                    <div id="camposEmpresa" style="display: none;">
                                        <div class="form-group">
                                            <label for="razonSocialRegistro">Razón Social</label>
                                            <input type="text" id="razonSocialRegistro" class="form-control">
                                        </div>

                                        <!-- Nuevo campo RUC GLOBAL -->
                                        <div class="form-group">
                                            <label for="rucGlobalRegistro">RUC GLOBAL</label>
                                            <input type="text" id="rucGlobalRegistro" class="form-control" maxlength="11" placeholder="Ingrese RUC de la entidad SUPREMA">
                                            <div class="form-text text-muted">Ingrese el RUC de la Entidad.</div>
                                        </div>

                                    </div>

                                    <!-- 🔹 Campos comunes -->
                                    <div class="form-group">
                                        <label for="phoneRegistro">Teléfono</label>
                                        <input type="text" id="phoneRegistro" class="form-control" maxlength="9" required>
                                        <div class="form-text text-muted">Ingrese solo el número sin el código de país. Ejemplo: 987654321</div>
                                    </div>
                                    <div class="form-group">
                                        <label for="emailRegistro">Correo Electrónico</label>
                                        <input type="email" id="emailRegistro" class="form-control" required>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                                        <button type="submit" class="btn btn-primary">Guardar Datos</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

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


<script>
    $(document).ready(function() {
        $('#procedure_id').select2({
            theme: 'bootstrap4',
            placeholder: 'Seleccione un Procedimiento',
            allowClear: true,
            width: '100%'
        });

        // Evento change compatible con Select2
        $('#procedure_id').on('change', function() {
            let selectedId = $(this).val();

            const otherContainer = $('#other_procedure_container');
            const otherInput = $('#other_procedure');

            if (selectedId === 'other') {
                otherContainer.show();
                otherInput.prop('required', true);

                $('#area').val('');
                $('#group_type').val('');
                $('#group').val('');
                $('#subgroup').val('');
                return;
            }

            otherContainer.hide();
            otherInput.prop('required', false).val('');

            if (!selectedId) {
                resetFields();
                return;
            }

            fetch(BASE_HREF + `get-procedure-details?procedure_id=${selectedId}`)
                .then(response => response.json())
                .then(procedure => {
                    if (procedure.error) {
                        console.error(procedure.error);
                        return;
                    }

                    $('#area').val(procedure.area ? procedure.area.description : '');
                    $('#group_type').val(procedure.groupType ? procedure.groupType.description : '');
                    $('#group').val(procedure.group ? procedure.group.description : '');
                    $('#subgroup').val(procedure.subgroup ? procedure.subgroup.description : '');
                })
                .catch(error => console.error("Error al obtener detalles del procedimiento:", error));
        });


        function resetFields() {
            $('#area, #group_type, #group, #subgroup').val('');
        }
    });
</script>

<script>
    function detectarEnter(event) {
        if (event.key === "Enter") {
            event.preventDefault();
            buscarAdministrado();
        }
    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {

        // Marcar campos obligatorios con asterisco
        document.querySelectorAll("input[required], select[required], textarea[required]").forEach(function(input) {
            let label = document.querySelector(`label[for="${input.id}"]`);
            if (label && !label.innerHTML.includes("*")) {
                label.innerHTML += ' <span class="text-danger">*</span>';
            }
        });

        // Manejo de archivos
        let fileInput = document.getElementById("file-upload");
        let fileList = document.getElementById("file-list");

        fileInput.addEventListener("change", function(event) {
            fileList.innerHTML = "";

            let files = Array.from(event.target.files);
            let dt = new DataTransfer();

            files.forEach((file, i) => {
                const isPDF = file.type === "application/pdf";
                const isSizeValid = file.size <= 5 * 1024 * 1024;

                if (!isPDF || !isSizeValid) {
                    let msg = `El archivo "${file.name}" `;
                    if (!isPDF) msg += "no es un archivo PDF válido.";
                    else if (!isSizeValid) msg += "excede el tamaño máximo de 5MB.";
                    alert(msg);
                    return;
                }

                dt.items.add(file);

                // Crear ítem en la lista
                let listItem = document.createElement("li");
                listItem.classList.add("list-group-item", "d-flex", "justify-content-between", "align-items-center");
                listItem.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;

                let removeBtn = document.createElement("button");
                removeBtn.classList.add("btn", "btn-danger", "btn-sm");
                removeBtn.textContent = "X";
                removeBtn.onclick = function() {
                    removeFile(i);
                };

                listItem.appendChild(removeBtn);
                fileList.appendChild(listItem);
            });

            fileInput.files = dt.files;
        });

        function removeFile(indexToRemove) {
            let files = Array.from(fileInput.files);
            let dt = new DataTransfer();

            files.forEach((file, index) => {
                if (index !== indexToRemove) {
                    dt.items.add(file);
                }
            });

            fileInput.files = dt.files;
            fileInput.dispatchEvent(new Event("change")); // vuelve a actualizar la lista
        }

    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const switchEl = document.getElementById("searchModeSwitch");
        const dniLabel = document.getElementById("dniLabel");
        const inputEl = document.getElementById("dni");
        const helper = document.getElementById("searchHelper");

        function setModeUI() {
            if (switchEl.checked) {
                dniLabel.textContent = "Nombres / Razón Social";
                inputEl.placeholder = "Ingrese nombres, apellidos o razón social";
                helper.textContent = "La búsqueda admite coincidencias parciales, sin distinguir mayúsculas/minúsculas.";
            } else {
                dniLabel.textContent = "DNI/RUC";
                inputEl.placeholder = "Ingrese el número de documento";
                helper.textContent = "Use 8 dígitos para DNI o 11 dígitos para RUC.";
            }
        }

        switchEl.addEventListener("change", setModeUI);
        setModeUI();
    });
</script>

<script>
    document.getElementById('subject').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    document.getElementById('rationale').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    document.getElementById('nameRegistro').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    document.getElementById('paternalSurnameRegistro').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    document.getElementById('maternalSurnameRegistro').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    document.getElementById('emailRegistro').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    document.getElementById('other_procedure').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    document.getElementById('razonSocialRegistro').addEventListener('input', function(event) {
        event.target.value = event.target.value.toUpperCase();
    });
    // Validar que rucGlobal sea numérico si se ingresa
    document.getElementById('rucGlobalRegistro')?.addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '').slice(0, 11);
    });

    // document.getElementById('dni').addEventListener('input', function () {
    //     this.value = this.value.replace(/\D/g, '').slice(0, 8);
    // });
    document.getElementById('phoneRegistro').addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '').slice(0, 9);
    });
    document.getElementById("file").addEventListener("change", function() {
        var fileName = this.files[0].name;
        var label = document.querySelector(".custom-file-label");
        label.textContent = fileName;
    });
</script>

<script>
    function buscarAdministrado() {
        const switchEl = document.getElementById("searchModeSwitch");
        const value = document.getElementById("dni").value.trim();

        if (value === "") {
            alert("Ingrese un valor para buscar.");
            return;
        }

        // Modo nombres (sin cambios)
        if (switchEl.checked) {
            const url = BASE_HREF + "buscar-administrado-nombre?q=" + encodeURIComponent(value);
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (Array.isArray(data) && data.length > 0) {
                        renderResultsTable(data, {
                            mode: 'names'
                        });
                        document.getElementById("mensajeNoEncontrado").style.display = "none";
                    } else {
                        document.getElementById("mensajeNoEncontrado").style.display = "block";
                        const btnRegistrar = document.getElementById("btnRegistrar");
                        btnRegistrar.style.display = "block";
                        document.getElementById("dniRegistro").value = value;
                        let registroTipo = "empresa";
                        const onlyDigits = /^\d+$/;
                        if (onlyDigits.test(value) && value.length === 8) registroTipo = "natural";
                        else if (onlyDigits.test(value) && value.length === 11) registroTipo = "empresa";
                        else if (/[A-Za-z]/.test(value) || value.length > 8) registroTipo = "empresa-forzada";
                        btnRegistrar.dataset.registroTipo = registroTipo;
                    }
                })
                .catch(error => console.error("Error en la búsqueda por nombres:", error));
            return;
        }

        // Modo documento (switch OFF)
        const onlyDigits = /^\d+$/;
        if (!onlyDigits.test(value)) {
            alert("Ingrese solo números para DNI o RUC.");
            return;
        }

        if (value.length === 8) {
            const url = BASE_HREF + "buscar-administrado?dni=" + value;
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    // Aceptar dos formatos:
                    // 1) { exists: true, ... }  (forma antigua)
                    // 2) { type: 'single', item: { type: 'dni', ... } } (forma nueva)
                    if (data && data.exists) {
                        const persona = {
                            exists: true,
                            type: 'dni',
                            dni: data.dni || value,
                            name: data.name || '',
                            paternal_surname: data.paternal_surname || '',
                            maternal_surname: data.maternal_surname || '',
                            phone: data.phone || '',
                            email: data.email || ''
                        };
                        fillUserData(data);
                        document.getElementById("btnRegistrar").style.display = "none";
                        document.getElementById("mensajeNoEncontrado").style.display = "none";
                        return;
                    }

                    if (data && data.type === 'single' && data.item && data.item.type === 'dni') {
                        const it = data.item;
                        const persona = {
                            exists: true,
                            type: 'dni',
                            dni: it.dni || value,
                            name: it.name || '',
                            paternal_surname: it.paternal_surname || '',
                            maternal_surname: it.maternal_surname || '',
                            phone: it.phone || '',
                            email: it.email || ''
                        };
                        fillUserData(persona);
                        document.getElementById("btnRegistrar").style.display = "none";
                        document.getElementById("mensajeNoEncontrado").style.display = "none";
                        return;
                    }

                    // Si no hay coincidencia
                    document.getElementById("datosAdministrado").style.display = "none";
                    document.getElementById("mensajeNoEncontrado").style.display = "block";
                    document.getElementById("btnRegistrar").style.display = "block";
                })
                .catch(error => console.error("Error en la búsqueda por DNI:", error));
            return;
        }


        if (value.length === 11) {
            // RUC: nueva lógica (endpoint buscar-administrado?dni= devuelve type: single|multiple|none)
            const url = BASE_HREF + "buscar-administrado?dni=" + value;
            fetch(url)
                .then(response => response.json())
                .then(resp => {
                    if (!resp || resp.type === 'none') {
                        document.getElementById("datosAdministrado").style.display = "none";
                        document.getElementById("mensajeNoEncontrado").style.display = "block";
                        document.getElementById("btnRegistrar").style.display = "block";
                        return;
                    }

                    if (resp.type === 'single' && resp.item) {
                        // autocompletar con la empresa encontrada
                        fillUserData(Object.assign({
                            exists: true,
                            type: 'ruc'
                        }, resp.item));
                        document.getElementById("btnRegistrar").style.display = "none";
                        document.getElementById("mensajeNoEncontrado").style.display = "none";
                    } else if (resp.type === 'multiple' && Array.isArray(resp.items) && resp.items.length > 0) {
                        // mostrar tabla de ramas (solo company_name y ruc)
                        renderResultsTable(resp.items, {
                            mode: 'ruc',
                            total_count: resp.total_count
                        });
                        document.getElementById("mensajeNoEncontrado").style.display = "none";
                    } else {
                        document.getElementById("datosAdministrado").style.display = "none";
                        document.getElementById("mensajeNoEncontrado").style.display = "block";
                        document.getElementById("btnRegistrar").style.display = "block";
                    }
                })
                .catch(error => console.error("Error en la búsqueda por RUC:", error));
            return;
        }

        alert("Ingrese un DNI (8 dígitos) o RUC (11 dígitos) válido.");
    }

    function renderResultsTable(items, options = {}) {
        const resultsEl = document.getElementById("resultadosBusqueda");
        resultsEl.style.display = "block";

        const mode = options.mode || 'auto';
        const totalCount = options.total_count || items.length;

        // Heurística para decidir si son personas (tienen name/paternal_surname)
        let isNamesMode = false;
        if (mode === 'names') {
            isNamesMode = true;
        } else if (mode === 'ruc') {
            isNamesMode = false;
        } else {
            // auto: si el primer item tiene 'name' o 'paternal_surname' lo tratamos como nombres
            const first = items[0] || {};
            isNamesMode = Boolean(first.name || first.paternal_surname || first.maternal_surname);
        }

        // Nota informativa si hay más de 5 (solo para modo ruc/ramas)
        let headerNote = '';
        if (!isNamesMode && totalCount > 5) {
            headerNote = `<div class="alert alert-info">Hay más de 5 ramas para mostrar, especificar qué empresa desea.</div>`;
        }

        // Construir tabla según modo
        let html = `${headerNote}<table class="table table-sm table-bordered"><thead><tr>`;
        if (isNamesMode) {
            html += `<th>Datos</th><th>Seleccionar</th>`;
        } else {
            html += `<th>Razón Social</th><th>RUC</th><th>Seleccionar</th>`;
        }
        html += `</tr></thead><tbody>`;

        items.forEach((item, index) => {
            if (isNamesMode) {
                const fullName = [item.name, item.paternal_surname, item.maternal_surname].filter(Boolean).join(" ");
                const datosStr = fullName || item.company_name || "";
                const extra = item.company_name ? " — " + item.company_name : "";
                html += `<tr>
                        <td>${escapeHtml(datosStr)}${escapeHtml(extra)}</td>
                        <td><button class="btn btn-primary btn-sm select-result-btn" data-index="${index}">Seleccionar</button></td>
                     </tr>`;
            } else {
                const company = item.company_name || '';
                const ruc = item.ruc || '';
                html += `<tr>
                        <td>${escapeHtml(company)}</td>
                        <td>${escapeHtml(ruc)}</td>
                        <td><button class="btn btn-primary btn-sm select-result-btn" data-index="${index}">Seleccionar</button></td>
                     </tr>`;
            }
        });

        html += `</tbody></table>`;
        resultsEl.innerHTML = html;

        // Añadir listeners a los botones (pasa el objeto real por índice)
        const buttons = resultsEl.querySelectorAll('.select-result-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', function() {
                const idx = parseInt(this.getAttribute('data-index'), 10);
                const item = items[idx];
                // Llamar a onSelectUser con el objeto original
                onSelectUser(item);
            });
        });
    }

    function onSelectUser(item) {
        if (!item) return;

        // Si viene con company_name o ruc => empresa
        if (item.company_name || item.ruc || item.rucglobal) {
            fillUserData({
                exists: true,
                type: "ruc",
                company_name: item.company_name || '',
                ruc: item.ruc || item.rucglobal || '',
                phone: item.phone || '',
                email: item.email || ''
            });
        } else {
            // Persona natural
            fillUserData({
                exists: true,
                type: "dni",
                dni: item.dni,
                name: item.name,
                paternal_surname: item.paternal_surname,
                maternal_surname: item.maternal_surname,
                phone: item.phone,
                email: item.email
            });
        }

        document.getElementById("resultadosBusqueda").style.display = "none";
        document.getElementById("mensajeNoEncontrado").style.display = "none";
    }

    function escapeHtml(str) {
        if (str === null || str === undefined) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function fillUserData(data) {
        const adminEl = document.getElementById("datosAdministrado");
        const personaEl = document.getElementById("personaContainer");
        const empresaEl = document.getElementById("empresaContainer");

        // Normalizar existencia
        const exists = Boolean(data && (data.exists === true || data.type === 'single' || data.type === 'multiple'));

        if (!exists) {
            adminEl.style.display = "none";
            document.getElementById("dniHidden").value = "";
            document.getElementById("rucHidden").value = "";
            return;
        }

        adminEl.style.display = "block";

        // Determinar tipo: preferir item.type si existe, sino usar data.type o data.typeRoot
        const item = data.item || null;

        // typeRoot puede ser 'single'|'multiple' o en versiones antiguas 'ruc'|'dni'
        const typeRoot = data.type || data.typeRoot || null;
        const typeItem = item && item.type ? item.type : null;

        // Decidir si es persona (dni) o empresa (ruc)
        const isDni = (typeItem === 'dni') || (typeRoot === 'single' && item && item.type === 'dni') || (data.exists === true && (data.dni || data.name));
        const isRuc = (typeItem === 'ruc') || (typeRoot === 'single' && item && item.type === 'ruc') || (data.ruc || data.company_name);

        if (isDni) {
            // Obtener campos desde item si existe, sino desde la raíz
            const src = item || data;
            personaEl.style.display = "block";
            empresaEl.style.display = "none";

            document.getElementById("name").value = src.name || "";
            document.getElementById("paternal_surname").value = src.paternal_surname || "";
            document.getElementById("maternal_surname").value = src.maternal_surname || "";

            // Guardar DNI en hidden
            document.getElementById("dniHidden").value = src.dni || "";
            document.getElementById("rucHidden").value = "";
        } else if (isRuc) {
            // Empresa: usar item si existe, sino la raíz
            const src = item || data;
            personaEl.style.display = "none";
            empresaEl.style.display = "block";

            document.getElementById("ruc").value = src.ruc || "";
            document.getElementById("company_name").value = src.company_name || "";

            // Guardar RUC en hidden
            document.getElementById("rucHidden").value = src.ruc || "";
            document.getElementById("dniHidden").value = "";
        } else {
            // Fallback: ocultar ambos si no se puede determinar
            personaEl.style.display = "none";
            empresaEl.style.display = "none";
            document.getElementById("dniHidden").value = "";
            document.getElementById("rucHidden").value = "";
        }

        // Campos comunes (intentar leer desde item primero)
        const commonSrc = (item && (item.phone || item.email)) ? item : data;
        document.getElementById("phone").value = commonSrc.phone || "";
        document.getElementById("email").value = commonSrc.email || "";
    }

    function mostrarFormularioRegistro() {
        let documento = document.getElementById("dni").value.trim();
        document.getElementById("dniRegistro").value = documento;

        // Si el botón registrar tiene un tipo preparado (modo nombres), usarlo
        const btnRegistrar = document.getElementById("btnRegistrar");
        const presetTipo = btnRegistrar && btnRegistrar.dataset ? btnRegistrar.dataset.registroTipo : null;

        const onlyDigits = /^\d+$/;
        let mostrarPersona = false;
        let mostrarEmpresa = false;

        if (presetTipo) {
            // presetTipo puede ser "natural", "empresa", "empresa-forzada"
            if (presetTipo === "natural") mostrarPersona = true;
            else mostrarEmpresa = true;
        } else {
            // comportamiento por defecto (modo documento)
            if (onlyDigits.test(documento) && documento.length === 8) mostrarPersona = true;
            else if (onlyDigits.test(documento) && documento.length === 11) mostrarEmpresa = true;
            else if (/[A-Za-z]/.test(documento) || documento.length > 8) mostrarEmpresa = true; // seguridad adicional
        }

        // Mostrar/ocultar contenedores
        document.getElementById("camposPersona").style.display = mostrarPersona ? "block" : "none";
        document.getElementById("camposEmpresa").style.display = mostrarEmpresa ? "block" : "none";

        // Abrir modal
        $('#modalRegistro').modal('show');

    }


    function registrarUsuario(event) {
        event.preventDefault();

        let documento = document.getElementById("dniRegistro").value.trim();
        let data = {};

        // Si es DNI (persona natural)
        if (documento.length === 8) {
            data = {
                dni: documento,
                name: document.getElementById("nameRegistro").value,
                paternal_surname: document.getElementById("paternalSurnameRegistro").value,
                maternal_surname: document.getElementById("maternalSurnameRegistro").value,
                phone: document.getElementById("phoneRegistro").value,
                email: document.getElementById("emailRegistro").value
            };
        }
        // Si es RUC (persona jurídica)
        else if (documento.length === 11) {
            data = {
                ruc: documento,
                company_name: document.getElementById("razonSocialRegistro").value,
                phone: document.getElementById("phoneRegistro").value,
                email: document.getElementById("emailRegistro").value,
                rucGlobal: document.getElementById("rucGlobalRegistro").value
            };
        }

        fetch(BASE_HREF + 'registrar-administrado', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert("Usuario registrado correctamente");

                    document.getElementById("dni").value = data.dni || data.ruc || '';

                    if (data.dni) {
                        // Persona natural
                        document.getElementById("name").value = data.name || '';
                        document.getElementById("paternal_surname").value = data.paternal_surname || '';
                        document.getElementById("maternal_surname").value = data.maternal_surname || '';
                        document.getElementById("empresaContainer").style.display = "none";
                        document.getElementById("personaContainer").style.display = "block";
                    } else {
                        // Persona jurídica
                        document.getElementById("ruc").value = data.ruc || '';
                        document.getElementById("company_name").value = data.company_name || '';
                        document.getElementById("empresaContainer").style.display = "block";
                        document.getElementById("personaContainer").style.display = "none";
                    }

                    document.getElementById("phone").value = data.phone || '';
                    document.getElementById("email").value = data.email || '';

                    document.getElementById("datosAdministrado").style.display = "block";
                    document.getElementById("mensajeNoEncontrado").style.display = "none";
                    document.getElementById("btnRegistrar").style.display = "none";
                    $('#modalRegistro').modal('hide');
                    document.getElementById("formRegistro").reset();
                } else {
                    alert("Error al registrar usuario: " + data.message);
                }

            })
            .catch(error => console.error('Error en la solicitud:', error));
    }
</script>

<script>
    document.getElementById("formTramite").addEventListener("submit", function(event) {
        event.preventDefault();

        if (!this.checkValidity()) {
            this.reportValidity();
            return;
        }

        Swal.fire({
            title: "¿Estás seguro?",
            text: "Esta acción creará un nuevo trámite.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Sí, crear",
            cancelButtonText: "Cancelar"
        }).then((result) => {
            if (result.isConfirmed) {
                event.target.submit();
            }
        });
    });
</script>