{% extends 'layout/base.html' %}

{% block title %}上传考勤数据 - SmartDSP考勤管理系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-10 mx-auto">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-upload me-2"></i>上传考勤数据
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data" id="uploadForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="week_start" class="form-label">周开始日期</label>
                                    <input type="date" class="form-control" id="week_start" name="week_start" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="week_end" class="form-label">周结束日期</label>
                                    <input type="date" class="form-control" id="week_end" name="week_end" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="attendance_file" class="form-label">
                                        <i class="fas fa-clock me-2"></i>考勤记录文件 <span class="text-danger">*</span>
                                    </label>
                                    <input type="file" class="form-control" id="attendance_file" name="attendance_file"
                                           accept=".xlsx,.xls" required>
                                    <div class="form-text">必须上传考勤记录Excel文件</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="leave_file" class="form-label">
                                        <i class="fas fa-file-alt me-2"></i>请假单文件 <span class="text-muted">(可选)</span>
                                    </label>
                                    <input type="file" class="form-control" id="leave_file" name="leave_file"
                                           accept=".xlsx,.xls">
                                    <div class="form-text">如有请假记录，请上传请假单Excel文件</div>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle me-2"></i>导入说明：</h6>
                            <ul class="mb-0">
                                <li><strong>考勤记录文件：</strong>包含姓名列和每日考勤数据，系统会自动计算工作时长、迟到次数等</li>
                                <li><strong>请假单文件：</strong>包含请假人员、请假开始时间、请假结束时间等信息</li>
                                <li><strong>处理规则：</strong>
                                    <ul>
                                        <li>请假时间内的缺卡记录会自动转换为请假</li>
                                        <li>请假时间内的正常打卡记录（正常、迟到、早退）保持不变</li>
                                    </ul>
                                </li>
                                <li>如果记录已存在，将会更新现有数据</li>
                                <li>请确保学生信息已在系统中注册</li>
                            </ul>
                        </div>

                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle me-2"></i>注意事项：</h6>
                            <ul class="mb-0">
                                <li>请假单中的时间格式会自动转换（支持数字格式和标准日期格式）</li>
                                <li>请假人员姓名必须与学生表中的姓名完全一致</li>
                                <li>建议先上传考勤记录，再选择性上传请假单</li>
                            </ul>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{{ url_for('admin.attendance_management') }}"
                               class="btn btn-secondary me-md-2">
                                <i class="fas fa-arrow-left me-2"></i>返回
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-upload me-2"></i>开始导入
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const weekStartInput = document.getElementById('week_start');
    const weekEndInput = document.getElementById('week_end');
    const form = document.getElementById('uploadForm');
    const submitBtn = document.getElementById('submitBtn');
    const attendanceFileInput = document.getElementById('attendance_file');
    const leaveFileInput = document.getElementById('leave_file');

    // 自动设置周结束日期
    weekStartInput.addEventListener('change', function() {
        if (this.value) {
            const startDate = new Date(this.value);
            const endDate = new Date(startDate);
            endDate.setDate(startDate.getDate() + 6);

            weekEndInput.value = endDate.toISOString().split('T')[0];
        }
    });

    // 文件选择提示
    attendanceFileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            console.log('已选择考勤记录文件:', this.files[0].name);
        }
    });

    leaveFileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            console.log('已选择请假单文件:', this.files[0].name);
        }
    });

    // 表单提交处理
    form.addEventListener('submit', function(e) {
        const hasAttendanceFile = attendanceFileInput.files.length > 0;

        if (!hasAttendanceFile) {
            e.preventDefault();
            alert('请选择考勤记录文件！');
            return false;
        }

        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>导入中...';
        submitBtn.disabled = true;

        // 显示处理进度提示
        const progressAlert = document.createElement('div');
        progressAlert.className = 'alert alert-info mt-3';
        progressAlert.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>正在处理文件，请稍候...';
        form.appendChild(progressAlert);
    });
});
</script>
{% endblock %}