{% extends "base.html" %}
{% block title %}产品管理 - 本地贷款CRM{% endblock %}
{% block header_title %}产品管理{% endblock %}
{% block content %}

<div x-data="{showForm: false}" class="space-y-6">
    <div class="flex items-center justify-between flex-wrap gap-2">
        <div class="flex gap-2">
            <a href="/products" class="text-sm px-3 py-1.5 rounded-lg bg-gray-900 text-white">产品列表</a>
            <a href="/products/match" class="text-sm px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200">客户匹配</a>
            <a href="/products/rate-sensitive" class="text-sm px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200">利率敏感</a>
        </div>
        <button @click="showForm = !showForm" class="px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-blue-700">+ 新增产品</button>
    </div>

    <!-- Add form -->
    <div x-show="showForm" x-transition class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="POST" action="/products/create" class="space-y-3">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">产品名称</label>
                    <input type="text" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">最低利率(%)</label>
                    <input type="number" name="rate_min" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">最高利率(%)</label>
                    <input type="number" name="rate_max" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">最低额度(万)</label>
                    <input type="number" name="amount_min" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">最高额度(万)</label>
                    <input type="number" name="amount_max" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">期限选项(JSON)</label>
                    <input type="text" name="term_options" placeholder='["6","12","24","36"]' class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">准入条件(JSON)</label>
                <textarea name="requirements" rows="2" placeholder='{"require_asset": true, "max_credit_queries": 4}' class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"></textarea>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">禁入条件(JSON)</label>
                <textarea name="exclusions" rows="2" placeholder='{"industries": ["房地产", "KTV"]}' class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"></textarea>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="px-4 py-2 bg-primary text-white text-sm rounded-lg">保存</button>
                <button type="button" @click="showForm = false" class="px-4 py-2 border border-gray-300 text-sm rounded-lg">取消</button>
            </div>
        </form>
    </div>

    <!-- Product list -->
    <div class="space-y-3">
        {% if products %}
        {% for p in products %}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            <div class="flex items-center justify-between flex-wrap gap-2">
                <div class="min-w-0">
                    <h3 class="font-medium text-gray-900">{{ p.name }}</h3>
                    <div class="flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-500 mt-1">
                        <span>利率: {{ p.rate_min or '?' }}%-{{ p.rate_max or '?' }}%</span>
                        <span>额度: {{ p.amount_min or '?' }}-{{ p.amount_max or '?' }}万</span>
                        <span>期限: {{ p.term_options or '-' }}</span>
                    </div>
                    {% if p.requirements %}<p class="text-xs text-gray-400 mt-1">准入: {{ p.requirements[:80] }}</p>{% endif %}
                    {% if p.exclusions %}<p class="text-xs text-gray-400">禁入: {{ p.exclusions[:80] }}</p>{% endif %}
                </div>
                <form method="POST" action="/products/{{ p.id }}/delete">
                    <button type="submit" class="text-xs text-red-500 hover:text-red-700" onclick="return confirm('确定停用?')">停用</button>
                </form>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="text-center py-16">
            <p class="text-gray-400">暂无产品数据</p>
            <p class="text-xs text-gray-400 mt-1">点击"新增产品"添加公司的贷款产品</p>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}