<?php
/**
 * HISTORIA CLÍNICA PSICOLÓGICA (VERSIÓN PREMIUM DEFINITIVA)
 * Arquitectura de alta fidelidad. 10 ítems estructurados, 
 * con selectores y diseño estético profesional.
 */
?>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    
    .premium-form-container { font-family: 'Inter', sans-serif; color: #1e293b; background-color: #f8fafc; padding: 15px; border-radius: 8px; }
    .premium-panel { background: #ffffff; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); margin-bottom: 25px; border: 1px solid #e2e8f0; overflow: hidden; }
    .premium-header { color: white; padding: 12px 20px; font-weight: 600; font-size: 15px; display: flex; align-items: center; }
    
    /* Colores semánticos para cada bloque */
    .hdr-1 { background: linear-gradient(135deg, #0f172a 0%, #334155 100%); }
    .hdr-2 { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }
    .hdr-3 { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
    .hdr-4 { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
    .hdr-5 { background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%); }
    .hdr-7 { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
    .hdr-8 { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
    .hdr-9 { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
    .hdr-10 { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }

    .premium-header i { margin-right: 10px; font-size: 18px; }
    
    .premium-body { padding: 20px; }
    .premium-label { font-weight: 600; color: #475569; font-size: 12px; margin-bottom: 6px; display: block; text-transform: uppercase; }
    .premium-select, .premium-input { border-radius: 6px; border: 1px solid #cbd5e1; padding: 8px 12px; width: 100%; transition: all 0.2s; background-color: #f1f5f9; color: #1e293b; font-size: 13px; }
    .premium-select:focus, .premium-input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); background-color: #ffffff; outline: none; }
    
    .item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; background: #fff; border-radius: 4px; }
    .item-row:hover { background: #f8fafc; }
    .item-label { flex: 1; font-size: 13px; color: #334155; font-weight: 500; }
    .item-control { width: 150px; }
    
    .upload-box { border: 2px dashed #94a3b8; border-radius: 10px; padding: 40px 20px; text-align: center; background-color: #f8fafc; cursor: pointer; transition: all 0.3s; }
    .upload-box:hover { border-color: #0ea5e9; background-color: #f0f9ff; }
    .upload-icon { font-size: 40px; color: #94a3b8; margin-bottom: 15px; }

    /* Estilos para el selector DSM-5 */
    .dsm5-container { background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; padding: 15px; }
    .dsm5-search-box { margin-bottom: 15px; }
    .dsm5-table { width: 100%; background: white; border-radius: 6px; overflow: hidden; font-size: 13px; }
    .dsm5-table th { background: #f1f5f9; padding: 10px; color: #475569; font-weight: 600; text-align: left; }
    .dsm5-table td { padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .dsm5-badge { background: #3b82f6; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
    .dsm5-btn-delete { color: #ef4444; cursor: pointer; transition: transform 0.2s; }
    .dsm5-btn-delete:hover { transform: scale(1.2); }
</style>


<div class="premium-form-container">
    <form id="formulariop" name="formulariop" method="POST">
        <input type="hidden" name="idatencion" id="idatencionp" value="<?php echo $_POST['idatencion'] ?? ($idatencion ?? ''); ?>">
        <input type="hidden" name="tipo_formato" value="PSICOLOGIA">

        <!-- 1. DATOS DEL PACIENTE -->
        <div class="premium-panel">
            <div class="premium-header hdr-1">
                <i class="fa fa-user-circle"></i> 1. DATOS DEL PACIENTE - HISTORIA CLÍNICA PSICOLÓGICA
            </div>
            <div class="premium-body" style="background: #fff;">
                <?php include __DIR__ . '/partials/patient_header.php'; ?>
            </div>
        </div>

        <div class="row">
            <!-- 2. DATOS ADICIONALES (DESARROLLO Y PERINATALES) -->
            <div class="col-md-12">
                <div class="premium-panel">
                    <div class="premium-header hdr-2">
                        <i class="fa fa-child"></i> 2. DATOS ADICIONALES (DESARROLLO Y PERINATALES)
                    </div>
                    <div class="premium-body">
                        <div class="row">
                            <?php 
                            $items_da = [
                                'da_emb_deseado' => 'Embarazo Deseado', 'da_controles' => 'Controles Médicos', 
                                'da_parto_termino' => 'Parto a Término', 'da_lloro' => 'Lloró al nacer'
                            ];
                            foreach($items_da as $key => $label): ?>
                                <div class="col-md-3">
                                    <div class="item-row" style="flex-direction: column; align-items: flex-start;">
                                        <div class="item-label mb-2"><?php echo $label; ?></div>
                                        <select name="<?php echo $key; ?>" class="premium-select">
                                            <option value="">Seleccione...</option>
                                            <option value="SÍ">SÍ</option>
                                            <option value="NO">NO</option>
                                            <option value="NO SABE">NO SABE</option>
                                        </select>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="row mt-3">
                            <?php 
                            $items_hitos = [
                                'da_peso_talla' => 'Peso/Talla', 'da_cuello' => 'Control Cuello',
                                'da_voltearse' => 'Voltearse', 'da_sentarse' => 'Sentarse', 'da_gateo' => 'Gateo',
                                'da_pararse_apoyo' => 'Pararse (Apoyo)', 'da_pararse' => 'Pararse (Solo)', 'da_balbuceo' => 'Balbuceo',
                                'da_palabras' => '1ras Palabras', 'da_esfinter_mic' => 'Esfínter Micción', 'da_esfinter_def' => 'Esfínter Defecación'
                            ];
                            foreach($items_hitos as $key => $label): ?>
                                <div class="col-md-3">
                                    <div class="item-row" style="flex-direction: column; align-items: flex-start; padding: 4px 8px;">
                                        <div class="item-label" style="font-size: 11px;"><?php echo $label; ?></div>
                                        <input type="text" name="<?php echo $key; ?>" class="premium-input" style="padding: 4px; font-size: 12px;" placeholder="Normal/Meses">
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="mt-3">
                            <label class="premium-label">OBSERVACIONES DEL DESARROLLO:</label>
                            <textarea class="premium-input" name="da_resultados" rows="2" placeholder="Describa hallazgos relevantes..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 3. MOTIVO DE CONSULTA -->
            <div class="col-md-6">
                <div class="premium-panel">
                    <div class="premium-header hdr-3">
                        <i class="fa fa-comment-medical"></i> 3. MOTIVO DE CONSULTA
                    </div>
                    <div class="premium-body">
                        <textarea class="premium-input" name="psic_motivo" rows="4" placeholder="¿Por qué acude el paciente a la consulta? (Usar palabras del paciente si es posible)"></textarea>
                    </div>
                </div>
            </div>
            <!-- 4. ENFERMEDAD ACTUAL -->
            <div class="col-md-6">
                <div class="premium-panel">
                    <div class="premium-header hdr-4">
                        <i class="fa fa-stethoscope"></i> 4. ENFERMEDAD O PROBLEMA ACTUAL
                    </div>
                    <div class="premium-body">
                        <textarea class="premium-input" name="psic_enfermedad_actual" rows="4" placeholder="Evolución del problema, síntomas actuales, tiempo de evolución..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 5. ANAMNESIS FAMILIAR -->
            <div class="col-md-6">
                <div class="premium-panel">
                    <div class="premium-header hdr-5">
                        <i class="fa fa-users"></i> 5. ANAMNESIS FAMILIAR
                    </div>
                    <div class="premium-body">
                        <textarea class="premium-input" name="psic_anamnesis_fam_1" rows="3" placeholder="Antecedentes patológicos, dinámicas familiares..."></textarea>
                        <div class="mt-2">
                            <label class="premium-label">OBSERVACIONES ESPECIALES (ÍTEM 5):</label>
                            <textarea class="premium-input" name="psic_obs_5" rows="2" placeholder="Observaciones adicionales requeridas..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 6. ANAMNESIS PERSONAL -->
            <div class="col-md-6">
                <div class="premium-panel">
                    <div class="premium-header hdr-1">
                        <i class="fa fa-user"></i> 6. ANAMNESIS PERSONAL
                    </div>
                    <div class="premium-body">
                        <textarea class="premium-input" name="psic_anamnesis_fam_2" rows="6" placeholder="Eventos de vida significativos, historial educativo, laboral, médico personal..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- 7. EVALUACIÓN DE FUNCIONES (ESTADO MENTAL) -->
        <div class="premium-panel">
            <div class="premium-header hdr-7">
                <i class="fa fa-brain"></i> 7. EVALUACIÓN DE FUNCIONES (ESTADO MENTAL)
            </div>
            <div class="premium-body">
                <div class="row">
                    <?php 
                    $items_ef = [
                        'ef_orientacion' => 'Orientación', 'ef_atencion' => 'Atención', 'ef_memoria' => 'Memoria',
                        'ef_lenguaje' => 'Lenguaje', 'ef_sensopercepciones' => 'Sensopercep.', 'ef_pensamiento' => 'Pensamiento',
                        'ef_afectividad' => 'Afectividad', 'ef_voluntad' => 'Voluntad', 'ef_instintos' => 'Instintos', 'ef_habitos' => 'Hábitos'
                    ];
                    foreach($items_ef as $key => $label): ?>
                        <div class="col-md-3">
                            <div class="item-row">
                                <div class="item-label"><?php echo $label; ?></div>
                                <div class="item-control">
                                    <select name="<?php echo $key; ?>" class="premium-select">
                                        <option value="">Seleccione...</option>
                                        <option value="CONSERVADO">CONSERVADO</option>
                                        <option value="ALTERADO">ALTERADO</option>
                                        <option value="NO EVALUADO">NO EVALUADO</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <div class="mt-4" style="background-color: #fdf2f8; padding: 15px; border-radius: 8px; border: 1px dashed #fbcfe8;">
                    <label class="premium-label" style="color: #be185d;">PÁRRAFO DE RESULTADOS DE EVALUACIÓN MENTAL:</label>
                    <textarea class="premium-input" name="ef_resultados" rows="3" placeholder="Detalle narrativo de la evaluación del estado mental del paciente..."></textarea>
                </div>
            </div>
        </div>

        <!-- 8. DIAGNÓSTICOS DSM-5 (SISTEMA INTEGRADO) -->
        <div class="premium-panel">
            <div class="premium-header hdr-8">
                <i class="fa fa-search"></i> 8. DIAGNÓSTICOS DSM-5 (CLASIFICACIÓN PSICOLÓGICA)
            </div>
            <div class="premium-body">
                <div class="dsm5-container">
                    <div class="dsm5-search-box">
                        <label class="premium-label">Buscador Profesional DSM-5 (Categoría, Código o Nombre)</label>
                        <select id="selector_dsm5" class="form-control select2" style="width: 100%;">
                            <option value="">Escriba para buscar en el manual DSM-5...</option>
                        </select>
                        <p class="text-muted mt-2" style="font-size: 11px;">
                            <i class="fa fa-info-circle"></i> Seleccione los diagnósticos con sus variaciones de gravedad (Leve, Moderado, Grave) según corresponda.
                        </p>
                    </div>

                    <div class="table-responsive">
                        <table class="dsm5-table" id="tabla_dsm5_seleccionados">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">Acción</th>
                                    <th style="width: 100px;">Código</th>
                                    <th>Diagnóstico DSM-5 Seleccionado</th>
                                    <th style="width: 150px;">Categoría</th>
                                </tr>
                            </thead>
                            <tbody id="body_dsm5">
                                <!-- Se llena dinámicamente -->
                                <tr class="no-data">
                                    <td colspan="4" class="text-center text-muted">No se han seleccionado diagnósticos aún.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <!-- 9. SUBIDOR DE BATERÍAS Y TESTS -->
        <div class="premium-panel">
            <div class="premium-header hdr-9">
                <i class="fa fa-cloud-upload-alt"></i> 9. BATERÍAS Y TESTS APLICADOS (CARGA DE ARCHIVOS)
            </div>
            <div class="premium-body">
                <div class="upload-box">
                    <i class="fa fa-file-pdf upload-icon"></i><br>
                    <h4 style="color: #0f172a; font-weight: 600; margin-top: 0;">SUBA AQUÍ SUS TESTS Y BATERÍAS APLICADAS</h4>
                    <p style="color: #64748b;">Seleccione los documentos PDF, JPG o PNG de los tests realizados al paciente.</p>
                    <input type="file" id="psico_archivos_input" name="psico_archivos_input[]" multiple class="premium-input" style="max-width: 400px; margin: 0 auto; cursor: pointer;" accept=".pdf,.jpg,.jpeg,.png">
                </div>
            </div>
        </div>

        <!-- 10. DIAGNÓSTICO DEFINITIVO Y CONCLUSIONES -->
        <div class="premium-panel">
            <div class="premium-header hdr-10">
                <i class="fa fa-check-circle"></i> 10. DIAGNÓSTICO DEFINITIVO Y PLAN TERAPÉUTICO
            </div>
            <div class="premium-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="premium-label">Conclusiones Diagnósticas y Pronóstico</label>
                        <textarea class="premium-input mb-3" name="psic_diag_definitivo" rows="3" placeholder="Diagnóstico conclusivo luego de la evaluación integral..."></textarea>
                    </div>
                    <div class="col-md-12">
                        <label class="premium-label">Plan Terapéutico / Recomendaciones</label>
                        <textarea class="premium-input" name="psic_plan_terapeutico" rows="3" placeholder="Pasos a seguir, frecuencia de sesiones, técnicas a aplicar..."></textarea>
                    </div>
                </div>
            </div>
        </div>


    </form>
</div>

<script>
    // Inicialización del Selector DSM-5
    $(document).ready(function() {
        console.log("Inicializando Selector DSM-5 Premium...");
        
        // Inicializar Select2 para DSM-5
        $('#selector_dsm5').select2({
            placeholder: 'Buscar diagnóstico en el manual DSM-5...',
            minimumInputLength: 2,
            ajax: {
                url: '../ajax/dsm5.php?op=listar',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return { results: data };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }, // IMPORTANTE: Permite renderizar HTML
            templateResult: formatDsm5Result,
            templateSelection: formatDsm5Selection
        });

        // Evento al seleccionar un diagnóstico
        $('#selector_dsm5').on('select2:select', function (e) {
            var data = e.params.data;
            agregarFilaDsm5(data.codigo, data.enfermedad, data.categoria);
            $(this).val(null).trigger('change'); // Limpiar selector
        });
    });

    function formatDsm5Result (repo) {
        if (repo.loading) return repo.text;
        
        // Diseño mucho más legible y profesional
        var markup = "<div style='padding: 8px; border-bottom: 1px solid #f1f5f9;'>" +
            "<div style='font-weight:700; color:#1e293b; font-size:15px; margin-bottom:4px;'>" +
                "<span style='background:#dcfce7; color:#15803d; padding:2px 8px; border-radius:4px; margin-right:8px; font-family:monospace;'>[" + repo.codigo + "]</span>" + 
                repo.enfermedad + 
            "</div>" +
            "<div style='font-size:12px; color:#64748b; padding-left:5px;'>" +
                "<i class='fa fa-tag' style='margin-right:5px;'></i> <b style='color:#475569;'>Categoría:</b> " + repo.categoria + 
            "</div>" +
        "</div>";
        
        return markup;
    }

    function formatDsm5Selection (repo) {
        // Cuando ya está seleccionado en la caja de búsqueda
        if (!repo.codigo) return repo.text;
        return "<b>[" + repo.codigo + "]</b> " + repo.enfermedad;
    }


    function agregarFilaDsm5(codigo, enfermedad, categoria) {
        // Quitar mensaje de "No hay datos"
        $("#body_dsm5 .no-data").remove();

        // Verificar si ya existe
        var existe = false;
        $('input[name="dsm5_codigo[]"]').each(function() {
            if ($(this).val() === codigo && $(this).closest('tr').find('input[name="dsm5_enfermedad[]"]').val() === enfermedad) {
                existe = true;
            }
        });

        if (existe) {
            bootbox.alert("Este diagnóstico ya ha sido agregado.");
            return;
        }

        var fila = '<tr>' +
            '<td class="text-center"><i class="fa fa-trash dsm5-btn-delete" onclick="eliminarFilaDsm5(this)"></i></td>' +
            '<td><span class="dsm5-badge">' + codigo + '</span><input type="hidden" name="dsm5_codigo[]" value="' + codigo + '"></td>' +
            '<td><input type="hidden" name="dsm5_enfermedad[]" value="' + enfermedad + '"><b>' + enfermedad + '</b></td>' +
            '<td><input type="hidden" name="dsm5_categoria[]" value="' + categoria + '"><span class="text-muted">' + categoria + '</span></td>' +
            '</tr>';

        $("#body_dsm5").append(fila);
    }

    function eliminarFilaDsm5(btn) {
        $(btn).closest('tr').remove();
        if ($("#body_dsm5 tr").length === 0) {
            $("#body_dsm5").append('<tr class="no-data"><td colspan="4" class="text-center text-muted">No se han seleccionado diagnósticos aún.</td></tr>');
        }
    }
</script>

