<?php 
// header("Content-Type: text/html;charset=utf-8");
session_start();
require('connect.php');






?>

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

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="icono.png" sizes="192x192">

    <title>Reporte de voz GT</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet"
        type="text/css">

</head>

<body>

    <!-- About -->
    <section id="about" class="about">
        <div class="container">
            <div class="foto">
                <img src="img/compo.png" alt="">
            </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h3 style="color: #337ab7;">1. Toca el botón para hablar, dí qué quieres reportar y tócalo de nuevo para terminar.</h3>
                    <h3 style="color: #337ab7;">2. Si el texto que aparece está bien, toca el botón de Aceptar.</h3>
                    <h3 style="color: #337ab7;">3. Finalmente, toca el botón de Enviar.</h3>
                    <a href="#tipodereporte" class="btn btn-success btn-lg" id="botonseguir" onclick="recargar();" >Hacer un reporte!</a><br>

                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <!-- Services -->
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
    <section id="services" class="services bg-primary">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-10 col-lg-offset-1">
                    <hr class="small">

                    <form method="POST" action="resultados.php" id="forma">

                        <div class="service-item" id="tipodereporte">
                            <div id="nombre" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px; ">
                                <h3>¿Qué quieres reportar?</h3>

                                <label class="radio-inline">
                                <input id="condicion" type="radio" name="nameradio" value="Condición" onclick="togglevaloracionderiesgo(true); asignatipodereporte('condicion'); validaforma() ">Condición
                                </label>
                                <label class="radio-inline">
                                <input id="acto" type="radio" name="nameradio" value="Acto" onclick="togglevaloracionderiesgo(true); asignatipodereporte('acto'); validaforma() " >Acto
                                </label>
                                <label class="radio-inline">
                                 <input id="positivo" type="radio" name="nameradio" value="Reconocimiento Positivo" onclick="togglevaloracionderiesgo(false); asignatipodereporte('reconocimiento'); validaforma() ">Reconocimiento positivo
                                 </label>

                            </div>
                        </div>

                        <div class="service-item" id="tipodereporte">
                            <div id="nombre" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px; ">
                                <h3>Línea:</h3>

                                <label class="radio-inline">
                                <input id="drilling" type="radio" name="namelinea" value="Drilling" onclick="asignalinea('Drilling'); validaforma() "> Drilling
                                </label>
                                <label class="radio-inline">
                                <input id="produccion" type="radio" name="namelinea" value="Producción" onclick="asignalinea('Producción'); validaforma() ">Producción
                                </label>
                                <label class="radio-inline">
                                <input id="facilidades" type="radio" name="namelinea" value="Facilidades" onclick="asignalinea('Facilidades');validaforma() ">Facilidades
                                </label>
                                <label class="radio-inline">
                                <input id="workover" type="radio" name="namelinea" value="Workover" onclick="asignalinea('Workover');validaforma() ">Workover
                                </label>
                                <label class="radio-inline">
                                <input id="administracion" type="radio" name="namelinea" value="Administración" onclick="asignalinea('Administración');validaforma() ">Administración
                                </label>
                                <label class="radio-inline">
                                <input id="sismica" type="radio" name="namelinea" value="Sísmica" onclick="asignalinea('Sísmica');validaforma() ">Sísmica
                                </label>
                                <label class="radio-inline">
                                <input id="otros" type="radio" name="namelinea" value="Otros" onclick="asignalinea('Otros');validaforma() ">Otros
                                </label>

                            </div>
                        </div>


                        <div class="service-item" id="tipodereporte">
                            <div id="nombre" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px; ">
                                <h3>Lugar del reporte:</h3>

                                <label for="sel1">Seleccione un lugar:</label>
                                    <select class="form-control" id="sel1" name="namelugar" onclick="asignalugar(); validaforma(); " >
                                        <option onclick="asignalugar(); validaforma(); " >
                                        Seleccione un lugar
                                        </option>
                                        <option>
                                        <?php 
                                            // header("Content-Type: text/html;charset=utf-8");
                                            $result=mysqli_query($connection,'SELECT * FROM `login`'); 
                                                while($row=mysqli_fetch_assoc($result)) { 
                                                echo "<option value='$row[login]'>$row[login]</option>"; 
                                            } 
                                            ?> 
                                        </option>
                                    </select>
                                    <label for="#lugarespecifico">Lugar específico: </label>
                                    <input type="text" class="form-control" placeholder="Lugar específico" id="lugarespecifico" name="namelugarespecifico" onkeyup="validaforma()" ><br>

                            </div>
                        </div>


                        <div class="service-item">
                            <div id="nombre" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px; ">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x" id="bolitaindicadoraNombre" ></i>
                                    <i class="fa fa-microphone fa-stack-1x text-primary"></i>
                                </span>
                                <h4 id="instruccionesNombre">
                                    <strong>Toca una vez el botón para grabar. Dí claramente tu nombre o digita la información.</strong>
                                    <h4 id="instrucciones"><strong></strong></h4>
                                </h4>

                                <!--botón reconocer nombre --><a onclick="reconocenombre(event);" class="btn btn-danger btn-lg" id="botonhablarNombre">Graba tu nombre</a><br><br>

                                <div class="campodereconocimiento">
                                    <p id="textoresultadonombre">Acá aparecerá tu nombre:</p>
                                </div><br>

                                <a onclick="aceptarNombre();" class="btn btn-warning btn-lg">Aceptar</a><br><br>
                                <label for="#nombre">Nombre: </label>
                                <input type="text" class="form-control" placeholder="Nombre" id="entradanombre" name="namenombre" onkeyup="validaforma()"><br>

                                <a href="#id" onclick="consolidar();" class="btn btn-default">Siquiente</a>

                            </div>

                            <!-- - -->
                        <div class="service-item">    
                            <div id="id" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px; ">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x" id="bolitaindicadoraId" ></i>
                                    <i class="fa fa-microphone fa-stack-1x text-primary"></i>
                                </span>
                                <h4 id="instruccionesId">
                                    <strong>Toca una vez el botón para grabar. Dí los números de tu identificación o digita la información</strong>
                                    <h4 id="instrucciones"><strong></strong></h4>
                                </h4>

                                <!--botón reconocer nombre --><a onclick="reconoceId(event);" class="btn btn-danger btn-lg" id="botonhablarId">Graba los números de tu identificación</a><br><br>

                                <div class="campodereconocimiento">
                                    <p id="textoresultadoId">Acá aparecerá tu identificación:</p>
                                </div><br>

                                <a onclick="aceptarId();" class="btn btn-warning btn-lg">Aceptar</a><br><br>
                                <label for="#id">identificación: </label>
                                <input type="text" class="form-control" placeholder="identificación" id="entradaId" name="nameId" onkeyup="validaforma()"><br>

                                <a href="#empresa" onclick="consolidar();" class="btn btn-default">Siquiente</a>

                            </div>
                        </div>



                          <!-- - -->
                          <div class="service-item">    
                            <div id="empresa" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px; ">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x" id="bolitaindicadoraEmpresa" ></i>
                                    <i class="fa fa-microphone fa-stack-1x text-primary"></i>
                                </span>
                                <h4 id="instruccionesEmpresa">
                                    <strong>Toca una vez el botón para grabar, di el nombre de tu empresa o digita la información</strong>
                                    <h4 id="instrucciones"><strong></strong></h4>
                                </h4>

                                <!--botón reconocer nombre --><a onclick="reconoceEmpresa(event);" class="btn btn-danger btn-lg" id="botonhablarEmpresa">Graba el nombre de tu empresa</a><br><br>

                                <div class="campodereconocimiento">
                                    <p id="textoresultadoEmpresa">Acá aparecerá tu empresa:</p>
                                </div><br>

                                <a onclick="aceptarEmpresa();" class="btn btn-warning btn-lg">Aceptar</a><br><br>
                                <label for="#id">Empresa: </label>
                                <input type="text" class="form-control" placeholder="Empresa" id="entradaEmpresa" name="nameEmpresa" onkeyup="validaforma()"><br>

                                <label for="cargo">Selecciona tu cargo de la lista:</label>
                                    <select class="form-control" id="cargo" name="namecargo" onclick="asignacargo(true)">  
                                         <option >Selecciona una opción</option>
                                        <option>Aceitero</option>
                                        <option>Administrador</option>
                                        <option>Almacénista</option>
                                        <option>Andamiero</option>
                                        <option>Aparejador</option>
                                        <option>Asistente</option>
                                        <option>Auxiliar / Ayudante</option>
                                        <option>Cadenero</option>
                                        <option>Campamentero</option>
                                        <option>Capataz</option>
                                        <option>Camarera</option>
                                        <option>Chef</option>
                                        <option>Cocinero</option>
                                        <option>Company man dia</option>
                                        <option>Company man noche</option>
                                        <option>Coordinador</option>
                                        <option>Cuñero</option>
                                        <option>Director</option>
                                        <option>Electricista / Eléctrico / Electromecánico</option>
                                        <option>Encuellador</option>
                                        <option>Esmerilador</option>
                                        <option>Ecuellador</option>
                                        <option>Gerente</option>
                                        <option>Guarda de Seguridad</option>
                                        <option>Ingeniero</option>
                                        <option>Interventor</option>
                                        <option>Jefe de equipo</option>
                                        <option>Lavaloza / Lavandera / Mesero</option>
                                        <option>Líder</option>
                                        <option>Maquinista</option>
                                        <option>Maestro</option>
                                        <option>Mecánico</option>
                                        <option>Obrero</option>
                                        <option>Obrero de patio</option>
                                        <option>Oficial</option>
                                        <option>Operador</option>
                                        <option>Otros</option>
                                        <option>Perforador</option>
                                        <option>Profesional</option>
                                        <option>Soldador / Técnico</option>
                                        <option>Supervisor</option>
                                        <option>Supervisor Wo</option>

                                    </select>

                                <a href="#sliders" onclick="consolidar();" class="btn btn-default">Siquiente</a>

                            </div>
                        </div>


                        </div>


                        <br>
                        <hr><br>


                        <div id="sliders" class="service-item" id="reporte">
                            <div id="valoracionderiesgo">
                                <!--PROBABILIDAD-->
                                <div style="background-color: rgb(83,156,218); border-radius:1em; padding:10px; ">
                                    <h4>Probabilidad:</h4>

                                            <div class="table-responsive">          
                                                <table class="table table-bordered table-responsive table-sm">
                                                  <thead>
                                                    
                                                  </thead>
                                                  <tbody>
                                                    <tr>
                                                        <th style="text-align: center; color:black;" >A- RARO(1-10%)</th>
                                                        <th style="text-align: center; color:black;">B- IMPROBABLE(11-30%)</th>
                                                        <th style="text-align: center; color:black;">C- POSIBLE(31-50%)</th>
                                                        <th style="text-align: center; color:black;">D- PROBABLE(51-70%)</th>
                                                        <th style="text-align: center; color:black;">E- CASI CERTEZA(71-90%)</th>
                                                    </tr>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>2</td>
                                                        <td>3</td>
                                                        <td>4</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Nunca ha ocurrido en la industria</td>
                                                        <td> Ha ocurrido en la industria</td>
                                                        <td>Ha ocurrido en la operación de GTEC</td>
                                                        <td>Ocurre varias veces al año en la operación de GTEC</td>
                                                        <td>Ocurre varias veces al año en la misma locación, facilidad o actividad
                                                            de la compañía</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background-color: #d6bd04"><input type="radio" name="nameprobabilidad" value="1" onclick="valoraprobabilidad(1)"></td>
                                                        <td style="background-color: #d6bd04"><input type="radio" name="nameprobabilidad" value="2" onclick="valoraprobabilidad(2)"></td>
                                                        <td style="background-color: #ea8304"><input type="radio" name="nameprobabilidad" value="3" onclick="valoraprobabilidad(3)"></td>
                                                        <td style="background-color: #ea0404"><input type="radio" name="nameprobabilidad" value="4" onclick="valoraprobabilidad(4)"></td>
                                                        <td style="background-color: #ea0404"><input type="radio" name="nameprobabilidad" value="5" onclick="valoraprobabilidad(5)"></td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                                </div>
                                </div><br>


                                <!--SEVERIDAD-->
                                <div style="background-color: rgb(83,156,218); border-radius:1em; padding:10px;">
                                    <h4>Severidad:</h4>
                                    <p>Antes de tomar medidas y controles; la acción o condición que está reportando, podría ocasionar</p>

                                    <div class="table-responsive">          
                                            <table class="table table-bordered table-responsive table-sm">
                                              <thead>
                                                
                                              </thead>
                                              <tbody>
                                                <tr>
                                                    <th style="text-align: center; color:black;">Severidad</th>
                                                    <th style="text-align: center; color:black;">Insignificante</th>
                                                    <th style="text-align: center; color:black;">Menor</th>
                                                    <th style="text-align: center; color:black;">Moderado</th>
                                                    <th style="text-align: center; color:black;">Mayor</th>
                                                    <th style="text-align: center; color:black;">Catastrófico</th>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>1</td>
                                                    <td>2</td>
                                                    <td>3</td>
                                                    <td>4</td>
                                                    <td>5</td>
                                                    
                                                </tr>
                                                <tr>
                                                    <td>PERSONAS</td>
                                                    <td>Primeros auxilios</td>
                                                    <td><ul><li>Lesión que requiere atención medica</li><li>Trabajo limitado</li></ul></td>
                                                    <td>Impacto en la salud a corto plazo</td>
                                                    <td><ul><li>Impacto en la salud a largo plazo</li><li>Incapacidad permanente</li></ul></td>
                                                    <td>Muerte</td>
                                                </tr>
                                                <tr>
                                                    <td>Medio Ambiente</td>
                                                    <td>N/A</td>
                                                    <td>Daño ambiental menor</td>
                                                    <td>Daño ambiental moderado</td>
                                                    <td>Daño ambiental severo a corto plazo</td>
                                                    <td>Daño ambiental severo a largo plazo</td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td style="background-color: #d6bd04"><input type="radio" name="nameseveridad" value="1" onclick="valoraseveridad(1)"></td>
                                                    <td style="background-color: #d6bd04"><input type="radio" name="nameseveridad" value="2" onclick="valoraseveridad(2)"></td>
                                                    <td style="background-color: #ea8304"><input type="radio" name="nameseveridad" value="3" onclick="valoraseveridad(3)"></td>
                                                    <td style="background-color: #ea0404"><input type="radio" name="nameseveridad" value="4" onclick="valoraseveridad(4)"></td>
                                                    <td style="background-color: #ea0404"><input type="radio" name="nameseveridad" value="5" onclick="valoraseveridad(5)"></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            </div>

                                 <div style="background-color: rgb(83,156,218); border-radius:1em;">
                                        <h3>Valoración de riesgo:</h3>
                                        <div class="bolita" id="valoracionriesgo">
                                             <h3 id="numeroderiesgo"><strong>0</strong></h3>
                                             <p id="descripcionderiesgo"></p>
                                        </div> <br><br>
                                        
                                        <a href="#reporte" class="btn btn-default">Continuar</a>
                                        <a href="#sliders" class="btn btn-warning">Corregir</a>

                                 </div>

                                            
                                </div><br>
                            </div>


                            <br><br>
                            <hr><br><br>

                            <!--REPORTE-->
                            <div id="reporte" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px;">
                                <h2>Reporte</h2>
                                <span class="fa-stack fa-2x">
                                        <i class="fa fa-circle fa-stack-2x" id="bolitaindicadoraReporte" ></i>
                                        <i class="fa fa-microphone fa-stack-1x text-primary"></i>
                                     </span>
                                <h4 id="instruccionesReporte">
                                    <strong>Toca una vez el botón para grabar. Dí claramente tu reporte o digita la información</strong>
                                    <h4 id="instrucciones"><strong></strong></h4>
                                </h4>

                                <!--botón reconocer reporte --><a onclick="reconocereporte(event);" class="btn btn-danger btn-lg" id="botonhablarReporte">Graba tu reporte</a><br><br>

                                <div class="campodereconocimientoReporte">
                                    <p id="textoresultadoReporte">Acá aparecerá tu reporte:</p>
                                </div><br>

                                <a onclick="aceptarReporte();" class="btn btn-warning btn-lg">Aceptar</a><br><br>

                                <label for="#entradareporte">Reporte: </label>
                                <input type="textarea" class="form-control" placeholder="Reporte" id="entradaReporte" name="namereporte" onkeyup="validaforma()"><br>

                                <a href="#plandeaccion" onclick="consolidar();" class="btn btn-default">Siquiente</a>

                            </div><br>

                            <br><br>
                            <hr><br><br>

                            <!--PLAN DE ACCION-->
                            <div id="plandeaccion" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px;">
                                <h2>Plan de acción</h2>
                                <span class="fa-stack fa-2x">
                                        <i class="fa fa-circle fa-stack-2x" id="bolitaindicadoraPlan" ></i>
                                        <i class="fa fa-microphone fa-stack-1x text-primary"></i>
                                     </span>
                                <h4 id="instruccionesPlan">
                                    <strong>Toca una vez el botón para grabar. Dí una breve descripción de las acciones desarrolladas o sugeridas desde tu lógica o conocimiento para corregir el acto o acción reportada o digita la información.</strong>
                                    <h4 id="instrucciones"><strong></strong></h4>
                                </h4>

                                <!--botón reconocer plan  --><a onclick="reconoceplan(event);" class="btn btn-danger btn-lg" id="botonhablarPlan">Graba tu plan</a><br><br>

                                <div class="campodereconocimientoPlanDeAccion">
                                    <p id="resultadoPlanDeaccion">Acá aparecerá tu plan de acción:</p>
                                </div><br>
                                <a onclick="aceptarPlanDeAccion();" class="btn btn-warning btn-lg">Aceptar</a><br><br>
                                <label for="#InputPlanDeAccion">Plan de Acción: </label>
                                <input type="textarea" class="form-control" placeholder="Plan de Acción" id="entradaPlan" name="nameplan" onkeyup="validaforma()"><br>

                                <a href="#estado" onclick="consolidar();" class="btn btn-default">Siquiente</a>

                            </div><br>

                                       <!--ESTADO-->
                                       <div id="estado" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px;">
                                <h2>Estado del reporte</h2>
                               
                                <label for="estado">Selecciona el estado del reporte:</label>
                                    <select class="form-control" id="estado" name="nameestado" onclick="asignaestado(true)">  

                                        <option >Abierto</option>
                                        <option >En proceso</option>
                                        <option >Cerrado</option>
                                                          
                                    </select>
                                            

                                <a href="#resumen" onclick="consolidar();" class="btn btn-default">Siquiente</a>

                            </div><br>


                        </div>

                        <br><br>
                        <hr><br><br>

                        <div id="resumen" style="background-color: rgb(83,156,218); border-radius:1em; padding:10px;">

                            <h2 id="datosincompletos">Datos incompletos, por favor diligenciar formulario completamente</h2>

                            <input id="botondeenviar" type="submit" value="enviar" class="btn btn-success btn-lg" disabled>
                        </div>

                    </form>

                    <!-- /.row (nested) -->
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>


    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!--Recorder JavaScript -->
    <script src="js/recorder.min.js"></script>

    <!--Site functions JavaScript -->
    <script src="js/main.js"></script>

    

   

    <script>
        //revisa si online
        if (navigator.onLine == false) {
            // alert("La aplicación no funcionará sin conexión a Inernet. Por favor revisa tu conexión e intenta de nuevo");
        }



        //definimos variables
        var tipodereporte = '';
        var lugar = false;
        var linea = '';
        var cargo = false;
        var valordeprobabilidad = 0;
        var valordeseveridad = 0;
        var loQueEstoyReconociendo = "nombre";
        var textolresultadonombre = document.getElementById("textoresultadonombre");
        var textolresultadoId = document.getElementById("textoresultadoId");
        var textolresultadoEmpresa = document.getElementById("textoresultadoEmpresa");
        var textoresultadoReporte = document.getElementById("textoresultadoReporte");
        var textoresultadoPlanDeaccion = document.getElementById("resultadoPlanDeaccion");
        var estado = false;


        var gransalidatipo = '';
        var gransalidanombre = '';
        var gransalidaId ='';
        var gransalidaEmpresa ='';
        var gransalidaprobabilidad = '';
        var gransalidaseveridad = '';
        var gransalidareporte = '';
        var gransalidaplan = '';
        var valorfinalderiesgo ='';


        function validaforma(){
            if(
                  tipodereporte == ''
                  ||linea == ''
                  ||lugar == false
                  ||cargo == false
                  ||document.getElementById('entradanombre').value.length == 0 
                  || document.getElementById('lugarespecifico').value.length == 0 
                  || document.getElementById('entradaId').value.length == 0 
                  || document.getElementById('entradaReporte').value.length == 0 
                  || document.getElementById('entradaEmpresa').value.length == 0 
                  || document.getElementById('entradaPlan').value.length == 0 

             ) { 
                 document.getElementById('botondeenviar').disabled = true;
                  
             } else { 
                    document.getElementById('botondeenviar').disabled = false;
                    document.getElementById('datosincompletos').innerHTML = "Enviar datos";  
            }
        }


        function asignatipodereporte(x) {
            console.log("asignatipodereporte activado");
            tipodereporte = x;
        }
        function asignalugar(x) {
            console.log("asignalugar activado");
            lugar = x;
        }
        function asignalinea(x){
            linea = x;
        }
        function asignacargo(x){
            console.log("asignacargo activado" + x);
            cargo = x;
        }
        function asignaestado(x){
            console.log("estado activado" + x);
            estado = x;
        }

     


        function togglevaloracionderiesgo(entrada){
            if(entrada == false){
                document.getElementById("valoracionderiesgo").style.display="none";
            }
            if(entrada == true){
                document.getElementById("valoracionderiesgo").style.display="block";
            } 
        }

        function recargar(){
            location.reload(false);
        }


        function valoraprobabilidad(x){
            gransalidaprobabilidad = x;
            valorariesgo();
        }

        function valoraseveridad(x){
            gransalidaseveridad = x;
            valorariesgo();
        }
        

        function valorariesgo(){
            valorfinalderiesgo = gransalidaprobabilidad * gransalidaseveridad;
            document.getElementById("numeroderiesgo").innerHTML=valorfinalderiesgo;
    
            if(valorfinalderiesgo <= 4){document.getElementById("valoracionriesgo").style="background-color: #36c10f";
                                        document.getElementById("descripcionderiesgo").innerHTML="Riesgo bajo"; 
                                        }
            if(valorfinalderiesgo > 4 && valorfinalderiesgo <= 10){document.getElementById("valoracionriesgo").style="background-color: #d6bd04";
                                        document.getElementById("descripcionderiesgo").innerHTML="Riesgo medio"; 
                                        }
            if(valorfinalderiesgo > 10 && valorfinalderiesgo <= 15){document.getElementById("valoracionriesgo").style="background-color: #ea8304";
                                        document.getElementById("descripcionderiesgo").innerHTML="Riesgo alto"; 
                                        }
            if(valorfinalderiesgo > 15){document.getElementById("valoracionriesgo").style="background-color: #ea0404";
                                        document.getElementById("descripcionderiesgo").innerHTML="Riesgo crítico"; 
                                        }
        }



        





        // reconocedor de voz:    

        if (!('webkitSpeechRecognition' in window)) {
            //Speech API not supported here…
            alert("Navegador no soportado. Intenta con Chrome");
        } else { //Let’s do some cool stuff :)
            var recognition = new webkitSpeechRecognition(); //That is the object that will manage our whole recognition process. 
            recognition.continuous = true;   //Suitable for dictation. 
            recognition.interimResults = true;  //If we want to start receiving results even if they are not final.
            //Define some more additional parameters for the recognition:
            recognition.lang = "es-CO";
            recognition.maxAlternatives = 4; //Since from our experience, the highest result is really the best...
            var reconociendo = false;
            console.log('reconociendo: ' + reconociendo);  //para saber en consola si está reconociendo nada mas
        }

        recognition.onstart = function () {
            //Listening (capturing voice from audio input) started.
            //This is a good place to give the user visual feedback about that (i.e. flash a red light, etc.)

            if (loQueEstoyReconociendo == "nombre") {
                bolitaindicadoraNombre.style.color = "red";
                document.getElementById("botonhablarNombre").innerHTML = "Detener la grabación";
                document.getElementById("instruccionesNombre").innerHTML = "Toca el botón rojo para detener la grabación";
                document.getElementById("entradanombre").value = "";
            }
            if (loQueEstoyReconociendo == "reporte") {
                bolitaindicadoraReporte.style.color = "red";
                document.getElementById("botonhablarReporte").innerHTML = "Detener la grabación";
                document.getElementById("instruccionesReporte").innerHTML = "Toca el botón rojo para detener la grabación";
                document.getElementById("entradaReporte").value = "";
            }
            if (loQueEstoyReconociendo == "plan") {
                bolitaindicadoraPlan.style.color = "red";
                document.getElementById("botonhablarPlan").innerHTML = "Detener la grabación";
                document.getElementById("instruccionesPlan").innerHTML = "Toca el botón rojo para detener la grabación";
                document.getElementById("entradaPlan").value = "";
            }
            if (loQueEstoyReconociendo == "id") {
                bolitaindicadoraId.style.color = "red";
                document.getElementById("botonhablarId").innerHTML = "Detener la grabación";
                document.getElementById("instruccionesId").innerHTML = "Toca el botón rojo para detener la grabación";
                document.getElementById("entradaId").value = "";
            }



// instruccionesEmpresa

            reconociendo = true;
            console.log('reconociendo: ' + reconociendo);  //para saber en consola si está reconociendo nada mas


        };

        recognition.onend = function () {
            //Again – give the user feedback that you are not listening anymore. If you wish to achieve continuous recognition – you can write a script to start the recognizer again here.


            if (loQueEstoyReconociendo == "nombre") {
                bolitaindicadoraNombre.style.color = "white";
                document.getElementById("botonhablarNombre").innerHTML = "Toca aquí para grabar";
                document.getElementById("instruccionesNombre").innerHTML = "Toca Aceptar para confirmar o Grabar para repetir";
            }
            if (loQueEstoyReconociendo == "reporte") {
                bolitaindicadoraReporte.style.color = "white";
                document.getElementById("botonhablarReporte").innerHTML = "Toca aquí para grabar";
                document.getElementById("instruccionesReporte").innerHTML = "Toca Aceptar para confirmar o Grabar para repetir";
            }
            if (loQueEstoyReconociendo == "plan") {
                bolitaindicadoraPlan.style.color = "white";
                document.getElementById("botonhablarPlan").innerHTML = "Toca aquí para grabar";
                document.getElementById("instruccionesPlan").innerHTML = "Toca Aceptar para confirmar o Grabar para repetir";
            }

            console.log('reconociendo: ' + reconociendo);  //para saber en consola si está reconociendo nada mas
        };

        recognition.onresult = function (event) { //the event holds the results
            //Yay – we have results! Let’s check if they are defined and if final or not:
            if (typeof (event.results) === 'undefined') { //Something is wrong…
                recognition.stop();
                alert("Error. Revisa tu conexión");
                return;

            }

            for (var i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) { //Final results
                    console.log("final results: " + event.results[i][0].transcript);
                    //Of course – here is the place to do useful things with the results.

                    // RESULTADOS

                    granResultadovariable = event.results[i][0].transcript;

                    if (loQueEstoyReconociendo == "nombre") {
                        granResultadoNombre = granResultadovariable;
                        textolresultadonombre.innerHTML = granResultadoNombre;
                    }

                    if (loQueEstoyReconociendo == "id") {
                        granResultadoId = granResultadovariable;
                        textolresultadoId.innerHTML = granResultadoId;
                    }

                     if (loQueEstoyReconociendo == "empresa") {
                        gransalidaEmpresa = granResultadovariable;
                        textolresultadoEmpresa.innerHTML = granResultadoEmpresa;
                    }

                    if (loQueEstoyReconociendo == "reporte") {
                        granResultadoReporte = granResultadovariable;
                        textoresultadoReporte.innerHTML = granResultadoReporte;
                    }
                    if (loQueEstoyReconociendo == "plan") {
                        granResultadoPlan = granResultadovariable;
                        textoresultadoPlanDeaccion.innerHTML = granResultadoPlan;
                    }
                    reconociendo = false;
                    console.log('reconociendo: ' + reconociendo);  //para saber en consola si está reconociendo nada mas

                } else {   //i.e. interim...
                    console.log("interim results: " + event.results[i][0].transcript);  //You can use these results to give the user near real time experience.
                }
            } //end for loop
        };

        //gatillo de reconocimiento para nombre. Si no hay internet no deja hacer nada
        function reconocenombre(event) {
            if (navigator.onLine == false) {
                alert("La aplicación no funcionará sin conexión a Inernet. Por favor revisa tu conexión e intenta de nuevo");
            }
            if (navigator.onLine == true) {
                loQueEstoyReconociendo = "nombre";
                /*
                if (reconociendo == true) {
                    recognition.stop();
                }
                if (reconociendo == false) {
                    recognition.stop();
                    recognition.start();
                }
                */
                if (reconociendo === true) {
                    reconociendo = false;
                    stopRecording(event.currentTarget);
                } else {
                    reconociendo = true;
                    startRecording(event.currentTarget);
                }
            }
        }

         //gatillo de reconocimiento para id. Si no hay internet no deja hacer nada
         function reconoceId(event) {
            if (navigator.onLine == false) {
                alert("La aplicación no funcionará sin conexión a Inernet. Por favor revisa tu conexión e intenta de nuevo");
            }
            if (navigator.onLine == true) {
                loQueEstoyReconociendo = "id";
          
                if (reconociendo === true) {
                    reconociendo = false;
                    stopRecording(event.currentTarget);
                } else {
                    reconociendo = true;
                    startRecording(event.currentTarget);
                }
            }
        }

         //gatillo de reconocimiento para empresa. Si no hay internet no deja hacer nada
         function reconoceEmpresa(event) {
            if (navigator.onLine == false) {
                alert("La aplicación no funcionará sin conexión a Inernet. Por favor revisa tu conexión e intenta de nuevo");
            }
            if (navigator.onLine == true) {
                loQueEstoyReconociendo = "empresa";
          
                if (reconociendo === true) {
                    reconociendo = false;
                    stopRecording(event.currentTarget);
                } else {
                    reconociendo = true;
                    startRecording(event.currentTarget);
                }
            }
        }


        //gatillo de reconocimiento para reporte. Si no hay internet no deja hacer nada
        function reconocereporte(event) {
            if (navigator.onLine == false) {
                alert("La aplicación no funcionará sin conexión a Inernet. Por favor revisa tu conexión e intenta de nuevo");
            }
            if (navigator.onLine == true) {
                loQueEstoyReconociendo = "reporte";
                /*
                if (reconociendo == true) {
                    recognition.stop();
                }
                if (reconociendo == false) {
                    recognition.stop();
                    recognition.start();
                }
                */
                if (reconociendo === true) {
                    reconociendo = false;
                    stopRecording(event.currentTarget);
                } else {
                    reconociendo = true;
                    startRecording(event.currentTarget);
                }
            }

        }

        //gatillo de reconocimiento para plan. Si no hay internet no deja hacer nada
        function reconoceplan(event) {
            if (navigator.onLine == false) {
                // alert("La aplicación no funcionará sin conexión a Inernet. Por favor revisa tu conexión e intenta de nuevo");
            }
            if (navigator.onLine == true) {
                loQueEstoyReconociendo = "plan";
                /*
                if (reconociendo == true) {
                    recognition.stop();
                }
                if (reconociendo == false) {
                    recognition.stop();
                    recognition.start();
                }
                */
                if (reconociendo === true) {
                    reconociendo = false;
                    stopRecording(event.currentTarget);
                } else {
                    reconociendo = true;
                    startRecording(event.currentTarget);
                }
            }
        }


        //-----------------------------------   

        function aceptarNombre() {
            document.getElementById("entradanombre").value = granResultadoNombre;
            gransalidanombre = granResultadoNombre;
            consolidar();
        }

         function aceptarId() {
            document.getElementById("entradaId").value = granResultadoId;
            gransalidaId = granResultadoId;
            consolidar();
        }

           function aceptarEmpresa() {
            document.getElementById("entradaEmpresa").value = granResultadoEmpresa;
            gransalidaEmpresa = granResultadoEmpresa;
            consolidar();
        }

        function aceptarReporte() {
            document.getElementById("entradaReporte").value = granResultadoReporte;
            gransalidareporte = granResultadoReporte;
            consolidar();
        }

        function aceptarPlanDeAccion() {
            document.getElementById("entradaPlan").value = granResultadoPlan;
            gransalidaplan = granResultadoPlan
            consolidar();
        }


        //Resumen
        function consolidar() {
            console.log(gransalidatipo);
            console.log(gransalidanombre);
            console.log(gransalidaprobabilidad);
            console.log(gransalidaseveridad);
            console.log(gransalidareporte);
            console.log(gransalidaplan);
            


            localStorage.setItem("tipo", gransalidatipo);
            localStorage.setItem("nombre", gransalidanombre);
            localStorage.setItem("severidad", gransalidaseveridad);
            localStorage.setItem("probabilidad", gransalidaprobabilidad);
            localStorage.setItem("reporte", gransalidareporte);
            localStorage.setItem("plan", gransalidaplan);
        }


        
      

       

        





        function enviar() {

        }
    </script>




</body>

</html>
