<?php
error_reporting(0);
ob_start();
session_start();

if (!isset($_SESSION["nombre"])) {
    header("Location: login.html");
} else {
    require 'header.php';
    require_once "../config/Conexion.php";

    $idatencion_get = isset($_GET['idatencion']) ? $_GET['idatencion'] : '';
    $idpersona_get = '';

    if ($idatencion_get != '') {
        $sqlParam = "SELECT idpersona FROM atencion WHERE idatencion='$idatencion_get'";
        $resParam = ejecutarConsultaSimpleFila($sqlParam);
        if ($resParam) {
            $idpersona_get = $resParam['idpersona'];
        }
    }

    if ($_SESSION['resultado'] == 1) {
        ?>
        <!-- HIDDEN INPUTS FOR BITACORA -->
        <input type="hidden" id="idatencion" value="<?php echo $idatencion_get; ?>">
        <input type="hidden" id="idpersona" value="<?php echo $idpersona_get; ?>">

        <!--Contenido-->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="box">
                            <div class="box-header with-border">
                                <h1 class="box-title">Plan de Atención</h1>
                                <div class="box-tools pull-right">
                                    <?php if (isset($_GET['idatencion'])): ?>
                                        <button onclick="toggleBitacora()" class="btn btn-warning" style="margin-right: 5px;">
                                            <i class="fa fa-heartbeat"></i> Evolución
                                        </button>
                                        <a href="receta.php?idatencion=<?php echo $_GET['idatencion']; ?>" target="_blank"><button
                                                class="btn btn-primary"><i class="fa fa-print"></i> Receta</button></a>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <!-- centro -->
                            <div class="panel-body table-responsive" id="listadoregistros">
                                <table id="tbllistado" class="table table-striped table-bordered table-condensed table-hover">
                                    <thead>
                                        <th>Opciones</th>
                                        <th>Fecha</th>
                                        <th>Registrador</th>
                                        <th>Servicio</th>
                                        <th>Especialista</th>
                                        <th>Paciente</th>
                                        <th>Costo</th>
                                        <th>Estado</th>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <th>Opciones</th>
                                        <th>Fecha</th>
                                        <th>Registrador</th>
                                        <th>Servicio</th>
                                        <th>Especialista</th>
                                        <th>Paciente</th>
                                        <th>Costo</th>
                                        <th>Estado</th>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="panel-body" id="formularioregistros">
                                <!-- Header Global del Paciente -->
                                <div class="row" style="margin-bottom: 15px;">
                                    <div class="col-md-12">
                                        <div class="callout callout-info"
                                            style="display:flex; justify-content:space-between; align-items:center; background-color:#eff7ff !important; border-left-color:#3c8dbc; color:#2c3e50 !important;">
                                            <div style="font-size: 1.2em; color:#2c3e50 !important;">
                                                <i class="fa fa-user-circle"></i> Paciente: <strong
                                                    style="color:#2c3e50 !important; font-weight:700;"><span
                                                        id="lbl_paciente_global">Cargando...</span></strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <form name="formulario" id="formulario" method="POST" enctype="multipart/form-data"> -->
                                <!-- TABLAS DE DATOS DEL PACIENTE Y SIGNOS VITALES OCULTAS POR REQUERIMIENTO -->
                                <!-- Se mantienen los spans e inputs hidden para compatibilidad con JS -->
                                <div style="display:none;">
                                    <span id="paciente"></span>
                                    <span id="dni"></span>
                                    <span id="edad"></span>
                                    <span id="servicio"></span>
                                    <span id="especialista"></span>
                                    <input type="hidden" name="presion_arterial" id="presion_arterial">
                                    <input type="hidden" name="temperatura" id="temperatura">
                                    <input type="hidden" name="frecuencia_respiratoria" id="frecuencia_respiratoria">
                                    <input type="hidden" name="frecuencia_cardiaca" id="frecuencia_cardiaca">
                                    <input type="hidden" name="saturacion" id="saturacion">
                                    <input type="hidden" name="peso" id="peso">
                                    <input type="hidden" name="talla" id="talla">
                                    <input type="hidden" name="imc" id="imc">
                                </div>
                                <div class="col-row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="panel panel-primary">
                                            <div class="panel-body">
                                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <label>Formato de Historia Clínica:</label>
                                                    <select id="format-selector" class="form-control selectpicker"
                                                        data-live-search="true">
                                                        <optgroup label="Módulos Clínicos Especializados">
                                                            <option value="GERIATRIA">Geriatría - Formulario 057A</option>
                                                            <option value="PSICOLOGIA">Psicología - Historia Clínica</option>
                                                            <option value="CONFIDENCIALIDAD">&nbsp;&nbsp;&nbsp;↳ Acuerdo de Confidencialidad</option>
                                                            <option value="FISIOTERAPIA">Fisioterapia - Historia Clínica Rehabilitación</option>
                                                            <option value="VALORACION_RAPIDA_FT">Fisioterapia - Valoración Rápida</option>
                                                            <option value="NUTRICION">Nutrición - Historia Clínica</option>
                                                        </optgroup>
                                                        <optgroup label="Medicina General">
                                                            <option value="HC_MED_FAMILIAR">HC Medicina Familiar - Historia Clínica</option>
                                                            <option value="MSP_002">MSP 002 - Consulta Externa / Anamnesis</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Anverso: Anamnesis y Examen Físico</option>
                                                            <option value="MSP_003">MSP 003 - Anamnesis y Examen Físico (Hospitalización)</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Anverso: Anamnesis  ·  Reverso: Examen Físico</option>
                                                            <option value="HC_MED_FUNCIONAL">Historia Clínica de Medicina Funcional</option>
                                                            <option value="HC_MED_FAMILIAR">Historia Clínica Medicina Familiar</option>
                                                            <option value="MSP_005">MSP 005 - Evolución y Prescripción</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Hojas 1 y 2</option>
                                                            <option value="MSP_006">MSP 006 - Epicrisis</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Hojas 1 y 2</option>
                                                            <option value="MSP_007">MSP 007 - Interconsulta / Derivación</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Anverso: Solicitud  ·  Reverso: Informe</option>
                                                            <option value="MSP_008">MSP 008 - Emergencia</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Hojas 1 y 2</option>
                                                            <option value="MSP_009">MSP 009 - Atención Prehospitalaria</option>
                                                            <option value="MSP_013">MSP 013 - Histopatología</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ 013-A: Solicitud  ·  013-B: Informe</option>
                                                            <option value="MSP_024">MSP 024 - Autorizaciones y Consentimiento Informado</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Anverso: Autorización, Exoneración y Retiro</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Reverso: Consentimiento Informado</option>
                                                            <option value="MSP_051">MSP 051 - Historia Clínica Materno Perinatal</option>
                                                        </optgroup>
                                                        <optgroup label="Pediatría">
                                                            <option value="PEDIATRIA">Pediatría - Historia Clínica</option>
                                                            <option value="NEUROPEDIATRIA">Neuropediatría - Historia Clínica</option>
                                                            <option value="NEUROPEDIATRIA_EXAMENES">Neuropediatría - Exámenes</option>
                                                            <option value="NEUROPEDIATRIA_PEDIDOS">Neuropediatría - Pedidos</option>
                                                        </optgroup>
                                                        <optgroup label="Especialidades">
                                                            <option value="NEFROLOGIA">Nefrología - Historia Clínica / Hemodiálisis</option>
                                                            <option value="DERIVACION_INTERNA">Derivación Interna / Interconsulta</option>
                                                        </optgroup>
                                                        <optgroup label="Odontología">
                                                            <option value="MSP_033_ODONTO">MSP 033 - Historia Clínica Odontológica</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Hojas 1 y 2</option>
                                                            <option value="ODONTOPEDIATRIA">Odontopediatría - MSP 033-P</option>
                                                            <option value="PERIODONTOGRAMA">Periodontograma - Ficha Periodontal</option>
                                                            <option value="CIRUGIA">Cirugía Bucal - Protocolo Quirúrgico</option>
                                                            <option value="ARMONIZACION">Armonización Orofacial - Face Mapping</option>
                                                            <option value="HISTORIA_ORTODONCIA">Ortodoncia - Historia Clínica</option>
                                                            <option value="HISTORIA_ENDODONCIA">Endodoncia - Historia Clínica</option>
                                                        </optgroup>
                                                        <optgroup label="MEDICINA OCUPACIONAL · FEMO + HCU">
                                                            <option value="FEMO_2025">FEMO 2025 - Formulario Único de Evaluación Médica Ocupacional</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Formulario principal según AM 00025-2025</option>
                                                            <option value="FEMO_LEGAL">Autorizaciones y Consentimientos Ocupacionales (GDPR)</option>
                                                            <option value="HCU_077">HCU 077 - Evaluación Pre-Ocupacional / Ingreso</option>
                                                            <option value="HCU_078">HCU 078 - Evaluación Médica Periódica</option>
                                                            <option value="HCU_079">HCU 079 - Evaluación Médica de Reintegro</option>
                                                            <option value="HCU_080">HCU 080 - Evaluación Médica de Retiro</option>
                                                            <option value="HCU_081">HCU 081 - Certificado de Aptitud Laboral</option>
                                                            <option value="HCU_083">HCU 083 - Registro de Inmunizaciones Ocupacionales</option>
                                                        </optgroup>
                                                        <optgroup label="Otros">
                                                            <option value="RECETA">Receta Médica</option>
                                                            <option value="ANEXO_1">Anexo 1 - Ficha Familiar</option>
                                                            <option disabled style="color:#888; font-style:italic;">&nbsp;&nbsp;&nbsp;↳ Hojas 1, 2, 3 y 4</option>
                                                            <option value="ANEXO_2">Anexo 2 - Atención Prehospitalaria</option>
                                                        </optgroup>
                                                        <!-- Ocultos por solicitud del administrador -->
                                                        <option value="MSP_010" style="display:none;">MSP 010 - Laboratorio Clínico</option>
                                                        <option value="MSP_012" style="display:none;">MSP 012 - Imagenología</option>
                                                        <option value="MSP_021" style="display:none;">MSP 021 - Signos Vitales</option>
                                                    </select>
                                                    <button type="button" class="btn btn-success btn-sm"
                                                        onclick="abrirNuevaPestana()" style="margin-left: 10px;">
                                                        <i class="fa fa-plus"></i> Agregar Formato
                                                    </button>

                                                    <button type="button" class="btn btn-primary btn-sm"
                                                        onclick="guardarTodoYFinalizar()"
                                                        style="margin-left: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1);">
                                                        <i class="fa fa-check-circle"></i> Finalizar y Firmar
                                                    </button>

                                                    <!-- BOTON BITACORA (NUEVO) -->
                                                    <button type="button" class="btn btn-warning btn-sm"
                                                        onclick="toggleBitacora()"
                                                        style="margin-left: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); background-color: #ff9800; border-color: #f57c00;">
                                                        <i class="fa fa-history"></i> EVOLUCION DEL PACIENTE
                                                    </button>

                                                    <button type="button" class="btn btn-sm"
                                                        onclick="derivarPacienteDirecto()"
                                                        style="margin-left: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); background-color: #673AB7; border-color: #512DA8; color:white;">
                                                        <i class="fa fa-exchange"></i> DERIVAR A COLEGA
                                                    </button>

                                                    <hr>
                                                    <hr>
                                                </div>

                                                <!-- SECCION DE ARCHIVOS ADJUNTOS (NUEVO) -->
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                                                        style="margin-bottom: 20px;">
                                                        <div class="box box-primary collapsed-box">
                                                            <div class="box-header with-border">
                                                                <h3 class="box-title"><i class="fa fa-paperclip"></i> Adjuntar
                                                                    Archivos (Imágenes, PDF, etc)</h3>
                                                                <div class="box-tools pull-right">
                                                                    <button type="button" class="btn btn-box-tool"
                                                                        data-widget="collapse"><i
                                                                            class="fa fa-plus"></i></button>
                                                                </div>
                                                            </div>
                                                            <div class="box-body">
                                                                <div class="callout callout-info" style="margin-bottom: 10px;">
                                                                    <p><i class="fa fa-info-circle"></i> Puede seleccionar
                                                                        <b>múltiples archivos</b> a la vez. Se guardarán al
                                                                        finalizar.
                                                                    </p>
                                                                </div>
                                                                <label>Seleccionar Archivos:</label>
                                                                <!-- ID único para plan.php -->
                                                                <input type="file" id="archivos_adjuntos_input_plan"
                                                                    name="archivos_adjuntos[]" multiple class="form-control">
                                                                <div id="lista_archivos_preview_plan"
                                                                    style="margin-top:10px; font-weight:bold; color:#555;">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- FIN SECCION ARCHIVOS -->

                                                <!-- SISTEMA DE PESTAÑAS PARA FORMATOS -->
                                                <div id="tabs-formatos-container" style="display: none;">
                                                    <div class="nav-tabs-custom">
                                                        <ul class="nav nav-tabs" id="tabs-formatos">
                                                            <!-- Las pestañas se agregarán dinámicamente aquí -->
                                                        </ul>
                                                        <div class="tab-content" id="tabs-content-formatos">
                                                            <!-- El contenido de cada pestaña se cargará aquí -->
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- FIN SISTEMA DE PESTAÑAS -->

                                                <!-- PANEL DE FORMATOS COMPLETADOS (Guardados) -->
                                                <div id="formatos-completados-panel"
                                                    style="margin-bottom: 20px; display: none;">
                                                    <div class="box box-success collapsed-box">
                                                        <div class="box-header with-border">
                                                            <h3 class="box-title">
                                                                <i class="fa fa-check-square-o"></i> Formatos Guardados
                                                                <span class="badge bg-green" id="contador-formatos">0</span>
                                                            </h3>
                                                            <div class="box-tools pull-right">
                                                                <button type="button" class="btn btn-box-tool"
                                                                    data-widget="collapse">
                                                                    <i class="fa fa-plus"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div class="box-body" style="display: none;">
                                                            <div id="lista-formatos-completados" class="table-responsive">
                                                                <table class="table table-striped table-condensed table-hover">
                                                                    <thead>
                                                                        <tr class="bg-light-blue">
                                                                            <th width="15%">Código</th>
                                                                            <th width="35%">Descripción</th>
                                                                            <th width="20%">Fecha</th>
                                                                            <th width="30%" class="text-center">Acciones</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="tbody-formatos-completados">
                                                                        <!-- Se llenará dinámicamente con JavaScript -->
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- FIN PANEL FORMATOS COMPLETADOS -->

                                                <div id="clinical-form-container" style="display: none;">
                                                    <!-- Dynamic Form Content Will Be Loaded Here -->
                                                </div>

                                                <!-- CONTENIDO ANTIGUO OCULTO - PRESERVADO PARA LÓGICA DE RECETA -->
                                                <!-- Inputs hidden necesarios para compatibilidad -->
                                                <input type="hidden" name="idatencion" id="idatencion"
                                                    value="<?php echo isset($_GET['idatencion']) ? $_GET['idatencion'] : ''; ?>">
                                                <input type="hidden" name="idresultado" id="idresultado">
                                                <input type="hidden" name="idatencionp" id="idatencionp">
                                                <input type="hidden" name="idpersona" id="idpersona">

                                                <!-- Campos antiguos ocultos pero preservados -->
                                                <div style="display:none;">
                                                    <textarea name="motivo_consulta" id="motivo_consulta"></textarea>
                                                    <input type="text" name="tiempo_enfermedad" id="tiempo_enfermedad">
                                                    <textarea name="antecedentes" id="antecedentes"></textarea>
                                                    <input type="text" name="alergia" id="alergia">
                                                    <input type="text" name="intervenciones_quirurgicas"
                                                        id="intervenciones_quirurgicas">
                                                    <select name="vacunas_completas" id="vacunas_completas">
                                                        <option value="SI">SI</option>
                                                        <option value="NO">NO</option>
                                                    </select>
                                                    <textarea name="examen_fisico" id="examen_fisico"></textarea>
                                                    <input type="text" name="texto" id="texto">
                                                    <ul id="diagnosticos"></ul>
                                                    <table id="detalles">
                                                        <tbody id="tablabody"></tbody>
                                                    </table>
                                                    <input type="file" name="imagen_rayosx">
                                                    <p id="file_rayosx"></p>
                                                    <input type="file" name="imagen_exameninvasivo">
                                                    <p id="file_inv"></p>
                                                    <input type="file" name="imagen_ecografia">
                                                    <p id="file_eco"></p>
                                                    <input type="file" name="imagen_varios">
                                                    <p id="file_varios"></p>
                                                    <input type="text" name="plan" id="plan">
                                                    <input type="date" name="proxima_cita" id="proxima_cita">
                                                    <table id="recetas">
                                                        <tbody id="tablabodyrecetas"></tbody>
                                                    </table>
                                                    <input type="text" name="vigencia">
                                                    <textarea name="tratamiento" id="tratamiento"></textarea>
                                                    <textarea name="signnose_de_alarma" id="signnose_de_alarma"></textarea>
                                                    <textarea name="Indicaciones_no_farmacologicas"
                                                        id="Indicaciones_no_farmacologicas"></textarea>
                                                </div>
                                                <link rel="stylesheet" href="../public/css/calculadoras.css">
                                                <!-- Calculadoras Floating Sidebar -->
                                                <?php include 'calculadoras/sidebar.php'; ?>
                                            </div>
                                            <!--Fin centro -->
                                        </div>
                                        <!-- /.box -->
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        <!--Fin-Contenido-->
        <?php
    } else {
        require 'noacceso.php';
    }


    require 'footer.php';
    ?>

    <!-- Modal para buscar diagnósticos CIE-10 -->
    <div class="modal fade" id="modalDiagnosticos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Buscar Diagnósticos CIE-10</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="txtBuscarDiagnostico"
                                placeholder="Ingrese nombre o código del diagnóstico (ENTER para buscar)...">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" onclick="buscarDiagnosticosCIE10()">
                                    <i class="fa fa-search"></i> Buscar
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-striped table-bordered table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 100px;">Opciones</th>
                                    <th style="width: 100px;">Código</th>
                                    <th>Enfermedad</th>
                                </tr>
                            </thead>
                            <tbody id="bodyTablaDiagnosticos">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        // Variable global para ID del empleado (necesaria para firma digital)
        var idempleado_session = <?php echo isset($_SESSION['idempleado']) ? $_SESSION['idempleado'] : '0'; ?>;
    </script>

    <script type="text/javascript" src="scripts/plan_tabs.js"></script>
    <script type="text/javascript" src="scripts/plan_tabs_diagnosticos.js"></script>
    <script type="text/javascript" src="scripts/plan.js"></script>
    <script type="text/javascript" src="../public/js/calculadoras.js"></script>
    <!-- BITACORA LATERAL FLOTANTE -->
    <div id="bitacora-sidebar" style="
    position: fixed;
    top: 50px; /* Debajo del header */
    right: -400px; /* Oculto inicialmente */
    width: 350px;
    height: calc(100vh - 50px);
    background: #fdfdfd;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    border-left: 4px solid #ff9800;
">
        <!-- Header Bitacora -->
        <div
            style="background: #ff9800; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
            <h4 style="margin: 0; font-weight: bold;"><i class="fa fa-history"></i> Historial / Notas</h4>
            <button onclick="toggleBitacora()" style="background: none; border: none; color: white; font-size: 1.2em;"><i
                    class="fa fa-times"></i></button>
        </div>

        <!-- Timeline (Scrollable) -->
        <div id="bitacora-timeline" style="flex: 1; overflow-y: auto; padding: 15px; background: #fff3e0;">
            <div class="text-center text-muted"><i class="fa fa-circle-o-notch fa-spin"></i> Cargando historial...</div>
            <!-- Aquí se inyectan las notas -->
        </div>

        <!-- Footer (Input) -->
        <div style="padding: 15px; background: white; border-top: 1px solid #eee;">
            <div class="form-group">
                <label style="color: #e65100;">Evolución:</label>
                <textarea id="txt_bitacora_nota" class="form-control" rows="3"
                    placeholder="Escriba la evolución del paciente..."></textarea>
            </div>

            <div class="form-group">
                <label style="font-size: 0.9em; color: #555;">Diagnóstico CIE-10 (Opcional - Va a Receta):</label>
                <select id="sel_bitacora_cie10" class="form-control select2" style="width: 100%;">
                    <option value="">Buscar diagnóstico...</option>
                </select>
            </div>

            <button onclick="guardarNotaBitacora()" class="btn btn-warning btn-block" style="font-weight: bold;">
                <i class="fa fa-save"></i> GUARDAR EVOLUCIÓN
            </button>
        </div>
    </div>

    <?php
}
ob_end_flush();
?>
<!-- SELECT 2 -->
<link href="../public/css/select2.min.css" rel="stylesheet" />
<script src="../public/js/select2.min.js"></script>

<script>
    // Inicializar Select2 dentro del sidebar - asegura que funcione
    $(document).ready(function () {
        console.log("Inicializando componentes de Bitácora...");
        $('#sel_bitacora_cie10').select2({
            dropdownParent: $('#bitacora-sidebar'),
            placeholder: 'Buscar diagnóstico (CIE10)...',
            minimumInputLength: 3,
            ajax: {
                url: '../ajax/bitacora.php?op=buscar_cie10',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return { results: data };
                },
                cache: true
            }
        });
    });

    // ==========================================
    // FUNCIONES BITÁCORA EVOLUTIVA
    // ==========================================
    var isBitacoraOpen = false;

    // Abrir/Cerrar Sidebar
    function toggleBitacora() {
        console.log("Toggle Bitacora Clicked");
        isBitacoraOpen = !isBitacoraOpen;
        var sidebar = $("#bitacora-sidebar");

        if (isBitacoraOpen) {
            sidebar.css("right", "0px"); // Mostrar
            cargarBitacora(); // Cargar historial al abrir
        } else {
            sidebar.css("right", "-400px"); // Ocultar
        }
    }

    // Cargar historial de notas
    // Cargar historial de notas
    function cargarBitacora() {
        // 1. Intentar obtener ID de atención del input hidden (Igual que plan.js)
        var idatencion = $("#idatencion").val();

        // 2. Si falla, intentar de la URL
        if (!idatencion) {
            var urlParams = new URLSearchParams(window.location.search);
            idatencion = urlParams.get('idatencion');
        }

        if (!idatencion) {
            $("#bitacora-timeline").html('<div class="text-center text-danger">Error: No se encontró ID de atención (Plan).</div>');
            return;
        }

        $("#bitacora-timeline").html('<div class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Cargando historial...</div>');
        console.log("Cargando bitácora para idatencion:", idatencion);

        // OPTIMIZACIÓN CRÍTICA: Usar ID local directo si existe
        var idpersonaLocal = $("#idpersona").val();

        if (idpersonaLocal && idpersonaLocal !== "") {
            console.log("Usando idpersona local:", idpersonaLocal);
            cargarHistorialReal(idpersonaLocal, idatencion);
        } else {
            // Fallback (solo si no está cargado aún)
            $.post("../ajax/atencion.php?op=mostrar", { idatencion: idatencion }, function (data) {
                try {
                    var obj = JSON.parse(data);
                    if (obj && obj.idpersona) {
                        $("#idpersona").val(obj.idpersona);
                        cargarHistorialReal(obj.idpersona, idatencion);
                    } else {
                        $("#bitacora-timeline").html('<div class="text-center text-danger">Error: Datos del paciente no encontrados.</div>');
                    }
                } catch (e) {
                    console.error(e);
                    $("#bitacora-timeline").html('<div class="text-center text-danger">Error al procesar respuesta del paciente.</div>');
                }
            });
        }
    }

    // Función interna para hacer la petición AJAX del historial
    function cargarHistorialReal(idpersona, idatencion) {
        console.log("Cargando historial para idpersona:", idpersona);

        $.ajax({
            url: "../ajax/bitacora.php?op=listar",
            type: "POST",
            data: { idpersona: idpersona },
            timeout: 10000, // TIMEOUT DE 10 SEGUNDOS (Evita carga infinita)
            success: function (data) {
                try {
                    // Intentamos parsear manualmente si llega como texto, aunque $.ajax intente adivinar
                    var notas = (typeof data === 'string') ? JSON.parse(data) : data;
                    var html = '';

                    // Verificar si el JSON trae error lógico
                    if (notas.error) {
                        $("#bitacora-timeline").html('<div class="text-center text-danger">' + notas.error + '</div>');
                        return;
                    }

                    if (!notas || notas.length === 0) {
                        html = '<div class="text-center text-muted" style="padding:20px;">No hay evoluciones registradas aún.</div>';
                    } else {
                        html += '<ul class="timeline timeline-inverse">';

                        notas.forEach(function (nota) {
                            var bg = (nota.idatencion == idatencion) ? 'bg-orange' : 'bg-gray';
                            html += '<li>';
                            html += '<i class="fa fa-pencil-square-o ' + bg + '"></i>';
                            html += '<div class="timeline-item">';
                            html += '<span class="time"><i class="fa fa-clock-o"></i> ' + nota.fecha + ' ' + nota.hora + '</span>';

                            var profesionalNombre = nota.profesional ? nota.profesional : "Profesional";
                            html += '<h3 class="timeline-header no-border"><a href="#">' + profesionalNombre + '</a> registró:</h3>';

                            html += '<div class="timeline-body" style="white-space: pre-wrap; font-size: 1.1em;">' + nota.nota + '</div>';
                            html += '</div>';
                            html += '</li>';
                        });

                        html += '<li><i class="fa fa-clock-o bg-gray"></i></li>';
                        html += '</ul>';
                    }

                    $("#bitacora-timeline").html(html);

                    var objDiv = document.getElementById("bitacora-timeline");
                    if (objDiv) objDiv.scrollTop = objDiv.scrollHeight;

                } catch (e) {
                    console.error("Error parsing bitacora JSON", e);
                    var strDebug = (typeof data === 'string') ? data.substring(0, 200) : JSON.stringify(data);
                    $("#bitacora-timeline").html('<div class="text-center text-danger">Error de Datos (JSON corrupto).<br><small>' + strDebug + '</small></div>');
                }
            },
            error: function (xhr, status, error) {
                console.error("AJAX Error:", error);
                var msg = "Error Desconocido";
                if (status === 'timeout') msg = "El servidor tardó mucho en responder (Timeout).";
                else if (xhr.status === 404) msg = "Archivo back-end no encontrado (404).";
                else if (xhr.status === 500) msg = "Error Interno del Servidor (500).";

                $("#bitacora-timeline").html('<div class="text-center text-danger">' + msg + '<br><small>' + error + '</small></div>');
            }
        });
    }

    // Guardar nueva nota
    function guardarNotaBitacora() {
        var nota = $("#txt_bitacora_nota").val();
        var urlParams = new URLSearchParams(window.location.search);
        // 1. Intentar obtener ID de atención del input hidden
        var idatencion = $("#idatencion").val();

        // 2. Si falla, intentar de la URL
        if (!idatencion) {
            var urlParams = new URLSearchParams(window.location.search);
            idatencion = urlParams.get('idatencion');
        }

        var idpersona = $("#idpersona").val();

        if (!idatencion) {
            alert("Error: No se encontró ID de atención. Recargue la página o intente ingresar nuevamente.");
            return;
        }

        if ($.trim(nota) == "") {
            alert("Por favor escriba el texto de la evolución.");
            return;
        }

        var cie10_val = $("#sel_bitacora_cie10").val();
        var cie10_text = ($("#sel_bitacora_cie10").select2('data')[0]) ? $("#sel_bitacora_cie10").select2('data')[0].text : '';

        // Función helper para enviar datos
        var enviarDatos = function (idPersonaFinal) {
            $.ajax({
                url: "../ajax/bitacora.php?op=guardar",
                type: "POST",
                dataType: "text", // FUERZA A RECIBIR TEXTO PURO (Evita que jQuery falle al parsear)
                data: {
                    idatencion: idatencion,
                    idpersona: idPersonaFinal,
                    nota: nota,
                    cie10_codigo: cie10_val,
                    cie10_nombre: cie10_text
                },
                success: function (data) {
                    try {
                        // 1. Intentamos parsear manualmente
                        var resp = JSON.parse(data);

                        // Si es exitoso
                        if (resp.status === 'success') {
                            alert(resp.message);
                            $("#txt_bitacora_nota").val("");
                            $("#sel_bitacora_cie10").val(null).trigger('change');
                            cargarBitacora(); // Recargar lista
                        } else {
                            alert(resp.message || "Error al guardar");
                        }
                    } catch (e) {
                        // 2. FALLBACK SI EL JSON ES INVÁLIDO (CASO NOTA GUARDADA TEXTO)
                        if (data.indexOf("Nota guardada") !== -1) {
                            alert(data);
                            $("#txt_bitacora_nota").val("");
                            $("#sel_bitacora_cie10").val(null).trigger('change');
                            cargarBitacora(); // Recargar lista
                        } else {
                            console.error("Error parseando:", e);
                            alert("Respuesta del servidor no válida: " + data.substring(0, 100));
                        }
                    }
                },
                error: function (xhr, status, error) {
                    alert("Error de conexión al guardar: " + error);
                }
            });
        };

        // Asegurar idpersona
        if (!idpersona) {
            $.post("../ajax/atencion.php?op=mostrar", { idatencion: idatencion }, function (data) {
                try {
                    var obj = JSON.parse(data);
                    if (obj.idpersona) {
                        enviarDatos(obj.idpersona);
                    } else {
                        alert("Error: No se pudo identificar al paciente.");
                    }
                } catch (e) {
                    alert("Error al procesar datos del paciente.");
                }
            });
        } else {
            enviarDatos(idpersona);
        }
    }


</script>