{% 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-calendar3 me-2"></i>工作日历</h4>
    <button class="btn btn-primary btn-sm" onclick="showAddEvent()"><i class="bi bi-plus"></i> 添加事件</button>
</div>

<div class="row g-3">
    <!-- 日历网格 -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <button class="btn btn-sm btn-outline-primary" onclick="changeMonth(-1)"><i class="bi bi-chevron-left"></i></button>
                <h5 id="monthTitle" class="mb-0"></h5>
                <button class="btn btn-sm btn-outline-primary" onclick="changeMonth(1)"><i class="bi bi-chevron-right"></i></button>
            </div>
            <div class="card-body p-2">
                <table class="table table-bordered mb-0" id="calendarGrid">
                    <thead><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="text-danger">六</th><th class="text-danger">日</th></tr></thead>
                    <tbody id="calendarBody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 事件列表 -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header"><i class="bi bi-list-ul me-2"></i>本月事件</div>
            <div class="list-group list-group-flush" style="max-height:500px;overflow-y:auto;">
                {% for e in events %}
                <div class="list-group-item">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>{{ e.title }}</strong><br>
                            <small class="text-muted">{{ e.event_date }} {{ e.event_time or '' }}</small>
                        </div>
                        <span class="badge bg-{{ 'danger' if e.event_type=='紧急' else ('info' if e.event_type=='邮件提醒' else 'primary') }}">{{ e.event_type }}</span>
                    </div>
                    {% if e.description %}<small class="text-muted">{{ e.description[:80] }}</small>{% endif %}
                </div>
                {% else %}
                <div class="list-group-item text-muted">本月暂无事件</div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- 添加事件模态框 -->
<div class="modal fade" id="eventModal" 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">
            <input id="eTitle" class="form-control mb-2" placeholder="事件标题 *">
            <div class="row g-2 mb-2">
                <div class="col-6"><input id="eDate" type="date" class="form-control"></div>
                <div class="col-6"><input id="eTime" type="time" class="form-control"></div>
            </div>
            <select id="eType" class="form-select mb-2">
                <option value="会议">会议</option><option value="汇报">汇报</option><option value="出差">出差</option>
                <option value="培训">培训</option><option value="邮件提醒">邮件提醒</option><option value="其他">其他</option>
            </select>
            <textarea id="eDesc" class="form-control" rows="2" placeholder="备注"></textarea>
        </div>
        <div class="modal-footer"><button class="btn btn-primary" onclick="submitEvent()">保存</button></div>
    </div></div>
</div>
{% endblock %}
{% block extra_js %}
<script>
const events = {{ events | tojson }};
let currentYear, currentMonth;
function initCalendar() {
    const now = new Date();
    currentYear = now.getFullYear(); currentMonth = now.getMonth();
    renderCalendar();
}
function renderCalendar() {
    document.getElementById('monthTitle').textContent = `${currentYear}年${currentMonth+1}月`;
    const firstDay = new Date(currentYear, currentMonth, 1).getDay();
    const daysInMonth = new Date(currentYear, currentMonth+1, 0).getDate();
    const offset = (firstDay === 0) ? 6 : firstDay - 1;
    const today = new Date();
    const todayStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
    const eventDates = {};
    events.forEach(e => { if (!eventDates[e.event_date]) eventDates[e.event_date] = []; eventDates[e.event_date].push(e); });
    let html = '', day = 1;
    for (let w = 0; w < 6 && day <= daysInMonth; w++) {
        html += '<tr>';
        for (let d = 0; d < 7; d++) {
            if ((w === 0 && d < offset) || day > daysInMonth) { html += '<td class="text-muted"></td>'; }
            else {
                const dateStr = `${currentYear}-${String(currentMonth+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
                const isToday = dateStr === todayStr;
                const dayEvents = eventDates[dateStr] || [];
                html += `<td class="${isToday?'bg-primary bg-opacity-10':''}" style="height:70px;vertical-align:top;font-size:0.85rem;">
                    <strong class="${isToday?'text-primary':''}">${day}</strong>`;
                dayEvents.forEach(ev => { html += `<div class="text-truncate small text-info">• ${ev.title}</div>`; });
                html += '</td>';
                day++;
            }
        }
        html += '</tr>';
    }
    document.getElementById('calendarBody').innerHTML = html;
}
function changeMonth(delta) { currentMonth += delta; if (currentMonth > 11) { currentMonth = 0; currentYear++; } if (currentMonth < 0) { currentMonth = 11; currentYear--; } renderCalendar(); }
function showAddEvent() { new bootstrap.Modal(document.getElementById('eventModal')).show(); }
async function submitEvent() {
    const title = document.getElementById('eTitle').value;
    const event_date = document.getElementById('eDate').value;
    if (!title || !event_date) return showToast('请填写标题和日期', 'warning');
    await apiCall('/api/calendar', 'POST', {title, event_date, event_time: document.getElementById('eTime').value, event_type: document.getElementById('eType').value, description: document.getElementById('eDesc').value});
    showToast('事件已添加'); location.reload();
}
initCalendar();
</script>
{% endblock %}