@include('plugins.moment')
@include('plugins.datepicker')
@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.highcharts.default')
@include('plugins.highcharts.themes.dark-unica')

@push('page-js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.2.1/js/jquery.circliful.min.js"></script>
    <script>
        const slide = {
            cookieName: 'cycle_slide',
            interval: cookie.get('cycle_slide_seconds') || 15,
            index: null,
            play() {
                let _this = this;
                $('#carousel-cycle').carousel({
                    interval: _this.interval * 1000,
                    cycle: true
                });
            },
            start() {
                if (slide.index >= 0) {
                    $('#carousel-cycle .active').removeClass('active');
                    $('#carousel-cycle .carousel-item').eq(slide.index).addClass('active');
                    slide.index = null;
                }
                slide.play();
                if ($('[data-slide="pause"]').hasClass('d-none')) {
                    $('#carousel-cycle').carousel('pause');
                }
            },
            enable() {
                cookie.set(slide.cookieName, 'enable');
                $('.slide-controls').show();
            },
            disable() {
                cookie.set(slide.cookieName, 'disable');
                $('.slide-controls').hide();
            }
        };

        const page = {
            filters() {

            },
            refresh() {
                page.buildCards();
                page.buildChart();
            },
            buildChart() {
                Highcharts.chart('chart', Highcharts.merge(Highcharts.themeDarkUnica, {
                    title: {
                        text: 'Curva de Consumido Mensal',
                        style: {
                            color: '#98a6ad'
                        }
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: [{
                        categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                        crosshair: true,
                        labels: {
                            style: {
                                color: '#98a6ad'
                            }
                        }
                    }],
                    yAxis: [{
                        labels: {
                            format: '{value}',
                            style: {
                                color: '#98a6ad'
                            }
                        },
                        gridLineColor: '#445861',
                        title: false,

                    }, {
                        gridLineColor: '#445861',
                        title: false,
                        labels: {
                            format: '{value}%',
                            style: {
                                color: '#98a6ad'
                            }
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        verticalAlign: 'top',
                        floating: false,
                    },
                    series: [{
                        name: 'Real + Forecast',
                        type: 'column',
                        yAxis: 0,
                        //data: chart.real_forecast,
                        data: [1002300,1005000,1001200,1200000,1034000,1220000,1330000,2200000,1500000,1700000,1800000,1900000],
                        tooltip: {
                            valuePrefix: 'R$ '
                        },
                        color: "#f8b425",
                        borderColor: '#f8b425'
                    }, {
                        name: 'Orçamento',
                        type: 'column',
                        yAxis: 0,
                        //data: chart.orcamento,
                        data: [1002300,1005000,1001200,1200000,1034000,1220000,1330000,2200000,1500000,1700000,1800000,1900000],
                        tooltip: {
                            valuePrefix: 'R$ '
                        },
                        color: "#f58220",
                        borderColor: '#f58220'
                    }, {
                        type: 'spline',
                        name: 'Consumido',
                        yAxis: 1,
                        //data: chart.consumido,
                        data: [80,90,55,32,56,76,87,99,55,22,11,55],
                        color: "#02a499",
                        marker: {
                            lineWidth: 2,
                            lineColor: 'gray',
                            fillColor: 'white'
                        },
                        tooltip: {
                            valueSuffix: '%'
                        }
                    }, {
                        name: 'Meta Consumido',
                        type: 'spline',
                        yAxis: 1,
                        data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                        dashStyle: 'LongDash',
                        marker: {
                            enabled: false
                        },
                        color: '#ef5350',
                        tooltip: {
                            valueSuffix: '%'
                        }
                    }]
                })).setSize($('#chart').closest('div').innerWidth(), null);
            },
            buildCards() {
                let cards = [0, 1, 2, 3, 4, 5, 6, 7, 8];
                let titles = [
                    'Consolidado'
                    ,'Atendimento'
                    ,'Comunicação'
                    ,'Diversos'
                    ,'Mat. Transp.'
                    ,'Prop. Public.'
                    ,'Terceiros'
                    ,'TI'
                    ,'Viagem'
                ];

                for(const [key, value] of Object.entries(cards)) {
                    let tables = [
                        'Frontais'
                        ,'Telecomunicações'
                        ,'Telefone'
                        ,'Receptivo Móvel'
                        ,'Telefone Celular'
                    ];

                    for(const [k, v] of Object.entries(tables)) {
                        $(`#card-${value}-${k} .card-body > div > span.h6`).html(v);
                        $(`#card-${value}-${k} .card-body .card-table`).DataTable({
                            ordering: false,
                            searching: false,
                            info: false,
                            paging: false,
                            processing: true,
                            columnDefs: [
                                {targets: [0], className: 'font-12'},
                                {targets: [1], className: 'text-neutral'},
                                {targets: '_all', className: 'text-center'}],
                            columns: [
                                {title: 'Indicador', data: 'ytd'},
                                {title: 'Valor', data: 'valor'},
                                {title: 'Padrão', data: 'padrao'},
                            ],
                            data: [
                                {
                                    ytd: 'Real',
                                    valor: (15606123).toLocaleString(),
                                    padrao: '<i class="fa fa-circle text-neutral font-18"></i>'
                                },
                                {
                                    ytd: 'Orçamento',
                                    valor: (15606123).toLocaleString(),
                                    padrao: '<i class="fa fa-circle text-neutral font-18"></i>'
                                },
                                {
                                    ytd: 'Consumido',
                                    valor: ` <span class="text-warning" > 93.43 % </span>`,
                                    padrao: `<i class="fa fa-exclamation-circle text-warning font-18"></i>`
                                },
                            ],
                            fnDrawCallback(oSettings) {
                                $(oSettings.nTHead).hide();
                            }
                        });
                    }

                    let _card = $(`#card-${value}`);

                    _card.html(
                        $(`<div>`).circliful({
                            animation: 1,
                            animationStep: 5,
                            foregroundBorderWidth: 8,
                            backgroundBorderWidth: 15,
                            percent: 93.43 - value,
                            replacePercentageByText: `${93.43 - value} % `,
                            halfCircle: 1,
                            fontColor: '#f8b425',
                            backgroundColor: '#343a40',
                            foregroundColor: '#f8b425',
                        })
                    );

                    _card.prepend(`
                        <div class="text-center text-uppercase">
                            <span class="h5">${titles[key]}</span>
                        </div>
                        <hr>
                    `);

                    _card.append(`
                        <table class="card-circle-table">
                            <tbody>
                                <tr>
                                    <th class="text-left">Real</th>
                                    <td class="w-100 text-right">${(1018234).toLocaleString()}</td>
                                </tr>
                                <tr>
                                    <th class="text-left">Orçamento</th>
                                    <td class="w-100 text-right">${(1118234).toLocaleString()}</td>
                                </tr>
                            </tbody>
                         </table>
                     `);
                }
            }
        };

        $(() => {
            $('#dateMonthYear').datepicker({
                language: "pt-BR",
                format: "yyyy-mm",
                startView: "months",
                minViewMode: "months",
                autoclose: true,
                todayHighlight: true,
            }).on('changeDate', function (ev) {
                $('#dateMonthYear span').html(ev.format('MM, yyyy'));
                $(this).data('date', ev.format('yyyy-mm'));
                $(this).datepicker('hide');
                reloadPage();
            });

            page.refresh();
        })
    </script>
@endpush