@extends('manager.layout.master')

@section('style')
    <style>
        .stat-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
            margin-bottom: 15px;
        }

        .stat-card .stat-body {
            padding: 18px 20px;
        }

        .stat-title {
            font-size: 13px;
            color: #888;
        }

        .stat-num {
            font-size: 28px;
            font-weight: 700;
            margin-top: 6px;
            line-height: 1.1;
        }

        .stat-sub {
            font-size: 12px;
            color: #999;
            margin-top: 6px;
        }

        .c-blue { color: #2563EB; }

        .c-green { color: #16A34A; }

        .c-orange { color: #EA580C; }

        .c-red { color: #DC2626; }

        .layui-card .layui-card-header {
            font-weight: 600;
            border-bottom: 1px solid #f0f0f0;
        }
    </style>
@stop

@section('body')

    @if(isset($error))
        <blockquote class="layui-elem-quote layui-quote-nm" style="color:#DC2626;">
            数据加载异常：{{$error}}
        </blockquote>
    @endif

    <blockquote class="layui-elem-quote">数据概览</blockquote>
    <div class="layui-row layui-col-space10">

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">学员总数</div>
                    <div class="stat-num c-blue">{{$studentCount ?? 0}}</div>
                    <div class="stat-sub">已实名 {{$realnameCount ?? 0}} 人</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">企业总数</div>
                    <div class="stat-num c-blue">{{$enterpriseCount ?? 0}}</div>
                    <div class="stat-sub">参训组织单位</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">课程总数</div>
                    <div class="stat-num c-green">{{$courseCount ?? 0}}</div>
                    <div class="stat-sub">章节 {{$chapterCount ?? 0}} 个</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">试卷总数</div>
                    <div class="stat-num c-green">{{$examCount ?? 0}}</div>
                    <div class="stat-sub">考试 {{$examRecordCount ?? 0}} 人次</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">考试通过率</div>
                    <div class="stat-num c-green">{{$examPassRate ?? 0}}%</div>
                    <div class="stat-sub">通过 {{$examPassCount ?? 0}} 人</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">累计学时</div>
                    <div class="stat-num c-orange">{{$totalHours ?? 0}}</div>
                    <div class="stat-sub">学习时长（小时）</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">实名签到</div>
                    <div class="stat-num c-orange">{{$signInCount ?? 0}}</div>
                    <div class="stat-sub">异常 {{$signInAbnormal ?? 0}} 次</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md3 layui-col-sm6">
            <div class="stat-card">
                <div class="stat-body">
                    <div class="stat-title">抓拍异常</div>
                    <div class="stat-num c-red">{{$captureAbnormal ?? 0}}</div>
                    <div class="stat-sub">心跳 {{$heartbeatCount ?? 0}} 次</div>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">最近 7 天学习时长与签到趋势</div>
                <div class="layui-card-body">
                    <div id="studyChart" style="height: 320px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">课程学习人数分布</div>
                <div class="layui-card-body">
                    <div id="courseChart" style="height: 320px;"></div>
                </div>
            </div>
        </div>
    </div>

    <blockquote class="layui-elem-quote">最新操作日志
        <a class="my-nav-btn" style="float: right;color: #73D5FF;" href="{{route('systemLogList')}}">查看更多》</a>
    </blockquote>
    <table class="layui-table" lay-skin="line">
        <thead>
        <tr>
            <th>操作人</th>
            <th class="hidden-xs">操作内容</th>
            <th class="hidden-xs">IP地址</th>
            <th class="hidden-xs">操作时间</th>
        </tr>
        </thead>
        <tbody>
        @forelse(($systemLogs ?? []) as $log)
            <tr>
                <td>{{$log->manager->username ?? '-'}}</td>
                <td class="hidden-xs">{{$log->content}}</td>
                <td class="hidden-xs">{{$log->ip}}</td>
                <td class="hidden-xs">{{$log->create_time}}</td>
            </tr>
        @empty
            <tr>
                <td colspan="4" style="text-align:center;color:#999;">暂无日志</td>
            </tr>
        @endforelse
        </tbody>
    </table>

@stop

@section('js')
    <script type="text/javascript" src="{{asset('js/echarts/echarts.min.js')}}"></script>
    <script>
        $(function () {
            // ===== 学习时长 + 签到趋势（折线） =====
            var studyChart = echarts.init(document.getElementById('studyChart'));
            var studyOption = {
                tooltip: {trigger: 'axis'},
                legend: {data: ['学习时长(分钟)', '签到次数']},
                grid: {left: 40, right: 20, top: 40, bottom: 30},
                xAxis: {type: 'category', data: {!! $studyTrendDays ?? '[]' !!}},
                yAxis: {type: 'value'},
                color: ['#2563EB', '#EA580C'],
                series: [
                    {
                        name: '学习时长(分钟)',
                        type: 'line',
                        smooth: true,
                        data: {!! $studyTrendData ?? '[]' !!}
                    },
                    {
                        name: '签到次数',
                        type: 'line',
                        smooth: true,
                        data: {!! $signinTrendData ?? '[]' !!}
                    }
                ]
            };
            studyChart.setOption(studyOption);

            // ===== 课程学习人数分布（饼图） =====
            var courseChart = echarts.init(document.getElementById('courseChart'));
            var coursePie = {!! $coursePie ?? '[]' !!};
            if (coursePie.length === 0) {
                coursePie = [{value: 1, name: '暂无数据'}];
            }
            var courseOption = {
                tooltip: {trigger: 'item', formatter: '{b} : {c} 人 ({d}%)'},
                legend: {orient: 'vertical', left: 'left', type: 'scroll'},
                color: ['#2563EB', '#16A34A', '#EA580C', '#DC2626', '#7C3AED', '#0891B2'],
                series: [
                    {
                        name: '学习人数',
                        type: 'pie',
                        radius: '58%',
                        center: ['55%', '55%'],
                        data: coursePie,
                        itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)'}}
                    }
                ]
            };
            courseChart.setOption(courseOption);

            window.addEventListener('resize', function () {
                studyChart.resize();
                courseChart.resize();
            });
        });
    </script>
@stop