<?php
// FORMULARIO FEMO 2025 - MEDICINA OCUPACIONAL ECUADOR
// Según Acuerdo Ministerial 00025-2025
?>
<div id="femo-container" class="premium-form">
    <!-- Header del Formulario -->
    <div class="form-header-premium mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h3 class="mb-0 text-gradient"><i class="fa fa-briefcase me-2"></i>Historia Clínica Ocupacional</h3>
                <p class="text-muted small mb-0">Formulario FEMO - MSP Ecuador v2025</p>
            </div>
            <div class="badge bg-primary-soft text-primary p-2 rounded-pill">
                <i class="fa fa-shield-alt me-1"></i> Cumple Acuerdo 00025-2025
            </div>
        </div>
    </div>

    <!-- Navegación por Tabs -->
    <ul class="nav nav-tabs-premium mb-4" id="femoTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-general" type="button"><i class="fa fa-id-card"></i> Identificación</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-laboral" type="button"><i class="fa fa-industry"></i> Datos Laborales</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-antecedentes" type="button"><i class="fa fa-history"></i> Antecedentes</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-examen" type="button"><i class="fa fa-stethoscope"></i> Examen Físico</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-especialidades" type="button"><i class="fa fa-eye"></i> Específicas</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-complementarios" type="button"><i class="fa fa-microscope"></i> Exámenes</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-aptitud" type="button"><i class="fa fa-check-circle"></i> Aptitud</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-legal" type="button"><i class="fa fa-file-contract"></i> Legal</button>
        </li>
    </ul>

    <form id="form-femo" class="tab-content premium-tab-content">
        <!-- 1. IDENTIFICACIÓN -->
        <div class="tab-pane fade show active" id="tab-general">
            <div class="card card-premium mb-3">
                <div class="card-header bg-light"><b>1.1 DATOS DEL ESTABLECIMIENTO Y MÉDICO</b></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Establecimiento de Salud</label>
                            <input type="text" name="femo_establecimiento" class="form-control" placeholder="Nombre del centro médico">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Ciudad / Provincia</label>
                            <input type="text" name="femo_ubicacion" class="form-control" placeholder="Quito / Pichincha">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Tipo de Evaluación</label>
                            <select name="femo_tipo_eval" class="form-select select2">
                                <option value="Preocupacional">Preocupacional (Ingreso)</option>
                                <option value="Periódica" selected>Periódica</option>
                                <option value="Reintegro">Reintegro</option>
                                <option value="Retiro">Retiro / Salida</option>
                                <option value="Post-incapacidad">Post-incapacidad</option>
                                <option value="Cambio-puesto">Cambio de puesto</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-premium">
                <div class="card-header bg-light"><b>1.2 DATOS DEL TRABAJADOR</b></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Apellidos Completos</label>
                            <input type="text" name="ft_apellidos" class="form-control bg-light" readonly id="ft_apellidos">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Nombres Completos</label>
                            <input type="text" name="ft_nombres" class="form-control bg-light" readonly id="ft_nombres">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Cédula / Pasaporte</label>
                            <input type="text" name="ft_cedula" class="form-control bg-light" readonly id="ft_cedula">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Edad</label>
                            <input type="text" name="ft_edad" class="form-control bg-light" readonly id="ft_edad">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Sexo</label>
                            <input type="text" name="ft_sexo" class="form-control bg-light" readonly id="ft_sexo">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Teléfono / Celular</label>
                            <input type="text" name="ft_telefono" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Correo Electrónico</label>
                            <input type="email" name="ft_email" class="form-control">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Dirección Domiciliaria Completa</label>
                            <textarea name="ft_direccion" class="form-control" rows="1"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. DATOS LABORALES -->
        <div class="tab-pane fade" id="tab-laboral">
            <div class="card card-premium mb-3">
                <div class="card-header bg-light"><b>2.1 INFORMACIÓN DE LA EMPRESA</b></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Empresa / Razón Social</label>
                            <input type="text" name="femo_empresa" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">RUC / RISE</label>
                            <input type="text" name="femo_ruc" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Actividad Económica</label>
                            <input type="text" name="femo_actividad_eco" class="form-control">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-premium">
                <div class="card-header bg-light"><b>2.2 EXPOSICIÓN A RIESGOS LABORALES (NIVEL ACTUAL)</b></div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="table-dark">
                                <tr>
                                    <th>FACTOR DE RIESGO</th>
                                    <th>SI</th>
                                    <th>NO</th>
                                    <th>DESCRIPCIÓN / TIEMPO EXPOSICIÓN</th>
                                    <th>MEDIDA PREVENTIVA / EPP</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Físicos (Ruido, Temp, Rad)</td>
                                    <td><input type="radio" name="r_fisico" value="si"></td>
                                    <td><input type="radio" name="r_fisico" value="no" checked></td>
                                    <td><input type="text" name="r_fisico_desc" class="form-control form-control-sm"></td>
                                    <td><input type="text" name="r_fisico_epp" class="form-control form-control-sm"></td>
                                </tr>
                                <tr>
                                    <td>Químicos (Polvos, Gases, Vap)</td>
                                    <td><input type="radio" name="r_quimico" value="si"></td>
                                    <td><input type="radio" name="r_quimico" value="no" checked></td>
                                    <td><input type="text" name="r_quimico_desc" class="form-control form-control-sm"></td>
                                    <td><input type="text" name="r_quimico_epp" class="form-control form-control-sm"></td>
                                </tr>
                                <tr>
                                    <td>Biológicos (Virus, Bact, Hong)</td>
                                    <td><input type="radio" name="r_biol" value="si"></td>
                                    <td><input type="radio" name="r_biol" value="no" checked></td>
                                    <td><input type="text" name="r_biol_desc" class="form-control form-control-sm"></td>
                                    <td><input type="text" name="r_biol_epp" class="form-control form-control-sm"></td>
                                </tr>
                                <tr>
                                    <td>Ergonómicos (Postura, Carga)</td>
                                    <td><input type="radio" name="r_ergo" value="si"></td>
                                    <td><input type="radio" name="r_ergo" value="no" checked></td>
                                    <td><input type="text" name="r_ergo_desc" class="form-control form-control-sm"></td>
                                    <td><input type="text" name="r_ergo_epp" class="form-control form-control-sm"></td>
                                </tr>
                                <tr>
                                    <td>Psicosociales (Carga ment, Stress)</td>
                                    <td><input type="radio" name="r_psico" value="si"></td>
                                    <td><input type="radio" name="r_psico" value="no" checked></td>
                                    <td><input type="text" name="r_psico_desc" class="form-control form-control-sm"></td>
                                    <td><input type="text" name="r_psico_epp" class="form-control form-control-sm"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. ANTECEDENTES -->
        <div class="tab-pane fade" id="tab-antecedentes">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="card card-premium h-100">
                        <div class="card-header bg-light"><b>3.1 PERSONALES Y FAMILIARES</b></div>
                        <div class="card-body">
                            <label class="form-label">Patológicos Personales</label>
                            <textarea name="ant_pat_p" class="form-control mb-2" rows="2"></textarea>
                            <label class="form-label">Quirúrgicos / Traumáticos</label>
                            <textarea name="ant_quir" class="form-control mb-2" rows="2"></textarea>
                            <label class="form-label">Patológicos Familiares</label>
                            <textarea name="ant_pat_f" class="form-control mb-2" rows="2"></textarea>
                            <label class="form-label">Gineco-Obstétricos (Si aplica)</label>
                            <textarea name="ant_gineco" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-premium h-100">
                        <div class="card-header bg-light"><b>3.2 ESTILO DE VIDA Y HÁBITOS</b></div>
                        <div class="card-body">
                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <label class="form-label">Fuma (Tabaco)</label>
                                    <select name="hab_fuma" class="form-select">
                                        <option value="Nunca">Nunca</option>
                                        <option value="Ex-fumador">Ex-fumador</option>
                                        <option value="Ocasional">Ocasional</option>
                                        <option value="Frecuente">Frecuente</option>
                                    </select>
                                </div>
                                <div class="col-6">
                                    <label class="form-label">Bebe (Alcohol)</label>
                                    <select name="hab_bebe" class="form-select">
                                        <option value="Nunca">Nunca</option>
                                        <option value="Ocasional">Ocasional</option>
                                        <option value="Frecuente">Frecuente</option>
                                    </select>
                                </div>
                            </div>
                            <label class="form-label">Actividad Física (Frecuencia/Tipo)</label>
                            <input type="text" name="hab_ejercicio" class="form-control mb-2">
                            <label class="form-label">Nutrición / Dieta</label>
                            <input type="text" name="hab_dieta" class="form-control mb-2">
                            <label class="form-label">Calidad del Sueño (Horas)</label>
                            <input type="text" name="hab_sueno" class="form-control">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. EXAMEN FÍSICO -->
        <div class="tab-pane fade" id="tab-examen">
            <div class="card card-premium mb-3">
                <div class="card-header bg-light"><b>4.1 SIGNOS VITALES Y ANTROPOMETRÍA</b></div>
                <div class="card-body">
                    <div class="row g-3 text-center">
                        <div class="col-md-2">
                            <label class="form-label d-block">TA (mmHg)</label>
                            <input type="text" name="sv_ta" class="form-control text-center" placeholder="120/80">
                        </div>
                        <div class="col-md-1">
                            <label class="form-label d-block">FC</label>
                            <input type="number" name="sv_fc" class="form-control text-center">
                        </div>
                        <div class="col-md-1">
                            <label class="form-label d-block">FR</label>
                            <input type="number" name="sv_fr" class="form-control text-center">
                        </div>
                        <div class="col-md-1">
                            <label class="form-label d-block">T°C</label>
                            <input type="text" name="sv_temp" class="form-control text-center">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label d-block">Peso (Kg)</label>
                            <input type="number" name="sv_peso" id="sv_peso" step="0.1" class="form-control text-center">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label d-block">Talla (m)</label>
                            <input type="number" name="sv_talla" id="sv_talla" step="0.01" class="form-control text-center">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label d-block">IMC</label>
                            <input type="text" name="sv_imc" id="sv_imc" class="form-control text-center bg-light" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-premium">
                <div class="card-header bg-light"><b>4.2 EXAMEN REGIONAL Y POR SISTEMAS</b></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Cabeza / Cuello</label>
                            <textarea name="ef_cabeza" class="form-control" rows="2">Sin hallazgos patológicos</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tórax (Cardio-Pulmonar)</label>
                            <textarea name="ef_torax" class="form-control" rows="2">Ruidos normales, buena entrada de aire</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Abdomen</label>
                            <textarea name="ef_abdomen" class="form-control" rows="2">Blando, depresible, no doloroso</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Columna Vertebral</label>
                            <textarea name="ef_columna" class="form-control" rows="2">Sin desviaciones, arcos de movilidad conservados</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Extremidades (MMSS/MMII)</label>
                            <textarea name="ef_ext" class="form-control" rows="2">Simétricas, fuerza y tono conservado</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Neurológico / Piel</label>
                            <textarea name="ef_neuro" class="form-control" rows="2">Consciente, orientado, piel íntegra</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 5. EVALUACIONES ESPECÍFICAS -->
        <div class="tab-pane fade" id="tab-especialidades">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="card card-premium h-100">
                        <div class="card-header bg-light"><b>5.1 VALORACIÓN VISUAL Y AUDITIVA</b></div>
                        <div class="card-body">
                            <label class="form-label">Agudeza Visual (Cerca/Lejos/Colores)</label>
                            <textarea name="ev_visual" class="form-control mb-3" rows="3"></textarea>
                            <label class="form-label">Otoscopia / Valoración Auditiva Inicial</label>
                            <textarea name="ev_auditiva" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-premium h-100">
                        <div class="card-header bg-light"><b>5.2 OSTEOMUSCULAR (POSTURA/CARGA)</b></div>
                        <div class="card-body">
                            <label class="form-label">Test de Romberg / Marcha</label>
                            <input type="text" name="ev_ost_test" class="form-control mb-2">
                            <label class="form-label">Observaciones de Postura Laboral</label>
                            <textarea name="ev_postura" class="form-control" rows="4"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 6. EXÁMENES COMPLEMENTARIOS -->
        <div class="tab-pane fade" id="tab-complementarios">
            <div class="card card-premium">
                <div class="card-header bg-light"><b>6.1 RESULTADOS DE EXÁMENES DE APOYO</b></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Laboratorio Clínico (Sangre, Orina, etc)</label>
                            <textarea name="ec_lab" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Audiometría / Espirometría</label>
                            <textarea name="ec_funcional" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">RX / Imagenología</label>
                            <textarea name="ec_imagen" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Electrocardiograma / Otros</label>
                            <textarea name="ec_otros" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 7. APTITUD Y DIAGNÓSTICO -->
        <div class="tab-pane fade" id="tab-aptitud">
            <div class="card card-premium mb-3">
                <div class="card-header bg-light"><b>7.1 IMPRESIÓN DIAGNÓSTICA (CIE-10)</b></div>
                <div class="card-body">
                    <div id="diagnosticos_list" class="mb-2"></div>
                    <div class="input-group">
                        <input type="text" id="cie10_search" class="form-control" placeholder="Buscar código o nombre CIE-10...">
                        <button type="button" class="btn btn-outline-secondary"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>

            <div class="card border-primary border-2">
                <div class="card-header bg-primary text-white"><b>7.2 DICTAMEN DE APTITUD MÉDICA OCUPACIONAL</b></div>
                <div class="card-body bg-light-primary">
                    <div class="row g-3">
                        <div class="col-md-12 text-center py-3">
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="femo_aptitud" id="apt_apto" value="APTO" autocomplete="off">
                                <label class="btn btn-outline-success py-3" for="apt_apto"><b>APTO</b></label>

                                <input type="radio" class="btn-check" name="femo_aptitud" id="apt_restr" value="APTO CON RESTRICCIONES" autocomplete="off">
                                <label class="btn btn-outline-warning py-3" for="apt_restr"><b>APTO CON RESTRICCIONES</b></label>

                                <input type="radio" class="btn-check" name="femo_aptitud" id="apt_noapto" value="NO APTO" autocomplete="off">
                                <label class="btn btn-outline-danger py-3" for="apt_noapto"><b>NO APTO</b></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label"><b>Restricciones Específicas</b></label>
                            <textarea name="femo_restricciones" class="form-control border-warning" rows="4" placeholder="Indicar restricciones si aplica..."></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label"><b>Recomendaciones Médicas / Vigilancia</b></label>
                            <textarea name="femo_recomendaciones" class="form-control border-primary" rows="4" placeholder="Indicar recomendaciones..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 8. LEGAL Y FIRMAS -->
        <div class="tab-pane fade" id="tab-legal">
            <div class="alert alert-info border-0 shadow-sm">
                <i class="fa fa-info-circle me-2"></i><b>Nota:</b> Al firmar este documento, se generan automáticamente los anexos de Consentimiento Informado y Autorización de Tratamiento de Datos según la Ley Orgánica de Protección de Datos Personales.
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="card card-premium shadow-none border">
                        <div class="card-body text-center py-5">
                            <div class="mb-3"><i class="fa fa-fingerprint fa-3x text-muted"></i></div>
                            <h6>Huella Digital del Trabajador</h6>
                            <small class="text-muted">(Captura biométrica o escaneo)</small>
                            <hr>
                            <button type="button" class="btn btn-sm btn-outline-secondary">Cargar Huella</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-premium shadow-none border">
                        <div class="card-body text-center py-5">
                            <div class="mb-3"><i class="fa fa-signature fa-3x text-muted"></i></div>
                            <h6>Firma del Trabajador</h6>
                            <small class="text-muted">(Panel de firma táctil / digital)</small>
                            <hr>
                            <canvas id="firma_canvas" class="border rounded bg-white" width="300" height="100"></canvas>
                            <br>
                            <button type="button" class="btn btn-sm btn-link text-danger">Limpiar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer del Formulario -->
        <div class="form-footer-premium mt-4 d-flex justify-content-between">
            <button type="button" class="btn btn-secondary btn-lg px-5" onclick="cancelarFemo()"><i class="fa fa-times"></i> Cancelar</button>
            <button type="submit" class="btn btn-primary btn-lg px-5 shadow-lg"><i class="fa fa-save"></i> FINALIZAR Y FIRMAR FEMO</button>
        </div>
    </form>
</div>

<style>
/* PREMIUM MEDICAL UI STYLES */
.premium-form { font-family: 'Outfit', sans-serif; background: #fff; padding: 20px; border-radius: 15px; }
.card-premium { border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; margin-bottom: 20px; transition: 0.3s; }
.card-premium:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.nav-tabs-premium { border-bottom: 2px solid #f1f5f9; gap: 10px; }
.nav-tabs-premium .nav-link { border: none; border-bottom: 3px solid transparent; color: #64748b; padding: 12px 20px; font-weight: 500; border-radius: 0; }
.nav-tabs-premium .nav-link i { margin-right: 8px; opacity: 0.7; }
.nav-tabs-premium .nav-link.active { color: #0d6efd; border-bottom-color: #0d6efd; background: transparent; }
.nav-tabs-premium .nav-link:hover { background: #f8fafc; color: #334155; }
.form-label { font-weight: 600; color: #475569; font-size: 0.85rem; margin-bottom: 5px; }
.form-control, .form-select { border-color: #e2e8f0; border-radius: 8px; padding: 10px 15px; font-size: 0.9rem; }
.form-control:focus { border-color: #0d6efd; box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1); }
.bg-light-primary { background-color: #f0f7ff; }
.text-gradient { background: linear-gradient(45deg, #1e3a8a, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.badge.bg-primary-soft { background: #e0e7ff; color: #4338ca; }
</style>

<script>
$(document).ready(function() {
    // Cálculo automático de IMC
    $('#sv_peso, #sv_talla').on('input', function() {
        let p = parseFloat($('#sv_peso').val());
        let t = parseFloat($('#sv_talla').val());
        if(p > 0 && t > 0) {
            let imc = p / (t * t);
            $('#sv_imc').val(imc.toFixed(2));
        }
    });

    // Envío del Formulario via AJAX
    $('#form-femo').on('submit', function(e) {
        e.preventDefault();
        // Lógica de guardado...
        alert("Enviando Formulario FEMO 2025 para validación y firma...");
    });
});
</script>
