File "casosMedicos.php"
Full Path: C:/wamp64/www/casos_medicos1/views/casosMedicos.php
File size: 23.44 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Dashboard Casos Médicos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #f4f6f4;
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-custom {
height: 80px;
background: linear-gradient(90deg, #2d7a2e 0%, #1f5c20 50%, #28a745 100%);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.navbar-custom .logo-title {
display: flex;
align-items: center;
gap: 12px;
}
.navbar-custom .logo-title img {
height: 54px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
background: #fff;
padding: 3px;
}
.navbar-custom .logo-title span {
color: #fff;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.2px;
text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
.navbar-custom .user-info {
color: #fff;
font-weight: 1000;
font-size: 1rem;
}
.btn-sm {
background-color: #FFFFFF;
/* Fondo blanco */
color: #2E7D32;
/* Texto verde */
border: none;
padding: 5px 12px;
font-size: 0.9rem;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.dashboard-card {
background: #ffffff;
border-radius: 16px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s;
box-shadow: 0 6px 18px rgba(13, 38, 0, 0.06);
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.dashboard-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.dashboard-card i {
font-size: 40px;
margin-bottom: 10px;
}
.dashboard-card .text {
font-size: 1.05rem;
font-weight: 700;
color: #222;
}
.card-green {
border-top: 6px solid #28a745;
}
.card-orange {
border-top: 6px solid #fd7e14;
}
.card-blue {
border-top: 6px solid #0d6efd;
}
.card-gray {
border-top: 6px solid #6c757d;
}
.card-info {
border-top: 6px solid #17a2b8;
}
.card-dark {
border-top: 6px solid #343a40;
}
.powerbi-container {
background-color: #fff;
border-radius: 16px;
padding: 18px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
margin-top: 18px;
}
.powerbi-container iframe {
width: 100%;
height: 78vh;
border-radius: 10px;
border: none;
}
.mini-option {
border: 2px solid #198754;
border-radius: 12px;
padding: 12px;
text-align: center;
cursor: pointer;
transition: 0.2s;
margin-bottom: 12px;
}
.mini-option:hover {
background: #f1f8f1;
transform: scale(1.03);
}
.mini-option i {
font-size: 28px;
}
.mini-option h6 {
font-weight: 700;
margin-top: 6px;
font-size: 0.95rem;
color: #145c1b;
}
/* Animation */
.fade-in {
animation: fadeIn .6s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive tweaks */
@media (max-width: 575.98px) {
.dashboard-card {
height: 120px;
padding: 14px;
}
.navbar-custom {
height: 70px;
}
.navbar-custom .logo-title span {
font-size: 1.2rem;
}
.powerbi-container iframe {
height: 60vh;
}
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-custom mb-4">
<div class="container-fluid d-flex justify-content-between align-items-center">
<div class="logo-title">
<img src="../public/imagen/avicampo.png" alt="Logo Avicampo">
<span>Seguimiento Gestión de casos de salud - PRRL</span>
</div>
<div class="d-flex align-items-center gap-3">
<span class="user-info">Usuario: <?= htmlspecialchars($_SESSION['usuario']) ?></span>
<a href="index.php?url=casosMedicos/salir" class="btn btn-outline-light btn-sm">
<i class="bi bi-arrow-left"></i>Salir</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row g-4 mb-4 fade-in">
<div class="col-md-3 col-6">
<a href="#" data-bs-toggle="modal" data-bs-target="#modalCasosMedicosMenu" class="text-decoration-none">
<div class="dashboard-card card-green">
<i class="bi bi-file-medical text-success"></i>
<div class="text">Gestión de Casos de Salud</div>
</div>
</a>
</div>
<div class="col-md-3 col-6">
<a href="#" data-bs-toggle="modal" data-bs-target="#modalAusentismosMenu" class="text-decoration-none">
<div class="dashboard-card card-dark">
<i class="bi bi-clock-history text-dark"></i>
<div class="text">Gestión de Ausentismos</div>
</div>
</a>
</div>
<div class="col-md-3 col-6">
<a href="#" data-bs-toggle="modal" data-bs-target="#modalHistorial" class="text-decoration-none">
<div class="dashboard-card card-info">
<i class="bi bi-card-list text-info"></i>
<div class="text">Historial Casos</div>
</div>
</a>
</div>
<div class="col-md-3 col-6">
<a href="<?= BASE_URL ?>Usuario/lista" class="text-decoration-none">
<div class="dashboard-card card-gray">
<i class="bi bi-people text-secondary"></i>
<div class="text">Usuarios</div>
</div>
</a>
</div>
</div>
<div class="powerbi-container">
<iframe title="Casos Médicos"
src="https://app.powerbi.com/view?r=eyJrIjoiOGM0ZTc5NDEtMzA0NS00MDZmLTg2MzctNGEzNTU3MGQyOTIyIiwidCI6ImI0OTViMDI5LTY3N2EtNDc5Yy04Yjk2LTQ5Mjg0OGYzYTQyMiJ9"
allowFullScreen="true">
</iframe>
</div>
</div>
<div class="modal fade" id="modalCasosMedicosMenu" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-success text-white">
<h5 class="modal-title">
<i class="bi bi-file-medical"></i> Gestión de Casos Mèdicos
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<a href="index.php?url=casosMedicos/pacientes" class="text-decoration-none text-dark">
<div class="mini-option">
<i class="bi bi-person-plus-fill text-success"></i>
<h6>Nuevo Registro de Paciente</h6>
</div>
</a>
<div class="mini-option">
<i class="bi bi-search text-primary"></i>
<h6>Consultar Paciente por Cédula</h6>
<div class="input-group mt-2">
<input type="text" id="cedula_buscar_paciente" class="form-control form-control-sm" placeholder="Cédula del paciente">
<button type="button" class="btn btn-success btn-sm" onclick="buscarPacienteCedula()">
<i class="bi bi-arrow-right-circle"></i>
</button>
</div>
</div>
<a href="index.php?url=casosMedicos/historialCasos" class="text-decoration-none text-dark">
<div class="mini-option">
<i class="bi bi-card-list text-info"></i>
<h6>Historial de Casos Médicos</h6>
</div>
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalAusentismo" tabindex="-1">
<div class="modal-dialog modal-lg">
<form id="formAusentismo" class="modal-content" method="post" enctype="multipart/form-data">
<div class="modal-header bg-warning text-dark">
<h5 class="modal-title"><i class="bi bi-briefcase-medical"></i> Registro de Ausentismo</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="modal-subtitle">Información del Empleado</div>
<label class="form-label mt-2">Cédula del Colaborador:</label>
<input type="text" name="cedula" id="cedula_aus" class="form-control" placeholder="Ingrese la cédula" required>
<small class="text-muted">⚠️ Sin puntos ni comas</small>
<div id="infoEmpleado" class="mt-3" style="display:none;">
<div class="alert alert-light border">
<div class="row">
<div class="col-md-6 mb-2"><strong style="color:#1f5c20;">Nombre:</strong> <span id="nombre"></span></div>
<div class="col-md-6 mb-2"><strong style="color:#1f5c20;">Centro de Costo:</strong> <span id="ccosto"></span></div>
<div class="col-md-6 mb-2"><strong style="color:#1f5c20;">Descripción:</strong> <span id="descripcion"></span></div>
<div class="col-md-6 mb-2"><strong style="color:#1f5c20;">Cargo:</strong> <span id="cargo"></span></div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<label class="form-label">Teléfono:</label>
<input type="text" id="telefono" name="telefono" class="form-control form-control-sm" placeholder="Teléfono">
</div>
<div class="col-md-6">
<label class="form-label">Correo electrónico:</label>
<input type="email" id="correo" name="correo" class="form-control form-control-sm" placeholder="Correo electrónico">
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<label class="form-label">EPS:</label>
<select id="eps" name="eps" class="form-select form-select-sm">
<option value="">Seleccione EPS</option>
<option value="SOS">SOS</option>
<option value="Sanitas">Sanitas</option>
<option value="Cafam">Cafam</option>
<option value="Colsubsidio">Colsubsidio</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Tipo de Incapacidad:</label>
<select id="tipo_incapacidad" name="tipo_incapacidad" class="form-select form-select-sm" required>
<option value="">Seleccione tipo</option>
<option value="Enfermedad General">Enfermedad General</option>
<option value="Accidente de Tránsito">Accidente de Tránsito</option>
<option value="Licencia de Maternidad">Licencia de Maternidad</option>
<option value="Licencia de Paternidad">Licencia de Paternidad</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-subtitle mt-3">Detalle del Ausentismo</div>
<div id="camposIncapacidad" style="display:none;">
<div class="row">
<div class="col-md-4">
<label class="form-label">Fecha Inicio:</label>
<input type="date" id="fecha_inicio" name="fecha_inicio" class="form-control form-control-sm">
</div>
<div class="col-md-4">
<label class="form-label">Fecha Fin:</label>
<input type="date" id="fecha_fin" name="fecha_fin" class="form-control form-control-sm">
</div>
<div class="col-md-4">
<label class="form-label">Días:</label>
<input type="number" id="dias" name="dias" class="form-control form-control-sm" readonly>
</div>
</div>
<div class="mt-3">
<label class="form-label">Certificado de Incapacidad:</label>
<input type="file" id="certificado" name="certificado" class="form-control form-control-sm" accept=".pdf,.jpg,.png,.jpeg">
</div>
<div class="mt-3">
<label class="form-label">Epicrisis:</label>
<input type="file" id="epicrisis" name="epicrisis" class="form-control form-control-sm" accept=".pdf,.jpg,.png,.jpeg">
</div>
<div class="mt-3" id="campoFurips" style="display:none;">
<label class="form-label">FURIPS:</label>
<input type="file" id="furips" name="furips" class="form-control form-control-sm" accept=".pdf,.jpg,.png,.jpeg">
</div>
<div class="mt-3" id="campoRegistroCivil" style="display:none;">
<label class="form-label">Registro Civil:</label>
<input type="file" id="registro_civil" name="registro_civil" class="form-control form-control-sm" accept=".pdf,.jpg,.png,.jpeg">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnContinuar" class="btn btn-warning text-white" disabled>Continuar</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
<div class="modal fade" id="modalAusentismosMenu" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-dark text-white">
<h5 class="modal-title">
<i class="bi bi-clock-history"></i> Gestión de Ausentismos
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<a href="index.php?url=casosMedicos/ausentismo" class="text-decoration-none text-dark">
<div class="mini-option">
<i class="bi bi-plus-circle text-success"></i>
<h6>Nuevo Ausentismo</h6>
</div>
</a>
<div class="mini-option">
<i class="bi bi-search text-primary"></i>
<h6>Buscar por Cédula</h6>
<div class="input-group mt-2">
<input type="text" id="cedula_buscar_aus" class="form-control form-control-sm" placeholder="Cédula">
<button type="button" class="btn btn-success btn-sm" onclick="buscarAusentismoCedula()">
<i class="bi bi-arrow-right-circle"></i>
</button>
</div>
</div>
<a href="index.php?url=historico/index" class="text-decoration-none text-dark">
<div class="mini-option">
<i class="bi bi-collection text-dark"></i>
<h6>Historial de Ausentismos</h6>
</div>
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- Modal para consultar Historial de Casos -->
<div class="modal fade" id="modalHistorial" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title"><i class="bi bi-search"></i> Consultar Historial de Casos</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<form method="GET" action="/casos_medicos1/public/index.php">
<input type="hidden" name="url" value="HistorialCasos/listar">
<div class="modal-body">
<label for="cedula" class="form-label">Ingrese cédula del paciente:</label>
<input type="text" name="cedula" id="cedula" class="form-control" placeholder="Ej: 1032456789" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Buscar</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// ===========================
// Variables y Funciones del Modal Ausentismo (MANTENIDAS)
// ===========================
let empleadoValido = false;
$(document).ready(function() {
// Buscar empleado (modal Ausentismo)
$('#cedula_aus').on('keyup change', function() {
let cedula = $(this).val().trim();
if (cedula.length >= 4) {
$.ajax({
url: 'buscar_empleado.php',
type: 'POST',
dataType: 'json',
data: {
cedula: cedula
},
success: function(resp) {
if (resp && resp.encontrado) {
empleadoValido = true;
$('#infoEmpleado').show();
$('#nombre').text(resp.nombre);
$('#ccosto').text(resp.ccosto);
$('#descripcion').text(resp.descripcion);
$('#cargo').text(resp.cargo);
$('#telefono').val(resp.telefono || '');
$('#correo').val(resp.correo || '');
$('#eps').val(resp.eps || '');
$('#btnContinuar').prop('disabled', false);
} else {
empleadoValido = false;
$('#infoEmpleado').hide();
$('#btnContinuar').prop('disabled', true);
}
},
error: function() {
empleadoValido = false;
$('#infoEmpleado').hide();
$('#btnContinuar').prop('disabled', true);
}
});
} else {
$('#infoEmpleado').hide();
$('#btnContinuar').prop('disabled', true);
}
});
// Mostrar campos dinámicos según tipo de incapacidad
$('#tipo_incapacidad').on('change', function() {
let tipo = $(this).val();
if (tipo) {
$('#camposIncapacidad').show();
$('#campoFurips, #campoRegistroCivil').hide();
if (tipo === 'Accidente de Tránsito') $('#campoFurips').show();
if (tipo === 'Licencia de Maternidad' || tipo === 'Licencia de Paternidad') $('#campoRegistroCivil').show();
} else {
$('#camposIncapacidad').hide();
}
});
// Calcular dias entre fechas (incluye ambos días)
$('#fecha_inicio, #fecha_fin').on('change', function() {
let inicio = new Date($('#fecha_inicio').val());
let fin = new Date($('#fecha_fin').val());
if (!isNaN(inicio) && !isNaN(fin) && fin >= inicio) {
let diff = Math.ceil((fin - inicio) / (1000 * 60 * 60 * 24)) + 1;
$('#dias').val(diff);
} else {
$('#dias').val('');
}
});
// (Opcional) Prevención de submit si empleado no válido
$('#formAusentismo').on('submit', function(e) {
if (!empleadoValido) {
e.preventDefault();
alert('Por favor ingrese una cédula válida y seleccione el empleado antes de continuar.');
return false;
}
// El formulario seguirá su flujo normal (POST). Puedes añadir validaciones adicionales aquí.
});
});
// ===========================
// Función para buscar Paciente por Cédula (CASOS MÉDICOS)
// ===========================
function buscarPacienteCedula() {
let ced = document.getElementById("cedula_buscar_paciente").value.trim();
if (ced === "") {
alert("Ingrese una cédula para consultar el paciente");
return;
}
// Pasar por el router
window.location.href =
"index.php?url=HojaVida/ver&cedula=" + encodeURIComponent(ced);
}
// Buscar Ausentismo por Cédula (AUSENTISMOS)
function buscarAusentismoCedula() {
let ced = document.getElementById("cedula_buscar_aus").value.trim();
if (ced === "") {
alert("Ingrese una cédula para continuar");
return;
}
// Redirige a la página que mostrará los ausentismos de dicha cédula
window.location.href = "index.php?url=casosMedicos/verAusentismo&cedula=" + encodeURIComponent(ced);
}
</script>
</body>
</html>