@extends('backend.layouts.app')

@section('page-header')
    <h1>
        {{ app_name() }}
        <small>{{ trans('strings.backend.dashboard.title') }}</small>
    </h1>
@endsection

@section('content')
    <div class="box box-success">
        <div class="box-header with-border">
            <h3 class="box-title">{{ trans('strings.backend.dashboard.welcome') }} {{ $logged_in_user->name }}!</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box tools -->
        </div><!-- /.box-header -->
        <div class="box-body">

            {{--{!! trans('strings.backend.welcome') !!}--}}

            <div class="box-body">
                <?php if($type_business_id == 0){?>
                <div class="row">
                    <div class="col-lg-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-primary pull-right">日统计</span>
                                <h5>营收概况</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{{$everydaytotal*0.01}}元</h1>
                                <small>上月：{{$everymonthtotal*0.01}}元</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-primary pull-right">日统计</span>
                                <h5>订单</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{{$everydayorder}}</h1>
                                <small>上月：{{$everymonthorder}}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-primary pull-right">日统计</span>
                                <h5>会员</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{{$total_cus}}</h1>
                                <small>今日新增：{{$everyday_cus}}</small>
                                <small>近30日新增：{{$everymonth_cus}}</small>
                            </div>
                        </div>
                    </div>

                </div>
                <div id="container" style="min-width:400px;height:400px">
                    <?php }else{?>
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <span class="label label-primary pull-right">日统计</span>
                                    <h5>营收概况</h5>
                                </div>
                                <div class="ibox-content">
                                    <h1 class="no-margins">{{$m_everyday_order}}</h1>
                                    <small>上月收入：{{$m_everymonth}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="container1" style="min-width:400px;height:400px">
                        <?php }?>
                    </div>
                </div>
                <?php if($type_business_id == 0){?>
                <div id="container2" style="min-width:400px;height:400px">

                </div>
                <?php }?>
            </div><!-- /.box-body -->
        </div><!--box box-success-->
        @endsection

        @section('after-scripts')
            {{ Html::script('https://img.hcharts.cn/highcharts/highcharts.js') }}
            {{ Html::script('https://img.hcharts.cn/highcharts/modules/exporting.js') }}
            {{ Html::script('https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js')}}

            <script>

                <?php if($type_business_id == 0){?>
                $(function () {
                    $('#container').highcharts({
                        title: {
                            text: '7天销量图()'
                        },
//                credits: {
//                    enabled: false
//                },
                        xAxis: {
                            categories:{!! json_encode($x) !!}

                        },
                        plotOptions: {
                            series: {
                                stacking: 'normal'
                            }
                        },
                        labels: {
                            items: [{
                                html: '统计表',
                                style: {
                                    left: '100px',
                                    top: '18px',
                                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                                }
                            }]
                        },
                        series: [
                                <?php foreach ($y as $key=>$ys){?>
                            {
                                type: 'column',
                                name: '<?= $key?>',
                                data: <?= json_encode($ys, 1)?>,
                            },
                                <?php }?>

                            {
                                type: 'spline',
                                name: '平均值',
                                data: <?= json_encode($avg, 1)?>,
                                marker: {
                                    lineWidth: 2,
//                        lineColor: Highcharts.getOptions().colors[3],
                                    fillColor: 'white'
                                }
                            }, {
                                type: 'pie',
                                name: '总金额',
                                data: [
                                        <?php foreach ($sum as $key=>$sums){?>
                                    {
                                        name: '<?= $key?>',
                                        y: <?= $sums ?>,
                                        color: Highcharts.getOptions().colors[0] // Jane's color
                                    },
                                    <?php }?>
                                ],
                                center: [-15, -15],
                                size: 100,
                                showInLegend: false,
                                dataLabels: {
                                    enabled: false
                                }
                            }]
                    });

                    function activeLastPointToolip(chart) {
                        var points = chart.series[0].points;
                        var points1 = chart.series[1].points;
                        var p = [];
                        p.push(points[points.length - 1].options);
                        p.push(points1[points1.length - 1].options);
                        points[points.length - 1].option = p;
                        points1[points1.length - 1].option = p;
                        chart.tooltip.refresh(points[points.length - 1]);
                    }

                    function getMachineStatus(series1, series2, chart) {
                        $.ajax({
                            url: 'dashboard/getmacstatus',
                            data: {'_token': "{{csrf_token()}}"},
                            dataType: 'json',
                            method: 'post',
                            success: function (msg) {
                                var x = msg.now_time, // 当前时间
                                    y1 = msg.on_line,
                                    y2 = msg.off_line;
                                series1.addPoint([x, y1], true, true);
                                series2.addPoint([x, y2], true, true);
                                activeLastPointToolip(chart);
                            }
                        });

                    }
                    $('#container2').highcharts({
                        chart: {
                            type: 'spline',
                            marginRight: 10,
                            events: {
                                load: function () {
                                    var series1 = this.series[0],
                                        series2 = this.series[1],
                                        chart = this;
                                    activeLastPointToolip(chart);
                                    setInterval(function () {
                                        getMachineStatus(series1, series2, chart);
                                    }, 60000);
                                }
                            }
                        },
                        title: {
                            text: '机柜状态'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                align: 'right',
                                rotation: -30
                            }
                        },
                        yAxis: {
                            title: {
                                text: '数量'
                            },
                            min: -1
                        },
                        colors: ['SpringGreen', 'red'],
                        tooltip: {
                            share: true,
                            distance: 30,
                            padding: 5,
                            formatter: function () {
                                var s = '机柜状态';
                                if (this.point.option != undefined) {
                                    $.each(this.point.option, function (index) {
                                        if (index == 0) {
                                            s += '<br/>在线: ' +
                                                this.y + '台';
                                        } else {
                                            s += '<br/>离线: ' +
                                                this.y + '台';
                                        }
                                    });
                                }
                                return s;
                            },
                        },
                        legend: {
                            enabled: false
                        },
                        series: [{
                            name: '在线',
                            data: <?=json_encode($dataStatusOn)?>
                        }, {
                            name: '离线',
                            data: <?=json_encode($dataStatusOff)?>

                        }]
                    });

                });


                <?php }else{ ?>
                $(function () {
                    $('#container1').highcharts({
                        title: {
                            text: '商户一周收益图'
                        },
                        subtitle: {
//                       text: '数据来源：thesolarfoundation.com'
                        },

                        yAxis: {
                            title: {
                                text: '单位分'
                            }
                        },
                        xAxis: {
                            categories:  {!! json_encode($x) !!}
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle'
                        },
                        plotOptions: {
                            series: {
                                label: {
//                               connectorAllowed: false
                                },
//                           pointStart: 2010
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: '一周情况',
                            data: {!! json_encode($m_data1)!!},
                        }],
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
//                                   layout: 'horizontal',
//                                   align: 'center',
//                                   verticalAlign: 'bottom'
                                    }
                                }
                            }]
                        }
                    });
                });

                <?php }?>

            </script>
@endsection