File "AusentismoNuevo.php"
Full Path: C:/wamp64/www/casos_medicos1/views/AusentismoNuevo.php
File size: 9.95 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Registro Público de Ausentismo - Avicampo</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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
background-color: #f3f6f3;
font-family: 'Segoe UI', sans-serif;
}
.navbar-custom {
background: linear-gradient(90deg, #2d7a2e, #1f5c20, #28a745);
height: 70px;
color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.navbar-custom img {
height: 45px;
margin-right: 10px;
}
.navbar-custom span {
font-size: 1.5rem;
font-weight: 600;
}
.container-form {
background: #fff;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
margin-top: 25px;
padding: 25px;
max-width: 900px;
}
.section-title {
font-size: 1.2rem;
font-weight: 700;
color: #2d7a2e;
margin-top: 15px;
margin-bottom: 10px;
border-bottom: 2px solid #28a745;
}
label {
color: #2d7a2e;
font-weight: 600;
}
input:disabled,
select:disabled {
background-color: #e9ecef;
}
.btn-success {
background: linear-gradient(90deg, #2d7a2e, #28a745);
border: none;
}
.btn-success:hover {
background: #1f5c20;
}
.alert {
font-weight: 500;
}
</style>
</head>
<body>
<nav class="navbar navbar-custom d-flex align-items-center px-3">
<img src="../public/imagen/avicampo.png" alt="Logo Avicampo">
<span>Registro de Ausentismo</span>
</nav>
<div class="container container-form">
<form method="post" enctype="multipart/form-data" action="index.php?url=casosMedicos/guardar">
<!-- Información del Empleado -->
<div class="section-title"><i class="bi bi-person-circle"></i> Información del Empleado</div>
<div class="row mb-3">
<div class="col-md-6">
<label>Cédula:</label>
<input type="text" name="cedula" id="cedula" class="form-control" placeholder="Ingrese cédula" required>
</div>
<div class="col-md-6">
<label>Nombre:</label>
<input type="text" id="nombre" name="nombre" class="form-control" readonly>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label>Centro de Costo:</label>
<input type="text" id="ccosto" name="ccosto" class="form-control" readonly>
</div>
<div class="col-md-6">
<label>Cargo:</label>
<input type="text" id="cargo" name="cargo" class="form-control" readonly>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label>Teléfono:</label>
<input type="text" name="telefono" id="telefono" class="form-control" placeholder="Ingrese teléfono" required>
</div>
<div class="col-md-6">
<label>Correo electrónico:</label>
<input type="email" name="correo" id="correo" class="form-control" placeholder="Ingrese correo" required>
</div>
</div>
<div id="noEncontrado" class="alert alert-warning" style="display:none;">
⚠️ No se encontró ningún empleado con esa cédula.
</div>
<!-- Detalle del Ausentismo -->
<div class="section-title"><i class="bi bi-file-earmark-medical"></i> Detalle del Ausentismo</div>
<div class="mb-3">
<label>Tipo de Incapacidad:</label>
<select id="tipo_incapacidad" name="tipo_incapacidad" class="form-select" required>
<option value="">Seleccione...</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 class="mb-3">
<label>EPS:</label>
<select id="eps" name="eps" class="form-select" required>
<option value="">Seleccione...</option>
<option value="SOS">SOS</option>
<option value="SANITAS">SANITAS</option>
<option value="SURA">SURA</option>
<option value="NUEVA EPS">NUEVA EPS</option>
</select>
</div>
<div id="camposDinamicos"></div>
<div class="text-center mt-4">
<button type="submit" class="btn btn-success px-4"><i class="bi bi-save"></i> Guardar Registro</button>
</div>
</form>
</div>
<?php if (isset($_GET['ok'])): ?>
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="toastMensaje" class="toast text-white border-0 show
<?= $_GET['ok'] == 1 ? 'bg-success' : 'bg-danger' ?>" role="alert">
<div class="d-flex">
<div class="toast-body">
<?= $_GET['ok'] == 1 ? '✔️ Ausentismo guardado correctamente.' : '❌ Error al guardar el ausentismo.' ?>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
</div>
</div>
</div>
<?php endif; ?>
<script>
$(document).ready(function() {
// 🔍 Buscar empleado por cédula
$('#cedula').on('keyup change', function() {
let cedula = $(this).val().trim();
if (cedula.length >= 4) {
$.post('/ausentismo/buscarEmpleado', {
cedula: cedula
}, function(resp) {
if (resp.encontrado) {
$('#nombre').val(resp.nombre);
$('#ccosto').val(resp.ccosto);
$('#cargo').val(resp.cargo);
$('#noEncontrado').hide();
} else {
$('#nombre,#ccosto,#cargo').val('');
$('#noEncontrado').show();
}
}, 'json');
} else {
$('#nombre,#ccosto,#cargo').val('');
$('#noEncontrado').hide();
}
});
// ⚙️ Campos dinámicos según tipo de incapacidad
$('#tipo_incapacidad').change(function() {
const tipo = $(this).val();
let html = '';
if (tipo !== '') {
html += `
<div class="row mb-3">
<div class="col-md-6">
<label>Fecha Inicio:</label>
<input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control" required>
</div>
<div class="col-md-6">
<label>Fecha Fin:</label>
<input type="date" name="fecha_fin" id="fecha_fin" class="form-control" required>
</div>
</div>
<div class="mb-3">
<label>Días:</label>
<input type="number" name="dias" id="dias" class="form-control" readonly>
</div>
<div class="mb-3">
<label>Certificado (PDF/Imagen):</label>
<input type="file" name="certificado" class="form-control" accept=".pdf,image/*" required>
</div>
<div class="mb-3">
<label>Epicrisis (PDF/Imagen):</label>
<input type="file" name="epicrisis" class="form-control" accept=".pdf,image/*" required>
</div>`;
if (tipo === 'Accidente de Tránsito') {
html += `
<div class="mb-3">
<label>FURIPS (PDF/Imagen):</label>
<input type="file" name="furips" class="form-control" accept=".pdf,image/*" required>
</div>`;
}
if (tipo === 'Licencia de Maternidad' || tipo === 'Licencia de Paternidad') {
html += `
<div class="mb-3">
<label>Registro Civil (PDF/Imagen):</label>
<input type="file" name="registro_civil" class="form-control" accept=".pdf,image/*" required>
</div>`;
}
}
$('#camposDinamicos').html(html);
});
// 📅 Calcular días automáticamente
$(document).on('change', '#fecha_inicio,#fecha_fin', function() {
const inicio = new Date($('#fecha_inicio').val());
const fin = new Date($('#fecha_fin').val());
if (!isNaN(inicio) && !isNaN(fin)) {
const diff = Math.round((fin - inicio) / (1000 * 60 * 60 * 24)) + 1;
$('#dias').val(diff > 0 ? diff : 0);
}
});
// 💾 Envío AJAX del formulario
$('#formAusentismo').submit(function(e) {
e.preventDefault();
const formData = new FormData(this);
$.ajax({
url: '/ausentismo/guardar', // ✅ Nuevo endpoint del controlador
type: 'POST',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function(resp) {
if (resp.ok) {
alert("✅ Registro guardado correctamente");
$('#formAusentismo')[0].reset();
$('#camposDinamicos').html('');
} else {
alert("⚠️ " + resp.msg);
}
},
error: function(xhr) {
console.error(xhr.responseText);
alert("❌ Error al conectar con el servidor. Revisa consola.");
}
});
});
});
document.addEventListener("DOMContentLoaded", function() {
var toastEl = document.getElementById('toastMensaje');
if (toastEl) {
var toast = new bootstrap.Toast(toastEl);
toast.show();
}
});
</script>
</body>
</html>