File "salida.php"
Full Path: C:/wamp64/www/Asistencia_Capacitacion/Vistas/asistencia/salida.php
File size: 20.45 KB
MIME-type: text/x-php
Charset: utf-8
<?php
// File: Vistas/asistencia/salida.php
// Esta Vista espera las siguientes variables del Controlador:
// $capacitaciones: Array con los datos de las capacitaciones.
// $capacitacion_seleccionada: String con el CODIGO de la capacitación activa (desde la sesión).
// $columnaCapacitacion: String, la columna a usar (ej: 'CODIGO').
// Usamos el operador de fusión null '??' para asegurar un valor por defecto (3 = Consulta)
$usuarioGrado = (int)($_SESSION['grado'] ?? 3);
// 2. Definición de permisos
$puedeRegistrar = ($usuarioGrado <= 2); // GRADO 1 y 2: Entrada/Salida
$puedeConsultar = ($usuarioGrado <= 3); // GRADO 1, 2 y 3: Consulta (Todos)
$puedeCrearCapacitacion = ($usuarioGrado <= 2); // GRADO 1 y 2
$puedeCrearUsuario = ($usuarioGrado === 1); // GRADO 1 Solamente
$usuarioNombre = $usuarioNombre ?? $_SESSION['user']['nombre'] ?? 'Usuario';
$fechaSeleccionada = $fechaSeleccionada ?? date('Y-m-d');
// 3. CONFIGURACIÓN POR EMPRESA
$empresaUsuario = strtolower(trim($_SESSION['empresa'] ?? 'avicampo'));
// Definir configuración según la empresa
switch ($empresaUsuario) {
case 'sanmarino':
case 'san marino':
$colorEmpresa = '#ED3939'; // Rojo Sanmarino
$colorEmpresaOscuro = '#8B1C1C'; // Rojo más oscuro para el degradado
$logoEmpresa = 'img/sanmarino.png';
$nombreEmpresa = 'Sanmarino';
break;
case 'italcol':
$colorEmpresa = '#F2E0DC'; // Naranja Claro Italcol
$colorEmpresaOscuro = '#D67E25'; // Naranja más oscuro para el degradado
$logoEmpresa = 'img/Italcol.png';
$nombreEmpresa = 'Italcol';
break;
case 'piku':
$colorEmpresa = '#FAD739'; // Amarillo Claro Piku
$colorEmpresaOscuro = '#D19411'; // Amarillo más oscuro para el degradado
$logoEmpresa = 'img/Piku.png';
$nombreEmpresa = 'Piku';
break;
case 'avicampo':
default:
$colorEmpresa = '#ff8c00'; // Naranja Avicampo (original)
$colorEmpresaOscuro = '#ff6b00'; // Naranja más oscuro para el degradado
$logoEmpresa = 'img/avi.png';
$nombreEmpresa = 'Avicampo';
break;
}
// Establecer un valor por defecto para la columna y la selección, si el controlador no lo pasó
$columnaCapacitacion = $columnaCapacitacion ?? 'CODIGO';
$capacitacion_seleccionada = $capacitacion_seleccionada ?? ($capacitaciones[0][$columnaCapacitacion] ?? 'No Disponible');
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Sebastian Obando">
<meta name="copyright" content="Sebastian Obando">
<title>Registrar Salida De Asistencia</title>
<link rel="icon" type="image/png" href="./img/icono.png">
<link rel="stylesheet" href="./css/registros/salida.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<style>
/* Sidebar con botones - COLOR DINÁMICO POR EMPRESA */
.sidebar {
width: 220px;
background: linear-gradient(to bottom, <?php echo $colorEmpresa; ?>, <?php echo $colorEmpresaOscuro; ?>);
padding: 20px 0;
height: 100vh;
position: fixed;
left: 0;
top: 0;
box-shadow: 3px 0 15px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.date-selector select {
padding: 8px 12px;
border: 2px solid <?php echo $colorEmpresa; ?>;
border-radius: 5px;
background: white;
font-size: 14px;
min-width: 200px;
cursor: pointer;
}
.date-selector button {
background: <?php echo $colorEmpresa; ?>;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s;
display: none; /* Ocultamos el botón porque usamos auto-submit */
}
.date-selector button:hover {
background: <?php echo $colorEmpresaOscuro; ?>;
}
.current-date {
font-size: 16px;
color: #666;
margin-top: 10px;
padding: 10px;
background: #fff8f0;
border-radius: 5px;
border-left: 4px solid <?php echo $colorEmpresa; ?>;
}
.indicator-card {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
border-left: 5px solid <?php echo $colorEmpresa; ?>;
position: relative;
opacity: 0;
}
.indicator-icon {
font-size: 40px;
margin-bottom: 15px;
color: <?php echo $colorEmpresa; ?>;
}
.date-badge {
position: absolute;
top: 10px;
right: 10px;
background: <?php echo $colorEmpresa; ?>;
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: bold;
}
.general-stats h3 {
color: #333;
margin-bottom: 15px;
border-bottom: 2px solid <?php echo $colorEmpresa; ?>;
padding-bottom: 10px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.stat-item {
text-align: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid <?php echo $colorEmpresa; ?>;
}
.capacitacion-item {
padding: 10px;
margin: 5px 0;
background-color: #f8f9fa;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.capacitacion-item:hover {
background-color: #e9ecef;
}
.capacitacion-seleccionada {
background-color: #f8d7da;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
font-weight: bold;
color: #721c24;
}
.btn-registrar-salida {
background-color: #dc3545;
border-color: #dc3545;
}
.btn-registrar-salida:hover {
background-color: #c82333;
border-color: #bd2130;
}
.btn-salida {
background-color: #dc3545;
}
.btn-salida:hover {
background-color: #c82333;
}
</style>
</head>
<body>
<!-- Sidebar con menú -->
<div class="sidebar">
<div class="logo-sidebar">
<img src="<?php echo htmlspecialchars($logoEmpresa); ?>" alt="Logo <?php echo htmlspecialchars($nombreEmpresa); ?>">
</div>
<div class="menu-buttons">
<?php if ($puedeRegistrar): // GRADO 1 y 2: Entrada/Salida ?>
<a href="index.php?url=menu/index" class="menu-button">
<div class="button-icon">🏢</div>
<span class="button-text">MENU</span>
</a>
<a href="index.php?url=asistencia/registro" class="menu-button">
<div class="button-icon">📥</div>
<span class="button-text">REGISTRAR ENTRADA</span>
</a>
<a href="index.php?url=asistencia/salida" class="menu-button">
<div class="button-icon">📤</div>
<span class="button-text">REGISTRAR SALIDA</span>
</a>
<?php endif; ?>
<?php if ($puedeConsultar): // GRADO 1, 2 y 3: Consulta (Siempre se muestra) ?>
<a href="index.php?url=consulta/index" class="menu-button">
<div class="button-icon">📋</div>
<span class="button-text">CONSULTAR REGISTROS</span>
</a>
<?php endif; ?>
<?php if ($puedeCrearCapacitacion): // GRADO 1 y 2: Crear Capacitación ?>
<a href="index.php?url=capacitacion/crear" class="menu-button">
<div class="button-icon">➕</div>
<span class="button-text">CREAR CAPACITACION</span>
</a>
<?php endif; ?>
<?php if ($puedeCrearUsuario): // GRADO 1: Crear Usuario ?>
<a href="index.php?url=admin/crearUsuario" class="menu-button">
<div class="button-icon">👤</div>
<span class="button-text">CREAR USUARIO</span>
</a>
<?php endif; ?>
</div>
<div class="user-section">
<div class="user-info">
</div>
<button class="logout-btn" onclick="logout()">Cerrar Sesión</button>
</div>
</div>
<div class="container mt-4">
<div class="form-container">
<h2 class="form-title"><i class="fas fa-sign-out-alt me-2"></i>Registrar Salida De Asistencia</h2>
<div class="alert-container mt-3"></div>
<button id="btnSeleccionarCapacitacion" class="btn btn-salida mb-4">
<i class="fas fa-calendar-check me-2"></i>Seleccionar Capacitación
</button>
<?php if(!empty($capacitacion_seleccionada) && $capacitacion_seleccionada !== 'No Disponible'): ?>
<div class="capacitacion-seleccionada mb-4">
<i class="fas fa-check-circle me-2"></i>
Capacitación seleccionada: <strong><?php echo htmlspecialchars($capacitacion_seleccionada); ?></strong>
</div>
<?php endif; ?>
<div id="modalCapacitacion" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2><i class="fas fa-calendar-alt me-2"></i>Seleccionar Capacitación</h2>
<?php if(empty($capacitaciones)): ?>
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle me-2"></i>
No se encontraron capacitaciones en la base de datos.
</div>
<?php else: ?>
<div class="capacitaciones-lista">
<?php foreach($capacitaciones as $cap): ?>
<div class="capacitacion-item" data-capacitacion="<?php echo htmlspecialchars($cap[$columnaCapacitacion] ?? 'Sin ID'); ?>">
<i class="fas fa-chalkboard-teacher me-2"></i>
<?php
echo htmlspecialchars($cap[$columnaCapacitacion] ?? 'Capacitación Sin ID');
?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
<form id="formRegistro" action="index.php?url=asistencia/procesarsalida" method="POST">
<input type="hidden" name="capacitacion" id="capacitacion_seleccionada_input"
value="<?php echo htmlspecialchars($capacitacion_seleccionada); ?>">
<div class="mb-3">
<label for="codBar" class="form-label">
<i class="fas fa-id-card me-2"></i>Código del Colaborador:
</label>
<input type="text" class="form-control" id="codBar" name="codBar" required autofocus>
<div class="form-text">
<i class="fas fa-info-circle me-2"></i>Escanear o digitar el código de documento del colaborador
</div>
</div>
<button type="submit" class="btn btn-registrar-salida w-100 py-2">
<i class="fas fa-sign-out-alt me-2"></i>Registrar Salida
</button>
</form>
<div id="ultimo-registro"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
// Modal
var modal = document.getElementById("modalCapacitacion");
var btn = document.getElementById("btnSeleccionarCapacitacion");
var span = document.getElementsByClassName("close")[0];
// Abrir modal
btn.onclick = function() {
modal.style.display = "block";
}
// Cerrar modal con X
span.onclick = function() {
modal.style.display = "none";
}
// Cerrar modal al hacer clic fuera
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Seleccionar capacitación (Llama a una nueva ruta MVC)
$(".capacitacion-item").click(function() {
var capacitacion = $(this).data("capacitacion");
// 🔑 RUTA MVC para seleccionar capacitación (Se asume un nuevo controlador/acción)
$.ajax({
url: "index.php?url=capacitacion/seleccionar",
type: "POST",
data: { capacitacion_seleccionada: capacitacion },
success: function(response) {
// Recargar la página para que el Controlador recargue la variable de sesión
location.reload();
},
error: function() {
alert("Error al seleccionar la capacitación");
}
});
});
// Enfocar automáticamente el campo de código de barras
$('#codBar').focus();
// Manejar el envío del formulario con AJAX
$('#formRegistro').on('submit', function(e) {
e.preventDefault();
// Mostrar indicador de carga
var submitBtn = $(this).find('[type="submit"]');
var originalText = submitBtn.html();
submitBtn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Procesando...');
submitBtn.prop('disabled', true);
const actionUrl = $(this).attr('action');
$.ajax({
// 🔑 URL del Controlador (Obtenida del action del formulario)
url: actionUrl,
type: $(this).attr('method'),
data: $(this).serialize(), // Incluye codBar y el campo oculto 'capacitacion'
success: function(response) {
// Restaurar botón
submitBtn.html(originalText);
submitBtn.prop('disabled', false);
// Verificar si la respuesta es un JSON válido
try {
var jsonResponse = typeof response === 'object' ? response : JSON.parse(response);
if(jsonResponse.success) {
// Mostrar mensaje de éxito
$('.alert-container').html(
'<div class="alert alert-success alert-dismissible fade show" role="alert">' +
'<i class="fas fa-check-circle me-2"></i>' +
'<strong>Éxito!</strong> ' + jsonResponse.message +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>'
);
// Limpiar campo y volver a enfocar
$('#codBar').val('').focus();
// Mostrar información del último registro
if(jsonResponse.nombre) {
$('#ultimo-registro').html(
'<div class="mt-3 p-3 bg-light rounded">' +
'<h5><i class="fas fa-user-times me-2"></i>Última salida registrada:</h5>' +
'<p class="mb-1"><strong><i class="fas fa-user me-2"></i>Nombre:</strong> ' + jsonResponse.nombre + '</p>' +
'<p class="mb-1"><strong><i class="fas fa-id-card me-2"></i>Cédula:</strong> ' + jsonResponse.cedula + '</p>' +
'<p class="mb-0"><strong><i class="fas fa-clock me-2"></i>Hora de salida:</strong> ' + new Date().toLocaleTimeString() + '</p>' +
'</div>'
);
}
} else {
// Mostrar mensaje de error
$('.alert-container').html(
'<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
'<i class="fas fa-exclamation-circle me-2"></i>' +
'<strong>Error!</strong> ' + (jsonResponse.message || 'Error desconocido') +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>'
);
$('#codBar').focus();
}
} catch (e) {
// Si la respuesta no es JSON válido
$('.alert-container').html(
'<div class="alert alert-warning alert-dismissible fade show" role="alert">' +
'<i class="fas fa-exclamation-triangle me-2"></i>' +
'<strong>Atención!</strong> Respuesta inesperada del servidor.' +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>'
);
$('#codBar').focus();
}
},
error: function(xhr, status, error) {
// Restaurar botón
submitBtn.html(originalText);
submitBtn.prop('disabled', false);
$('.alert-container').html(
'<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
'<i class="fas fa-network-wired me-2"></i>' +
'<strong>Error de conexión!</strong> No se pudo comunicar con el servidor: ' + error +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>'
);
$('#codBar').focus();
}
});
});
// Eliminar alertas después de 5 segundos
setInterval(function() {
$('.alert').fadeTo(1000, 0).slideUp(1000, function(){
$(this).remove();
});
}, 5000);
});
</script>
<script>
// Función para cerrar sesión
function logout() {
if (confirm('¿Estás seguro de que deseas cerrar sesión?')) {
window.location.href = 'index.php?url=login/logout';
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>