Tiny File Manager

Back Back Up Advanced Editor

<!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>

.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>

<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="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="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>

<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>

<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-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>

<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>

<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>

$(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>