{% extends "base.html" %}
{% block title %}回访录入 - {{ customer.name or '客户' }} - 本地贷款CRM{% endblock %}
{% block header_title %}回访信息录入{% endblock %}
{% block content %}

<div class="max-w-lg mx-auto">
    <!-- Customer info -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-4">
        <div class="flex items-center gap-3">
            <span class="text-2xl">📅</span>
            <div>
                <a href="/customers/{{ fu.customer_id }}" class="font-semibold text-gray-900 hover:text-primary">
                    {{ fu.customer_name or '客户 #' ~ fu.customer_id }}
                </a>
                {% if fu.customer_phone %}<span class="text-sm text-gray-500 ml-2">{{ fu.customer_phone }}</span>{% endif %}
            </div>
        </div>
        <dl class="grid grid-cols-2 gap-2 mt-3 text-sm">
            <div><dt class="text-xs text-gray-400">计划时间</dt><dd class="text-gray-900">{{ fu.planned_at[:16] if fu.planned_at else '-' }}</dd></div>
            <div><dt class="text-xs text-gray-400">回访方式</dt><dd class="text-gray-900">{{ fu.method or '未指定' }}</dd></div>
            <div class="col-span-2"><dt class="text-xs text-gray-400">回访目的</dt><dd class="text-gray-900">{{ fu.purpose or '未指定' }}</dd></div>
        </dl>
    </div>

    <!-- Complete form -->
    <form method="POST" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6 space-y-4">
        <h2 class="font-semibold text-gray-900">记录回访结果</h2>
        <div>
            <label class="text-xs text-gray-500">回访结果摘要</label>
            <textarea name="result_summary" rows="4" placeholder="记录本次回访的沟通内容、客户反馈等..."
                      class="w-full border rounded-lg px-3 py-2.5 text-sm"></textarea>
        </div>
        <fieldset class="border border-dashed border-gray-200 rounded-lg p-4 space-y-3">
            <legend class="text-xs text-gray-500 px-1">设定下次回访</legend>
            <div>
                <label class="text-xs text-gray-500">下次回访事项</label>
                <textarea name="next_purpose" rows="2" placeholder="如：跟进资料收集进度、确认贷款审批结果..."
                          class="w-full border rounded-lg px-3 py-2.5 text-sm"></textarea>
            </div>
            <div>
                <label class="text-xs text-gray-500">下次跟进时间</label>
                <div class="flex flex-wrap gap-1.5 mb-2">
                    <button type="button" onclick="setNextDate(1)" class="text-xs px-2.5 py-1 rounded-full border border-gray-200 hover:border-primary hover:text-primary transition-colors">明天</button>
                    <button type="button" onclick="setNextDate(7)" class="text-xs px-2.5 py-1 rounded-full border border-gray-200 hover:border-primary hover:text-primary transition-colors">一周后</button>
                    <button type="button" onclick="setNextDate(30)" class="text-xs px-2.5 py-1 rounded-full border border-gray-200 hover:border-primary hover:text-primary transition-colors">一个月后</button>
                    <button type="button" onclick="setNextDate(90)" class="text-xs px-2.5 py-1 rounded-full border border-gray-200 hover:border-primary hover:text-primary transition-colors">三个月后</button>
                </div>
                <input type="datetime-local" name="next_planned_at" id="next_planned_at"
                       class="w-full border rounded-lg px-3 py-2.5 text-sm">
            </div>
        </fieldset>
        <script>
        function setNextDate(days) {
            const d = new Date();
            d.setDate(d.getDate() + days);
            d.setHours(9, 0, 0, 0);
            const yyyy = d.getFullYear();
            const mm = String(d.getMonth() + 1).padStart(2, '0');
            const dd = String(d.getDate()).padStart(2, '0');
            const hh = String(d.getHours()).padStart(2, '0');
            const mi = String(d.getMinutes()).padStart(2, '0');
            document.getElementById('next_planned_at').value = yyyy + '-' + mm + '-' + dd + 'T' + hh + ':' + mi;
        }
        </script>
        <div class="flex items-center gap-2 pb-16 md:pb-0">
            <button type="submit" name="action" value="complete"
                    class="px-5 py-2.5 bg-success text-white text-sm font-medium rounded-lg hover:bg-green-700">
                标记完成
            </button>
            <button type="submit" name="action" value="cancel"
                    class="px-5 py-2.5 border border-gray-300 text-sm rounded-lg text-gray-600 hover:bg-gray-50"
                    onclick="return confirm('确定取消此回访计划？')">
                取消回访
            </button>
            <a href="/followups" class="px-5 py-2.5 text-sm text-gray-400 hover:text-gray-600">返回</a>
        </div>
    </form>
</div>

{% endblock %}