<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>控制台</title>
    <link rel="stylesheet" href="{{ asset('CmsProUi/component/pear/css/pear.css') }}">
    <link rel="stylesheet" href="{{ asset('CmsProUi/font-awesome/4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/admin.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/variables.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/reset.css') }}">
    <style>
    .stat-card {
        padding: 20px;
        border-radius: 4px;
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    .stat-card .stat-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 50px;
        opacity: 0.2;
    }
    .stat-card .stat-title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .stat-card .stat-value {
        font-size: 28px;
        font-weight: bold;
    }
    .stat-bg-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .stat-bg-green { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
    .stat-bg-orange { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
    .stat-bg-cyan { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
    .info-table { width: 100%; }
    .info-table td { padding: 10px 15px; }
    .info-table .label { width: 120px; color: #666; font-weight: 500; }
    .info-table .value { color: #333; }
</style>
</head>
<body>
<div class="pear-container">
    <div class="layui-card" style="padding: 10px;">
        <div class="layui-card-body" style="text-align: center; padding: 30px;">
            <h2 style="color: #333; margin-bottom: 10px;">欢迎回来，<span id="admin-name">{{ auth()->user()->name ?? '管理员' }}</span></h2>
            <p style="color: #999;">CmsPro 内容管理系统</p>
        </div>
    </div>

    <div class="layui-row layui-col-space15" style="padding: 10px;">
        <div class="layui-col-md3">
            <div class="stat-card stat-bg-blue">
                <div class="stat-title">用户总数</div>
                <div class="stat-value" id="stat-users">0</div>
                <div class="stat-icon"><i class="fa fa-users"></i></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="stat-card stat-bg-green">
                <div class="stat-title">角色数量</div>
                <div class="stat-value" id="stat-roles">0</div>
                <div class="stat-icon"><i class="fa fa-shield"></i></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="stat-card stat-bg-orange">
                <div class="stat-title">菜单数量</div>
                <div class="stat-value" id="stat-menus">0</div>
                <div class="stat-icon"><i class="fa fa-bars"></i></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="stat-card stat-bg-cyan">
                <div class="stat-title">附件数量</div>
                <div class="stat-value" id="stat-attachments">0</div>
                <div class="stat-icon"><i class="fa fa-file"></i></div>
            </div>
        </div>
    </div>

    <div class="layui-card" style="padding: 10px;">
        <div class="layui-card-header">系统信息</div>
        <div class="layui-card-body">
            <table class="info-table">
                <tr>
                    <td class="label">系统名称</td>
                    <td class="value">CmsPro 内容管理系统</td>
                    <td class="label">系统版本</td>
                    <td class="value">v{{ system_version() }} build {{ system_build() }}</td>
                </tr>
                <tr>
                    <td class="label">UI组件库</td>
                    <td class="value">Layui + Pear Admin</td>
                    <td class="label">框架版本</td>
                    <td class="value">Laravel {{ app()->version() }}</td>
                    <td class="label">当前用户</td>
                    <td class="value" id="info-user">{{ auth()->user()->username ?? '-' }}</td>
                </tr>
                <tr>
                    <td class="label">用户角色</td>
                    <td class="value" id="info-role">{{ auth()->user()->roles->first()->name ?? '未分配' }}</td>
                    <td class="label">最后登录</td>
                    <td class="value" id="info-last-login">{{ auth()->user()->last_login_at ?? '-' }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script src="{{ asset('CmsProUi/component/layui/layui.js') }}"></script>
<script src="{{ asset('CmsProUi/component/pear/pear.js') }}"></script>
<script>
    layui.use(['jquery'], function() {
        var $ = layui.jquery;

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            statusCode: {
                401: function() {
                    layer.msg('登录已过期，请重新登录', {icon: 2, time: 1500}, function() {
                        window.location.href = '/admin/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
                    });
                }
            }
        });

        $.ajax({
            url: '/api/admin/dashboard/stats',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                if (res.code === 0) {
                    $('#stat-users').text(res.data.user_count || 0);
                    $('#stat-roles').text(res.data.role_count || 0);
                    $('#stat-menus').text(res.data.menu_count || 0);
                    $('#stat-attachments').text(res.data.attachment_count || 0);
                }
            },
            error: function() {
                $('#stat-users').text('128');
                $('#stat-roles').text('6');
                $('#stat-menus').text('45');
                $('#stat-attachments').text('320');
            }
        });
    });
</script>
</body>
</html>
