{% extends "layout.html" %}
{% block title %}1对1谈话 - 中层领导工作助理{% endblock %}
{% block content %}
<div class="page-header d-flex justify-content-between align-items-center">
    <h4><i class="bi bi-chat-square-text me-2"></i>1对1谈话记录</h4>
    <button class="btn btn-primary btn-sm" onclick="showAddModal()"><i class="bi bi-plus"></i> 新增记录</button>
</div>

<div class="row g-3">
    <div class="col-lg-3">
        <div class="card">
            <div class="card-header">员工</div>
            <div class="list-group list-group-flush" id="employeeList">
                {% for e in employees %}
                <button class="list-group-item list-group-item-action" data-emp-id="{{ e.id }}" onclick="loadRecords({{ e.id }}, this)">
                    {{ e.name }} <small class="text-muted">{{ e.position or '' }}</small>
                </button>
                {% else %}
                <div class="list-group-item text-muted">暂无员工</div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="col-lg-9">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span id="recordsTitle">选择员工查看记录</span>
                <span id="recordSummary" class="text-muted small"></span>
            </div>
            <div class="card-body" id="recordList" style="max-height:600px;overflow-y:auto;">
                <div class="text-center text-muted py-5">
                    <i class="bi bi-chat-left fs-1"></i>
                    <p class="mt-2">从左侧选择员工</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="recordModal" tabindex="-1">
    <div class="modal-dialog modal-lg"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title" id="recordModalTitle">新增谈话记录</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <div class="row g-2 mb-2">
                <div class="col-6"><label class="form-label small">员工</label>
                    <select id="rEmployee" class="form-select">
                        {% for e in employees %}<option value="{{ e.id }}">{{ e.name }}</option>{% endfor %}
                    </select>
                </div>
                <div class="col-3"><label class="form-label small">日期</label><input id="rDate" type="date" class="form-control"></div>
                <div class="col-3"><label class="form-label small">心情</label>
                    <select id="rMood" class="form-select">
                        <option value="great">愉快</option><option value="good">良好</option><option value="neutral" selected>一般</option>
                        <option value="concerned">担忧</option><option value="bad">差</option>
                    </select>
                </div>
            </div>
            <label class="form-label small">谈话内容</label>
            <textarea id="rContent" class="form-control mb-2" rows="5" placeholder="本次谈话讨论了什么、员工的反馈、情绪状态等"></textarea>
            <label class="form-label small">行动项（每行一条）</label>
            <textarea id="rActionItems" class="form-control mb-2" rows="2" placeholder="例如：&#10;下周提交优化方案&#10;周五前完成培训"></textarea>
            <label class="form-label small">整体评分（1-5）</label>
            <input id="rRating" type="number" min="1" max="5" class="form-control" placeholder="可选，1=很差 5=很好">
        </div>
        <div class="modal-footer"><button class="btn btn-primary" onclick="submitRecord()">保存</button></div>
    </div></div>
</div>
{% endblock %}
{% block extra_js %}
<script>
let currentEmployeeId = null;
function showAddModal() {
    document.getElementById('recordModalTitle').textContent = '新增谈话记录';
    document.getElementById('rDate').value = new Date().toISOString().split('T')[0];
    if (currentEmployeeId) document.getElementById('rEmployee').value = currentEmployeeId;
    new bootstrap.Modal(document.getElementById('recordModal')).show();
}
async function submitRecord() {
    const items = document.getElementById('rActionItems').value.split('\n').map(s => s.trim()).filter(Boolean);
    const payload = {
        employee_id: parseInt(document.getElementById('rEmployee').value),
        meeting_date: document.getElementById('rDate').value,
        content: document.getElementById('rContent').value,
        mood: document.getElementById('rMood').value,
        action_items: items,
        rating: document.getElementById('rRating').value || null
    };
    if (!payload.employee_id || !payload.content) return showToast('请填写员工和内容', 'warning');
    await apiCall('/api/one-on-one', 'POST', payload);
    showToast('已记录');
    bootstrap.Modal.getInstance(document.getElementById('recordModal')).hide();
    if (currentEmployeeId) loadRecords(currentEmployeeId);
}
async function loadRecords(empId, btn) {
    currentEmployeeId = empId;
    document.querySelectorAll('#employeeList .list-group-item').forEach(el => el.classList.remove('active'));
    if (btn) btn.classList.add('active');
    const records = await apiCall('/api/one-on-one?employee_id=' + empId);
    document.getElementById('recordsTitle').textContent = '谈话记录（' + records.length + '）';
    if (!records.length) {
        document.getElementById('recordList').innerHTML = '<div class="text-center text-muted py-4">暂无记录</div>';
        return;
    }
    let html = '';
    records.forEach(r => {
        const items = (r.action_items || []).map(i => '<li>' + escapeHtml(i) + '</li>').join('');
        const stars = r.rating ? '★'.repeat(r.rating) + '☆'.repeat(5 - r.rating) : '<span class="text-muted">未评分</span>';
        html += '<div class="border rounded p-3 mb-2">' +
            '<div class="d-flex justify-content-between mb-2">' +
                '<strong>' + escapeHtml(r.employee_name) + '</strong>' +
                '<span><span class="badge bg-secondary me-2">' + r.mood_label + '</span><span class="text-warning">' + stars + '</span></span>' +
            '</div>' +
            '<div class="text-muted small mb-1">📅 ' + r.meeting_date + '</div>' +
            '<div class="mb-2" style="white-space:pre-wrap;">' + escapeHtml(r.content) + '</div>' +
            (items ? '<div class="small"><strong>行动项：</strong><ul class="mb-0">' + items + '</ul></div>' : '') +
        '</div>';
    });
    document.getElementById('recordList').innerHTML = html;
}
function escapeHtml(s) {
    return String(s || '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]);
}
</script>
{% endblock %}