{% extends "layout.html" %}
{% block title %}员工管理 - 中层领导工作助理{% endblock %}
{% block content %}
<div class="page-header d-flex justify-content-between align-items-center">
    <h4><i class="bi bi-people me-2"></i>员工管理</h4>
    <div>
        <a class="btn btn-outline-success btn-sm" href="/api/export/employees"><i class="bi bi-download"></i> 导出CSV</a>
        <button class="btn btn-primary btn-sm" onclick="showAddModal()"><i class="bi bi-plus"></i> 添加员工</button>
        <button class="btn btn-outline-primary btn-sm" onclick="showImportModal()"><i class="bi bi-upload"></i> 批量导入</button>
    </div>
</div>

<!-- 分组筛选 -->
<div class="mb-3">
    <a href="/employees" class="btn btn-sm {% if not request.args.get('group') %}btn-primary{% else %}btn-outline-primary{% endif %}">全部</a>
    {% for g in groups %}
    <a href="/employees?group={{ g.group_name }}" class="btn btn-sm btn-outline-primary">{{ g.group_name }} ({{ g.cnt }})</a>
    {% endfor %}
</div>

<!-- 员工列表 -->
<div class="card">
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead><tr><th>姓名</th><th>邮箱</th><th>电话</th><th>部门</th><th>岗位</th><th>分组</th><th>操作</th></tr></thead>
            <tbody>
            {% for emp in employees %}
            <tr>
                <td><strong>{{ emp.name }}</strong></td>
                <td>{{ emp.email or '-' }}</td>
                <td>{{ emp.phone or '-' }}</td>
                <td>{{ emp.department or '-' }}</td>
                <td>{{ emp.position or '-' }}</td>
                <td><span class="badge bg-info">{{ emp.group_name }}</span></td>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick='editEmp({{ emp | tojson }})'><i class="bi bi-pencil"></i></button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteEmp({{ emp.id }}, '{{ emp.name }}')"><i class="bi bi-trash"></i></button>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="7" class="text-center text-muted py-4">暂无员工数据，请添加或导入</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- 添加/编辑员工模态框 -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title" id="modalTitle">添加员工</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <input type="hidden" id="empId">
            <input id="empName" class="form-control mb-2" placeholder="姓名 *">
            <div class="row g-2 mb-2">
                <div class="col-6"><input id="empEmail" class="form-control" placeholder="邮箱"></div>
                <div class="col-6"><input id="empPhone" class="form-control" placeholder="电话"></div>
            </div>
            <div class="row g-2 mb-2">
                <div class="col-6"><input id="empDept" class="form-control" placeholder="部门"></div>
                <div class="col-6"><input id="empPos" class="form-control" placeholder="岗位"></div>
            </div>
            <input id="empGroup" class="form-control mb-2" placeholder="分组（默认组）" value="默认组">
            <textarea id="empWork" class="form-control" rows="2" placeholder="工作内容"></textarea>
        </div>
        <div class="modal-footer"><button class="btn btn-primary" onclick="submitEmployee()">保存</button></div>
    </div></div>
</div>

<!-- 导入模态框 -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">批量导入员工</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <p class="text-muted">支持 .xlsx（Excel）和 .docx（Word）格式</p>
            <input type="file" id="importFile" class="form-control" accept=".xlsx,.xls,.docx">
            <div id="importResult" class="mt-3"></div>
        </div>
        <div class="modal-footer"><button class="btn btn-primary" onclick="submitImport()">导入</button></div>
    </div></div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function showAddModal() {
    document.getElementById('modalTitle').textContent = '添加员工';
    document.getElementById('empId').value = '';
    ['empName','empEmail','empPhone','empDept','empPos','empWork'].forEach(id => document.getElementById(id).value = '');
    document.getElementById('empGroup').value = '默认组';
    new bootstrap.Modal(document.getElementById('addModal')).show();
}
function showImportModal() { new bootstrap.Modal(document.getElementById('importModal')).show(); }
async function submitEmployee() {
    const id = document.getElementById('empId').value;
    const payload = {
        name: document.getElementById('empName').value,
        email: document.getElementById('empEmail').value,
        phone: document.getElementById('empPhone').value,
        department: document.getElementById('empDept').value,
        position: document.getElementById('empPos').value,
        group_name: document.getElementById('empGroup').value || '默认组',
        work_content: document.getElementById('empWork').value
    };
    if (!payload.name) return showToast('请输入姓名', 'warning');
    if (id) {
        await apiCall('/api/employees/' + id, 'PUT', payload);
        showToast('已更新');
    } else {
        await apiCall('/api/employees', 'POST', payload);
        showToast('员工已添加');
    }
    location.reload();
}
async function submitImport() {
    const fileInput = document.getElementById('importFile');
    if (!fileInput.files.length) return showToast('请选择文件', 'warning');
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    const res = await fetch('/api/employees/import', {method:'POST', body: formData});
    const data = await res.json();
    if (data.error) {
        document.getElementById('importResult').innerHTML = '<div class="alert alert-danger">' + data.error + '</div>';
    } else {
        showToast('成功导入 ' + data.imported + ' 名员工');
        setTimeout(() => location.reload(), 800);
    }
}
async function deleteEmp(id, name) {
    if (!confirm('确定删除 ' + name + '？此操作会保留历史任务关联。')) return;
    await apiCall('/api/employees/' + id, 'DELETE');
    showToast('已删除'); location.reload();
}
function editEmp(emp) {
    document.getElementById('modalTitle').textContent = '编辑员工 - ' + emp.name;
    document.getElementById('empId').value = emp.id;
    document.getElementById('empName').value = emp.name || '';
    document.getElementById('empEmail').value = emp.email || '';
    document.getElementById('empPhone').value = emp.phone || '';
    document.getElementById('empDept').value = emp.department || '';
    document.getElementById('empPos').value = emp.position || '';
    document.getElementById('empGroup').value = emp.group_name || '默认组';
    document.getElementById('empWork').value = emp.work_content || '';
    new bootstrap.Modal(document.getElementById('addModal')).show();
}
</script>
{% endblock %}