{% extends "layout.html" %}

{% block content %}
    <!-- 页面标题 -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">仪表板</h1>
        <p class="mt-2 text-sm text-gray-500">实时监控销售和业务指标</p>
    </div>

    <!-- KPI 卡片区域 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
        <!-- KPI 卡片 1 - 总订单数 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6" data-tooltip="计算公式: 统计所有订单的数量">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm font-medium text-gray-500">总订单数</p>
                    <h3 class="text-lg sm:text-2xl font-bold text-gray-900" id="kpi-total-orders">--</h3>
                    <p class="text-xs text-green-600 mt-1" data-tooltip="计算公式: (当前期订单数 - 上期订单数) / 上期订单数 × 100%"><i class="fa fa-arrow-up"></i> <span id="kpi-orders-growth">--</span>%</p>
                </div>
                <div class="p-2 sm:p-3 bg-blue-100 rounded-full">
                    <i class="fa fa-shopping-bag text-blue-600 text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>

        <!-- KPI 卡片 2 - 总销售额 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6" data-tooltip="计算公式: 所有订单金额的总和">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm font-medium text-gray-500">总销售额</p>
                    <h3 class="text-lg sm:text-2xl font-bold text-gray-900" id="kpi-total-sales">¥--</h3>
                    <p class="text-xs text-green-600 mt-1" data-tooltip="计算公式: (当前期销售额 - 上期销售额) / 上期销售额 × 100%"><i class="fa fa-arrow-up"></i> <span id="kpi-sales-growth">--</span>%</p>
                </div>
                <div class="p-2 sm:p-3 bg-green-100 rounded-full">
                    <i class="fa fa-money text-green-600 text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>

        <!-- KPI 卡片 3 - 总产品数 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6" data-tooltip="计算公式: 统计所有活跃产品的数量">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm font-medium text-gray-500">总产品数</p>
                    <h3 class="text-lg sm:text-2xl font-bold text-gray-900" id="kpi-total-products">--</h3>
                    <p class="text-xs text-gray-500 mt-1">活跃产品</p>
                </div>
                <div class="p-2 sm:p-3 bg-yellow-100 rounded-full">
                    <i class="fa fa-cubes text-yellow-600 text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>

        <!-- KPI 卡片 4 - 总客户数 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6" data-tooltip="计算公式: 统计所有客户的数量">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm font-medium text-gray-500">总客户数</p>
                    <h3 class="text-lg sm:text-2xl font-bold text-gray-900" id="kpi-total-customers">--</h3>
                    <p class="text-xs text-blue-600 mt-1" data-tooltip="计算公式: 统计最近新增的客户数量"><i class="fa fa-user-plus"></i> <span id="kpi-new-customers">--</span> 新客户</p>
                </div>
                <div class="p-2 sm:p-3 bg-purple-100 rounded-full">
                    <i class="fa fa-users text-purple-600 text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="space-y-6 mb-6 sm:mb-8">
        <!-- 销售趋势图表 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base sm:text-lg font-semibold text-gray-900">销售趋势</h2>
                <div class="flex space-x-2">
                    <button class="px-3 py-1.5 text-xs font-medium rounded-md bg-blue-100 text-blue-800 hover:bg-blue-200" data-period="day">日</button>
                    <button class="px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200" data-period="week">周</button>
                    <button class="px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200" data-period="month">月</button>
                </div>
            </div>
            <div id="sales-trend-chart" class="h-64 sm:h-80"></div>
        </div>

        <!-- 产品排名图表 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base sm:text-lg font-semibold text-gray-900">产品销售排名</h2>
                <button class="px-3 py-1.5 text-xs sm:text-sm text-blue-600 hover:text-blue-800 bg-gray-100 hover:bg-gray-200 rounded-md">
                    <i class="fa fa-refresh mr-1"></i> 刷新
                </button>
            </div>
            <div id="product-ranking-chart" class="h-64 sm:h-80"></div>
        </div>

        <!-- 客户细分图表 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base sm:text-lg font-semibold text-gray-900">客户细分</h2>
                <span class="text-xs text-gray-500">基于消费行为</span>
            </div>
            <div id="customer-segment-chart" class="h-64 sm:h-80"></div>
        </div>

        <!-- 实时指标图表 -->
        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base sm:text-lg font-semibold text-gray-900">实时指标</h2>
                <span class="text-xs text-green-600">
                    <i class="fa fa-circle text-xs mr-1"></i> 实时更新
                </span>
            </div>
            <div class="space-y-3 sm:space-y-4">
                <div class="flex justify-between items-center" data-tooltip="计算公式: 当前系统中未完成的订单数量">
                    <span class="text-sm text-gray-600">当前订单数</span>
                    <span class="text-base sm:text-lg font-medium text-gray-900" id="realtime-orders">--</span>
                </div>
                <div class="flex justify-between items-center" data-tooltip="计算公式: 今日所有订单金额的总和">
                    <span class="text-sm text-gray-600">今日销售额</span>
                    <span class="text-base sm:text-lg font-medium text-gray-900" id="realtime-sales">¥--</span>
                </div>
                <div class="flex justify-between items-center" data-tooltip="计算公式: 当前网站的活跃访客数量">
                    <span class="text-sm text-gray-600">当前访客数</span>
                    <span class="text-base sm:text-lg font-medium text-gray-900" id="realtime-visitors">--</span>
                </div>
                <div class="flex justify-between items-center" data-tooltip="计算公式: (订单数 / 访客数) × 100%">
                    <span class="text-sm text-gray-600">转化率</span>
                    <span class="text-base sm:text-lg font-medium text-gray-900" id="realtime-conversion">--%</span>
                </div>
                <div class="flex justify-between items-center" data-tooltip="计算公式: 总销售额 / 订单数">
                    <span class="text-sm text-gray-600">平均订单价值</span>
                    <span class="text-base sm:text-lg font-medium text-gray-900" id="realtime-aov">¥--</span>
                </div>
                <div class="flex justify-between items-center" data-tooltip="计算公式: 销量最高的产品">
                    <span class="text-sm text-gray-600">热销产品</span>
                    <span class="text-base sm:text-lg font-medium text-gray-900 truncate max-w-[50%]" id="realtime-top-product">--</span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}