<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Historia Clínica - <?= htmlspecialchars($hoja['nombre']) ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f4f6f4;
font-family: 'Segoe UI', sans-serif;
}
.card {
border-radius: 12px;
}
.nav-tabs .nav-link.active {
background-color: #ff7f00 !important;
color: #fff !important;
border: none;
}
.nav-tabs .nav-link {
color: #ff7f00;
font-weight: 500;
}
.info-label {
font-weight: 600;
color: #2d7a2e;
}
.info-value {
color: #222;
}
h4 {
border-left: 6px solid #ff7f00;
padding-left: 10px;
color: #333;
}
h6 {
color: #2d7a2e;
font-weight: bold;
}
.btn-warning {
background-color: #ff7f00;
border: none;
color: #fff;
}
.btn-success {
background-color: #2d7a2e;
border: none;
}
.btn-secondary {
background-color: #95a5a6;
border: none;
}
.foto-paciente {
max-width: 140px;
border-radius: 8px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
select.form-select-sm {
border: 1px solid #ccc;
}
/* Diagnóstico tabla desplegable */
.main-row {
cursor: pointer;
transition: background-color 0.2s;
}
.main-row:hover {
background-color: #e9f5ff;
}
.detail-cell {
background-color: #f1f5f9;
padding: 15px;
border-radius: 8px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
font-size: 0.9rem;
}
.detail-section {
margin-bottom: 12px;
}
.detail-title {
font-weight: bold;
color: #0d6efd;
margin-bottom: 4px;
border-bottom: 1px solid #dee2e6;
padding-bottom: 2px;
}
.detail-cell p {
margin: 0;
text-align: justify;
}
.toggle-icon {
display: inline-block;
width: 20px;
font-weight: bold;
margin-right: 8px;
transition: transform 0.2s;
}
.toggle-icon.rotate {
transform: rotate(45deg);
}
</style>
</head>
<body class="p-4">
<div class="container bg-white p-4 shadow rounded">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4>Historia Clínica - <?= htmlspecialchars($hoja['nombre']) ?></h4>
<div>
<button id="btnEditar" class="btn btn-sm btn-warning">Editar</button>
<button id="btnGuardar" class="btn btn-sm btn-success d-none">Actualizar</button>
<button id="btnCancelar" class="btn btn-sm btn-secondary d-none">Cancelar</button>
<a href="index.php?url=Reportes/exportar_pdf&cedula=<?= urlencode($cedula) ?>" class="btn btn-sm btn-outline-primary" target="_blank">PDF</a>
<a href="index.php?url=HojaVida/volver" class="btn btn-sm btn-outline-dark">
Volver
</a>
</div>
</div>
<!-- Pestañas -->
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#hoja">Hoja de Vida</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#diag">Diagnóstico</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#rec">Recomendaciones</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#inc">Incapacidades</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#seg">Seguimiento</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#seg">Proceso Calificación</a></li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="hoja">
<div class="row mb-3">
<div class="col-md-3 text-center">
<?php
$fotoBD = $hoja['foto'] ?? '';
$project = '/casos_medicos1/public/';
// Ruta física real (para file_exists)
$rutaServidor = $_SERVER['DOCUMENT_ROOT'] . $project . ltrim($fotoBD, '/');
// Ruta web (para el navegador)
$rutaWeb = $project . ltrim($fotoBD, '/');
if (!empty($fotoBD) && file_exists($rutaServidor)) {
echo '<img src="' . htmlspecialchars($rutaWeb) . '" class="foto-paciente" alt="Foto paciente">';
} else {
echo '<img src="' . $project . 'uploads/default_user.png" class="foto-paciente" alt="Sin foto">';
}
?>
</div>
<div class="col-md-9">
<input type="hidden" name="id" value="<?= $hoja['id'] ?>" id="paciente_id">
<div class="row">
<div class="col-md-6 mb-2"><span class="info-label">Cédula:</span> <?= $hoja['cedula'] ?></div>
<div class="col-md-6 mb-2"><span class="info-label">Nombre:</span> <span data-editable data-name="nombre"><?= $hoja['nombre'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Fecha nacimiento:</span> <span data-editable data-name="fecha_nacimiento"><?= $hoja['fecha_nacimiento'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Edad:</span> <span data-editable data-name="edad"><?= $hoja['edad'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Estado:</span>
<select disabled name="id_estado" class="form-select form-select-sm">
<?php foreach ($listas['estado'] as $e): ?>
<option value="<?= (int)$e['id'] ?>"
<?= ((int)$hoja['id_estado'] === (int)$e['id']) ? 'selected' : '' ?>>
<?= htmlspecialchars($e['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<h6 class="border-bottom pb-2 mt-3">Datos Laborales</h6>
<div class="row">
<div class="col-md-4 mb-2"><span class="info-label">AFP:</span>
<select disabled name="id_afp" class="form-select form-select-sm">
<?php foreach ($listas['afp'] as $a): ?>
<option value="<?= (int)$a['id'] ?>"
<?= ((int)$hoja['id_afp'] === (int)$a['id']) ? 'selected' : '' ?>>
<?= htmlspecialchars($a['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4 mb-2"><span class="info-label">EPS:</span>
<select disabled name="id_eps" class="form-select form-select-sm">
<?php foreach ($listas['eps'] as $ep): ?>
<option value="<?= $ep['id'] ?>" <?= $hoja['id_eps'] == $ep['id'] ? 'selected' : '' ?>>
<?= htmlspecialchars($ep['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4 mb-2"><span class="info-label">ARL:</span>
<select disabled name="id_arl" class="form-select form-select-sm">
<?php foreach ($listas['arl'] as $ar): ?>
<option value="<?= $ar['id'] ?>" <?= $hoja['id_arl'] == $ar['id'] ? 'selected' : '' ?>>
<?= htmlspecialchars($ar['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4 mb-2"><span class="info-label">Empresa:</span>
<select disabled name="id_empresa" class="form-select form-select-sm">
<?php foreach ($listas['empresa'] as $em): ?>
<option value="<?= $em['id'] ?>" <?= $hoja['id_empresa'] == $em['id'] ? 'selected' : '' ?>>
<?= htmlspecialchars($em['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4 mb-2"><span class="info-label">Planta:</span>
<select disabled name="id_planta" class="form-select form-select-sm">
<?php foreach ($listas['planta'] as $pl): ?>
<option value="<?= $pl['id'] ?>" <?= $hoja['id_planta'] == $pl['id'] ? 'selected' : '' ?>>
<?= htmlspecialchars($pl['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4 mb-2"><span class="info-label">Regional:</span><span data-editable data-name="regional"><?= $hoja['regional'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Centro de trabajo:</span> <span data-editable data-name="centro_trabajo"><?= $hoja['centro_trabajo'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Tipo de contrato:</span> <span data-editable data-name="tipo_contrato"><?= $hoja['tipo_contrato'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Fecha inicio:</span> <span data-editable data-name="fecha_inicio"><?= $hoja['fecha_inicio'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Cargo inicial:</span> <span data-editable data-name="cargo_inicial"><?= $hoja['cargo_inicial'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Nuevo cargo:</span> <span data-editable data-name="cargo_reubicado"><?= $hoja['cargo_reubicado'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">% Productividad:</span> <span data-editable data-name="productividad"><?= $hoja['productividad'] ?></span></div>
<div class="col-md-4 mb-2"><span class="info-label">Semanas cotización:</span> <span data-editable data-name="semanas_cotizacion"><?= $hoja['semanas_cotizacion'] ?></span></div>
</div>
</div>
<!-- DIAGNÓSTICO -->
<div class="tab-pane fade" id="diag">
<div id="contenedorDiagnostico" class="p-3 text-center">
<div class="spinner-border text-success"></div>
<p>Cargando diagnóstico...</p>
</div>
<script>
document.querySelector('a[href="#diag"]').addEventListener('shown.bs.tab', function() {
const cedula = "<?= $cedula ?>";
fetch("index.php?url=diagnostico/listar&cedula=" + encodeURIComponent(cedula))
.then(response => response.text())
.then(html => {
document.getElementById("contenedorDiagnostico").innerHTML = html;
})
.catch(err => {
document.getElementById("contenedorDiagnostico").innerHTML =
"<div class='alert alert-danger'>Error al cargar diagnóstico</div>";
});
});
</script>
</div>
<!-- RECOMENDACIONES -->
<div class="tab-pane fade" id="rec">
<div id="contenedorRecomendaciones" class="p-3 text-center">
<div class="spinner-border text-success"></div>
<p>Cargando recomendaciones...</p>
</div>
<script>
document.querySelector('a[href="#rec"]').addEventListener('shown.bs.tab', function() {
const cedula = "<?= $cedula ?>";
fetch("index.php?url=Recomendaciones/index&cedula=" + encodeURIComponent(cedula))
.then(r => r.text())
.then(html => {
document.getElementById("contenedorRecomendaciones").innerHTML = html;
})
.catch(err => {
document.getElementById("contenedorRecomendaciones").innerHTML =
"<div class='alert alert-danger'>Error al cargar recomendaciones</div>";
});
});
</script>
</div>
<!-- INCAPACIDADES -->
<div class="tab-pane fade" id="inc">
<div id="contenedorIncap" class="p-3 text-center">
<div class="spinner-border text-success"></div>
<p>Cargando incapacidades...</p>
</div>
<script>
document.querySelector('a[href="#inc"]').addEventListener('shown.bs.tab', function() {
const cedula = "<?= $cedula ?>";
fetch("index.php?url=Incapacidades/index&cedula=" + encodeURIComponent(cedula))
.then(r => r.text())
.then(html => {
document.getElementById("contenedorIncap").innerHTML = html;
})
.catch(() => {
document.getElementById("contenedorIncap").innerHTML =
"<div class='alert alert-danger'>Error al cargar incapacidades</div>";
});
});
</script>
</div>
<!-- SEGUIMIENTO -->
<div class="tab-pane fade" id="seg">
<div id="contenedorSeguimiento" class="p-3 text-center">
<div class="spinner-border text-primary"></div>
<p>Cargando seguimiento...</p>
</div>
<script>
document.querySelector('a[href="#seg"]').addEventListener('shown.bs.tab', function() {
const cedula = "<?= $cedula ?>"; // ⚠️ Asegúrate que este archivo recibe $cedula
fetch("index.php?url=Seguimiento/listar&cedula=" + encodeURIComponent(cedula))
.then(r => r.text())
.then(html => {
document.getElementById("contenedorSeguimiento").innerHTML = html;
})
.catch(e => {
document.getElementById("contenedorSeguimiento").innerHTML =
"<div class='alert alert-danger'>Error al cargar seguimiento.</div>";
});
});
</script>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Editar Hoja de Vida
document.addEventListener('DOMContentLoaded', () => {
const btnEditar = document.getElementById('btnEditar');
const btnGuardar = document.getElementById('btnGuardar');
const btnCancelar = document.getElementById('btnCancelar');
const campos = document.querySelectorAll('[data-editable]');
const selects = document.querySelectorAll('select[disabled]');
btnEditar.addEventListener('click', () => {
campos.forEach(el => {
const valor = el.innerText.trim();
const input = document.createElement('input');
input.className = 'form-control form-control-sm';
input.name = el.dataset.name;
input.value = valor;
el.replaceWith(input);
});
selects.forEach(s => s.disabled = false);
btnEditar.classList.add('d-none');
btnGuardar.classList.remove('d-none');
btnCancelar.classList.remove('d-none');
});
btnCancelar.addEventListener('click', () => window.location.reload());
btnGuardar.addEventListener('click', () => {
const formData = new FormData();
formData.append('id', document.getElementById('paciente_id').value);
formData.append('cedula', '<?= $cedula ?>');
document.querySelectorAll('input[name], select[name]').forEach(i => formData.append(i.name, i.value));
fetch('actualizar_paciente.php', {
method: 'POST',
body: formData
})
.then(res => res.text())
.then(resp => {
alert(resp);
window.location.reload();
})
.catch(err => alert('Error al guardar: ' + err));
});
});
</script>
</body>
</html>