<script src="../resources/js/seccion1encuesta233.js"></script>
<form id="frmSeccion1Encuesta233" name="frmSeccion1Encuesta233" method="post">
    <input type="hidden" id="opc" name="opc" value="<?php echo FuncionesComunes::encrypt("registrarSeccion1Encuesta233");?>">
    <input type="hidden" id="nombreAlumno" name="nombreAlumno" value="<?php echo $_REQUEST["nombreAlumno"]; ?>"/>
    <input type="hidden" id="userId" name="userId" value="<?php echo $_REQUEST["userId"];?>"/>
    Hello <b><?php echo $nombreAlumno;?></b>.<br><br>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><strong class="text-dark">100%</strong></div>
    </div><br>
    To complete this exercise please follow these steps:<br><br>
    <ul>
        <li>Select the <strong>8 most relevant areas of your life</strong>. You can add topics that are not in the table. This is what customizing your wheel is all about, tailoring it to you, so you can reflect on the areas that are especially important to you.</li>
        <li>To do this, please select the yellow boxes which will change to green according to your selection. </li>
        <li>You can add areas that doesn't appear on the list using the option <strong>"other"</strong>.</li>
        <li>Rate each of these 8 areas with a score from 1 to 10, using the arrows or typing the number. <strong>1 is dissatisfied</strong> and <strong>10 is very satisfied. </strong>.</li>
    </ul>
    <br><br>
    <div class="row">
        <div class="col-md-12 col-xs-12 col-sm-12">
            <?php
            $contadorPreguntas=1;
            while ($rowPregunta = $resultadoPreguntasSec1->fetch_object())
            {
                if($contadorPreguntas==1)
                {
                    ?>
                    <div class="form-group row">
                    <?php
                }
                if($rowPregunta->orden<=13)
                {
                    ?>
                        <div class="col-md-3 col-xs-10 col-sm-5 text-left">
                            <nobr><input id="<?php echo "pregunta".$rowPregunta->orden; ?>" name="<?php echo $rowPregunta->orden; ?>" type="checkbox" data-toggle="toggle" data-on="<i class='fa fa-check'></i>" data-off="<i class='fa fa-times'></i>" data-onstyle="success" data-offstyle="warning" onchange="ocultarMostrarValor('<?php echo "pregunta".$rowPregunta->orden; ?>','<?php echo "valor".$rowPregunta->orden; ?>','<?php echo $rowPregunta->orden; ?>')"><label id="<?php echo "label".$rowPregunta->orden; ?>" name="<?php echo "label".$rowPregunta->orden; ?>">&nbsp;<?php echo $rowPregunta->pregunta; ?></label></nobr>
                        </div>
                        <div class="col-md-1 col-xs-2 col-sm-1 text-right">
                            <input id="<?php echo "valor".$rowPregunta->orden; ?>" name="<?php echo "valor".$rowPregunta->orden; ?>" type="number"  max="10" min="1" style="width: 60px;display: none;" value="" class="block-right" onchange="ocultarGrafica()">
                        </div>
                    <?php
                }
                else
                {
                    ?>
                        <div class="col-md-3 col-xs-10 col-sm-5 text-left">
                            <nobr><input id="<?php echo "pregunta".$rowPregunta->orden; ?>" name="<?php echo $rowPregunta->orden; ?>" type="checkbox" data-toggle="toggle" data-on="<i class='fa fa-check'></i>" data-off="<i class='fa fa-times'></i>" data-onstyle="success" data-offstyle="warning" onchange="ocultarMostrarValor('<?php echo "pregunta".$rowPregunta->orden; ?>','<?php echo "valor".$rowPregunta->orden; ?>','<?php echo $rowPregunta->orden; ?>')"><label id="<?php echo "label".$rowPregunta->orden; ?>" name="<?php echo "label".$rowPregunta->orden; ?>">&nbsp;<?php echo $rowPregunta->pregunta; ?></label>
                            <input id="<?php echo "texto".$rowPregunta->orden; ?>" name="<?php echo "texto".$rowPregunta->orden; ?>" type="text"  maxlength="50" minlength="5" style="width: 120px;display: none;" value="" onchange="ocultarGrafica()"></nobr>
                        </div>
                        <div class="col-md-1 col-xs-2 col-sm-1 text-right">
                            <input id="<?php echo "valor".$rowPregunta->orden; ?>" name="<?php echo "valor".$rowPregunta->orden; ?>" type="number"  max="10" min="1" style="width: 60px;display: none;" value="" onchange="ocultarGrafica()">
                        </div>
                    <?php
                }
                if($contadorPreguntas==3)
                {
                    ?>
                    </div>
                    <?php
                    $contadorPreguntas=0;
                }
                $contadorPreguntas++;
            }
            ?>
            </div>
            <div class="form-group row text-right">
                <div class="col-md-12 col-xs-12 col-sm-12">
                    <!--<button id="guardarSeccion1Encuesta233" name="guardarSeccion1Encuesta233" type="submit" class="btn btn-primary" ><i class="fa fa-arrow-right"></i>&nbsp;Guardar y Continuar</button>-->
                    <input id="guardarSeccion1Encuesta233" name="guardarSeccion1Encuesta233" type="image" style="display: none" src="https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_guardar_off-01.png" onmouseover="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_guardar_on-01.png'" onmouseout="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_guardar_off-01.png'"></input>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="form-group row text-center">
    <div class="col-md-2 col-xs-2 col-sm-2">
    </div>
    <div class="col-md-8 col-xs-8 col-sm-8">
        <!--<button class="btn btn-primary text-center" id="verGrafica" name="verGrafica" onclick="pintarGrafica();"><i class="fa fa-pie-chart"></i>&nbsp; Ver Gr&aacute;fica</button>-->
        <input id="verGrafica" name="verGrafica" type="image" onclick="pintarGrafica();" src="https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_ver-grafica-off-01.png" onmouseover="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_ver-grafica-on-01.png'" onmouseout="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_ver-grafica-off-01.png'"></input>
        <div id="seccionGrafica" name="seccionGrafica">
            <div class="chart-container">
                <canvas id="myChart" name="myChart" style="display: block; box-sizing: border-box; "></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-xs-2 col-sm-2">
    </div>
</div>