<?php
    $subtitleText = "Por {$dadosGrafico['filterBy']}";
    if (in_array(User::getPrivilegio(), array(4, 10, 21))) {
        $subtitleText = User::getName();
    }

    $total = array('Total', $dadosGrafico['count']);

    $TextoLegenda = 'Total: ' . $dadosGrafico['count'] .'<foreignobject x="120" y="120" width="180" height="180">
        <body xmlns="http://www.w3.org/1999/xhtml">
          <div>
            <ul><li>' . implode('</li><li>', $dadosGrafico['legenda']) . '</li></ul>
          </div>
        </body>
      </foreignobject>';
    $height = 400;
    $legend_items = count($dadosGrafico['legenda']);
    if($legend_items <= 5) {
        $height += 200;
    } else if ($legend_items <= 10){
        $height += 300;
    } else {
        $height += 400;
    }
?>

<div class="clear"></div>

<?php
    $this->widget('ext.highcharts.HighchartsWidget', array(
        'scriptPosition' => CClientScript::POS_END,
        'scripts' => array(
            'modules/exporting',
            /*'modules/offline-exporting',*/
            'modules/canvas-tools',
            'modules/export-csv',
            'modules/jspdf',
            'modules/export-clientside',
        ),
        'options' => array(
            'title' => array(
                'text' => 'Gráfico de Atendimentos'
            ),
            'subtitle' => array(
                'text' => $subtitleText
            ),
            'labels' => array(
                'align' => 'right',
                'x' => -10,
                'y' => 0
            ),
            'lang' => array(
                'printChart' => 'Imprimir Gráfico',
                'downloadPNG' => '',
                'downloadJPEG' => '',
                'downloadSVG' => 'Download imagem (vetor SVG)',
                'downloadPDF' => '',
                'contextButtonTitle' => 'Opções',
                'loading' => 'Carregando...',
                'downloadCSV' => '',
                'downloadXLS' => 'Download excel (xls)',
                'viewData' => ''
            ),
            'chart' => array(
                'height' => $height,
                'defaultSeriesType' => 'column',
                'style' => array(
                    'fontFamily' => 'Arial, Helvetica, sans-serif'
                )
            ),
            'xAxis' => array(
                'categories' => $dadosGrafico['categories'],
                'labels' => array(
                    'rotation' => ((count($dadosGrafico['categories']) > 20) ? 270 : -45),
                    'align' => 'right',
                    'step' => 1,
                ),
            ),
            'yAxis' => array(
                'title' => array(
                    'text' => 'Atendimentos'
                ),
            ),
            'series' => array(
                array(
                    'name' => $TextoLegenda,
                    'data' => $dadosGrafico['series'],
                    'step' => true,
                    'dataLabels' => array(
                        'align' => 'center',
                        'enabled' => true,
                        'rotation' => ((count($dadosGrafico['categories']) > 20) ? 270 : 0),
                        'x' => ((count($dadosGrafico['categories']) > 20) ? 0 : 0),
                        'y' => ((count($dadosGrafico['categories']) > 20) ? -9 : -7),
                        'style' => 'font: "normal 11px Verdana, sans-serif"'
                    ),
                )
            ),
            'legend' => array(
                'useHTML' => true,
            ),
            'credits' => array(
                'enabled' => false,
            ),
            'tooltip' => array(
                "formatter" =>"js:function () {
                    var s = '<b>' + this.x + '</b>';

                    $.each(this.points, function () {
                        s += '<br/><b>Atendimentos</b>: ' + this.y + ' de um total de ".$dadosGrafico['count']."';
                    });

                    return s;
                }",
                'positioner' => 'js:function (labelWidth, labelHeight, point) {
                    var tooltipX, tooltipY;
                    tooltipX = point.plotX + chart.plotLeft - (labelWidth /2);
                    tooltipY = point.plotY + chart.plotTop - labelHeight - 30;
                    return {
                        x: tooltipX,
                        y: tooltipY
                    };
                }',
                'shared' => true,
            ),
            'exporting' => array(
                'chartOptions' => array(
                    'legend' => array(
                        'navigation' => array(
                            'enabled' => true
                        )
                    )
                ),
                'printMaxWidth' => 1000,
                'width' => 1000,
                'filename' => Util::slug('grafico_atendimentos_por_' . $subtitleText .'_'. date('d_m_Y_H_i_s'))
            )
        )
    ));
?>
<div class="clear"></div>
<div class="resumo_grafico">
    <table class="items">
        <thead>
            <tr>
                <th><?php echo $dadosGrafico['filterBy']; ?></th>
                <th>Atendimentos</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($dadosGrafico['categories'] as $key => $funcionario): ?>
                <tr>
                    <td><?php echo $funcionario; ?></td>
                    <td class="resultado"><?php echo isset($dadosGrafico['series'][$key]) ? $dadosGrafico['series'][$key] : '0'; ?></td>
                </tr>
            <?php endforeach; ?>
            <?php if (count($total) == 2): ?>
                <tr class="total">
                    <td><?php echo $total[0]; ?></td>
                    <td class="resultado"><?php echo $total[1] ?></td>
                </tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>

<?php
$cs = Yii::app()->clientScript;

$css = <<<CSS
    .highcharts-contextmenu hr {
        margin: 5px 0!important;
    }
    .highcharts-contextmenu div div {
        margin-bottom: 5px;
    }
    .highcharts-legend-item span {
        padding-top: 2px;
    }
    .highcharts-legend-item span ul {
        font-weight: normal;
    }
    .highcharts-legend-item span ul .legend-desc {
        font-weight: bold;
    }
    .highcharts-legend-item span ul li ul {
        width: {$height} px;
        max-height: 100px;
        font-size: 8px;
        overflow: scroll;
    }
    .highcharts-legend-item span ul li {
        margin-right: 3px;
    }
    .highcharts-legend-item span ul li ul li {
        display: inline;
        white-space: pre-wrap;
        margin-right: 3px;
        line-height: 12px;
    }
    .highcharts-legend-item span ul li ul li:after {
        content: ";"
    }
    @media print {
        body   {
            /* this affects the margin on the content before sending to printer */
            margin: 0px;
        }
        .highcharts-button {
            display: none!important;
        }
        .highcharts-container {
            text-align: center;
        }
        .chart-wrapper {
        }
        @page {
            size: landscape;
            /* this affects the margin in the printer settings */
            margin: 0mm 0mm 0mm 0mm;
        }
        .highcharts-legend-item span {
            padding-top: 2px;
        }
        .highcharts-legend-item span ul {
            font-weight: normal;
        }
        .highcharts-legend-item span ul .legend-desc {
            font-weight: bold;
        }
        .highcharts-legend-item span ul li ul {
            width: {$height}px;
            font-size: 8px;
        }
        .highcharts-legend-item span ul li ul li {
            display: inline;
            white-space: pre-wrap;
            margin-right: 3px;
        }
        .highcharts-legend-item span ul li ul li:after {
            content: ";"
        }
    }
CSS;
$cs->registerCss(Util::uid(), $css);
