<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="Albert Espín" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <title>Auto Control</title>
    <link rel="stylesheet" href="/assets/css/bulma.css" />
    <link rel="stylesheet" href="/assets/css/app.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
</head>
<style>
    .vertical-text {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        transform: rotate(180deg);
    }

    /* Estilo personalizado para el borde */
    .custom-border {
        border-bottom: 2px solid black;
        /* Borde inferior de 2px de grosor y color negro */
    }

    .centered-column {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }


    #textInput {
        width: 110px;
        position: absolute;
        /*top: 170px;*/
        top: 275px;
        /* Ajusta la posición superior según sea necesario */
        left: 500px;
        /* Ajusta la posición izquierda según sea necesario */
        z-index: 1;
        /* Asegura que el input esté sobre el canvas */
        background-color: #ECF0F1;
        font-weight: bold;
    }

    #textInput2 {
        width: 110px;
        position: absolute;
        top: 605px;
        /* Ajusta la posición superior según sea necesario */
        left: 470px;
        /* Ajusta la posición izquierda según sea necesario */
        z-index: 1;
        /* Asegura que el input esté sobre el canvas */
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput3 {
        width: 110px;
        position: absolute;
        top: 840px;
        /* 740px + 80px */
        /*left: 830px; */
        left: 795px;
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput4 {
        width: 110px;
        position: absolute;
        top: 370px;
        /* 270px + 80px */
        left: 795px;
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput5 {
        width: 110px;
        position: absolute;
        top: 840px;
        /* 740px + 80px */
        /* left: 300px; */
        left: 185px;
        /* 220px + 80px */
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput6 {
        width: 110px;
        position: absolute;
        top: 370px;
        /* 270px + 80px */
        left: 185px;
        /* 220px + 80px */
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput7 {
        width: 110px;
        position: absolute;
        top: 750px;
        /* 650px + 80px */
        left: 600px;
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput8 {
        width: 110px;
        position: absolute;
        top: 450px;
        /* 350px + 80px */
        left: 600px;
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput9 {
        width: 110px;
        position: absolute;
        top: 600px;
        /* 500px + 80px */
        left: 10px;
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput10 {
        width: 110px;
        position: absolute;
        top: 600px;
        /* 500px + 80px */
        left: 1000px;
        /* 1010px + 80px */
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput11 {
        width: 110px;
        position: absolute;
        top: 750px;
        /* 650px + 80px */
        left: 360px;
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }

    #textInput12 {
        width: 110px;
        position: absolute;
        top: 450px;
        /* 350px + 80px */
        left: 360px;
        z-index: 1;
        font-weight: bold;
        background-color: #ECF0F1;
    }
</style>

<body class="light">
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="#">
                <img src="data:image/png;base64, "
                    width="112" height="28" alt="Grupo CELSA" />
            </a>
            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
                data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="/">
                    Inicio
                </a>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        Mediciones Antes Enderezado
                    </a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item" href="/mediciones/view">
                            Vigas
                        </a>
                        <a class="navbar-item" href="#">
                            Angulares
                        </a>
                        <a class="navbar-item" href="#">
                            Canales
                        </a>
                        <hr class="navbar-divider" />
                    </div>
                </div>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        Vistas
                    </a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item" href="/vista/get">
                            Antes enderezado
                        </a>
                        <a class="navbar-item" href="#">
                            Después enderezado
                        </a>
                        <hr class="navbar-divider" />
                    </div>
                </div>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        Configuración
                    </a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item" href="#">
                            Usuarios
                        </a>
                        <hr class="navbar-divider" />
                    </div>
                </div>
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-light" href="#">
                                Cerrar sesión
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <br />
    <div class="columns is-desktop">
        <div class="column is-4">
            <nav class="panel is-info">
                <p class="panel-heading">
                    Pizarra de mediciones
                </p>
                <form id="medicion_form">
                    <div class="panel-block">
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" for="orden_fabricacion">Orden Fabricación</label>
                            <div class="select is-fullwidth is-size-4">
                                <select class="has-text-weight-bold" id="orden_fabricacion"
                                    name="orden_fabricacion"></select>
                            </div>
                            </p>
                        </div>
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" for="numero_barra">Número Barra</label>
                                <input class="input is-normal is-size-4 has-text-weight-bold is-fullwidth" type="number"
                                    id="numero_barra" name="numero_barra" placeholder="barra" />
                            </p>
                        </div>
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" for="tipo_muestra">Muestra</label>
                            <div class="select is-size-4 has-text-weight-bold is-fullwidth">
                                <select class="has-text-weight-bold" id="tipo_muestra" name="tipo_muestra">
                                    <option value="1">Medio</option>
                                    <option value="2">Cola</option>
                                </select>
                            </div>
                            </p>
                        </div>
                    </div>

                    <div class="panel-block">
                        <div class="is-fullwidth">
                            <div id="profileCanvas" width="800" height="600">
                                <img src="/assets/img/viga.png" alt="perfil" />
                            </div>
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput" name="h"
                                placeholder="h" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput2" name="s"
                                placeholder="s" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput6"
                                name="t4" placeholder="t4" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput5"
                                name="t3" placeholder="t3" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput4"
                                name="t2" placeholder="t2" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput3"
                                name="t1" placeholder="t1" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput9"
                                name="b1" placeholder="b1" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput10"
                                name="b2" placeholder="b2" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput12"
                                name="e4" placeholder="e4" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput11"
                                name="e3" placeholder="e3" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput8"
                                name="e2" placeholder="e2" required />
                            <input class="input is-normal is-size-4" type="number" step="0.001" id="textInput7"
                                name="e1" placeholder="e1" required />

                        </div>
                    </div>

                    <div class="panel-block">
                        <div class="columns">
                            <input type="text" name="producto" id="producto" hidden>
                            <div class="column is-4">
                                <p class="control">
                                    <label class="is-size-4" for="kg-muestra">Peso muestra</label>
                                    <input type="number" class="input is-normal is-size-4 has-text-weight-bold"
                                        id="kg-muestra" name="kg-muestra" placeholder="g" step="0.001" required />
                                </p>
                            </div>
                            <div class="column is-4">
                                <p class="control">
                                    <label for="long-muestra" class="is-size-4">Longitud muestra</label>
                                    <input type="number" class="input is-normal is-size-4 has-text-weight-bold"
                                        id="long-muestra" name="long-muestra" placeholder="mm" step="0.001" required />
                                </p>
                            </div>

                            <div class="column is-4">
                                <p class="control">
                                    <label class="is-size-4" for="gmm-muestra">g/mm</label>
                                    <input type="number" class="input is-normal is-size-4 has-text-weight-bold"
                                        id="gmm-muestra" name="gmm-muestra" placeholder="g/mm" step="0.001" required />
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="panel-block">
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" class="checkbox is-size-4 is-fullwidth">
                                    <input type="checkbox" id="enraye" name="enraye" />
                                    Enraye
                                </label>
                            </p>
                        </div>
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" for="turno">Turno</label>
                            <div class="select is-size-4 is-fullwidth">
                                <select class="has-text-weight-bold" id="turno" name="turno">
                                    <option class="has-text-weight-bold" value="A">A</option>
                                    <option class="has-text-weight-bold" value="B">B</option>
                                    <option class="has-text-weight-bold" value="C">C</option>
                                    <option class="has-text-weight-bold" value="D">D</option>
                                    <option class="has-text-weight-bold" value="E">E</option>
                                </select>
                            </div>
                            </p>
                        </div>
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" for="calidad">Calidad</label>
                                <input class="input is-size-4 has-text-weight-bold" type="text" id="calidad"
                                    name="calidad" />
                            </p>
                        </div>
                    </div>
                    <div class="panel-block">
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" for="colada">Colada</label>
                                <input class="input is-normal is-size-4 has-text-weight-bold is-fullwidth" type="text"
                                    id="colada" name="colada" placeholder="Colada" required />
                            </p>
                        </div>
                        <div class="column is-4">
                            <p class="control">
                                <label class="is-size-4" for="usuario">Usuarios</label>
                            <div class="select is-size-4 is-fullwidth">
                                <select class="has-text-weight-bold" id="usuario" name="usuario">
                                    <option class="has-text-weight-bold" value="ED">Ernesto Delgado</option>
                                    <option class="has-text-weight-bold" value="EE">Enric Estall Caballero</option>
                                    <option class="has-text-weight-bold" value="MC">Manel Cardenas Durán</option>
                                    <option class="has-text-weight-bold" value="IP">Ismael Piqueras Torcal</option>
                                    <option class="has-text-weight-bold" value="JA">Jordi Agüera González</option>
                                    <option class="has-text-weight-bold" value="FA">Fermín Aguilar Sánchez</option>
                                    <option class="has-text-weight-bold" value="JC">Juan Carlos Salinas Garcia</option>
                                    <option class="has-text-weight-bold" value="RA">Rubén Ambrona Sibera</option>
                                    <option class="has-text-weight-bold" value="OP">Oscar Perez Lopez</option>
                                    <option class="has-text-weight-bold" value="JM">Jose Mª Catasus Vilamos</option>
                                    <option class="has-text-weight-bold" value="JG">Jorge Gonzalez Pedrosa</option>
                                    <option class="has-text-weight-bold" value="PP">Pedro Piqué</option>
                                    <option class="has-text-weight-bold" value="JE">Jose E. Simón Fernández</option>
                                    <option class="has-text-weight-bold" value="RG">Raul Gavín Simón</option>
                                </select>
                            </div>
                            </p>
                        </div>
                        <div class="column is-4">
                            <label class="is-size-4" class="checkbox is-size-4 is-fullwidth">
                                <input type="checkbox" id="marca" name="marca" />
                                Marca CELSA
                            </label>
                        </div>
                    </div>
                    <div class="panel-block">
                        <div class="control">
                            <label class="is-size-4" for="observaciones">Observaciones</label>
                            <textarea class="textarea is-size-4 has-text-weight-bold" placeholder="observaciones"
                                id="observaciones" name="observaciones" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="panel-block">
                        <div class="control">
                            <button type="button" class="button is-link" onclick="GuardarMedicion()">Guardar</button>
                            <button type="reset" class="button is-danger">Nueva medición</button>
                        </div>
                    </div>
                </form>
            </nav>
        </div>
        <div class="column is-8">
            <nav class="panel is-info">
                <p class="panel-heading" id="encabezado-mediciones">
                    Mediciones antes del enderezado para el producto
                </p>
                <div class="panel-block">
                    <table class="table is-bordered is-narrow">
                        <tr class="custom-border">
                            <th class="vertical has-text-centered is-size-3 vertical-text" rowspan="8">Muestra</th>
                            <th class="vertical has-text-centered is-size-3 vertical-text" rowspan="8">Hora</th>
                            <th class="vertical has-text-centered is-size-3 vertical-text" rowspan="8">Colada</th>
                            <th class="has-text-centered is-size-3" colspan="3">Masa unitaria</th>
                            <th class="has-text-centered is-size-3">Altura Perfil</th>
                            <th class="has-text-centered is-size-3">Espesor Alma</th>
                            <th class="has-text-centered is-size-3" colspan="4">Espesores de las Alas</th>
                            <th class="has-text-centered is-size-3" colspan="2">Anchura de las Alas</th>
                            <th class="has-text-centered is-size-3" colspan="6">Asimetría del Alma</th>
                        </tr>
                        <tr class="custom-border">
                            <th class="is-size-4">Longitud</th>
                            <th class="is-size-4">Peso</th>
                            <th class="has-text-centered is-size-4" rowspan="2">g/mm</th>
                            <th class="has-text-centered is-size-4" r>mm</th>
                            <th class="has-text-centered is-size-4" r>mm</th>
                            <th class="has-text-centered is-size-4" colspan="2">Ala Motor</th>
                            <th class="has-text-centered is-size-4" colspan="2">Ala Operador</th>
                            <th class="has-text-centered is-size-4">Ala Motor</th>
                            <th class="has-text-centered is-size-4">Ala Operador</th>
                            <th class="has-text-centered is-size-4" colspan="3">Ala Motor</th>
                            <th class="has-text-centered is-size-4" colspan="3">Ala Operador</th>
                        </tr>
                        <tr class="custom-border">
                            <th class="has-text-centered is-size-4">mm</th>
                            <th class="has-text-centered is-size-4">g</th>
                            <th class="has-text-centered is-size-4">h</th>
                            <th class="has-text-centered is-size-4">s</th>
                            <th class="has-text-centered is-size-4">sup</th>
                            <th class="has-text-centered is-size-4">inf</th>
                            <th class="has-text-centered is-size-4">sup</th>
                            <th class="has-text-centered is-size-4">inf</th>
                            <th class="has-text-centered is-size-4">b</th>
                            <th class="has-text-centered is-size-4">b'</th>
                            <th class="has-text-centered is-size-4">sup</th>
                            <th class="has-text-centered is-size-4">inf</th>
                            <th class="has-text-centered is-size-4">sup-inf</th>
                            <th class="has-text-centered is-size-4">sup</th>
                            <th class="has-text-centered is-size-4">inf</th>
                            <th class="has-text-centered is-size-4">sup-inf</th>
                        </tr>

                        <tr id="tol-max" class="custom-border">
                            <th class="is-size-4 has-background-grey-light" colspan="2">Máximo</th>
                            <th class="has-text-centered is-size-4 has-background-grey-light"></th>
                            <th class="has-text-centered is-size-4 has-background-grey-light"></th>
                            <th class="has-text-centered is-size-4 has-background-grey-light"></th>
                            <th class="has-text-centered is-size-4 has-background-grey-light" colspan="4"></th>
                            <th class="has-text-centered is-size-4 has-background-grey-light" colspan="2"></th>
                            <th colspan="2"></th>
                            <th rowspan="2" class="has-text-centered is-size-4"></th>
                            <th colspan="2"></th>
                            <th rowspan="2" class="has-text-centered is-size-4"></th>
                        </tr>

                        <tr id="tol-max-rec" class="custom-border">
                            <th class="is-size-4 is-italic has-text-weight-normal" colspan="2">Máx. Rec</th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4" colspan="4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4" colspan="2"></th>
                            <th colspan="2"></th>
                            <th colspan="2"></th>
                        </tr>

                        <tr id="tol-nominal" class="custom-border">
                            <th class="is-size-4 has-background-grey-light" colspan="2">Nominal</th>
                            <th class="has-text-centered has-background-grey-light is-size-4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4" colspan="4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4" colspan="2"></th>
                            <th colspan="6"></th>
                        </tr>

                        <tr id="tol-min-rec" class="custom-border">
                            <th class="is-size-4 is-italic has-text-weight-normal" colspan="2">Mín.Rec</th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4" colspan="4"></th>
                            <th class="has-text-centered has-text-weight-normal is-italic is-size-4" colspan="2"></th>
                            <th colspan="2"></th>
                            <th rowspan="2" class="has-text-centered is-size-4"></th>
                            <th colspan="2"></th>
                            <th rowspan="2" class="has-text-centered is-size-4"></th>
                        </tr>

                        <tr id="tol-min">
                            <th class="is-size-4 has-background-grey-light" colspan="2">Mínimo</th>
                            <th class="has-text-centered has-background-grey-light is-size-4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4" colspan="4"></th>
                            <th class="has-text-centered has-background-grey-light is-size-4" colspan="2"></th>
                            <th colspan="6"></th>
                        </tr>
                        <tr>
                            <th class="has-text-centered is-size-4 is-info" rows="6" colspan="20"></th>
                        </tr>
                        <tbody id="mediciones-po"></tbody>
                    </table>
                </div>
            </nav>
        </div>
    </div>
    <div class="columns">
        <div class="column">
            <footer>
                <div>&copy; Albert Espín CELSA.SL 2024 - 2024</div>
            </footer>
        </div>
    </div>
    <script src="/assets/js/jquery.js"></script>
    <script src="/assets/js/mediciones.js"></script>
</body>

</html>