<?php
setlocale(LC_ALL, 'pt_BR', 'pt_BR.utf-8', 'pt_BR.utf-8', 'portuguese');
date_default_timezone_set('America/Sao_Paulo');


//$lancamentosMaiorPorCategoria = $this->data['lancamentosMaior'];
//$lancamentosMaiorPorValor = $this->data['lancamentosMaiorPorValor'];
//
//$gastosElevadorr = $this->data['gastosElevadorr'];
//$gastosManutencao = $this->data['gastosManutencao'];
//$notificacaoMaior = $this->data['notificacaoMaior'];
//$ocorrenciasMaior = $this->data['ocorrenciasMaior'];
//
//$gastosLuzAnual = $this->data['gastosLuzAnual'];
//$gastosGasAnual = $this->data['gastosGasAnual'];
//foreach($lancamentosMaior as $p){
//    echo $p->categoria.'-'.$p->valorCategorias;
//}
?>

<div class="m-b-md">
    <div class="row">
        <div class="col-sm-6">
            <h3 class="m-b-none">Gestão de Resultados</h3>
            <small>Estatisticas &amp; Gráficos de Informações</small>
        </div>
        <div class="col-sm-6">
            <div class="text-right text-left-xs">
                <div class="sparkline m-l m-r-lg pull-right" data-type="bar" data-height="35" data-bar-width="6"
                     data-bar-spacing="2" data-bar-color="#fb6b5b">
                    <canvas width="86" height="35"
                            style="display: inline-block; width: 86px; height: 35px; vertical-align: top;"></canvas>
                </div>
                <div class="m-t-md">
                    <span class="text-uc">Gráficos</span>
                    <div class="h4 m-n"><strong>1,120,100</strong></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-12">

    <div class="panel-group m-b" id="accordion1">

        <div class="panel panel-default">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
                <div class="panel-heading panel-gestao-resultados">
                    <i class="i i-2x i-chart"></i> Despesas por Valor e Categoria - Gráfico Pizza
                </div>
            </a>
            <div id="collapse1" class="panel-collapse in">
                <div class="panel-body text-sm">
                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Resumo Financeiro</header>
                            <div class="panel-body flot-legend">
                                <div id="despesasPorCategoria" style="height:240px"></div>
                            </div>
                        </section>
                    </div>
                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Resumo Financeiro</header>
                            <div class="panel-body flot-legend">
                                <div id="despesasPorValor" style="height:240px"></div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                <div class="panel-heading panel-gestao-resultados">
                    <i class="i i-2x i-chart"></i> Despesas Coma Elevador e Manutenção
                </div>
            </a>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body text-sm">

                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Resumo Elevador</header>
                            <div class="panel-body flot-legend">
                                <div id="grafElevadorr" style="height:240px"></div>
                            </div>
                        </section>
                    </div>
                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Resumo Manutenção</header>
                            <div class="panel-body flot-legend">
                                <div id="grafManutencao" style="height:240px"></div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                <div class="panel-heading panel-gestao-resultados">
                    <i class="i i-2x i-chart"></i> Resumo Geral de Ocorrências e Notificações
                </div>
            </a>
            <div id="collapseFour" class="panel-collapse collapse">
                <div class="panel-body text-sm">

                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Resumo de Notificações</header>
                            <div class="panel-body flot-legend">
                                <div id="notificacaosMaior"></div>
                            </div>
                        </section>
                    </div>
                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Resumo de Ocorrências</header>
                            <div class="panel-body flot-legend">
                                <div id="ocorrenciasMaior"></div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse5">
                <div class="panel-heading panel-gestao-resultados">
                    <i class="i i-2x i-chart"></i> Resumo Geral de Gastos
                </div>
            </a>
            <div id="collapse5" class="panel-collapse collapse">
                <div class="panel-body text-sm">

                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Gastos Mensal com Luz</header>
                            <div class="panel-body flot-legend">
                                <div id="luzAnual"></div>
                            </div>
                        </section>
                    </div>
                    <div class="col-md-6">
                        <section class="panel panel-default">
                            <header class="panel-heading-refs font-bold">Gastos Mensal com Gás</header>
                            <div class="panel-body flot-legend">
                                <div id="gasAnual"></div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    $(function () {
        var dadosCategoria = [<?php

            foreach ($lancamentosMaiorPorCategoria as $a) {
                echo '{
                name: "' . $a->categoria . '",
                y: ' . number_format($a->valorCategorias, 2, '.', '') . '
            },';
            }
            ?>];
        Highcharts.chart('despesasPorCategoria', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Despesas por Categoria'
            },
            tooltip: {
//                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y} - {point.percentage:.1f}%',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: dadosCategoria
            }]
        });
    })

</script>


<script>
    $(function () {
        var dadosCategoria = [<?php

            foreach ($lancamentosMaiorPorValor as $a) {
                echo '{
                name: "' . $a->descricao . '",
                y: ' . number_format($a->valor, 2, '.', '') . '
            },';
            }
            ?>];
        Highcharts.chart('despesasPorValor', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Despesas por Valor'
            },
            tooltip: {
//                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y} - {point.percentage:.1f}%',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: dadosCategoria
            }]
        });
    })

</script>

<script>
    $(function () {
        var dadosCategoria = [<?php
            foreach ($gastosElevadorr as $a) {
                echo "'" . strftime('%b/%y', strtotime($a->Periodo))  . "',";
            }
            ?>];
        var dadosGrafico = [<?php
            foreach ($gastosElevadorr as $a) {
                echo number_format($a->total, 2, '.', '') . ",";
            }
            ?>];

        Highcharts.chart('grafElevadorr', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Gasto com Elevador'
            },
            subtitle: {},
            xAxis: {
                categories: dadosCategoria
            },
            yAxis: {
                title: {
                    text: 'Conta de Elevador'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Gastos Com Elevador',
                data: dadosGrafico
            }]
        });
    });
</script>


<script>
    $(function () {
        var dadosCategoria = [<?php
            foreach ($gastosManutencao as $a) {
                echo "'" . strftime('%b/%y', strtotime($a->Periodo))  . "',";
            }
            ?>];
        var dadosGrafico = [<?php
            foreach ($gastosManutencao as $a) {
                echo number_format($a->total, 2, '.', '') . ",";
            }
            ?>];

        Highcharts.chart('grafManutencao', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Gasto com Manutenção'
            },
            subtitle: {},
            xAxis: {
                categories: dadosCategoria
            },
            yAxis: {
                title: {
                    text: 'Conta de Manutenção'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Gastos Com Manutenção',
                data: dadosGrafico
            }]
        });
    });
</script>


<script>

    $(function () {

        var dadosCategoria = [<?php

            foreach ($notificacaoMaior as $a) {
                echo '{
                name: "' . $a->categoria . '",
                y: ' . $a->total . '
            },';
            }
            ?>];

        // Create the chart
        Highcharts.chart('notificacaosMaior', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Notificações + Registradas'
            },
            subtitle: {
//                text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
//                    text: 'Total percent market share'
                }

            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
//                        format: '{point.y:.1f}%'
                    }
                }
            },
            series: [{
                name: 'Notificação',
                colorByPoint: true,
                data: dadosCategoria
            }]

        });

    });

</script>


<script>

    $(function () {
        var dadosCategoria = [<?php
            foreach ($ocorrenciasMaior as $a) {
                echo "'" . $a->categoria . "',";
            }
            ?>];
        var dadosGrafico = [<?php
            foreach ($ocorrenciasMaior as $a) {
                echo $a->total . ",";
            }
            ?>];


        Highcharts.chart('ocorrenciasMaior', {


            chart: {
                type: 'bar'
            },
            title: {
                text: 'Ocorrencias + registradas'
            },
            subtitle: {},
            xAxis: {

                categories: dadosCategoria,
                title: {
                    text: null
                }
            },
            yAxis: {},
            legend: {
                x: -40,
                y: 80,
            },

            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },

            credits: {
                enabled: false
            },
            series: [{
//            colorByPoint: true,
                data: dadosGrafico
            }]
        });
    });

</script>

<script>
    $(function () {
        var dadosCategoria = [<?php
            setlocale(LC_ALL, 'pt_BR', 'pt_BR.utf-8', 'pt_BR.utf-8', 'portuguese');
            date_default_timezone_set('America/Sao_Paulo');
            foreach ($gastosLuzAnual as $a) {
//                echo "'" . date('m/y',strtotime($a->Periodo)) . "',";
                echo "'" . strftime('%b/%y', strtotime($a->Periodo))  . "',";
            }
            ?>];
        var dadosGrafico = [<?php
            foreach ($gastosLuzAnual as $a) {
                echo number_format($a->total, 2, '.', '') . ",";
            }
            ?>];

        Highcharts.chart('luzAnual', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Gasto com Luz'
            },
            subtitle: {},
            xAxis: {
                categories: dadosCategoria
            },
            yAxis: {
                title: {
                    text: 'Conta de Luz'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Gastos Com Luz',
                data: dadosGrafico
            }]
        });
    });
</script>


<script>
    $(function () {
        var dadosCategoria = [<?php
            foreach ($gastosGasAnual as $a) {
                echo "'" . strftime('%b/%y', strtotime($a->Periodo))  . "',";
            }
            ?>];
        var dadosGrafico = [<?php
            foreach ($gastosGasAnual as $a) {
                echo number_format($a->total, 2, '.', '') . ",";
            }
            ?>];

        Highcharts.chart('gasAnual', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Gasto com Gás'
            },
            subtitle: {},
            xAxis: {
                categories: dadosCategoria
            },
            yAxis: {
                title: {
                    text: 'Conta de Gás'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Gastos Com Gás',
                data: dadosGrafico
            }]
        });
    });
</script>


