<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Entrega de EPP</title>
<link rel="icon" type="image/png" href="assets/img/icono.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { background:linear-gradient(225deg,#d0101d,#752b2a); min-height:100vh; padding:20px; }
.form-container { background:#fff; border-radius:25px; padding:40px; max-width:1200px;
margin:0 auto; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.form-title { color:#800000; font-weight:bold; text-align:center; }
hr { background:#a21e24; height:2px; border:none; }
/* Panel datos empleado */
.info-emp { background:#f8f9fa; border-radius:10px; padding:18px;
border-left:4px solid #d0101d; margin-bottom:18px; }
.info-emp h5 { color:#800000; margin-bottom:12px; }
/* Panel búsqueda cédula */
.search-panel { background:linear-gradient(135deg,#fff3cd,#ffeaa7);
border-radius:12px; padding:20px; margin-bottom:20px;
border-left:5px solid #ffc107; }
/* Filas EPP */
.epp-row { background:#fafafa; padding:14px; margin-bottom:12px;
border-radius:8px; border:1px solid #e0e0e0; }
.epp-header { background:#d0101d; color:#fff; padding:10px 14px;
border-radius:6px; margin-bottom:14px; }
.stock-display { background:#e9ecef; font-weight:bold; }
.btn-danger { background:#d0101d; border-color:#d0101d; }
.btn-danger:hover { background:#a21e24; border-color:#a21e24; }
</style>
</head>
<body>
<div class="container-fluid px-2">
<?php
// Determinar qué datos de empleado mostrar:
// - $empleado_data → viene del flujo normal (sesión tras formulario_empleado)
// - $empleado_buscado → resultado de búsqueda directa por cédula en esta pantalla
$mostrarEmpleado = $empleado_buscado ?? $empleado_data ?? null;
?>
<div class="form-container">
<h4 class="form-title mb-1">
<i class="fas fa-hard-hat me-2"></i>ENTREGA DE ELEMENTOS DE PROTECCIÓN PERSONAL (EPP)
</h4>
<hr>
<!-- ══ PANEL BÚSQUEDA POR CÉDULA (visible siempre que no venga del flujo normal) ══ -->
<?php if (empty($empleado_data)): ?>
<div class="search-panel">
<h6 class="font-weight-bold mb-3">
<i class="fas fa-search me-2"></i>Buscar empleado por cédula
</h6>
<form method="post" action="index.php?controller=Registro&action=formularioEPP"
class="form-inline">
<div class="input-group w-100">
<input type="text" name="cedula_busqueda" class="form-control form-control-lg"
placeholder="Ingrese la cédula del empleado..." required autocomplete="off"
style="text-transform:uppercase"
value="<?= htmlspecialchars($_POST['cedula_busqueda'] ?? '') ?>">
<div class="input-group-append">
<button type="submit" name="buscar_cedula_epp" class="btn btn-warning btn-lg">
<i class="fas fa-search"></i> Buscar
</button>
</div>
</div>
</form>
<?php if (!empty($error_busqueda)): ?>
<div class="alert alert-danger mt-3 mb-0">
<i class="fas fa-exclamation-triangle me-2"></i><?= $error_busqueda ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<!-- ══ DATOS DEL EMPLEADO ══════════════════════════════════════ -->
<?php if ($mostrarEmpleado): ?>
<div class="info-emp">
<h5><i class="fas fa-user me-2"></i>Información del Empleado</h5>
<?php
// Normalizar claves (el registro puede venir de sesión o de BD directa)
$v = function($keys, $arr) {
foreach ((array)$keys as $k)
if (!empty($arr[$k])) return $arr[$k];
return '—';
};
$nombre = $v(['nombre','NOMBRE'], $mostrarEmpleado);
$cedula = $v(['ident','cedula','CEDULA'], $mostrarEmpleado);
$cargo = $v(['cargo','CARGO'], $mostrarEmpleado);
$area = $v(['area','AREA'], $mostrarEmpleado);
$ccosto = $v(['ccosto','CCOSTO'], $mostrarEmpleado);
$fingreso = $v(['fingreso','FINGRESO'],$mostrarEmpleado);
$tpEntrega= $v(['tpEntrega','TPENTREGA'],$mostrarEmpleado);
?>
<div class="row">
<div class="col-md-6">
<p class="mb-1"><strong>Nombre:</strong> <?= htmlspecialchars($nombre) ?></p>
<p class="mb-1"><strong>Cédula:</strong> <?= htmlspecialchars($cedula) ?></p>
<p class="mb-1"><strong>Cargo:</strong> <?= htmlspecialchars($cargo) ?></p>
<p class="mb-1"><strong>Tipo Entrega:</strong> <?= htmlspecialchars($tpEntrega) ?></p>
</div>
<div class="col-md-6">
<p class="mb-1"><strong>Área:</strong> <?= htmlspecialchars($area) ?></p>
<p class="mb-1"><strong>C. Costo:</strong> <?= htmlspecialchars($ccosto) ?></p>
<p class="mb-1"><strong>F. Ingreso:</strong>
<?= $fingreso !== '—' ? date('d/m/Y', strtotime($fingreso)) : '—' ?>
</p>
</div>
</div>
</div>
<?php endif; ?>
<!-- ══ FORMULARIO DE EPP (solo si hay empleado) ═══════════════ -->
<?php if ($mostrarEmpleado): ?>
<form method="post" action="index.php?controller=Registro&action=procesarRegistroCompleto">
<!-- Pasar cédula por si el empleado viene de búsqueda directa -->
<input type="hidden" name="_cedula_empleado_epp" value="<?= htmlspecialchars($cedula) ?>">
<hr>
<p class="text-center font-weight-bold mb-3">
Seleccione los elementos de protección personal a entregar
</p>
<hr>
<!-- Cabecera tabla EPP -->
<div class="epp-header">
<div class="row">
<div class="col-md-5"><strong>Elemento de Protección</strong></div>
<div class="col-md-3"><strong>Stock Disponible</strong></div>
<div class="col-md-3"><strong>Cantidad a Entregar</strong></div>
<div class="col-md-1"></div>
</div>
</div>
<!-- Contenedor filas -->
<div id="epp-container">
<?php if (empty($inventario)): ?>
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle me-2"></i>
No hay elementos EPP disponibles en el inventario.
</div>
<?php else: ?>
<div class="epp-row">
<div class="row align-items-center">
<div class="col-md-5">
<select class="form-control epp-select" name="epp_seleccionados[]"
onchange="updateStock(this)">
<option value="">Seleccione un EPP</option>
<?php foreach ($inventario as $item):
if (!$item || !isset($item['CODIGO']) || !isset($item['DESCRIPCION'])) continue;
$codigo = $item['CODIGO'];
$desc = $item['DESCRIPCION'];
$stock = intval($item['CANTIDAD'] ?? 0);
?>
<option value="<?= htmlspecialchars($desc) ?>"
data-stock="<?= $stock ?>"
data-codigo="<?= htmlspecialchars($codigo) ?>">
<?= htmlspecialchars($codigo) ?> - <?= htmlspecialchars($desc) ?>
</option>
<?php endforeach; ?>
</select>
<!-- Input hidden para enviar el código -->
<input type="hidden" class="codigo-hidden" name="codigos[]" value="">
</div>
<div class="col-md-3">
<input type="text" class="form-control stock-display" readonly placeholder="0" value="0">
</div>
<div class="col-md-3">
<input type="number" class="form-control" name="cantidades[]"
min="0" max="0" placeholder="0" value="0">
</div>
<div class="col-md-1"></div>
</div>
</div>
<?php endif; ?>
</div>
<!-- Botón agregar fila -->
<div class="text-center my-3">
<button type="button" class="btn btn-info" onclick="addEppRow()">
<i class="fas fa-plus"></i> Agregar otro EPP
</button>
</div>
<hr>
<!-- Botones de acción -->
<div class="text-center mt-3 d-flex flex-wrap justify-content-center" style="gap:10px">
<a href="index.php?controller=Registro&action=index" class="btn btn-secondary btn-lg">
<i class="fas fa-arrow-left"></i> Atrás
</a>
<button type="submit" class="btn btn-danger btn-lg">
<i class="fas fa-check"></i> FINALIZAR REGISTRO
</button>
<a href="index.php?controller=Registro&action=cancelar" class="btn btn-warning btn-lg">
<i class="fas fa-times"></i> CANCELAR
</a>
</div>
</form>
<?php elseif (empty($empleado_data)): ?>
<!-- Mensaje inicial cuando no se ha buscado nada -->
<div class="alert alert-info text-center mt-3">
<i class="fas fa-info-circle fa-2x mb-2 d-block"></i>
Ingrese la cédula del empleado para cargar sus EPP, o regrese al
<a href="index.php?controller=Registro&action=index">formulario de registro</a>.
</div>
<?php endif; ?>
<!-- Botón volver al menú -->
<div class="text-center mt-4">
<a href="index.php?controller=Dashboard&action=index" class="btn btn-outline-secondary">
<i class="fas fa-home"></i> Menú Principal
</a>
</div>
</div><!-- /form-container -->
</div>
<!-- ══ TEMPLATE de opciones EPP para JS ══════════════════════════ -->
<script id="inventario-template" type="application/json">
<?php
$invJs = array_map(fn($i) => [
'codigo' => htmlspecialchars($i['CODIGO'], ENT_QUOTES),
'desc' => htmlspecialchars($i['DESCRIPCION'], ENT_QUOTES),
'stock' => intval($i['CANTIDAD'])
], $inventario);
echo json_encode($invJs);
?>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
const INV = JSON.parse(document.getElementById('inventario-template').textContent);
$(function(){
initSelect2('.epp-select');
});
function initSelect2(sel){
$(sel).select2({ width:'100%', placeholder:'Seleccione un EPP' });
}
function updateStock(el){
const opt = el.options[el.selectedIndex];
const stock = opt.getAttribute('data-stock') || 0;
const codigo = opt.getAttribute('data-codigo') || '';
const row = el.closest('.epp-row');
// Actualizar stock display
row.querySelector('.stock-display').value = stock;
// Actualizar código hidden
const codigoInput = row.querySelector('.codigo-hidden');
if (codigoInput) codigoInput.value = codigo;
// Actualizar cantidad max
const qInput = row.querySelector('input[name="cantidades[]"]');
qInput.max = stock;
qInput.value = 0;
}
function buildOptions(){
let html = '<option value="">Seleccione un EPP</option>';
INV.forEach(function(i){
html += `<option value="${i.desc}" data-stock="${i.stock}" data-codigo="${i.codigo}">${i.codigo} - ${i.desc}</option>`;
});
return html;
}
function addEppRow(){
const row = document.createElement('div');
row.className = 'epp-row';
row.innerHTML = `
<div class="row align-items-center">
<div class="col-md-5">
<select class="form-control epp-select" name="epp_seleccionados[]" onchange="updateStock(this)">
${buildOptions()}
</select>
<input type="hidden" class="codigo-hidden" name="codigos[]" value="">
</div>
<div class="col-md-3">
<input type="text" class="form-control stock-display" readonly placeholder="0" value="0">
</div>
<div class="col-md-3">
<input type="number" class="form-control" name="cantidades[]" min="0" max="0" placeholder="0" value="0">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-sm btn-danger" onclick="this.closest('.epp-row').remove()" title="Eliminar">
<i class="fas fa-trash"></i>
</button>
</div>
</div>`;
document.getElementById('epp-container').appendChild(row);
initSelect2($(row).find('.epp-select'));
}
// Validación antes de enviar
document.querySelector('form[action*="procesarRegistroCompleto"]')
?.addEventListener('submit', function(e){
const cantidades = this.querySelectorAll('input[name="cantidades[]"]');
let alguno = false;
cantidades.forEach(i => { if (parseInt(i.value) > 0) alguno = true; });
if (!alguno){
if (!confirm('No seleccionó ningún EPP. ¿Continuar solo con el registro del empleado?')){
e.preventDefault(); return false;
}
}
});
</script>
</body>
</html>