<?php
$arrItems= array('Visionario','Coach','Afiliativo','Democrático','Timonel','Autoritario');
$arrItemsValores= array(0,0,0,0,0,0);
$Encuesta133 = new Encuesta133();
$Encuesta133->encuesta133Id = $encuesta133Id;
$resultadoEncuesta = $Encuesta133->consultarEncuestas133(1);
$rowResultadoEncuesta = $resultadoEncuesta->fetch_assoc();
?>
<style>
    th span
    {
        vertical-align: bottom;
        text-align: center;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
    }
</style>
<script src="../resources/js/chart.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js"></script>-->
<script src="../resources/js/chartjsdatalabels.js"></script>
<script src="../resources/js/resultadoencuesta133.js"></script>
<input type="hidden" id="opc" name="opc" value="<?php echo FuncionesComunes::encrypt("cancelarEncuesta133");?>">
<input type="hidden" id="opc2" name="opc2" value="<?php echo FuncionesComunes::encrypt("guardaImagenGrafica");?>">
<input type="hidden" id="nombreAlumno" name="nombreAlumno" value="<?php echo $_REQUEST["nombreAlumno"]; ?>"/>
<input type="hidden" id="userId" name="userId" value="<?php echo $_REQUEST["userId"];?>"/>
<input type="hidden" id="encuestaId" name="encuestaId" value="<?php echo FuncionesComunes::encrypt($encuesta133Id);?>"/>
<div class="form-group row">
    <div class="col-md-12 col-xs-12 col-sm-12">
        <h5>Hola <b><?php echo $nombreAlumno;?></b>.</h5>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-12 col-xs-12 col-sm-12">
        <div class="card">
            <div class="card-header text-center text" style="background: #B9F0D0">
                <strong class="text-center text-success"><i class="fa fa-check text-success"></i>&nbsp;Descubre tu resultado.</strong>
            </div>
        </div>
    </div>
</div>
<div class="form-group row">
    <span class="col-md-12 col-xs-12 col-sm-12">
        <p class="text-justify">
            Si respondiste que <strong class="text-primary">S&iacute;</strong> a dos o m&aacute;s de los &iacute;tems que corresponden a uno de los <strong>estilos de liderazgo</strong>, seguramente lo aplicas en tu <strong>carrera profesional</strong>.<br><br>
            Identifica cu&aacute;l es el estilo de liderazgo que predomina en ti.
        </p>
        <table class="table" >
            <thead style="background: #004E70" class="text-white">
                <tr>
                    <th scope="col">Estilo</th>
                    <th scope="col"><?php echo $arrItems[0];?></th>
                    <th scope="col"><?php echo $arrItems[1];?></th>
                    <th scope="col"><?php echo $arrItems[2];?></th>
                    <th scope="col"><?php echo $arrItems[3];?></th>
                    <th scope="col"><?php echo $arrItems[4];?></th>
                    <th scope="col"><?php echo $arrItems[5];?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th style="background: #87C8E9"><span>Items correspondientes</span></th>
                    <td>
                        <ul>
                            <?php
                            $resultadoItems0 = $Encuesta133->consultarItemsCategoriaEncuestas133(2,$arrItems[0]);
                            while($rowItems0 = $resultadoItems0->fetch_object())
                            {
                                $icono = "&nbsp;<i class='fa fa-close text-danger'></i>";
                                if($rowResultadoEncuesta["pregunta".$rowItems0->orden]==1)
                                {
                                    $icono = "&nbsp;<i class='fa fa-check text-success'></i>";
                                    $arrItemsValores[0]++;
                                }
                                echo "<li><strong>".$rowItems0->orden.$icono."</strong></li>";
                            }
                            ?>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <?php
                            $resultadoItems0 = $Encuesta133->consultarItemsCategoriaEncuestas133(2,$arrItems[1]);
                            while($rowItems0 = $resultadoItems0->fetch_object())
                            {
                                $icono = "&nbsp;<i class='fa fa-close text-danger'></i>";
                                if($rowResultadoEncuesta["pregunta".$rowItems0->orden]==1)
                                {
                                    $icono = "&nbsp;<i class='fa fa-check text-success'></i>";
                                    $arrItemsValores[1]++;
                                }
                                echo "<li><strong>".$rowItems0->orden.$icono."</strong></li>";
                            }
                            ?>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <?php
                            $resultadoItems0 = $Encuesta133->consultarItemsCategoriaEncuestas133(2,$arrItems[2]);
                            while($rowItems0 = $resultadoItems0->fetch_object())
                            {
                                $icono = "&nbsp;<i class='fa fa-close text-danger'></i>";
                                if($rowResultadoEncuesta["pregunta".$rowItems0->orden]==1)
                                {
                                    $icono = "&nbsp;<i class='fa fa-check text-success'></i>";
                                    $arrItemsValores[2]++;
                                }
                                echo "<li><strong>".$rowItems0->orden.$icono."</strong></li>";
                            }
                            ?>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <?php
                            $resultadoItems0 = $Encuesta133->consultarItemsCategoriaEncuestas133(2, utf8_decode($arrItems[3]));
                            while($rowItems0 = $resultadoItems0->fetch_object())
                            {
                                $icono = "&nbsp;<i class='fa fa-close text-danger'></i>";
                                if($rowResultadoEncuesta["pregunta".$rowItems0->orden]==1)
                                {
                                    $arrItemsValores[3]++;
                                    $icono = "&nbsp;<i class='fa fa-check text-success'></i>";
                                }
                                echo "<li><strong>".$rowItems0->orden.$icono."</strong></li>";
                            }
                            ?>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <?php
                            $resultadoItems0 = $Encuesta133->consultarItemsCategoriaEncuestas133(2, $arrItems[4]);
                            while($rowItems0 = $resultadoItems0->fetch_object())
                            {
                                $icono = "&nbsp;<i class='fa fa-close text-danger'></i>";
                                if($rowResultadoEncuesta["pregunta".$rowItems0->orden]==1)
                                {
                                    $icono = "&nbsp;<i class='fa fa-check text-success'></i>";
                                    $arrItemsValores[4]++;
                                }
                                echo "<li><strong>".$rowItems0->orden.$icono."</strong></li>";
                            }
                            ?>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <?php
                            $resultadoItems0 = $Encuesta133->consultarItemsCategoriaEncuestas133(2, $arrItems[5]);
                            while($rowItems0 = $resultadoItems0->fetch_object())
                            {
                                $icono = "&nbsp;<i class='fa fa-close text-danger'></i>";
                                if($rowResultadoEncuesta["pregunta".$rowItems0->orden]==1)
                                {
                                    $arrItemsValores[5]++;
                                    $icono = "&nbsp;<i class='fa fa-check text-success'></i>";
                                }
                                echo "<li><strong>".$rowItems0->orden.$icono."</strong></li>";
                            }
                            ?>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    var imagenGrafica;
    //var myCharts;
    function pintarGrafica()
    {
        try
        {
            $("#seccionIndicadores").show();
            const data = {
                labels: [
                    '<?php echo $arrItems[0];?>',
                    '<?php echo $arrItems[1];?>',
                    '<?php echo $arrItems[2];?>',
                    '<?php echo $arrItems[3];?>',
                    '<?php echo $arrItems[4];?>',
                    '<?php echo $arrItems[5];?>',
                ],
                datasets: [{
                    data: [
                        <?php echo $arrItemsValores[0]; ?>,
                        <?php echo $arrItemsValores[1]; ?>,
                        <?php echo $arrItemsValores[2]; ?>,
                        <?php echo $arrItemsValores[3]; ?>,
                        <?php echo $arrItemsValores[4]; ?>,
                        <?php echo $arrItemsValores[5]; ?>,
                    ],
                    backgroundColor: [
                        'rgb(93, 126, 149)',
                        'rgb(229, 202, 227)',
                        'rgb(251, 176, 52)',
                        'rgb(17, 119, 185)',
                        'rgb(233, 84, 13)',
                        'rgb(136, 45, 111)',
                    ],
                    hoverOffset: 2,
                }]
            };
            var cxt = $('#myChart');
            Chart.register(ChartDataLabels);
            var myCharts = new Chart(cxt, {
                plugins: [ChartDataLabels],
                type: 'doughnut',
                data: data,
                options:
                    {
                        showInLegend: true,
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins:
                            {
                                legend:
                                    {
                                        position: 'bottom',
                                    },
                                title: {
                                    display: true,
                                    text: 'Estilos de liderazgo',
                                    font:{
                                        weight: 'bold',
                                        color:'blue',
                                        size: '25px'
                                    }
                                },
                                datalabels: {
                                    color: '#fff',
                                    textAlign: 'end',
                                    font: {
                                        lineHeight: 1.0,
                                        weight: 'bold',
                                        color:'#000',
                                        size:'16px'
                                    },
                                    align: 'center',
                                    display : 'auto',
                                    formatter: function(value, ctx) {
                                        let datasets = ctx.chart.data.datasets;
                                        if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
                                            let sum = datasets[0].data.reduce((a, b) => a + b, 0);
                                            let percentage = Math.round((value / sum) * 100) + '%';
                                            return value + ' (' + percentage+')';
                                        } else {
                                            return value + ' (' + percentage+')';
                                        }
                                    },
                                }
                            },
                    }
            });
            imagenGrafica = myCharts.toBase64Image('image/png',1);

        }
        catch (e)
        {
            console.log(e);
        }
    }

</script>
<div id="seccionTotal" name="seccionTotal">
    <div class="form-group row" id="seccionEncuestaIndicadores" name="seccionEncuestaIndicadores">
        <div class="col-md-6 col-xs-6 col-sm-6">
            <div id="seccionIndicadores" name="seccionIndicadores">
                <div class="chart-container">
                    <canvas id="myChart" name="myChart" style="height: 400px; width: 400px;"></canvas>
                    <img id="url" width="1px" height="1px" style="visibility: hidden"/>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-6 col-sm-6 text-center">
            <!--<button class="btn btn-primary " id="mostrarRetroalimentacion133" name="mostrarRetroalimentacion133" onclick="mostrarRetroalimentacion()"><i class="fa fa-search-plus"></i>&nbsp;Ver Retroalimentaci&oacute;n</button>-->
            <input id="mostrarRetroalimentacion133" name="mostrarRetroalimentacion133" type="image" src="https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-retro_off-01.png" onmouseover="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-retro_on-01.png'" onmouseout="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-retro_off-01.png'" onclick="mostrarRetroalimentacion()"></input>
            <br><br>
            <div id="verRetroalimentacion" style="visibility: hidden">
                <h4><strong class="text-primary">Retroalimentaci&oacute;n</strong></h4>
                <p class="text-justify">
                    Los resultados de la investigaci&oacute;n sobre los <strong>Estilos de Liderazgo Resonante</strong> realizada por los investigadores <strong>Daniel Goleman, Richard Boyatzis y Anne McKee</strong> demuestran que las/los mejores l&iacute;deres utilizan al menos <strong>tres estilos diferentes</strong> y saben <strong>cambiar &aacute;gilmente</strong> de uno a otro dependiendo de la <strong>situaci&oacute;n</strong> o del tipo de colaborador.<br><br>
                    En el test que has realizado se considera que un estilo de liderazgo es <strong>predominante</strong> en ti si has respondido afirmativamente al menos a <strong>5 de las 7</strong> posibilidades planteadas. Entre 3 y 4 se considera un estilo <strong>moderadamente</strong> predominante y por debajo de 2 es un estilo <strong>ocasional</strong> en ti.<br><br>
                    Los estilos no son &quot;buenos&quot; o &quot;malos&quot; sino adecuados para afrontar cada situaci&oacute;n. Los estilos <strong>timonel</strong> y <strong>autoritario</strong> solo se deber&iacute;an utilizar en momentos puntuales, puesto que su uso continuado puede producir un efecto negativo en los equipos.<br><br>
                    Consulta la <strong>lectura complementaria sobre Estilos de Liderazgo Resonante</strong> para profundizar en las caracter&iacute;sticas de cada estilo. Te permitir&aacute; valorar si est&aacute;s utilizando actualmente o no la combinaci&oacute;n de estilos apropiado para tus objetivos y funci&oacute;n actual y pensar en ideas para desarrollar nuevos estilos si detectas que es necesario.
                </p>
            </div>
        </div>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-12 col-xs-12 col-sm-12 text-center">
        <input id="cancelarEncuesta133" name="cancelarEncuesta133" type="image" src="https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_reintentar_off-01.png" onmouseover="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_reintentar_on-01.png'" onmouseout="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_reintentar_off-01.png'" onclick="confirmarCancelacionEncuesta()"></input>
        <!--<input id="pdfResultadoEncuesta133" name="pdfResultadoEncuesta133" type="image" src="https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_imprimir_off-01.png" onmouseover="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_imprimir_on-01.png'" onmouseout="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_imprimir_off-01.png'" onclick="pdfResultadoEncuesta133()"></input>-->
        <!--<a href="#" id="downloadPdf" onclick="pruebaDivAPdf()">Download Report Page as PDF</a>-->
    </div>
</div>
<script>
    pintarGrafica();
    document.getElementById("url").style.width="0px";
    document.getElementById("url").style.height="0px";
</script>