@extends('manager.layout.master')

@section('style')
    <style>
        .workboard{display:flex;flex-direction:column;height:calc(100vh - 70px);min-height:520px;}
        .dash-wrap{margin-bottom:8px;flex:none;}
        .dash-title{
            font-size: 13px;font-weight: 600;color:#333;
            border-left: 3px solid #1E9FFF;padding-left: 6px;margin: 0 0 8px;
        }
        .dash-title.revenue{border-left-color:#ED4014;}
        .dash-title.biz{border-left-color:#16B777;}

        .stat-card{
            background:#fff;border-radius:6px;padding:8px 10px;
            box-shadow:0 1px 6px rgba(0,0,0,.05);
            display:flex;align-items:center;justify-content:space-between;
            margin-bottom:6px;
        }
        .stat-card .meta .num{font-size:18px;font-weight:700;color:#333;line-height:1.1;}
        .stat-card .meta .num small{font-size:11px;font-weight:600;color:#999;margin-left:2px;}
        .stat-card .meta .label{font-size:11px;color:#888;margin-top:3px;}
        .stat-card .ic{
            width:32px;height:32px;border-radius:8px;flex:none;
            display:flex;align-items:center;justify-content:center;
        }
        .stat-card .ic i{font-size:16px;color:#fff;}
        .ic-blue{background:#1E9FFF;}
        .ic-green{background:#16B777;}
        .ic-orange{background:#FFB800;}
        .ic-cyan{background:#2D8CF0;}
        .ic-red{background:#ED4014;}
        .ic-purple{background:#9C27B0;}
        .ic-teal{background:#13C2C2;}
        .ic-pink{background:#F5365C;}

        .chart-row{flex:1;display:flex;margin-left:-8px;margin-right:-8px;min-height:0;}
        .chart-col{height:100%;padding-left:8px;padding-right:8px;}
        .chart-panel{
            background:#fff;border-radius:6px;padding:8px 10px;
            box-shadow:0 1px 6px rgba(0,0,0,.05);
            height:100%;display:flex;flex-direction:column;
        }
        .chart-title{
            font-size:13px;font-weight:600;color:#333;margin-bottom:4px;flex:none;
            border-left:3px solid #1E9FFF;padding-left:6px;
        }
        .chart-box{flex:1;min-height:0;}
    </style>
@stop


@section('body')
<div class="workboard">
    {{-- 一、核心指标：三栏并列 --}}
    <div class="layui-row layui-col-space8 dash-wrap">
        {{-- 用户与会员 --}}
        <div class="layui-col-md4">
            <div class="dash-title">用户与会员</div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['member_total']}}</div><div class="label">会员总数</div></div>
                <div class="ic ic-blue"><i class="layui-icon layui-icon-user"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['member_today']}}</div><div class="label">今日新增会员</div></div>
                <div class="ic ic-cyan"><i class="layui-icon layui-icon-date"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['vip_total']}}</div><div class="label">VIP 会员数</div></div>
                <div class="ic ic-orange"><i class="layui-icon layui-icon-star"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['promote_total']}}</div><div class="label">推广人员</div></div>
                <div class="ic ic-green"><i class="layui-icon layui-icon-share"></i></div>
            </div>
        </div>

        {{-- 交易与营收 --}}
        <div class="layui-col-md4">
            <div class="dash-title revenue">交易与营收</div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['order_valid']}}</div><div class="label">有效订单数</div></div>
                <div class="ic ic-purple"><i class="layui-icon layui-icon-cart"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['order_today']}}</div><div class="label">今日订单数</div></div>
                <div class="ic ic-red"><i class="layui-icon layui-icon-time"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num"><small>¥</small>{{number_format((float)$stats['turnover_total'],2)}}</div><div class="label">累计营业额</div></div>
                <div class="ic ic-red"><i class="layui-icon layui-icon-rmb"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num"><small>¥</small>{{number_format((float)$stats['turnover_today'],2)}}</div><div class="label">今日营业额</div></div>
                <div class="ic ic-orange"><i class="layui-icon layui-icon-rmb"></i></div>
            </div>
        </div>

        {{-- 业务线概览 --}}
        <div class="layui-col-md4">
            <div class="dash-title biz">业务线概览</div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['naming_order']}}</div><div class="label">命名取名订单</div></div>
                <div class="ic ic-blue"><i class="layui-icon layui-icon-edit"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['mascot_count']}}<small>/{{$stats['mascot_sales']}}</small></div><div class="label">吉祥物(商品/销量)</div></div>
                <div class="ic ic-teal"><i class="layui-icon layui-icon-gift"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num">{{$stats['buddha_count']}}</div><div class="label">佛事结缘项目</div></div>
                <div class="ic ic-pink"><i class="layui-icon layui-icon-heart"></i></div>
            </div>
            <div class="stat-card">
                <div class="meta"><div class="num"><small>¥</small>{{number_format((float)$stats['donate_total'],2)}}</div><div class="label">每日一善善款</div></div>
                <div class="ic ic-green"><i class="layui-icon layui-icon-heart-fill"></i></div>
            </div>
        </div>
    </div>

    {{-- 二、业务统计图表：三栏并列，自适应高度 --}}
    <div class="layui-row chart-row">
        <div class="layui-col-md4 chart-col">
            <div class="chart-panel">
                <div class="chart-title" style="border-left-color:#16B777;">业务线订单占比</div>
                <div id="chart-biz-share" class="chart-box"></div>
            </div>
        </div>
        <div class="layui-col-md4 chart-col">
            <div class="chart-panel">
                <div class="chart-title">近 7 天订单量趋势</div>
                <div id="chart-order-trend" class="chart-box"></div>
            </div>
        </div>
        <div class="layui-col-md4 chart-col">
            <div class="chart-panel">
                <div class="chart-title" style="border-left-color:#ED4014;">近 7 天营收趋势</div>
                <div id="chart-turnover-trend" class="chart-box"></div>
            </div>
        </div>
    </div>
</div>
@stop


@section('js')
    <script src="{{ asset('echarts/echarts.min.js') }}"></script>
    <script>
        var days = {!! json_encode($days) !!};
        var orderTrend = {!! json_encode($orderTrend) !!};
        var turnoverTrend = {!! json_encode($turnoverTrend) !!};
        var bizShare = {!! json_encode($bizShare) !!};

        var showDays = days.map(function(d){ return d.substr(5); });

        function initPie(id, data, title) {
            var chart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
                legend: { bottom: 0, left: 'center', itemWidth: 10, itemHeight: 10, textStyle: {fontSize: 11} },
                color: ['#1E9FFF','#16B777','#FFB800','#ED4014','#9C27B0','#2D8CF0','#F5365C'],
                series: [{
                    name: title,
                    type: 'pie',
                    radius: ['42%', '62%'],
                    center: ['50%', '46%'],
                    avoidLabelOverlap: true,
                    itemStyle: { borderRadius: 3, borderColor: '#fff', borderWidth: 1 },
                    label: { show: true, fontSize: 10, formatter: '{b}\n{c} ({d}%)' },
                    data: data
                }]
            };
            chart.setOption(option);
            window.addEventListener('resize', function(){ chart.resize(); });
        }

        function initLine(id, x, y, title) {
            var chart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: { trigger: 'axis' },
                grid: { left: '1%', right: '2%', bottom: '2%', top: '10%', containLabel: true },
                xAxis: { type: 'category', data: x, axisLine: { lineStyle: { color: '#999' } }, axisLabel: {fontSize: 10} },
                yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }, axisLabel: {fontSize: 10} },
                series: [{
                    name: title,
                    type: 'line',
                    smooth: true,
                    data: y,
                    itemStyle: { color: '#1E9FFF' },
                    areaStyle: { color: 'rgba(30,159,255,0.12)' },
                    lineStyle: { width: 2 },
                    symbolSize: 5,
                    label: { show: true, position: 'top', formatter: '{c}', fontSize: 10 }
                }]
            };
            chart.setOption(option);
            window.addEventListener('resize', function(){ chart.resize(); });
        }

        function initBar(id, x, y, title) {
            var chart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: { trigger: 'axis', formatter: function(p){ return p[0].name + '<br/>' + p[0].marker + ' ' + title + ': ¥' + p[0].value; } },
                grid: { left: '1%', right: '2%', bottom: '2%', top: '10%', containLabel: true },
                xAxis: { type: 'category', data: x, axisLine: { lineStyle: { color: '#999' } }, axisLabel: {fontSize: 10} },
                yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }, axisLabel: { fontSize: 10, formatter: '¥{value}' } },
                series: [{
                    name: title,
                    type: 'bar',
                    data: y,
                    itemStyle: { color: '#ED4014', borderRadius: [3,3,0,0] },
                    barWidth: '45%',
                    label: { show: true, position: 'top', formatter: '¥{c}', fontSize: 10 }
                }]
            };
            chart.setOption(option);
            window.addEventListener('resize', function(){ chart.resize(); });
        }

        initPie('chart-biz-share', bizShare, '业务线订单');
        initLine('chart-order-trend', showDays, orderTrend, '订单量');
        initBar('chart-turnover-trend', showDays, turnoverTrend, '营业额');
    </script>
@stop