{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-list-ul"></i> 考勤记录</h2>
    {% if current_user.is_admin() %}
    <button class="btn btn-success" onclick="exportRecords()">
        <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>
                <button type="button" class="btn btn-outline-secondary ms-2" onclick="loadRecords()">重置</button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <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>
                    </tr>
                </thead>
                <tbody id="recordsBody">
                    <tr><td colspan="8" class="text-center text-muted">加载中...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function loadRecords(start_date, end_date) {
    const url = '/api/records' + (start_date && end_date ? `?start_date=${start_date}&end_date=${end_date}` : '');
    fetch(url)
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('recordsBody');
            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">暂无记录</td></tr>';
                return;
            }
            tbody.innerHTML = data.map(r => `
                <tr>
                    <td>${r.check_date}</td>
                    <td>${r.real_name}</td>
                    <td>${r.department || '-'}</td>
                    <td>${r.check_in_time || '-'}</td>
                    <td>${r.check_out_time || '-'}</td>
                    <td>
                        ${r.status === 'normal' ? '<span class="badge badge-approved">正常</span>' :
                          r.status === 'late' ? '<span class="badge badge-pending">迟到</span>' :
                          r.status === 'early_leave' ? '<span class="badge badge-rejected">早退</span>' :
                          '<span class="badge bg-secondary">' + r.status + '</span>'}
                    </td>
                    <td>${r.late_minutes || 0}分钟</td>
                    <td>${r.overtime_minutes || 0}分钟</td>
                </tr>
            `).join('');
        });
}

function exportRecords() {
    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/records?' + 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) loadRecords(start, end);
    else loadRecords();
});

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