{% extends "base.html" %}
{% block title %}请在浏览器中打开 - 企微工程师{% endblock %}

{% block extra_head %}
<style>
body { background: #f5f5f5; }
.hint-page { max-width: 420px; margin: 0 auto; padding: 60px 16px; }
.hint-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.hint-icon { font-size: 72px; color: #07c160; margin-bottom: 16px; }
.hint-title { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.hint-desc { color: #666; font-size: 14px; line-height: 1.8; margin-bottom: 24px; }
.step-list {
    text-align: left;
    background: #f9f9f9;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
}
.step-item {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    color: #333;
    align-items: flex-start;
}
.step-num {
    width: 22px; height: 22px;
    background: #07c160;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.url-box {
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #666;
    word-break: break-all;
    margin-bottom: 10px;
    user-select: all;
}
.copy-btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: 2px solid #07c160;
    border-radius: 14px;
    background: #fff;
    color: #07c160;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.copy-btn:hover { background: #f0faf4; }
.back-btn {
    display: block;
    margin-top: 16px;
    color: #999;
    font-size: 14px;
    text-decoration: none;
}
</style>
{% endblock %}

{% block content %}
<div class="hint-page">
    <div class="hint-card">
        <div class="hint-icon"><i class="bi bi-browser-chrome"></i></div>
        <div class="hint-title">请在浏览器中打开</div>
        <div class="hint-desc">
            微信内暂不支持直接支付<br>
            请按以下步骤在浏览器中完成支付
        </div>

        <div class="step-list">
            <div class="step-item">
                <div class="step-num">1</div>
                <div>点击右上角 <strong>「···」</strong> 或 <strong>分享按钮</strong></div>
            </div>
            <div class="step-item">
                <div class="step-num">2</div>
                <div>选择 <strong>「在浏览器中打开」</strong></div>
            </div>
            <div class="step-item">
                <div class="step-num">3</div>
                <div>在浏览器中重新选择服务并支付</div>
            </div>
        </div>

        {% if order_id %}
        <div class="text-muted small mb-2">订单号：{{ order_id }}</div>
        {% endif %}

        <button class="copy-btn" onclick="copyUrl()">
            <i class="bi bi-clipboard"></i> 复制网址到浏览器
        </button>

        <a href="/wecom" class="back-btn">← 返回首页</a>
    </div>
</div>

<script>
function copyUrl() {
    const url = window.location.origin + '/wecom';
    if (navigator.clipboard) {
        navigator.clipboard.writeText(url).then(() => {
            alert('已复制网址，请在浏览器中粘贴打开');
        });
    } else {
        // 兼容旧浏览器
        const ta = document.createElement('textarea');
        ta.value = url;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        alert('已复制网址，请在浏览器中粘贴打开');
    }
}
</script>
{% endblock %}
{% block extra_scripts %}{% endblock %}