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

Full Path: C:/wamp64/www/CALIDADWEB/CALIDADWEB/FRONTED/HTML/FOR-S-CCI-23.php
File size: 22.21 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';
$usuario_actual = isset($_SESSION['usuario']) ? $_SESSION['usuario'] : null;
$usuarios_admin = array('12345', '63546660');
$es_admin = in_array($usuario_actual, $usuarios_admin);
?>
<!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-33</title>

    <link rel="stylesheet" href="../CSS/style_main.css">
    <link rel="shortcut icon" href="../img/avic.jpeg">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <script>
        const esUsuarioAdmin = <?php echo ($es_admin === true) ? 'true' : 'false'; ?>;
        const usuarioActualNombre = "<?php echo htmlspecialchars($usuario_actual); ?>";
    </script>

    <style>
        body {
            background: linear-gradient(135deg, #ffcf4d 0%, #f8ae26 100%);
            min-height: 100vh;
        }

        .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;
            color: white !important;
        }

        .nav-tabs .nav-link {
            background-color: #f0f0f0;
            color: black;
        }
    </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">
        <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-23-CONTROL DE TEMPERATURA DE AREAS DE PROCESO
                </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">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="tab-monitoreo" data-bs-toggle="tab"
                                        data-bs-target="#form-monitoreo" type="button" role="tab">
                                        MONITOREO
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tab-verificacion" data-bs-toggle="tab"
                                        data-bs-target="#form-verificacion" type="button" role="tab">
                                        VERIFICACIONES
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tab-consulta-monitoreo" data-bs-toggle="tab"
                                        data-bs-target="#tabla-monitoreo" type="button" role="tab">
                                        CONSULTA MONITOREO
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tab-consulta-verificacion" data-bs-toggle="tab"
                                        data-bs-target="#tabla-verificacion" type="button" role="tab">
                                        CONSULTA VERIFICACIÓN
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!-- CONTENIDO DE TABS -->
                        <div class="card-body" style="background-color: rgb(255 138 55);">
                            <div class="tab-content mt-3">
                                <!-- TAB 1: MONITOREO (Formulario) -->
                                <div class="tab-pane fade show active" id="form-monitoreo" role="tabpanel" aria-labelledby="tab-monitoreo">
                                    <form method="POST" action="../../BACKEND/controller/FOR-S-CCI-23.php">
                                        <div class="row" style="display: flex; text-align-last:center; justify-content: center; font-size:larger; align-items: baseline; margin-left: 0.5px;">
                                            <legend style="border-bottom: dotted;"> <br></legend><br>
                                            <div class="col-md-4">
                                                <label for="areaMonitoreo">AREA</label><br>
                                                <select class="form-select" name="areaMonitoreo" id="areaMonitoreo" style="height:60px" aria-label="Área">
                                                    <option value="" selected hidden>Selecciona un area</option>
                                                    <option value="EMPAQUE DE VISCERAS">EMPAQUE DE VISCERAS</option>
                                                    <option value="EMPAQUE DE CANAL">EMPAQUE DE CANAL</option>
                                                    <option value="DESPRESE Y MARINADO">DESPRESE Y MARINADO</option>
                                                    <option value="FILETEO DE POLLO">FILETEO DE POLLO</option>
                                                    <option value="FILETEO DE PAVOS">FILETEO DE PAVOS</option>
                                                    <option value="POST PROCESOS">POST PROCESOS</option>
                                                    <option value="ALMACENAMIENTO">ALMACENAMIENTO</option>
                                                    <option value="DESPACHOS">DESPACHOS</option>
                                                    <option value="CARNES MOLIDAS">CARNES MOLIDAS</option>
                                                    <option value="RESELECCION">RESELECCION</option>
                                                </select>
                                            </div>
                                            <div class="col-md-5">
                                                <i class='bx bxs-thermometer'></i>
                                                <label for="tempMonitoreo">TEMPERATURA °C</label><br>
                                                <input type="number" name="tempMonitoreo" class="form-control" id="tempMonitoreo" step="0.01">
                                            </div>
                                        </div>
                                        <div class="row" style="display: flex; text-align-last:center; justify-content: center; font-size:larger; align-items: baseline; margin-left: 0.5px; margin-top:30px">
                                            <div class="col-md-6">
                                                <i class='bx bx-spreadsheet'></i>
                                                <label for="correctivasMonitoreo">CORRECTIVAS/OBSERVACIONES</label><br>
                                                <textarea class="form-control" name="correctivasMonitoreo" id="correctivasMonitoreo" style="font-size: 100%; width: 100%; height:80px; border-radius: 5px"></textarea>
                                            </div>
                                            <div class="col-md-6">
                                                <i class='bx bx-user'></i>
                                                <label for="verificadoMonitoreo">VERIFICADO POR:</label><br>
                                                <input type="text" name="verificadoMonitoreo" id="verificadoMonitoreo" class="form-control" style="font-size:20px;">
                                            </div>
                                            <div class="col-md-6" style="margin-top:20px">
                                                <i class='bx bx-user'></i>
                                                <label for="aproboMonitoreo">APROBÓ:</label><br>
                                                <input type="text" name="aproboMonitoreo" id="aproboMonitoreo" class="form-control" style="font-size:20px;">
                                            </div>
                                        </div>
                                        <div class="col-md-4 offset-md-4 mt-4 mb-4 text-center" style="height:50px;">
                                            <button type="submit" name="formControlTemp" class="btn btn-info btn-sm shadow" style="width: auto; padding: 8px 20px; font-weight: bold;">
                                                <i class='bx bx-send'></i> ENVIAR MONITOREO
                                            </button>
                                        </div>
                                    </form>
                                </div>

                                <!-- TAB 2: VERIFICACIONES (Formulario) -->
                                <div class="tab-pane fade" id="form-verificacion" role="tabpanel" aria-labelledby="tab-verificacion">
                                    <form method="POST" action="../../BACKEND/controller/FOR-S-CCI-23.php">
                                        <div class="row" style="display: flex; text-align-last:center; justify-content: center; font-size:larger; align-items: baseline; margin-left: 0.5px;">
                                            <legend style="border-bottom: dotted;"> <br></legend><br>
                                            <div class="col-md-4">
                                                <label for="areaVerificacion">AREA</label><br>
                                                <select class="form-select" name="areaVerificacion1" id="areaVerificacion1" style="height:60px" aria-label="Área">
                                                    <option value="" selected hidden>Selecciona un area</option>
                                                    <option value="EMPAQUE DE VISCERAS">EMPAQUE DE VISCERAS</option>
                                                    <option value="EMPAQUE DE CANAL">EMPAQUE DE CANAL</option>
                                                    <option value="DESPRESE Y MARINADO">DESPRESE Y MARINADO</option>
                                                    <option value="FILETEO DE POLLO">FILETEO DE POLLO</option>
                                                    <option value="FILETEO DE PAVOS">FILETEO DE PAVOS</option>
                                                    <option value="POST PROCESOS">POST PROCESOS</option>
                                                    <option value="ALMACENAMIENTO">ALMACENAMIENTO</option>
                                                    <option value="DESPACHOS">DESPACHOS</option>
                                                    <option value="CARNES MOLIDAS">CARNES MOLIDAS</option>
                                                    <option value="RESELECCION">RESELECCION</option>
                                                </select>
                                            </div>
                                            <div class="col-md-5">
                                                <i class='bx bxs-thermometer'></i>
                                                <label for="tempVerificacion">TEMPERATURA °C</label><br>
                                                <input type="number" name="tempVerificacion1" class="form-control" id="tempVerificacion1" step="0.01">
                                            </div>
                                        </div>
                                        <div class="row" style="display: flex; text-align-last:center; justify-content: center; font-size:larger; align-items: baseline; margin-left: 0.5px; margin-top:30px">
                                            <div class="col-md-6">
                                                <i class='bx bx-spreadsheet'></i>
                                                <label for="correctivasVerificacion">CORRECTIVAS/OBSERVACIONES</label><br>
                                                <textarea class="form-control" name="correctivasVerificacion1" id="correctivasVerificacion1" style="font-size: 100%; width: 100%; height:80px; border-radius: 5px"></textarea>
                                            </div>
                                            <div class="col-md-6">
                                                <i class='bx bx-user'></i>
                                                <label for="verificadoVerificacion">VERIFICADO POR:</label><br>
                                                <input type="text" name="verificadoVerificacion1" id="verificadoVerificacion1" class="form-control" style="font-size:20px;">
                                            </div>
                                            <div class="col-md-6" style="margin-top:20px">
                                                <i class='bx bx-user'></i>
                                                <label for="aproboVerificacion">APROBÓ:</label><br>
                                                <input type="text" name="aproboVerificacion1" id="aproboVerificacion1" class="form-control" style="font-size:20px;">
                                            </div>
                                        </div>
                                        <div class="col-md-4 offset-md-4 mt-4 mb-4 text-center" style="height:50px;">
                                            <button type="submit" name="formControlTemp1" class="btn btn-info btn-sm shadow" style="width: auto; padding: 8px 20px; font-weight: bold;">
                                                <i class='bx bx-send'></i> ENVIAR VERIFICACIÓN
                                            </button>
                                        </div>
                                    </form>
                                </div>

                                <!-- TAB 3: CONSULTA MONITOREO (Tabla) -->
                                <div class="tab-pane fade" id="tabla-monitoreo" role="tabpanel" aria-labelledby="tab-consulta-monitoreo">
                                    <button class="btn btn-light btn-sm mb-4 btnControlTemp" type="button">CARGAR TABLA</button>
                                    <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;" id="tblControlTemp">
                                        <thead style="vertical-align: revert;">
                                            <tr>
                                                <th scope="col">id</th>
                                                <th scope="col" style="min-width:100px">Fecha</th>
                                                <th scope="col">Hora</th>
                                                <th scope="col">Area</th>
                                                <th scope="col">Temperatura</th>
                                                <th scope="col">Correctivo/Observaciones</th>
                                                <th scope="col">Verificado por</th>
                                                <th scope="col">Aprobó</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                <!-- TAB 4: CONSULTA VERIFICACIÓN (Tabla) -->
                                <div class="tab-pane fade" id="tabla-verificacion" role="tabpanel" aria-labelledby="tab-consulta-verificacion">
                                    <button class="btn btn-light btn-sm mb-4 btnControlTemp1" type="button">CARGAR TABLA</button>
                                    <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;" id="tblControlTemp1">
                                        <thead style="vertical-align: revert;">
                                            <tr>
                                                <th scope="col">id</th>
                                                <th scope="col" style="min-width:100px">Fecha</th>
                                                <th scope="col">Hora</th>
                                                <th scope="col">Area</th>
                                                <th scope="col">Temperatura</th>
                                                <th scope="col">Correctivo/Observaciones</th>
                                                <th scope="col">Verificado por</th>
                                                <th scope="col">Aprobó</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div> <!-- Cierra tab-content -->
                        </div> <!-- Cierra card-body -->

                        <!-- FOOTER CORREGIDO (fuera del card-body, dentro de la card, con fondo naranja) -->
                        <div class="card-footer border-top border-white" style="background-color: rgb(255, 138, 55);">
                            <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="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>

                    </div> <!-- Cierra card -->
                </div> <!-- Cierra col-md-12 -->
            </div> <!-- Cierra container-fluid -->
        </div> <!-- Cierra card shadow-lg -->
    </div> <!-- Cierra container-lg -->

    <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-23.js?v=<?php echo time(); ?>"></script>
    <script src="../INPUTS/FOR-S-CCI-23.js"></script>
    <script src="../JS/permisos-global.js"></script>

</body>

</html>