{% extends "base.html" %}
{% load custom_filters %}

{% block content %}
<div class="container mx-auto p-4">
    <!-- 筛选表单 -->
    <form method="GET" class="mb-8 p-4 bg-gray-100 rounded-lg">
        <div class="flex flex-wrap gap-4">
            <!-- 年份选择 -->
            <div class="flex flex-col">
                <label class="text-sm font-medium">选择年份</label>
                <select name="year" class="mt-1 p-2 border rounded">
                    <option value="all">全部年份</option>
                    <option value="2023" {% if selected_year == '2023' %}selected{% endif %}>2023年</option>
                    <option value="2024" {% if selected_year == '2024' %}selected{% endif %}>2024年</option>
                    <option value="2025" {% if selected_year == '2025' %}selected{% endif %}>2025年</option>
                </select>
            </div>

            <!-- 分支机构选择 -->
            <div class="flex flex-col">
                <label class="text-sm font-medium">分支机构</label>
                <select name="branch" class="mt-1 p-2 border rounded">
                    <option value="all" {% if selected_branch == 'all' %}selected{% endif %}>全部分支机构</option>
                    {% for branch in branches %}
                    <option value="{{ branch.id }}" {% if selected_branch == branch.id|stringformat:"s" %}selected{% endif %}>
                        {{ branch.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <!-- 状态选择 -->
            <div class="flex flex-col">
                <label class="text-sm font-medium">活动状态</label>
                <select name="status" class="mt-1 p-2 border rounded">
                    <option value="completed" {% if selected_status == 'completed' %}selected{% endif %}>已完成</option>
                    <option value="ongoing" {% if selected_status == 'ongoing' %}selected{% endif %}>未完成</option>
                </select>
            </div>

            <button type="submit" class="self-end px-4 py-2 bg-blue-200 text-white rounded hover:bg-blue-700">
                筛选
            </button>
        </div>
    </form>

    <!-- 统计结果展示 -->
    <div class="mt-4">
        <h2 class="text-xl font-bold mb-4">活动统计结果（共{{ activities.count }}条）</h2>
        <table class="min-w-full border-collapse border border-gray-300">
            <thead>
                <tr>
                    <th class="p-2 border border-gray-300 bg-gray-100">活动名称</th>
                    <th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
                    <th class="p-2 border border-gray-300 bg-gray-100">活动分类</th>
                    <th class="p-2 border border-gray-300 bg-gray-100">开始时间</th>
                    <th class="p-2 border border-gray-300 bg-gray-100">结束时间</th>
                </tr>
            </thead>
            <tbody>
                {% for activity in activities %}
                <tr>
                    <td class="p-2 border border-gray-300">{{ activity.name }}</td>
                    <td class="p-2 border border-gray-300">{{ activity.branch.name }}</td>
                    <td class="p-2 border border-gray-300">{{ activity.scope }}</td>
                    <td class="p-2 border border-gray-300">{{ activity.start_time|format_chinese_full_date }}</td>
                    <td class="p-2 border border-gray-300">{{ activity.end_time|format_chinese_full_date|default:"未结束" }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td class="p-2 border border-gray-300 text-center" colspan="4">无符合条件的活动记录</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}