File "FOR-S-CCI-64.php"

Full Path: C:/wamp64/www/CALIDADWEB/CALIDADWEB/FRONTED/HTML/FOR-S-CCI-64.php
File size: 154.14 KB
MIME-type: text/x-php
Charset: utf-8

<?php
// 1. CONEXIÓN
require_once "../../BACKEND/conexiones/conexion.php";

// Iniciar sesión
if (session_status() !== PHP_SESSION_ACTIVE) {
  session_start();
}

// Obtener usuario
$iduser = isset($_SESSION["iduser"]) ? htmlspecialchars($_SESSION["iduser"]) : 'No Ingresado';
// ⬇️⬇️⬇️ SISTEMA DE PERMISOS - AGREGAR ESTAS LÍNEAS ⬇️⬇️⬇️
$usuario_actual = isset($_SESSION['usuario']) ? $_SESSION['usuario'] : null;
$usuarios_admin = array('12345','63546660');
$es_admin = in_array($usuario_actual, $usuarios_admin);
// ⬆️⬆️⬆️ FIN SISTEMA DE PERMISOS ⬆️⬆️⬆️
?>
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CALIDADWEB - FOR-S-CCI-64</title>

  <link rel="stylesheet" href="../CSS/style_main.css">
  <link rel="shortcut icon" href="../img/avic.jpeg">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.11.5/datatables.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <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/5.15.4/css/all.min.css">

  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
   <script>
            const esUsuarioAdmin = <?php echo ($es_admin === true) ? 'true' : 'false'; ?>;
            const usuarioActualNombre = "<?php echo htmlspecialchars($usuario_actual); ?>";
        </script>


  <script>
    $(document).ready(function() {
      $('#selectEsc, #selectEscaldados, #selectEvisc, #selectViscera, #selectEnfri, #selectDeshuese, #selectDespre, #selectFileteo, #selectPosProc, #selectHielo, #selectAlimen, #selectCanast, #selectLavan, #selectCarnes').select2({
        width: '100%',
        placeholder: 'SELECCIONAR PRODUCTO',
        allowClear: true
      });
    });
  </script>
  <style>
    body {
      background: linear-gradient(135deg, #ffcf4d 0%, #f8ae26 100%);
      min-height: 100vh;
      /* Para que el fondo cubra toda la pantalla */
    }

    .card-header-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.5rem !important;
    }

    .reloj-container {
      border: 2px solid white;
      border-radius: 10px;
      padding: 10px;
      text-align: left;
    }

    .user-info {
      font-size: 0.9rem;
      text-shadow: 1px 1px 5px black;
      text-decoration: underline;
    }

    .form-control:focus {
      border-color: #ff8a37;
      box-shadow: 0 0 0 0.2rem rgba(255, 138, 55, 0.25);
    }

    .section-container {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 25px;
      margin-bottom: 20px;
    }

    .info-banner {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 25px;
      text-align: center;
      font-size: 1.1rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .form-label {
      font-weight: 600;
      margin-bottom: 8px;
    }

    textarea.form-control {
      resize: vertical;
    }

    .nav-tabs .nav-link.active {
      background-color: rgb(255 138 55) !important;
      /* naranja */
      color: white !important;
    }

    .nav-tabs .nav-link {
      background-color: #f0f0f0;
      /* inactiva */
      color: black;
    }


    /* estilo para los selects que usan select2 */
    .select2-container--default .select2-selection--multiple {
      min-height: 48px;
      padding: 0 8px;
      display: flex;
      align-items: center;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
    }

    .select2-container--default .select2-selection--multiple .select2-search--inline {
      margin: 0;
    }

    .select2-container--default .select2-selection--multiple .select2-search__field {
      height: 32px;
      line-height: 32px;
      margin: 0;
      padding: 0 6px;
    }
  </style>
</head>

<body>

  <?php if (!empty($_SESSION['mensaje'])): ?>
    <script>
      window.swalData = {
        title: <?= json_encode($_SESSION['tipo'] === 'success' ? 'Éxito' : 'Atención') ?>,
        text: <?= json_encode($_SESSION['mensaje']) ?>,
        icon: <?= json_encode($_SESSION['tipo']) ?>
      };
    </script>
  <?php
    unset($_SESSION['mensaje'], $_SESSION['tipo'], $_SESSION['icon']);
  endif;
  ?>

  <div class="container-lg mt-5 mb-5">
    <form id="frmio" method="POST" action="../../BACKEND/controller/FOR-S-CCI-64.php">
      <div class="card shadow-lg" style="background-color: rgb(255, 138, 55); color: white;">

        <div class="card-header border-bottom border-white mb-4">
          <h5 class="text-center mt-2 mb-0">
            <i class='bx bx-droplet'></i> FOR-S-CCI-64 - INSPECCIÓN PRE OPERATIVO PLANTA DE SACRIFICIO
          </h5>
        </div>
        <div class="container-fluid">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="mainTabs" role="tablist" style="display: flex; justify-content: center; flex-wrap: wrap;">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab-plataforma" data-bs-toggle="tab" data-bs-target="#escaldadoPoes" type="button" role="tab">
                      1. PLATAFORMA
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-escaldado" data-bs-toggle="tab" data-bs-target="#escaldadosPoes" type="button" role="tab">
                      2. SECCIÓN DE ESCALDADO
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#evisceracionPoes" type="button" role="tab">
                      3. SECCIÓN DE EVISCERACIÓN
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#viscerasPoes" type="button" role="tab">
                      4. EMPAQUE DE VISCERAS
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#enfriamientoPoes" type="button" role="tab">
                      5. ENFRIAMIENTO Y SELECCION
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#deshuesePoes" type="button" role="tab">
                      6.DESHUESADO Y FILETEO
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#despresePoes" type="button" role="tab">
                      7.DESPRESE Y MARINADO
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#fileteoPoes" type="button" role="tab">
                      8.FILETEO PAVO
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#posProcesoPoes" type="button" role="tab">
                      9.POS PROCESO
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#hieloPoes" type="button" role="tab">
                      10.CUARTO DE HIELO Y SALMUERA
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#alimentacionPoes" type="button" role="tab">
                      11.AREA DE ALIMENTACIÓN
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#canastillaPoes" type="button" role="tab">
                      12.AREA DE CANASTILLA
                    </button>
                  </li>


                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#lavanderiaPoes" type="button" role="tab">
                      13.AREA DE LAVANDERIA
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#carnesEspeciales" type="button" role="tab">
                      14.AREA DE CARNES ESPECIALES
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-evisceracion" data-bs-toggle="tab" data-bs-target="#AccionCorrecPoes" type="button" role="tab">
                      ACCIONES CORRECTIVAS
                    </button>
                  </li>
                </ul>
              </div>

              <!-- CONTENIDO DEL FORMULARIO -->
              <div class="card-body" style="background-color: rgb(255 138 55);">
                <div class="tab-content" id="mainTabContent">
                  <div class="tab-pane fade show active" id="escaldadoPoes" role="tabpanel">
                    <div class="card">

                      <!-- SUB-NAVEGACIÓN PLATAFORMA -->
                      <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-plataforma" data-bs-toggle="tab" data-bs-target="#frmEscaldadoPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-plataforma" data-bs-toggle="tab" data-bs-target="#regiEscaldadoPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>

                      <div class="card-body" style="background-color: rgb(255 138 55);">
                        <div class="tab-content">

                          <!-- FORMATO PLATAFORMA -->
                          <div class="tab-pane active" id="frmEscaldadoPoes" role="tabpanel">
                            <div class="container-fluid">
                              <div class="row" style="display: flex; text-align:center; font-size:larger">
                                <div class="col-md-12">
                                  <legend>Selecciona las superficies que no cumplen</legend>
                                  <select class="form-select select-multiple" id="selectEsc" name="selectEsc[]" multiple onchange="porcentEscaldado(),pCumpliPreOpe()">
                                    <?php
                                    $vv = "SELECT aspecto FROM opsanitarias WHERE id BETWEEN 1 AND 22 or id = 346 or id = 347";
                                    $ave = mysqli_query($conexion, $vv);

                                    while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                      <option value="<?php echo $aves['aspecto']; ?>">
                                        <?php echo $aves['aspecto']; ?>
                                      </option>
                                    <?php } ?>
                                  </select>
                                </div>
                              </div>
                              <div class="row" style="display: flex; text-align:center; font-size:larger">

                                <br>
                                <div class="col-md-12">
                                  <table class="table table-sm table-light table-striped table-hover mt-3" style="font-size: small; font-weight: 400; text-align:initial; overflow-x: auto;">
                                    <thead>
                                      <tr>
                                        <th colspan="6" class="text-center" style="padding-left: 80px;">OPERACIONES SANITARIAS</th>
                                      </tr>
                                    </thead>

                                    <tbody class="text-center">
                                      <tr>
                                        <td>Baldes y caneca descarte</td>
                                        <td>Filtro sanitario, lavapetos, lavamanos, delantales</td>
                                        <td>Polisombra</td>
                                      </tr>
                                      <tr>
                                        <td>Banda y estructura de huacales</td>
                                        <td>Insensibilizador</td>
                                        <td>Relajador de pechuga</td>
                                      </tr>
                                      <tr>
                                        <td>Bascula </td>
                                        <td>Lavadora de huacales</td>
                                        <td>Rieles</td>
                                      </tr>
                                      <tr>
                                        <td>Canaleta de sangrado </td>
                                        <td>Lavamanos</td>
                                        <td>Tablero de control</td>
                                      </tr>
                                      <tr>
                                        <td>Canaleta de sangria</td>
                                        <td>Maguera y soporte de manguera</td>
                                        <td>Tunel de sangrado</td>
                                      </tr>
                                      <tr>
                                        <td>Cuchilla y estructura de degollado </td>
                                        <td>Paredes y techos</td>
                                        <td>Ventiladores</td>
                                      </tr>
                                      <tr>
                                        <td>Esterilizador de cuchillo</td>
                                        <td>Pisos y rejillas</td>
                                        <td>Descargador Automatico</td>
                                      </tr>
                                      <tr>
                                        <td>Estructuras altas</td>
                                        <td>Plataforma para personal</td>
                                        <td>Escalera</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                              <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                                <div class="col-md-6">
                                  <label for="">NOVEDADES RELEVANTES</label><br>
                                  <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadEscaldado" id="novedadEscaldado" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                                </div>
                                <div class="col-md-6">
                                  <label for="">ACCIONES CORRECTIVAS</label><br>
                                  <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoEscaldado" id="correctivoEscaldado" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                                </div>
                                <div class="col-md-12">
                                  <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>

                                  <div class="input-group mb-3" style="flex-wrap: inherit;">
                                    <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcEscaldado" id="pcEscaldado" aria-describedby="basic-addon2" readonly>

                                  </div>
                                </div>

                              </div>

                            </div>
                          </div>

                          <!-- REGISTROS PLATAFORMA -->
                          <div class="tab-pane fade" id="regiEscaldadoPoes" role="tabpanel">
                            <button class="btn btn-light btn-sm mb-4 btnPreopePlataforma" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover table-sm" id="tblPreopePlataforma" style="overflow-x: auto;">
                                <thead>
                                  <tr>
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>
                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- ============================================ -->
                  <!-- TAB 2: SECCIÓN DE ESCALDADO -->
                  <!-- ============================================ -->
                  <div class="tab-pane fade" id="escaldadosPoes" role="tabpanel">

                    <div class="card">

                      <!-- SUB-NAVEGACIÓN ESCALDADO -->
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-escaldado" data-bs-toggle="tab" data-bs-target="#frmEscaldadosPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-escaldado" data-bs-toggle="tab" data-bs-target="#regiEviscPoes
                  
                              " type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>

                      <div class="card-body" style="background-color: rgb(255 138 55);">
                        <div class="tab-content mt-3">

                          <!-- FORMATO ESCALDADO -->
                          <div class="tab-pane active" id="frmEscaldadosPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectEscaldados" name="selectEscaldados[]" multiple="multiple" onchange="porcentEscaldados(),pCumpliPreOpe()">
                                  <?php
                                  $vv = "SELECT aspecto FROM opsanitarias WHERE id BETWEEN 23 AND 52";
                                  $ave = mysqli_query($conexion, $vv);

                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo $aves['aspecto']; ?>
                                    </option>
                                  <?php } ?>
                                </select>
                              </div>
                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="6" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Banda de cangilones</td>
                                      <td>Descolgador de pollo</td>
                                      <td>Lavamanos</td>
                                      <td>Pocetas</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Banda transportadora</td>
                                      <td>.Esacaldador de patas</td>
                                      <td>Manguera y soporte</td>
                                      <td>Repasadora de cuerpos</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Banda transportadora de pata</td>
                                      <td>Escaldador de cuerpos</td>
                                      <td>Mesa de inspeccion</td>
                                      <td>Tanque y bomba de (patas)</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Baños</td>
                                      <td>Esterilizador de cuchillos</td>
                                      <td>Paredes</td>
                                      <td>Techos</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Canecas y estructura de basura</td>
                                      <td>Estructuras altas, rieles</td>
                                      <td>Peladora de cuerpos</td>
                                      <td>Utencilios de aseo</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Cepillo (retiro de cuticula)</td>
                                      <td>Extractores</td>
                                      <td>Peladora de patas</td>
                                      <td>Vestieres</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Cuchilla de corte de patas</td>
                                      <td>Filtro sanitario, lavapetos</td>
                                      <td>Pisos y rejillas</td>
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Descolgador de patas</td>
                                      <td>Ganchos de Colgado</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadEscaldados" id="novedadEscaldados" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoEscaldados" id="correctivoEscaldados" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcEscaldados" id="pcEscaldados" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>

                          <!-- REGISTROS ESCALDADO -->
                          <div class="tab-pane" id="regiEviscPoes" role="tabpanel" aria-labelledby="regiEviscPoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeEvisc" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent; font-size:small" id="tblPreopeEvisc">
                                <tr>
                                  <th scope="col" style="min-width:50px">#</th>
                                  <th scope="col" style="min-width:100px">Fecha</th>
                                  <th scope="col" style="min-width:200px">Superficies</th>
                                  <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                  <th scope="col" style="min-width:300px">Observacion</th>
                                  <th scope="col">% Cumplimiento</th>
                                  <th scope="col">% Cumplimiento Total</th>
                                  <th scope="col">Coordinador Calidad</th>
                                  <th scope="col">Responsable Correccion</th>
                                  <th scope="col">Responsable INVIMA</th>
                                  <th scope="col">Firma INVIMA</th>
                                  <th scope="col">Aprobó</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                              </table>
                            </div>

                          </div>

                        </div>
                      </div>
                    </div>

                  </div>

                  <!-- ============================================ -->
                  <!-- TAB 3: SECCIÓN DE EVISCERACIÓN -->
                  <!-- ============================================ -->
                  <div class="tab-pane fade" id="evisceracionPoes" role="tabpanel">

                    <div class="card">

                      <!-- SUB-NAVEGACIÓN EVISCERACIÓN -->
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-evisceracion" data-bs-toggle="tab" data-bs-target="#frmEviscPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-evisceracion" data-bs-toggle="tab" data-bs-target="#regiEscaldadosPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>

                      <div class="card-body" style="background-color: rgb(255 138 55);">
                        <div class="tab-content mt-3">

                          <!-- FORMATO EVISCERACIÓN -->
                          <div class="tab-pane active" id="frmEviscPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectEvisc" name="selectEvisc[]" multiple="multiple" onchange="porcentEviscera(),pCumpliPreOpe()">

                                  <?php
                                  $vv = "SELECT aspecto FROM opsanitarias WHERE id BETWEEN 53 AND 99";
                                  $ave = mysqli_query($conexion, $vv);

                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo $aves['aspecto']; ?>
                                    </option>
                                  <?php } ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;display: block;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="6" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Banda de cangilones</td>
                                      <td>Peladora de mollejas (Rodillos)</td>
                                      <td>Canecas de basura</td>
                                      <td>Extractores</td>
                                      <td>Mesa de inspeccion</td>
                                      <td>Bomba y tanque mollejar</td>
                                    </tr>
                                    <tr>
                                      <td>Banda transportadora</td>
                                      <td>Pistola de succion de pulmones</td>
                                      <td>Delantales</td>
                                      <td>Filtro sanitario, lavapetos, lavamanos</td>
                                      <td>Paredes, techos</td>
                                      <td>Tanque, malla y bomba de higado y corazones</td>
                                    </tr>
                                    <tr>
                                      <td>Canaleta de separacion de visceras</td>
                                      <td>Pistola destroncadora</td>
                                      <td>Ducha clorada</td>
                                      <td>Ganchos colgado de pollo</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td>Techos (condensacion), lamparas</td>
                                    </tr>
                                    <tr>
                                      <td>Cuchillos y/o esterilizadores</td>
                                      <td>Pistola extractora de cloaca</td>
                                      <td>Elevador de molleja (tornillo sin fin)</td>
                                      <td>Lavadora de canal</td>
                                      <td>Plataforma para personal</td>
                                      <td>Tuberias de agua, llaves y duchas</td>
                                    </tr>
                                    <tr>
                                      <td>Evisceradora (sujetador de canal, guía de posición, paleta de remoción)</td>
                                      <td>Baldes de recoleccion de visceras</td>
                                      <td>Espejo(tolerancia cero)</td>
                                      <td>Lavamanos</td>
                                      <td>Puerta</td>
                                      <td>Utensilios de aseo</td>
                                    </tr>
                                    <tr>
                                      <td>Extractora de cloaca (cuchilla, guia de canal)</td>
                                      <td>Canalate de pavos</td>
                                      <td>Estructura de pelado de mollejas</td>
                                      <td>Manguera y soporte</td>
                                      <td>Recipiente de puntos de desinfeccion</td>
                                      <td>Vestieres</td>
                                    </tr>
                                    <tr>
                                      <td>Extractora de traquea y buche (cabezal)</td>
                                      <td>Canaleta de colgado</td>
                                      <td>Estructuras altas, rieles</td>
                                      <td>Maquina cuellos (charola de recoleccion, cuchilla, destronconador)</td>
                                      <td>Soporte movil de canastas</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Mesa de recuperacion</td>
                                      <td>Caneca del descarte</td>
                                      <td>Extractora de pulmones (tubos de succion)</td>
                                      <td>Mesa de colgado</td>
                                      <td>Tanque y bomba de cuellos</td>
                                      <td></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadEviscera" id="novedadEviscera" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoEviscera" id="correctivoEviscera" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcEviscera" id="pcEviscera" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basicc" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>

                          <!-- REGISTROS ESCALDADO -->
                          <div class="tab-pane fade" id="regiEscaldadosPoes" role="tabpanel">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeEscaldados" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" id="tblPreopeEscaldados" style="overflow-x: auto;">
                                <thead>
                                  <tr>
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>
                                  </tr>
                                </thead>
                                <tbody></tbody>
                              </table>
                            </div>

                          </div>

                        </div>
                      </div>
                    </div>

                  </div>
                  <!-- EMPAQUE VISCERAS -->
                  <div class="tab-pane " id="viscerasPoes" role="tabpanel" aria-labelledby="viscerasPoes-tab">

                    <!-- EMPAQUE VISCERAS -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-empaquevivera" data-bs-toggle="tab" data-bs-target="#frmViscerasPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-empaquevivera" data-bs-toggle="tab" data-bs-target="#regiViscerasPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">
                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmViscerasPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectViscera" name="selectViscera[]" multiple="multiple" onchange="porcentVisceras(),pCumpliPreOpe()">
                                  <?php
                                  $vv = "SELECT aspecto FROM opsanitarias WHERE (id BETWEEN 100 AND 133) or id = 345";
                                  $ave = mysqli_query($conexion, $vv);

                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo $aves['aspecto']; ?>
                                    </option>
                                  <?php } ?>
                                </select>
                              </div>
                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="5" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Chiller de cabeza</td>
                                      <td>Rehillas de caida de viscera</td>
                                      <td>Lavamanos</td>
                                      <td>Punto desinfeccion de producto</td>
                                    </tr>
                                    <tr>
                                      <td>Chiller de higado y corazon</td>
                                      <td>Bascula</td>
                                      <td>Locker</td>
                                      <td>Selladoras y soportes</td>
                                    </tr>
                                    <tr>
                                      <td>Chiller de mollejas</td>
                                      <td>Canecas de basura</td>
                                      <td>Manguera y soporte</td>
                                      <td>Soportes de fundas y bandejas</td>
                                    </tr>
                                    <tr>
                                      <td>Chiller de patas</td>
                                      <td>Caneca para hielo</td>
                                      <td>Mangueras de chiller</td>
                                      <td>Techos (condensacion), lamparas</td>
                                    </tr>
                                    <tr>
                                      <td>Conos Metalicos</td>
                                      <td>Carritos transpotador de arrumes</td>
                                      <td>Pala hielo</td>
                                      <td>Toboganes y banda de hielo</td>
                                    </tr>
                                    <tr>
                                      <td>Gramera (Bnadeja)</td>
                                      <td>Cortinas</td>
                                      <td>Paredes</td>
                                      <td>Tuberias de agua, llaves</td>
                                    </tr>
                                    <tr>
                                      <td>Mesa de embandejado</td>
                                      <td>Delantales</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td>Utensilios de aseo</td>
                                    </tr>
                                    <tr>
                                      <td>Mesa de recepcion de viscera</td>
                                      <td>Difusores</td>
                                      <td>Plataforma del personal</td>
                                      <td>Peladora de pescuezo</td>
                                    </tr>
                                    <tr>
                                      <td>Recipientes (Tazas inox, baldes)</td>
                                      <td>Filtro sanitario zona limpia</td>
                                      <td>Poceta de pala</td>
                                      <td></td>
                                    </tr>

                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadVisceras" id="novedadVisceras" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoVisceras" id="correctivoVisceras" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcVisceras" id="pcVisceras" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic2" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="tab-pane" id="regiViscerasPoes" role="tabpanel" aria-labelledby="regiViscerasPoes-tab">

                            <button class="btn btn-light btn-sm mb-4 btnPreopeEmpaque" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent; font-size:small" id="tblPreopeEmpaque">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- EMPAQUE VISCERAS -->

                  </div>
                  <div class="tab-pane " id="enfriamientoPoes" role="tabpanel" aria-labelledby="enfriamientoPoes-tab">

                    <!-- ENFRIAMIENTO Y SELECCION -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-enfriamineto" data-bs-toggle="tab" data-bs-target="#frmEnfriamientoPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-enfriamineto" data-bs-toggle="tab" data-bs-target="#regiEnfriamientoPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmEnfriamientoPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectEnfri" name="selectEnfri[]" multiple="multiple" onchange="porcentEnfriamiento(),pCumpliPreOpe()">

                                  <?php
                                  $vv = "SELECT aspecto FROM opsanitarias WHERE id BETWEEN 134 AND 173";
                                  $ave = mysqli_query($conexion, $vv);

                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo $aves['aspecto']; ?>
                                    </option>
                                  <?php } ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;display: block;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="7" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Banda de cangilones entrada de canal al chiller</td>
                                      <td>Pala del hielo</td>
                                      <td>Difusores</td>
                                      <td>Mangueras de chiller y prechiller</td>
                                      <td>Techos (condensacion), lamparas</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Banda escurridor salida chiller</td>
                                      <td>Prechiller</td>
                                      <td>Escaleras portatil</td>
                                      <td>Mesas de inspeccion</td>
                                      <td>Toboganes hielo</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Bandeja de ingreso de canal a prechiller</td>
                                      <td>Seleccionadora (Banda y pateadores de teflon)</td>
                                      <td>Estructuras de bandas</td>
                                      <td>Paredes</td>
                                      <td>Tuberias de agua, aire, llaves</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Cajones de empaque de producto</td>
                                      <td>Banda transportadora de canastillas</td>
                                      <td>Estructuras de chiller</td>
                                      <td>Pasamanos de chillers</td>
                                      <td>Utensilios de aseo</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Chiller</td>
                                      <td>Basculas</td>
                                      <td>Estructuras elevadas</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Descolgador de pollo</td>
                                      <td>Canecas y estructura de basura</td>
                                      <td>Guarda motores</td>
                                      <td>Plataforma para el personal</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Embudos</td>
                                      <td>Carritos transportador de arrumes</td>
                                      <td>Lavamanos</td>
                                      <td>Plataformas chiller</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Escurridor de tornillo</td>
                                      <td>Cortinas</td>
                                      <td>Locker</td>
                                      <td>Poceta de pala</td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Mesa de recibido de canal</td>
                                      <td>Delantal</td>
                                      <td>Manguera y soporte</td>
                                      <td>Soporte de canastilla</td>
                                      <td></td>
                                      <td></td>
                                    </tr>

                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadEnfriamiento" id="novedadEnfriamiento" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoEnfriamiento" id="correctivoEnfriamiento" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcEnfriamiento" id="pcEnfriamiento" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basiccc" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiEnfriamientoPoes" role="tabpanel" aria-labelledby="regiEnfriamientoPoes-tab">

                            <button class="btn btn-light btn-sm mb-4 btnPreopeEnfria" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent; font-size:small" id="tblPreopeEnfria">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- ENFRIAMIENTO Y SELECCION -->

                  </div>
                  <div class="tab-pane " id="deshuesePoes" role="tabpanel" aria-labelledby="deshuesePoes-tab">

                    <!--  DESHUESADO Y FILETEO -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-desueso" data-bs-toggle="tab" data-bs-target="#frmDeshuesePoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-desueso" data-bs-toggle="tab" data-bs-target="#regiDeshuesePoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmDeshuesePoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectDeshuese" name="selectDeshuese[]" multiple="multiple" onchange="porcentDeshuese(),pCumpliPreOpe()">
                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias` where id BETWEEN 174 and 194";

                                  $ave = mysqli_query($conexion, $vv);

                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; ">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-weight: 400; text-align:center;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="6" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Cuchillos, chairas</td>
                                      <td>Tablas de teflon</td>
                                      <td>Mangueras y soportes</td>
                                      <td>Techo (condensacion), Lamparas</td>

                                    </tr>
                                    <tr>
                                      <td>Deshuesador</td>
                                      <td>Caneca de basura</td>
                                      <td>Paredes</td>
                                      <td>Tuberias de agua, aire y llaves</td>

                                    </tr>
                                    <tr>
                                      <td>Gramera (Bandeja)</td>
                                      <td>Lavamanos</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td>Puerta</td>

                                    </tr>
                                    <tr>
                                      <td>Mesa de deshuesado</td>
                                      <td>Caneca para hielo</td>
                                      <td>Poceta de tablas</td>
                                      <td></td>

                                    </tr>
                                    <tr>
                                      <td>Mesas de fileteo</td>
                                      <td>Locker</td>
                                      <td>Punto desinfeccion de producto</td>
                                      <td></td>

                                    </tr>
                                    <tr>
                                      <td>Recipientes (tazaz inox)</td>
                                      <td>Manguera y soportes</td>
                                      <td>Recipiente metalico</td>
                                      <td></td>
                                    </tr>

                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadDeshuese" id="novedadDeshuese" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoDeshuese" id="correctivoDeshuese" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>

                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcDeshuese" id="pcDeshuese" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic3" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiDeshuesePoes" role="tabpanel" aria-labelledby="regiDeshuesePoes-tab">

                            <button class="btn btn-light btn-sm mb-4 btnPreopeFileteo" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent; font-size:small" id="tblPreopeFileteo">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>

                    <!--  DESHUESADO Y FILETEO -->
                  </div>
                  <div class="tab-pane " id="despresePoes" role="tabpanel" aria-labelledby="despresePoes-tab">
                    <!-- DESPRESE, MARINADO -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-deprese" data-bs-toggle="tab" data-bs-target="#frmDespresePoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-deprese" data-bs-toggle="tab" data-bs-target="#regiDespresePoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmDespresePoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectDespre" name="selectDespre[]" multiple="multiple" onchange="porcentDesprese(),pCumpliPreOpe()">

                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias`  where id BETWEEN 195 and 243";
                                  $ave = mysqli_query($conexion, $vv);
                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="7" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Banda alimentadora de presas</td>
                                      <td>Despresadora (Cuchillas y guia Metalicas)</td>
                                      <td>Caneca de basura</td>
                                      <td>Embandejadora automatica</td>
                                      <td>Manguera y soportes</td>
                                      <td>Tanque de salmuera pequeño</td>
                                    </tr>
                                    <tr>
                                      <td>Banda cangilones</td>
                                      <td>Despresadora automatica (Cuchillas, guia metalicas)</td>
                                      <td>Caneca para hielo</td>
                                      <td>Estelizador de cuchillos</td>
                                      <td>Paredes</td>
                                      <td>Techos (condensacion), Lamparas</td>
                                    </tr>
                                    <tr>
                                      <td>Banda de empaque 1</td>
                                      <td>Marinadora de presa (Agujas, banda, cortinas, pie de bloque) 1</td>
                                      <td>Clipeadora</td>
                                      <td>Estructura maquina despresadora</td>
                                      <td>Pasillo de trolley</td>
                                      <td>Termoencogedora</td>
                                    </tr>
                                    <tr>
                                      <td>Banda de empaque 2</td>
                                      <td>Marinadora de presa (Agujas, banda, cortinas, pie de bloque) 2</td>
                                      <td>Cortina cuarto de canastillas</td>
                                      <td>Estructura Marinadora</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td>Tuberias agua, aire, llaves</td>
                                    </tr>
                                    <tr>
                                      <td>Banda de empaque 3</td>
                                      <td>Marinadora de presa (Agujas, banda, cortinas, pie de bloque) china</td>
                                      <td>Carritos del trolley</td>
                                      <td>Estructura y recipientes de residuos</td>
                                      <td>Plataforma personal</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Banda de la despresadora</td>
                                      <td>Marinadora de presa (Agujas, banda, cortinas, pie de bloque) pavos</td>

                                      <td>Cortina cuarto termoencogedora</td>
                                      <td>Gramera (Balanza)</td>
                                      <td>Puntos de desinfeccion</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Banda pequeña</td>
                                      <td>Mesas</td>
                                      <td>Cuarto de canastilla</td>
                                      <td>Guarda motores</td>
                                      <td>Selladores</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Canaletas marinadora</td>
                                      <td>Recipientes (baldes)</td>
                                      <td>Delantales</td>
                                      <td>Lavamanos</td>
                                      <td>Tanque de salmuera</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Carros transportadores</td>
                                      <td>Bascula</td>
                                      <td>Difusores</td>
                                      <td>Lockers</td>
                                      <td>Tanque de salmuera grande</td>
                                      <td></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadDesprese" id="novedadDesprese" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoDesprese" id="correctivoDesprese" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcDesprese" id="pcDesprese" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic-add2" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiDespresePoes" role="tabpanel" aria-labelledby="regiDespresePoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeDesprese" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent; font-size:small" id="tblPreopeDesprese">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- DESPRESE, MARINADO -->
                  </div>
                  <div class="tab-pane " id="fileteoPoes" role="tabpanel" aria-labelledby="fileteoPoes-tab">
                    <!-- FILETEO PAVO -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-fileteo" data-bs-toggle="tab" data-bs-target="#frmFileteoPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-fileteo" data-bs-toggle="tab" data-bs-target="#regiFileteoPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmFileteoPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectFileteo" name="selectFileteo[]" multiple="multiple" onchange="porcentFileteo(),pCumpliPreOpe()">

                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias` where id BETWEEN 245 and 271 AND id NOT IN (247)";
                                  $ave = mysqli_query($conexion, $vv);
                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="9" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Mesas de fileteo</td>
                                      <td>Carritos transportador de arrumes</td>
                                      <td>Lockers</td>
                                      <td>Selladora</td>
                                      <td>Banda transportadora de presas</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Sierra</td>
                                      <td>Delantales</td>
                                      <td>Manguera y soportes</td>
                                      <td>Techos (condesacion) y lamparas</td>
                                      <td>Cuchillos y asentadores</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Tblas de teflon</td>
                                      <td>Difursores</td>
                                      <td>Paredes</td>
                                      <td>Tuberias agua, aire, llaves</td>
                                      <td>Caneca para hielo</td>
                                      <td></td>
                                    </tr>
                                    <tr>

                                      <td>Empacadora al vacio</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td>Plataforma de personal</td>
                                      <td>Mesa de despresado (conos)</td>
                                      <td>Báscula</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Esterilizador de cuchillos</td>
                                      <td>Punto desinfeccion de producto </td>
                                      <td>Mesa de empaque </td>
                                      <td>Caneca de basura</td>
                                      <td>Lavamanos</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Puerta</td>
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadFileteo" id="novedadFileteo" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoFileteo" id="correctivoFileteo" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcFileteo" id="pcFileteo" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic-addn" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiFileteoPoes" role="tabpanel" aria-labelledby="regiFileteoPoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopePavo" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent;font-size:small" id="tblPreopePavo">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- FILETEO PAVO -->

                  </div>
                  <div class="tab-pane " id="posProcesoPoes" role="tabpanel" aria-labelledby="posProcesoPoes-tab">

                    <!-- POS PROCESO -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-posproceso" data-bs-toggle="tab" data-bs-target="#frmProcesoPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-posproceso" data-bs-toggle="tab" data-bs-target="#regiProcesoPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmProcesoPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectPosProc" name="selectPosProc[]" multiple="multiple" onchange="porcentProceso(),pCumpliPreOpe()">

                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias` where id BETWEEN 272 and 304";
                                  $ave = mysqli_query($conexion, $vv);
                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>

                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;overflow-x: auto;">
                                  <thead>
                                    <tr>
                                      <th colspan="9" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Banda de conos</td>
                                      <td>Mesa</td>
                                      <td>Básculas</td>
                                      <td>Dispensadores(pocetas)</td>
                                      <td>Manguera y soportes</td>
                                      <td>Techos (condensación), lámparas</td>
                                    </tr>
                                    <tr>
                                      <td>Banda de pinchos</td>
                                      <td>Mezclador de adobos</td>
                                      <td>Canecas de basura</td>
                                      <td>Filtro sanitario</td>
                                      <td>Paredes</td>
                                      <td>Tuberias agua, aire, llaves </td>
                                    </tr>
                                    <tr>
                                      <td>Banda transportadora de presas</td>
                                      <td>Recipientes (Tazas inox, baldes)</td>
                                      <td>Carritos trasportador de arrumes</td>
                                      <td>Gramera(balanza)</td>
                                      <td>Pisos, desagues y rejillas</td>
                                      <td>Ultracongelador </td>
                                    </tr>
                                    <tr>
                                      <td>Despresadora manual</td>
                                      <td>Selladoras de pedal</td>
                                      <td>Cortinas</td>
                                      <td>Lavamanos</td>
                                      <td>Puerta</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Embudos</td>
                                      <td>Tablas de teflón</td>
                                      <td>Cuarto de adobos</td>
                                      <td>Locker</td>
                                      <td>Soporte canastillas</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Maquina formadora de hamburguesa</td>
                                      <td>Tumblers </td>
                                      <td>Delantales</td>
                                      <td>Malacate</td>
                                      <td>Tanque salmuera</td>
                                      <td></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadProceso" id="novedadProceso" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoProceso" id="correctivoProceso" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcProceso" id="pcProceso" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic-adn2" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiProcesoPoes" role="tabpanel" aria-labelledby="regiProcesoPoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopePost" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent;font-size:small" id="tblPreopePost">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- POS PROCESO -->

                  </div>
                  <div class="tab-pane " id="hieloPoes" role="tabpanel" aria-labelledby="hieloPoes-tab">

                    <!-- CUARTO HIELO  Y SALMUERA -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-hielo" data-bs-toggle="tab" data-bs-target="#frmHieloPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-hielo" data-bs-toggle="tab" data-bs-target="#regiHieloPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmHieloPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectHielo" name="selectHielo[]" multiple="multiple" onchange="porcentHielo(),pCumpliPreOpe()">

                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias` where id BETWEEN 305 and 318";
                                  $ave = mysqli_query($conexion, $vv);
                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;">
                                  <thead>
                                    <tr>
                                      <th colspan="4" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Mesa</td>
                                      <td>Ductos de transporte </td>
                                      <td>Lavamanos </td>
                                      <td>Pisos, desagues y rejillas</td>
                                    </tr>
                                    <tr>
                                      <td>Tanque de salmuera </td>
                                      <td>Palas, picas </td>
                                      <td>Techos (condensación), lámparas</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Balde para pala </td>
                                      <td>Escaleras </td>
                                      <td>Paredes </td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Canastillas</td>
                                      <td>Filtro sanitario </td>
                                      <td>Pasillo hacia cuarto de hielo</td>
                                      <td></td>
                                    </tr>

                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadHielo" id="novedadHielo" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoHielo" id="correctivoHielo" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcHielo" id="pcHielo" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic-ddon2" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiHieloPoes" role="tabpanel" aria-labelledby="regiHieloPoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeHielo" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent;font-size:small" id="tblPreopeHielo">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- CUARTO HIELO -->

                  </div>

                  <div class="tab-pane " id="alimentacionPoes" role="tabpanel" aria-labelledby="alimentacionPoes-tab">
                    <!-- AREA DE ALIMENTACION -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-areaalimentacion" data-bs-toggle="tab" data-bs-target="#frmAlimentacionPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-areaalimentacion" data-bs-toggle="tab" data-bs-target="#regiAlimentacionPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmAlimentacionPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectAlimen" name="selectAlimen[]" multiple="multiple" onchange="porcentAlimentacion(),pCumpliPreOpe()">

                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias` where id BETWEEN 319 and 327";
                                  $ave = mysqli_query($conexion, $vv);
                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:initial;">
                                  <thead>
                                    <tr>
                                      <th colspan="3" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Estanteria</td>
                                      <td>Neveras</td>
                                      <td>Ventanas</td>

                                    </tr>
                                    <tr>
                                      <td>Hornos Microhonda</td>
                                      <td>Paredes</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Lavamanos</td>
                                      <td>Pisos, desagues</td>
                                      <td></td>
                                    </tr>
                                    <tr>
                                      <td>Mesas, sillas</td>
                                      <td>Techos, Lamparas</td>
                                      <td></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadAlimentacion" id="novedadAlimentacion" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoAlimentacion" id="correctivoAlimentacion" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcAlimenta" id="pcAlimenta" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic-addn2" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiAlimentacionPoes" role="tabpanel" aria-labelledby="regiAlimentacionPoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeAlimentacion" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent;font-size:small" id="tblPreopeAlimentacion">
                                <thead style="vertical-align: revert;">
                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- AREA DE ALIMENTACION -->

                  </div>

                  <div class="tab-pane " id="canastillaPoes" role="tabpanel" aria-labelledby="canastillaPoes-tab">

                    <!-- AREA CANASTILLAS -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-areaalimentacion" data-bs-toggle="tab" data-bs-target="#frmCanastillaPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-areaalimentacion" data-bs-toggle="tab" data-bs-target="#regiCanastillaPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">

                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmCanastillaPoes" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectCanast" name="selectCanast[]" multiple="multiple" onchange="porcentCanastilla(),pCumpliPreOpe()">

                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias` where id BETWEEN 328 and 336";
                                  $ave = mysqli_query($conexion, $vv);
                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;">
                                  <thead>
                                    <tr>
                                      <th colspan="3" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>Canastillas</td>
                                      <td>De transporte (Rieles, ganchos de colgado)</td>
                                      <td>Pisos, desagues</td>
                                    </tr>
                                    <tr>
                                      <td>Delantales</td>
                                      <td>Manguera</td>
                                      <td>Techos, Lamparas</td>
                                    </tr>
                                    <tr>
                                      <td>Lavadora de canastillas</td>
                                      <td>Paredes</td>
                                      <td>Utensilios de limpieza</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadCanastilla" id="novedadCanastilla" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoCanastilla" id="correctivoCanastilla" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcCanastilla" id="pcCanastilla" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basi-addon2" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="tab-pane" id="regiCanastillaPoes" role="tabpanel" aria-labelledby="regiCanastillaPoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeCanastilla" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent; font-size:small" id="tblPreopeCanastilla">
                                <thead style="vertical-align: revert;">

                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- AREA CANASTILLAS -->

                  </div>
                  <div class="tab-pane " id="lavanderiaPoes" role="tabpanel" aria-labelledby="lavanderiaPoes-tab">

                    <!-- LAVANDERIA -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-areaalimentacion" data-bs-toggle="tab" data-bs-target="#frmLavanderiaPoes" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-areaalimentacion" data-bs-toggle="tab" data-bs-target="#regiLavanderiaPoes" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">
                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmLavanderiaPoes" role="tabpanel">
                            <div class="container-fluid">
                              <div class="row" style="display: flex; text-align:center; font-size:larger">
                                <div class="col-md-12">
                                  <legend>Selecciona las superficies que no cumplen</legend>
                                  <select class="form-select select-multiple" id="selectLavan" name="selectLavan[]" multiple="multiple" onchange="porcentLavanderia(),pCumpliPreOpe()">
                                    <?php
                                    $vv =
                                      "SELECT aspecto FROM `opsanitarias` where id BETWEEN 337 and 344";
                                    $ave = mysqli_query($conexion, $vv);
                                    while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                      <option value="<?php echo $aves['aspecto']; ?>">
                                        <?php echo
                                        $aves['aspecto']; ?>
                                      </option>
                                    <?php }
                                    ?>
                                  </select>
                                </div>

                              </div>
                              <br>
                              <div class="row" style="display: flex; text-align:center; font-size:larger">
                                <div class="col-md-12">
                                  <table class="table table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:center;">
                                    <thead>
                                      <tr>
                                        <th colspan="2" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <tr>
                                        <td>Equipos (Lavadora, secadora)</td>
                                        <td>Pisos, desagues</td>
                                      </tr>
                                      <tr>
                                        <td>Estanteria</td>
                                        <td>Tanques</td>
                                      </tr>
                                      <tr>
                                        <td>Mesas, sillas</td>
                                        <td>Techos, lamparas</td>
                                      </tr>
                                      <tr>
                                        <td>Paredes</td>
                                        <td>Ventanas</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                              <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                                <div class="col-md-6">
                                  <label for="">NOVEDADES RELEVANTES</label><br>
                                  <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadLavanderia" id="novedadLavanderia" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                                </div>
                                <div class="col-md-6">
                                  <label for="">ACCIONES CORRECTIVAS</label><br>
                                  <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoLavanderia" id="correctivoLavanderia" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                                </div>
                                <div class="col-md-12">
                                  <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                  <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                  <div class="input-group mb-3" style="flex-wrap: inherit;">
                                    <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcLavanderia" id="pcLavanderia" aria-describedby="basic-addon2" readonly>
                                    <button type="button" class="input-group-text" id="basic-addon3" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="tab-pane" id="regiLavanderiaPoes" role="tabpanel" aria-labelledby="regiLavanderiaPoes-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeLavanderia" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent;font-size:small" id="tblPreopeLavanderia">
                                <thead style="vertical-align: revert;">
                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>
                                  </tr>
                                </thead>
                                <tbody>
                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- LAVANDERIA -->

                  </div>
                  <div class="tab-pane " id="carnesEspeciales" role="tabpanel" aria-labelledby="carnesEspeciales-tab">

                    <!-- CARNES ESPECIALES -->

                    <div class="card">
                      <div class="card-header" style="padding-top: 0px;">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                          <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-formato-areaalimentacion" data-bs-toggle="tab" data-bs-target="#frmCarnesEspeciales" type="button" role="tab">
                              FORMATO
                            </button>
                          </li>
                          <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-registros-areaalimentacion" data-bs-toggle="tab" data-bs-target="#regiCarnesEspeciales" type="button" role="tab">
                              REGISTROS ALMACENADOS
                            </button>
                          </li>
                        </ul>
                      </div>
                      <div class="card-body " style="background-color: rgb(255 138 55);">
                        <div class="tab-content mt-3">
                          <div class="tab-pane active" id="frmCarnesEspeciales" role="tabpanel">
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="col-md-12">
                                <legend>Selecciona las superficies que no cumplen</legend>
                                <select class="form-select select-multiple" id="selectCarnes" name="selectCarnes[]" multiple="multiple" onchange="porcentCarnes(),pCumpliPreOpe()">
                                  <?php
                                  $vv =
                                    "SELECT aspecto FROM `opsanitarias` where id BETWEEN 349 and 359 or id = 244 or id = 247";
                                  $ave = mysqli_query($conexion, $vv);
                                  while ($aves = mysqli_fetch_assoc($ave)) { ?>
                                    <option value="<?php echo $aves['aspecto']; ?>">
                                      <?php echo
                                      $aves['aspecto']; ?>
                                    </option>
                                  <?php }
                                  ?>
                                </select>
                              </div>

                            </div>
                            <br>
                            <div class="row" style="display: flex; text-align:center; font-size:larger">
                              <div class="row" style="display: flex; text-align:center; font-size:larger">
                                <div class="col-md-12">
                                  <table class="table table-sm table-light table-striped table-hover" style="font-size: small; font-weight: 400; text-align:initial;">
                                    <thead>
                                      <tr>
                                        <th colspan="4" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <tr>
                                        <td>Paredes</td>
                                        <td>Caneca de basura</td>
                                        <td>Difusores</td>
                                        <td>Techos, Lamparas</td>
                                      </tr>
                                      <tr>
                                        <td>Pisos, desagues y rejillas</td>

                                        <td>Lavamanos</td>
                                        <td>Baader</td>
                                        <td>Delantales</td>
                                      </tr>
                                      <tr>

                                        <td>Punto desinfeccion</td>
                                        <td>Lima</td>
                                        <td>Molino pasta de pollo</td>
                                        <td>Molino pasta de pavo</td>

                                      </tr>
                                      <tr>
                                        <td>Banda de cangilones</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>

                                      </tr>
                                    </tbody>
                                  </table>
                                </div>

                              </div>

                            </div>
                            <div class="row" style="justify-content: center;text-align: -webkit-center;align-items: center;">
                              <div class="col-md-6">
                                <label for="">NOVEDADES RELEVANTES</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="novedadCarnes" id="novedadCarnes" rows="2" placeholder="Ingrese las novedades correspondientes..."></textarea>
                              </div>
                              <div class="col-md-6">
                                <label for="">ACCIONES CORRECTIVAS</label><br>
                                <textarea class="form-control mb-3" style="border-radius: 5px;text-align:center;" name="correctivoCarnes" id="correctivoCarnes" rows="2" placeholder="Ingrese las observaciones correspondientes..."></textarea>
                              </div>
                              <div class="col-md-12">
                                <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>
                                <!-- <input type="text" name="" id="" class="form-control" placeholder="%" aria-describedby="helpId"><br> -->
                                <div class="input-group mb-3" style="flex-wrap: inherit;">
                                  <input type="number" value="100" step="0.1" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pcCarnes" id="pcCarnes" aria-describedby="basic-addon2" readonly>
                                  <button type="button" class="input-group-text" id="basic-addon2" style="font-size:xx-large;" disabled><i class="fa-solid fa-percent"></i></i></button>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="tab-pane" id="regiCarnesEspeciales" role="tabpanel" aria-labelledby="regiCarnesEspeciales-tab">
                            <button class="btn btn-light btn-sm mb-4 btnPreopeCarnesEspeciales" type="button">CARGAR TABLA</button>
                            <div class="table-responsive">
                              <table class="table table-light table-striped table-hover" style="display: block;overflow-x: auto;border-radius: 1em; text-align:center; border: 5px solid transparent; font-size:small" id="tblPreopeCarnesEspeciales">
                                <thead style="vertical-align: revert;">
                                  <tr id="cabeceraTres">
                                    <th scope="col" style="min-width:50px">#</th>
                                    <th scope="col" style="min-width:100px">Fecha</th>
                                    <th scope="col" style="min-width:200px">Superficies</th>
                                    <th scope="col" style="min-width:200px">Novedades relevantes</th>
                                    <th scope="col" style="min-width:300px">Observacion</th>
                                    <th scope="col">% Cumplimiento</th>
                                    <th scope="col">% Cumplimiento Total</th>
                                    <th scope="col">Coordinador Calidad</th>
                                    <th scope="col">Responsable Correccion</th>
                                    <th scope="col">Responsable INVIMA</th>
                                    <th scope="col">Firma INVIMA</th>
                                    <th scope="col">Aprobó</th>

                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- CARNES ESPECIALES -->

                  </div>
                  <!-- ACCIONES CORRECTIVAS -->
                  <div class="tab-pane" id="AccionCorrecPoes" role="tabpanel" aria-labelledby="AccionCorrecPoes-tab">
                    <div class="container-fluid" style="font-size: small; display:contents">
                      <div class="row" style="display: flex; text-align:center; font-size:larger">
                        <div class="col-md-12">
                          <table class="table table-light table-bordered table-striped table-hover" style="font-size: large; font-weight: 400; text-align:center; ">
                            <thead>
                              <tr>
                                <th colspan="2" class="text-center">OPERACIONES SANITARIAS Y POES</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>DESVIACIÓN</td>
                                <td>ACCIÓN A APLICAR </td>
                              </tr>
                              <tr>
                                <td>Superficie con residuos organicos, grasa u otro elemento contaminante. </td>
                                <td>Se retira la suciedad evidenciada, se enjuga la superficie, aplicar solución desengrasante, fregar y enjuagar con abundante agua.</td>
                              </tr>

                            </tbody>
                          </table>
                        </div>

                      </div>
                      <div class="row" style="display: flex; text-align:center; font-size:larger;align-items: baseline;justify-content: center;">
                        <div class="col-md-6">
                          <label for="">PORCENTAJE DE CUMPLIMIENTO</label><br>

                          <div class="input-group mb-3" style="flex-wrap: inherit;">
                            <input type="number" value="100" step="0.0001" class="form-control" style="margin: 0px;font-size:x-large;" placeholder="" name="pCumplimientoPreOpe" id="pCumplimientoPreOpe" aria-describedby="basic-addon2" readonly="">
                            <button type="button" class="input-group-text" id="button" style="font-size:xx-large;" disabled=""><i class="fa-solid fa-percent"></i></button>
                          </div>
                        </div>
                      </div>
                      <div class="row" style="display: flex; text-align:center; font-size:larger;align-items: baseline; justify-content:center">
                        <div class="col-md-4">
                          <label for="">COORDINADOR CALIDAD</label><br>
                          <input style="text-transform:uppercase;" type="text" name="calidadPreOpe" id="calidadPreOpe">
                        </div>
                        <div class="col-md-4">
                          <label for="">REALIZA CORRECCION</label><br>
                          <input style="text-transform:uppercase;" type="text" name="correctivoPreOpe" id="correctivoPreOpe">
                        </div>
                        <div class="col-md-4">
                          <label for="">RESPONSABLE INVIMA</label><br>
                          <input style="text-transform:uppercase;" type="text" name="invimaPreOpe" id="invimaPreOpe">
                        </div>
                        <div class="col-md-4" style="margin-top:20px">
                          <label for="">APROBÓ</label><br>
                          <input style="text-transform:uppercase;" type="text" name="aproboPreOpe" id="aproboPreOpe">
                        </div>
                      </div>
                      <div class="row" style="display: flex; text-align:center; font-size:larger">
                        <div class="col-md-12">
                          <br>
                          <legend>Firma Inspector INVIMA:</legend><br>
                          <br>
                          <div class="contenedor">
                            <div class="row">
                              <div class="col-md-12">
                                <canvas id="firmaPreOperativo" width="400" height="200" style="border: 1px solid; cursor: crosshair; background: white;">
                                  No tienes un buen navegador.
                                </canvas>
                              </div>
                            </div>
                            <br>
                            <div class="row">
                              <div class="col-md-12">
                                <input type="hidden" name="base64" id="base64">

                                <input type="button" class="button btn btn-light" id="clearBtn" value="Borrar Canvas"></input>
                              </div>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>


                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- FOOTER -->
        <div class="card-footer border-top border-white">
          <div class="row align-items-center g-3">
            <div class="col-md-6">
              <div class="reloj-container">
                <span id="tiempo" class="d-block h3 mb-1">00:00:00</span>
                <p id="fecha" class="mb-2">Cargando fecha...</p>
                <p class="mb-0 user-info">
                  <i class='bx bx-user-circle'></i> Usuario: <strong>
                    <?php echo $iduser; ?>
                  </strong>
                </p>
              </div>
            </div>
            <div class="col-md-6">
              <div class="d-grid gap-2">
                <button type="submit" name="formPreOperativo" id="controlEnviar" class="btn btn-light btn-lg shadow">
                  <i class='bx bx-send'></i> ENVIAR REPORTE
                </button>
                <button type="button" class="btn btn-outline-light btn-lg" onclick="window.location.href='../mainJefe.php';">
                  <i class='bx bx-x'></i> CANCELAR
                </button>
              </div>
            </div>
          </div>

        </div>
    </form>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.11.5/datatables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/r-2.2.9/sb-1.3.2/sp-2.0.0/datatables.min.js"></script>

  <script src="../JS/reloj.js"></script>
  <script src="../CONTROLTABLAS.JS/FOR-S-CCI-64.js?v=<?php echo time(); ?>"></script>
  <script src="../INPUTS/FOR-S-CCI-64.js"></script>

<script src="../JS/permisos-global.js"></script>

</body>

</html>