<?php
include("conexion.php");
session_start();
if(!isset($_SESSION['usuario'])) {
header('Location: login.php');
exit();
}
$perfil = strtolower($_SESSION['perfil'] ?? '');
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Dashboard Casos Médicos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
/* ===========================
Global / Body
=========================== */
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
=========================== */
.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: 600;
font-size: 0.98rem;
}
/* ===========================
Dashboard cards
=========================== */
.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
=========================== */
.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;
}
/* ===========================
Modal styles (mini-option es el diseño unificado)
=========================== */
.modal-subtitle {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
background-color: #1f5c20;
padding: 8px 12px;
border-radius: 8px;
margin-top: 10px;
display: inline-block;
}
label.form-label {
color: #1f5c20;
font-weight: 700;
}
/* Estilo unificado para las opciones de menú en modales (mini-option) */
.mini-option {
border: 2px solid #198754; /* Borde verde para ambos modales */
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>
<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="imagen/avicampo.png" alt="Logo Avicampo" onerror="this.style.display='none'">
<span>Seguimiento Gestión de casos de salud - PRRL</span>
</div>
<div class="d-flex align-items-center gap-3">
<div class="text-end me-2">
<div class="user-info">Usuario: <?=htmlspecialchars($_SESSION['usuario'])?></div>
<div style="font-size:0.8rem;color:rgba(255,255,255,0.85)"><?=htmlspecialchars($_SESSION['nombre'] ?? '')?></div>
</div>
<a href="logout.php" class="btn btn-outline-light btn-sm">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="pacientes/historial_incapacidades.php" 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="usuarios/lista_usuarios.php" 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 class="col-md-3 col-6">
<a href="pacientes/historial_incapacidades.php" 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>
<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="pacientes/nuevo_paciente.php" 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="pacientes/historial_incapacidades.php" 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="ausentismo_publico.php" 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="ausentismos/historico_completo.php" 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>
<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() {
// Captura el valor del input en el modal de Casos Médicos
let ced = document.getElementById("cedula_buscar_paciente").value.trim();
if (ced === "") {
alert("Ingrese una cédula para consultar el paciente");
return;
}
// Redirige a la página de verificación del paciente
// Nota: El path es pacientes/ver_paciente.php (la ruta donde se debe buscar)
window.location.href = "./ver_paciente.php?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 = "ausentismos/ver_ausentismo.php?cedula=" + encodeURIComponent(ced);
}
</script>
</body>
</html>