File "formulario_epp.php"

Full Path: C:/wamp64/www/AVIDOTAPP/views/registro/formulario_epp.php
File size: 13.08 KB
MIME-type: text/html
Charset: utf-8

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