{% 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-list-task me-2"></i>任务管理</h4>
    <div>
        <a class="btn btn-outline-success btn-sm" href="/api/export/tasks"><i class="bi bi-download"></i> 导出CSV</a>
        <button class="btn btn-primary btn-sm" onclick="showAddTask()"><i class="bi bi-plus"></i> 新建任务</button>
    </div>
</div>

<div class="mb-3">
    <a href="/tasks" class="btn btn-sm {% if not current_status %}btn-primary{% else %}btn-outline-primary{% endif %}">全部</a>
    <a href="/tasks?status=pending" class="btn btn-sm btn-outline-warning">待处理</a>
    <a href="/tasks?status=in_progress" class="btn btn-sm btn-outline-primary">进行中</a>
    <a href="/tasks?status=completed" class="btn btn-sm btn-outline-success">已完成</a>
    <a href="/tasks?status=overdue" class="btn btn-sm btn-outline-danger">已逾期</a>
</div>

{% if not current_status %}
<div class="row g-3 mb-4">
    {% for status_key, status_label, color in [('pending','待处理','warning'),('in_progress','进行中','primary'),('completed','已完成','success'),('overdue','已逾期','danger')] %}
    <div class="col-lg-3">
        <div class="card">
            <div class="card-header bg-{{ color }} bg-opacity-10 text-{{ color }}">{{ status_label }}</div>
            <div class="card-body p-2" style="max-height:400px;overflow-y:auto;">
                {% for t in tasks if t.status == status_key %}
                <div class="card mb-2 p-2 {% if status_key == 'completed' %}bg-light{% endif %}">
                    <div class="d-flex justify-content-between align-items-start">
                        <strong class="small" style="cursor:pointer;" onclick='editTask({{ t | tojson }})'>{{ t.title[:30] }}</strong>
                        <span class="badge bg-{{ 'danger' if t.priority=='urgent' else ('warning' if t.priority=='high' else 'secondary') }}">{{ t.priority }}</span>
                    </div>
                    <small class="text-muted">{{ t.assignee_name or '未分配' }} | {{ t.deadline or '无截止' }}</small>
                    {% if status_key != 'completed' %}
                    <div class="mt-1">
                        <button class="btn btn-sm btn-outline-success py-0 px-1" onclick="updateTask({{ t.id }}, '{{ status_key }}')"><i class="bi bi-check"></i></button>
                        <button class="btn btn-sm btn-outline-primary py-0 px-1" onclick='editTask({{ t | tojson }})'><i class="bi bi-pencil"></i></button>
                        <button class="btn btn-sm btn-outline-danger py-0 px-1" onclick="deleteTask({{ t.id }})"><i class="bi bi-trash"></i></button>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                {% if tasks|selectattr('status', 'eq', status_key)|list|length == 0 %}
                <small class="text-muted ps-2">无</small>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<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></tr></thead>
            <tbody>
            {% for t in tasks %}
            <tr>
                <td><strong style="cursor:pointer;" onclick='editTask({{ t | tojson }})'>{{ t.title }}</strong>{% if t.description %}<br><small class="text-muted">{{ t.description[:50] }}</small>{% endif %}</td>
                <td>{{ t.assignee_name or '未分配' }}</td>
                <td><span class="badge bg-{{ 'danger' if t.priority=='urgent' else ('warning' if t.priority=='high' else ('primary' if t.priority=='normal' else 'secondary')) }}">{{ t.priority }}</span></td>
                <td>{{ t.deadline or '-' }}</td>
                <td><span class="badge bg-{{ 'success' if t.status=='completed' else ('danger' if t.status=='overdue' else ('primary' if t.status=='in_progress' else 'warning')) }}">{{ {'pending':'待处理','in_progress':'进行中','completed':'已完成','overdue':'已逾期','cancelled':'已取消'}[t.status] }}</span></td>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick='editTask({{ t | tojson }})'><i class="bi bi-pencil"></i></button>
                    {% if t.status != 'completed' %}
                    <button class="btn btn-sm btn-outline-success" onclick="updateTask({{ t.id }}, '{{ t.status }}')"><i class="bi bi-check"></i></button>
                    {% endif %}
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteTask({{ t.id }})"><i class="bi bi-trash"></i></button>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="text-center text-muted py-4">暂无任务</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<div class="modal fade" id="taskModal" tabindex="-1">
    <div class="modal-dialog modal-lg"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title" id="taskModalTitle">新建任务</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <input type="hidden" id="tId">
            <input id="tTitle" class="form-control mb-2" placeholder="任务标题 *">
            <textarea id="tDesc" class="form-control mb-2" rows="2" placeholder="任务描述"></textarea>
            <div class="row g-2 mb-2">
                <div class="col-6"><select id="tAssignee" class="form-select">
                    <option value="">选择负责人</option>
                    {% for e in employees %}<option value="{{ e.id }}">{{ e.name }}</option>{% endfor %}
                </select></div>
                <div class="col-3"><select id="tPriority" class="form-select">
                    <option value="normal">普通</option><option value="high">高</option><option value="urgent">紧急</option><option value="low">低</option>
                </select></div>
                <div class="col-3"><input id="tDeadline" type="date" class="form-control"></div>
            </div>
            <div id="tStatusRow" class="row g-2 d-none">
                <div class="col-12"><label class="form-label small">状态</label>
                    <select id="tStatus" class="form-select">
                        <option value="pending">待处理</option>
                        <option value="in_progress">进行中</option>
                        <option value="completed">已完成</option>
                        <option value="cancelled">已取消</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="modal-footer"><button class="btn btn-primary" onclick="submitTask()">保存</button></div>
    </div></div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function showAddTask() {
    document.getElementById('taskModalTitle').textContent = '新建任务';
    document.getElementById('tId').value = '';
    ['tTitle','tDesc','tAssignee','tDeadline'].forEach(id => {
        const el = document.getElementById(id);
        if (el.tagName === 'SELECT') el.selectedIndex = 0;
        else el.value = '';
    });
    document.getElementById('tPriority').value = 'normal';
    document.getElementById('tStatusRow').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('taskModal')).show();
}
async function submitTask() {
    const id = document.getElementById('tId').value;
    const payload = {
        title: document.getElementById('tTitle').value,
        description: document.getElementById('tDesc').value,
        assignee_id: document.getElementById('tAssignee').value || null,
        priority: document.getElementById('tPriority').value,
        deadline: document.getElementById('tDeadline').value || null
    };
    if (!payload.title) return showToast('请输入任务标题', 'warning');
    if (id) {
        if (document.getElementById('tStatusRow').classList.contains('d-none') === false) {
            payload.status = document.getElementById('tStatus').value;
        }
        await apiCall('/api/tasks/' + id, 'PUT', payload);
        showToast('已更新');
    } else {
        await apiCall('/api/tasks', 'POST', payload);
        showToast('任务已创建');
    }
    location.reload();
}
async function updateTask(id, currentStatus) {
    const next = currentStatus === 'pending' ? 'in_progress' : (currentStatus === 'in_progress' ? 'completed' : currentStatus);
    if (next === 'completed' && !confirm('确定标记为已完成？')) return;
    const r = await apiCall('/api/tasks/' + id, 'PUT', {status: next});
    if (r.error) return showToast(r.error, 'danger');
    showToast('状态已更新'); location.reload();
}
async function deleteTask(id) {
    if (!confirm('确定删除该任务？此操作不可恢复。')) return;
    await apiCall('/api/tasks/' + id, 'DELETE');
    showToast('已删除'); location.reload();
}
function editTask(t) {
    document.getElementById('taskModalTitle').textContent = '编辑任务 - ' + t.title;
    document.getElementById('tId').value = t.id;
    document.getElementById('tTitle').value = t.title || '';
    document.getElementById('tDesc').value = t.description || '';
    document.getElementById('tAssignee').value = t.assignee_id || '';
    document.getElementById('tPriority').value = t.priority || 'normal';
    document.getElementById('tDeadline').value = t.deadline || '';
    document.getElementById('tStatus').value = t.status || 'pending';
    document.getElementById('tStatusRow').classList.remove('d-none');
    new bootstrap.Modal(document.getElementById('taskModal')).show();
}
</script>
{% endblock %}