{% extends "base.html" %}
{% block title %}客户管理 - 本地贷款CRM{% endblock %}
{% block header_title %}客户管理 ({{ total }}){% endblock %}
{% block content %}

<!-- Filters bar -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-3 mb-4" x-data="{showFilters: false}">
    <div class="flex items-center gap-2">
        <form method="GET" class="flex-1 flex items-center gap-2">
            <input type="text" name="search" value="{{ search }}" placeholder="搜索姓名/手机/公司..."
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            <button type="submit" class="px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-blue-700">搜索</button>
        </form>
        <button @click="showFilters = !showFilters" class="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 md:hidden">
            筛选
        </button>
        <a href="/customers/new" class="hidden md:inline-flex px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-blue-700">+ 新增</a>
    </div>

    <!-- Expandable filters -->
    <div x-show="showFilters" x-transition class="mt-3 pt-3 border-t border-gray-100 space-y-3" id="filter-section">
        <form method="GET" class="space-y-3">
            <input type="hidden" name="search" value="{{ search }}">
            <div class="flex flex-wrap gap-2">
                <select name="stage" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    <option value="">全部阶段</option>
                    {% for s in stages %}
                    <option value="{{ s }}" {% if stage == s %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
                <select name="source" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    <option value="">全部来源</option>
                    {% for s in sources %}
                    <option value="{{ s }}" {% if source == s %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
                <select name="sort_by" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    <option value="created_at" {% if sort_by == 'created_at' %}selected{% endif %}>按创建时间</option>
                    <option value="updated_at" {% if sort_by == 'updated_at' %}selected{% endif %}>按更新时间</option>
                    <option value="name" {% if sort_by == 'name' %}selected{% endif %}>按姓名</option>
                </select>
                <button type="submit" class="px-4 py-2 bg-gray-900 text-white text-sm rounded-lg">应用筛选</button>
                <a href="/customers" class="px-4 py-2 border border-gray-300 text-sm rounded-lg text-gray-600 hover:bg-gray-50">清除</a>
            </div>
        </form>
    </div>

    <!-- Desktop filters (always visible) -->
    <div class="hidden md:flex md:items-center md:gap-2 md:mt-3 md:pt-3 md:border-t md:border-gray-100">
        <form method="GET" class="flex flex-wrap gap-2 w-full items-center">
            <input type="hidden" name="search" value="{{ search }}">
            <select name="stage" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="">全部阶段</option>
                {% for s in stages %}
                <option value="{{ s }}" {% if stage == s %}selected{% endif %}>{{ s }}</option>
                {% endfor %}
            </select>
            <select name="source" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="">全部来源</option>
                {% for s in sources %}
                <option value="{{ s }}" {% if source == s %}selected{% endif %}>{{ s }}</option>
                {% endfor %}
            </select>
            <select name="sort_by" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="created_at" {% if sort_by == 'created_at' %}selected{% endif %}>按创建时间</option>
                <option value="updated_at" {% if sort_by == 'updated_at' %}selected{% endif %}>按更新时间</option>
                <option value="name" {% if sort_by == 'name' %}selected{% endif %}>按姓名</option>
            </select>
            <button type="submit" class="px-4 py-2 bg-gray-900 text-white text-sm rounded-lg">筛选</button>
            <a href="/customers" class="px-4 py-2 border border-gray-300 text-sm rounded-lg text-gray-600 hover:bg-gray-50">清除</a>
        </form>
    </div>
</div>

<!-- Customer list -->
{% if customers %}
<!-- Mobile: cards -->
<div class="md:hidden space-y-3">
    {% for c in customers %}
    <a href="/customers/{{ c.id }}" class="block bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition-all">
        <div class="flex items-start justify-between mb-2">
            <div>
                <span class="font-semibold text-gray-900">{{ c.name }}</span>
                {% if c.company %}<span class="text-xs text-gray-500 ml-2">{{ c.company }}</span>{% endif %}
            </div>
            <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ c.avatar_stage }}</span>
        </div>
        <div class="text-xs text-gray-500 space-y-0.5">
            {% if c.phone %}<div>📱 {{ c.phone }}</div>{% endif %}
            {% if c.source %}<div>来源: {{ c.source }}</div>{% endif %}
            <div>{{ c.created_at[:10] if c.created_at else '' }}</div>
        </div>
        {% if c.id in customer_tags and customer_tags[c.id] %}
        <div class="flex flex-wrap gap-1 mt-2">
            {% for t in customer_tags[c.id][:5] %}
            <span class="text-[10px] px-1.5 py-0.5 rounded-full" style="background:{{ t.color }}20;color:{{ t.color }}">{{ t.name }}</span>
            {% endfor %}
            {% if customer_tags[c.id]|length > 5 %}
            <span class="text-[10px] text-gray-400">+{{ customer_tags[c.id]|length - 5 }}</span>
            {% endif %}
        </div>
        {% endif %}
    </a>
    {% endfor %}
</div>

<!-- Desktop: table -->
<div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-600">
            <tr>
                <th class="text-left px-4 py-3 font-medium">姓名</th>
                <th class="text-left px-4 py-3 font-medium">手机号</th>
                <th class="text-left px-4 py-3 font-medium hidden lg:table-cell">公司</th>
                <th class="text-left px-4 py-3 font-medium">阶段</th>
                <th class="text-left px-4 py-3 font-medium hidden lg:table-cell">来源</th>
                <th class="text-left px-4 py-3 font-medium">标签</th>
                <th class="text-left px-4 py-3 font-medium hidden xl:table-cell">创建时间</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            {% for c in customers %}
            <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='/customers/{{ c.id }}'">
                <td class="px-4 py-3 font-medium text-gray-900">
                    {{ c.name }}
                </td>
                <td class="px-4 py-3 text-gray-600">{{ c.phone or '-' }}</td>
                <td class="px-4 py-3 text-gray-600 hidden lg:table-cell truncate max-w-[180px]">{{ c.company or '-' }}</td>
                <td class="px-4 py-3"><span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ c.avatar_stage }}</span></td>
                <td class="px-4 py-3 text-gray-600 hidden lg:table-cell">{{ c.source }}</td>
                <td class="px-4 py-3">
                    {% if c.id in customer_tags and customer_tags[c.id] %}
                    <div class="flex flex-wrap gap-1">
                        {% for t in customer_tags[c.id][:3] %}
                        <span class="text-[10px] px-1.5 py-0.5 rounded-full whitespace-nowrap" style="background:{{ t.color }}20;color:{{ t.color }}">{{ t.name }}</span>
                        {% endfor %}
                    </div>
                    {% else %}<span class="text-gray-400">-</span>{% endif %}
                </td>
                <td class="px-4 py-3 text-gray-600 hidden xl:table-cell">{{ c.created_at[:10] if c.created_at else '' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Pagination -->
{% if total > 20 %}
<div class="flex items-center justify-center gap-2 mt-4">
    {% if page > 1 %}
    <a href="?page={{ page - 1 }}&search={{ search }}&stage={{ stage }}&source={{ source }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}" class="px-3 py-1.5 border rounded-lg text-sm hover:bg-gray-50">上一页</a>
    {% endif %}
    <span class="text-sm text-gray-500">{{ page }} / {{ (total + 19) // 20 }}</span>
    {% if page * 20 < total %}
    <a href="?page={{ page + 1 }}&search={{ search }}&stage={{ stage }}&source={{ source }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}" class="px-3 py-1.5 border rounded-lg text-sm hover:bg-gray-50">下一页</a>
    {% endif %}
</div>
{% endif %}

{% else %}
<div class="text-center py-16">
    <div class="text-4xl mb-4">📋</div>
    <p class="text-gray-500 mb-4">暂无客户数据</p>
    <a href="/customers/new" class="inline-flex px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-blue-700">添加第一个客户</a>
</div>
{% endif %}

{% endblock %}