{% extends "base.html" %}
{% block title %}{% if customer %}编辑{% else %}新增{% endif %}客户 - 本地贷款CRM{% endblock %}
{% block header_title %}{% if customer %}编辑客户{% else %}新增客户{% endif %}{% endblock %}
{% block content %}

<div class="max-w-2xl mx-auto">
    <form method="POST" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6 space-y-5">
        <h2 class="font-semibold text-gray-900">基本信息</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm text-gray-600 mb-1">姓名 <span class="text-red-500">*</span></label>
                <input type="text" name="name" value="{{ customer.name if customer else '' }}" required
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">手机号</label>
                <input type="tel" name="phone" value="{{ customer.phone if customer else '' }}"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">身份证号</label>
                <input type="text" name="id_number" value="{{ customer.id_number if customer else '' }}"
                       placeholder="18位身份证号"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">生日 (月-日)</label>
                <input type="text" name="birthday" value="{{ customer.birthday if customer else '' }}"
                       placeholder="如 05-29，填身份证号后自动生成"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">微信号</label>
                <input type="text" name="wechat" value="{{ customer.wechat if customer else '' }}"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">微信昵称</label>
                <input type="text" name="wechat_nickname" value="{{ customer.wechat_nickname if customer else '' }}"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">公司名称</label>
                <input type="text" name="company" value="{{ customer.company if customer else '' }}"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">职位</label>
                <input type="text" name="position" value="{{ customer.position if customer else '' }}"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">行业</label>
                <select name="industry_id" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
                    <option value="">请选择</option>
                    {% for ind in industries %}
                    <option value="{{ ind.id }}" {% if customer and customer.industry_id == ind.id %}selected{% endif %}>{{ ind.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">地区</label>
                <input type="text" name="region" value="{{ customer.region if customer else '' }}"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">来源渠道</label>
                <select name="source" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
                    {% for s in sources %}
                    <option value="{{ s }}" {% if (customer and customer.source == s) or (not customer and s == '其他') %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
            </div>
            {% if customer %}
            <div>
                <label class="block text-sm text-gray-600 mb-1">客户阶段</label>
                <select name="avatar_stage" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
                    {% for s in stages %}
                    <option value="{{ s }}" {% if customer.avatar_stage == s %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
            <div>
                <label class="block text-sm text-gray-600 mb-1">法院被执行</label>
                <select name="court_executor" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
                    <option value="0" {% if not customer or customer.court_executor == 0 %}selected{% endif %}>未知</option>
                    <option value="1" {% if customer and customer.court_executor == 1 %}selected{% endif %}>否</option>
                    <option value="2" {% if customer and customer.court_executor == 2 %}selected{% endif %}>是</option>
                </select>
            </div>
        </div>

        <div>
            <label class="block text-sm text-gray-600 mb-1">企查查信息</label>
            <textarea name="qichacha_data" rows="2" placeholder="注册资本、成立日期、经营状态、股东信息等..."
                      class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">{{ customer.qichacha_data if customer else '' }}</textarea>
        </div>
        <div>
            <label class="block text-sm text-gray-600 mb-1">法院信息</label>
            <textarea name="court_records" rows="2" placeholder="是否有涉诉、案件类型、案件状态..."
                      class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">{{ customer.court_records if customer else '' }}</textarea>
        </div>

        <h2 class="font-semibold text-gray-900 pt-2">标签</h2>
        {% for cat, tlist in all_tags.items() %}
        <div class="mb-3">
            <p class="text-xs text-gray-400 font-medium mb-2">{{ cat }}</p>
            <div class="flex flex-wrap gap-2">
                {% for t in tlist %}
                {% set is_checked = customer_tag_ids and t.id in customer_tag_ids %}
                <div x-data="{ checked: {{ 'true' if is_checked else 'false' }} }">
                    <input type="checkbox" name="tags" value="{{ t.id }}" class="hidden"
                           :checked="checked">
                    <button type="button" @click="checked = !checked"
                            :class="checked ? 'border-primary bg-blue-50 text-primary font-medium' : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300'"
                            class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full border-2 transition-colors select-none">
                        <span :class="checked ? 'border-primary bg-primary' : 'border-gray-300'"
                              class="w-2.5 h-2.5 rounded-full border-2 flex items-center justify-center transition-colors">
                            <svg x-show="checked" class="w-2 h-2 text-white" viewBox="0 0 12 12" fill="none">
                                <path d="M2.5 6L5 8.5L9.5 3.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        {{ t.name }}
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}

        <div class="flex items-center gap-3 pt-3 border-t border-gray-100 pb-16 md:pb-0">
            <button type="submit" class="px-6 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-blue-700">
                {% if customer %}保存修改{% else %}创建客户{% endif %}
            </button>
            <a href="{% if customer %}/customers/{{ customer.id }}{% else %}/customers{% endif %}"
               class="px-6 py-2.5 border border-gray-300 text-sm rounded-lg text-gray-600 hover:bg-gray-50">取消</a>
        </div>
    </form>
</div>

{% endblock %}