{% extends "base.html" %}

{% block content %}
<!-- ==================== 授权到期提醒 ==================== -->
{% if days_left is defined and days_left is not none %}
    {% if days_left > 0 and days_left <= 7 %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <i class="bi bi-clock-history"></i> ⏰ 授权将在 <strong>{{ days_left }}</strong> 天后过期，请及时续费！
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% elif days_left <= 0 %}
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle-fill"></i> ⚠️ 授权已过期，请立即续费！
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endif %}
{% endif %}

<!-- ==================== 免费试用提醒 ==================== -->
{% if trial_info is defined and trial_info and trial_info.status == '试用中' and days_left is none %}
<div class="alert alert-info alert-dismissible fade show" role="alert">
    <i class="bi bi-gift"></i> 🎁 您正在使用<strong>免费试用版</strong>，剩余 <strong>{{ trial_info.days_left }}</strong> 天（有效期至 {{ trial_info.trial_end }}）。试用期结束后请及时激活系统。
    <a href="{{ url_for('activate_page') }}" class="btn btn-sm btn-outline-primary ms-2">查看激活</a>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endif %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-speedometer2"></i> 考勤首页</h2>
    <div>
        <a href="{{ url_for('checkin_page') }}" class="btn btn-primary">
            <i class="bi bi-clock"></i> 打卡
        </a>
        <span class="text-muted ms-2" id="currentTime"></span>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="stat-card"><div class="icon"><i class="bi bi-people"></i></div>
            <div class="number">{{ summary.total_users }}</div><div class="label">👥 总人数</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card" style="border-left-color:#28a745;">
            <div class="icon"><i class="bi bi-check-circle"></i></div>
            <div class="number" style="color:#28a745;">{{ summary.checked_in }}</div>
            <div class="label">✅ 已打卡</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card" style="border-left-color:#ffc107;">
            <div class="icon"><i class="bi bi-clock"></i></div>
            <div class="number" style="color:#ffc107;">{{ summary.late_count }}</div>
            <div class="label">⏰ 迟到</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card" style="border-left-color:#dc3545;">
            <div class="icon"><i class="bi bi-x-circle"></i></div>
            <div class="number" style="color:#dc3545;">{{ summary.not_checked }}</div>
            <div class="label">❌ 未打卡</div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><i class="bi bi-bar-chart"></i> 本月统计</div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4"><span class="text-success">✅ 正常</span><br><strong>{{ stats.normal_days }}</strong></div>
                    <div class="col-4"><span class="text-warning">⏰ 迟到</span><br><strong>{{ stats.late_days }}</strong></div>
                    <div class="col-4"><span class="text-danger">❌ 缺勤</span><br><strong>{{ stats.absent_days }}</strong></div>
                    <div class="col-6 mt-2"><span class="text-warning">⏰ 迟到总分钟</span><br><strong>{{ stats.total_late_minutes }}</strong></div>
                    <div class="col-6 mt-2"><span class="text-success">💪 加班总分钟</span><br><strong>{{ stats.total_overtime_minutes }}</strong></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><i class="bi bi-clock-history"></i> 考勤规则</div>
            <div class="card-body">
                {% if rules %}
                <p><strong>上班时间：</strong>{{ rules.work_start_time }}</p>
                <p><strong>下班时间：</strong>{{ rules.work_end_time }}</p>
                <p><strong>迟到阈值：</strong>{{ rules.late_threshold }} 分钟</p>
                <p><strong>工作日：</strong>
                    {% for d in rules.work_days %}
                        {% if d == '1' %}周一 {% elif d == '2' %}周二 {% elif d == '3' %}周三 {% elif d == '4' %}周四 {% elif d == '5' %}周五 {% elif d == '6' %}周六 {% elif d == '7' %}周日 {% endif %}
                    {% endfor %}
                </p>
                {% else %}
                <p class="text-muted">请先设置考勤规则</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header"><i class="bi bi-clock-history"></i> 最近打卡记录</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead><tr><th>日期</th><th>姓名</th><th>上班</th><th>下班</th><th>状态</th></tr></thead>
                        <tbody>
                            {% for r in records %}
                            <tr>
                                <td>{{ r.check_date }}</td><td>{{ r.real_name }}</td>
                                <td>{{ r.check_in_time or '-' }}</td><td>{{ r.check_out_time or '-' }}</td>
                                <td>
                                    {% if r.status == 'normal' %}<span class="badge badge-approved">正常</span>
                                    {% elif r.status == 'late' %}<span class="badge badge-pending">迟到</span>
                                    {% elif r.status == 'early_leave' %}<span class="badge badge-rejected">早退</span>
                                    {% else %}<span class="badge bg-secondary">{{ r.status }}</span>{% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr><td colspan="5" class="text-center text-muted">暂无打卡记录</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updateClock() {
    const now = new Date();
    document.getElementById('currentTime').textContent = now.toLocaleString('zh-CN');
}
setInterval(updateClock, 1000);
updateClock();
</script>
{% endblock %}