{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-bar-chart"></i> 考勤统计</h2>
    {% if current_user.is_admin() %}
    <button class="btn btn-success" onclick="exportStats()">
        <i class="bi bi-download"></i> 导出Excel
    </button>
    {% endif %}
</div>

<div class="card mb-4">
    <div class="card-body">
        <form id="filterForm" class="row g-3">
            <div class="col-auto">
                <label class="form-label">开始日期</label>
                <input type="date" name="start_date" class="form-control" id="startDate">
            </div>
            <div class="col-auto">
                <label class="form-label">结束日期</label>
                <input type="date" name="end_date" class="form-control" id="endDate">
            </div>
            <div class="col-auto d-flex align-items-end">
                <button type="submit" class="btn btn-primary">统计</button>
            </div>
        </form>
    </div>
</div>

<div id="statsContent"><div class="text-center text-muted py-4">请选择日期范围进行统计</div></div>

<script>
function loadStats(start_date, end_date) {
    fetch(`/api/stats?start_date=${start_date}&end_date=${end_date}`)
        .then(r => r.json())
        .then(data => {
            const container = document.getElementById('statsContent');
            {% if current_user.is_admin() %}
            let html = `
                <div class="row g-4 mb-4">
                    <div class="col-md-2"><div class="stat-card"><div class="number">${data.total_days}</div><div class="label">总天数</div></div></div>
                    <div class="col-md-2"><div class="stat-card" style="border-left-color:#28a745;"><div class="number" style="color:#28a745;">${data.normal_days}</div><div class="label">正常</div></div></div>
                    <div class="col-md-2"><div class="stat-card" style="border-left-color:#ffc107;"><div class="number" style="color:#ffc107;">${data.late_days}</div><div class="label">迟到</div></div></div>
                    <div class="col-md-2"><div class="stat-card" style="border-left-color:#fd7e14;"><div class="number" style="color:#fd7e14;">${data.early_leave_days || 0}</div><div class="label">早退</div></div></div>
                    <div class="col-md-2"><div class="stat-card" style="border-left-color:#dc3545;"><div class="number" style="color:#dc3545;">${data.absent_days}</div><div class="label">缺勤</div></div></div>
                </div>
                <div class="card"><div class="card-header">员工明细</div><div class="card-body p-0">
                <div class="table-responsive"><table class="table table-hover"><thead><tr><th>姓名</th><th>部门</th><th>正常</th><th>迟到</th><th>早退</th><th>缺勤</th><th>迟到分钟</th><th>早退分钟</th><th>加班分钟</th></tr></thead><tbody>
                ${data.all_users && data.all_users.length > 0 ? data.all_users.map(u => `
                    <tr><td>${u.real_name}</td><td>${u.department || '-'}</td><td>${u.normal_days || 0}</td><td>${u.late_days || 0}</td><td>${u.early_leave_days || 0}</td><td>${u.absent_days || 0}</td><td>${u.total_late_minutes || 0}</td><td>${u.total_early_minutes || 0}</td><td>${u.total_overtime_minutes || 0}</td></tr>
                `).join('') : '<tr><td colspan="9" class="text-center text-muted">暂无数据</td></tr>'}</tbody></table></div></div></div>
            `;
            {% else %}
            let html = `
                <div class="row g-4">
                    <div class="col-md-3"><div class="stat-card"><div class="number">${data.total_days}</div><div class="label">总天数</div></div></div>
                    <div class="col-md-3"><div class="stat-card" style="border-left-color:#28a745;"><div class="number" style="color:#28a745;">${data.normal_days}</div><div class="label">正常</div></div></div>
                    <div class="col-md-3"><div class="stat-card" style="border-left-color:#ffc107;"><div class="number" style="color:#ffc107;">${data.late_days}</div><div class="label">迟到</div></div></div>
                    <div class="col-md-3"><div class="stat-card" style="border-left-color:#fd7e14;"><div class="number" style="color:#fd7e14;">${data.early_leave_days || 0}</div><div class="label">早退</div></div></div>
                </div>
                <div class="row mt-4">
                    <div class="col-md-4"><div class="card"><div class="card-body"><h6>⏰ 迟到总分钟</h6><h2>${data.total_late_minutes || 0}</h2></div></div></div>
                    <div class="col-md-4"><div class="card"><div class="card-body"><h6>⏰ 早退总分钟</h6><h2>${data.total_early_minutes || 0}</h2></div></div></div>
                    <div class="col-md-4"><div class="card"><div class="card-body"><h6>💪 加班总分钟</h6><h2>${data.total_overtime_minutes || 0}</h2></div></div></div>
                </div>
            `;
            {% endif %}
            container.innerHTML = html;
        });
}

function exportStats() {
    const start = document.getElementById('startDate').value;
    const end = document.getElementById('endDate').value;
    const params = new URLSearchParams();
    if (start) params.append('start_date', start);
    if (end) params.append('end_date', end);
    window.location.href = '/export/stats?' + params.toString();
}

const now = new Date();
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
document.getElementById('startDate').value = firstDay.toISOString().split('T')[0];
document.getElementById('endDate').value = now.toISOString().split('T')[0];

document.getElementById('filterForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const start = document.getElementById('startDate').value;
    const end = document.getElementById('endDate').value;
    if (start && end) loadStats(start, end);
});

loadStats(firstDay.toISOString().split('T')[0], now.toISOString().split('T')[0]);
</script>
{% endblock %}