<?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>Hello <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;See your results.</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">
            If you answered <strong>yes </strong>to two or more of the items that correspond to one of the <strong>leadership styles</strong>, you probably apply it in your <strong>professional career.</strong><br><br>
           Identify which leadership style predominates in you.
        </p>
        <table class="table" >
            <thead style="background: #004E70" class="text-white">
                <tr>
                    <th scope="col">Style</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>Corresponding items</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://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_ver-retro_off-01.png" onmouseover="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_ver-retro_on-01.png'" onmouseout="this.src='https://sadpro.osvaldo.com/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">
                     The results of research on Resonant Leadership Styles by researchers Daniel Goleman, Richard Boyatzis and Anne McKee show that the best leaders use at least three different styles and know how to switch nimbly from one to another depending on the situation or the type of collaborator.  <br><br>
					In the test you have taken, a leadership style <strong>predominates</strong> in you if you have answered yes to at least <strong>5 of the 7</strong> possibilities. Between 3 and 4 is considered a <strong>moderately predominant</strong> style and below 2 is an <strong>occasional style</strong> in you.   <br><br>
							The styles are not "good" or "bad" but appropriate to deal with each situation. The <strong>pacesetting</strong> and <strong>commanding</strong> styles should only be used at specific times since their continued use can have a negative effect on teams.<br><br>
                            Tae a look on the <strong>supplementary reading on Resonant Leadership Styles</strong> to delve into the characteristics of each style. It will allow you to assess whether or not you are currently using the appropriate combination of styles for your current goals or role and it will brainstorm ideas for developing new styles if you find it necessary.
                </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://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_reintentar_off-01.png" onmouseover="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_reintentar_on-01.png'" onmouseout="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_reintentar_off-01.png'" onclick="confirmarCancelacionEncuesta()"></input>
        <!--<input id="pdfResultadoEncuesta133" name="pdfResultadoEncuesta133" type="image" src="https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_imprimir_off-01.png" onmouseover="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_imprimir_on-01.png'" onmouseout="this.src='https://sadpro.osvaldo.com/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>