{% extends "assetapp/base.html" %}
{% load asset_tags %}

{% block title %}仪表盘 - 希姆计算资产管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="bi bi-speedometer2 me-2"></i>仪表盘</h4>
    <a href="{% url 'asset_create' %}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-1"></i>新增资产
    </a>
</div>

<!-- 统计卡片 -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="stat-card stat-total">
            <div class="stat-icon"><i class="bi bi-hdd-rack"></i></div>
            <div class="stat-info">
                <div class="stat-value">{{ total_assets }}</div>
                <div class="stat-label">资产总数</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card stat-in-use">
            <div class="stat-icon"><i class="bi bi-cpu"></i></div>
            <div class="stat-info">
                <div class="stat-value">{{ status_data.in_use|default:0 }}</div>
                <div class="stat-label">在用</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card stat-warning">
            <div class="stat-icon"><i class="bi bi-exclamation-triangle"></i></div>
            <div class="stat-info">
                <div class="stat-value">{{ expiring_soon }}</div>
                <div class="stat-label">即将过保(30天)</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card stat-danger">
            <div class="stat-icon"><i class="bi bi-shield-exclamation"></i></div>
            <div class="stat-info">
                <div class="stat-value">{{ expired }}</div>
                <div class="stat-label">已过保</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <!-- 分类统计 -->
    <div class="col-md-6">
        <div class="card card-dark">
            <div class="card-header">
                <i class="bi bi-pie-chart me-2"></i>分类统计
            </div>
            <div class="card-body">
                {% if category_stats %}
                {% for item in category_stats %}
                <div class="d-flex justify-content-between align-items-center py-2 border-bottom border-secondary">
                    <span class="text-light">{{ item.category__name }}</span>
                    <div class="d-flex align-items-center">
                        <div class="progress me-2" style="width: 120px; height: 8px;">
                            {% widthratio item.count total_assets 100 as pct %}
                            <div class="progress-bar bg-primary" style="width: {{ pct }}%"></div>
                        </div>
                        <span class="badge bg-primary">{{ item.count }}</span>
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <p class="text-muted text-center my-4">暂无数据</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 状态分布 -->
    <div class="col-md-6">
        <div class="card card-dark">
            <div class="card-header">
                <i class="bi bi-bar-chart me-2"></i>状态分布
            </div>
            <div class="card-body">
                {% for key, label in status_map.items %}
                <div class="d-flex justify-content-between align-items-center py-2 border-bottom border-secondary">
                    <span class="text-light">{{ label }}</span>
                    <span class="badge 
                        {% if key == 'in_use' %}bg-success
                        {% elif key == 'idle' %}bg-warning text-dark
                        {% elif key == 'maintenance' %}bg-info
                        {% else %}bg-danger{% endif %}">
                        {{ status_data|get_item:key|default:0 }}
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- 最近变更 -->
<div class="card card-dark mt-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-clock-history me-2"></i>最近变更</span>
        <a href="{% url 'change_log_list' %}" class="btn btn-sm btn-outline-light">查看全部</a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0">
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>资产编号</th>
                        <th>操作</th>
                        <th>描述</th>
                        <th>操作人</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in recent_changes %}
                    <tr>
                        <td>{{ log.created_at|date:"m-d H:i" }}</td>
                        <td><a href="{% url 'asset_list' %}?search={{ log.asset_number }}" class="text-info">{{ log.asset_number }}</a></td>
                        <td>
                            <span class="badge 
                                {% if log.action == 'create' %}bg-success
                                {% elif log.action == 'update' %}bg-primary
                                {% elif log.action == 'delete' %}bg-danger
                                {% elif log.action == 'import' %}bg-info
                                {% elif log.action == 'export' %}bg-secondary
                                {% else %}bg-warning{% endif %}">
                                {{ log.get_action_display }}
                            </span>
                        </td>
                        <td>{{ log.description|default:"-" }}</td>
                        <td>{{ log.operator|default:"-" }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="5" class="text-center text-light opacity-75 py-3">暂无变更记录</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}