{% extends "base.html" %}
{% block title %}订单支付 - 太白购物商城{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/pay.css') }}">
{% endblock %}

{% block content %}
<div class="pay-container">
    <div class="card">
        <div class="card-header text-center">
            <h4><i class="bi bi-credit-card"></i> 订单支付</h4>
        </div>
        <div class="card-body">
            <!-- 隐藏数据属性 -->
            <div style="display: none;" 
                 data-payment-sn="{{ payment.payment_sn }}"
                 data-payment-method="{{ order.payment_method }}"
                 data-order-id="{{ order.id }}"></div>

            <!-- 订单信息 -->
            <div class="order-info">
                <h6 class="mb-3">订单信息</h6>
                <div class="row">
                    <div class="col-6">
                        <strong>订单号：</strong>{{ order.order_sn }}
                    </div>
                    <div class="col-6 text-end">
                        <strong class="text-danger">¥{{ "%.2f"|format(order.actual_amount) }}</strong>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-6">
                        <strong>支付方式：</strong>
                        {% if order.payment_method == 'wechat' %}微信支付
                        {% elif order.payment_method == 'alipay' %}支付宝
                        {% elif order.payment_method == 'bank' %}银行卡支付
                        {% elif order.payment_method == 'simulate' %}模拟支付
                        {% else %}{{ order.payment_method }}
                        {% endif %}
                    </div>
                    <div class="col-6 text-end">
                        <span class="countdown" id="countdown">14:59</span>
                    </div>
                </div>
            </div>

            <!-- 支付区域 -->
            <div id="paymentArea">
                {% if order.payment_method == 'wechat' %}
                <div class="payment-method selected">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-wechat text-success fs-1 me-3"></i>
                        <div>
                            <h6>微信支付</h6>
                            <p class="text-muted mb-0">请使用微信扫描二维码完成支付</p>
                        </div>
                    </div>
                </div>

                <div class="qr-code" id="qrCodeArea" style="display: none;">
                    <div id="qrCodeImage">
                        <i class="bi bi-qr-code display-1 text-muted"></i>
                        <p class="mt-2">正在生成支付二维码...</p>
                    </div>
                    <p class="mt-3 text-muted">请使用微信扫描上方二维码完成支付</p>
                </div>
                {% endif %}

                {% if order.payment_method == 'alipay' %}
                <div class="payment-method selected">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-alipay text-primary fs-1 me-3"></i>
                        <div>
                            <h6>支付宝</h6>
                            <p class="text-muted mb-0">正在跳转到支付宝...</p>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if order.payment_method == 'bank' %}
                <div class="payment-method selected">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-credit-card text-info fs-1 me-3"></i>
                        <div>
                            <h6>银行卡支付</h6>
                            <p class="text-muted mb-0">正在跳转到网银...</p>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if order.payment_method == 'simulate' %}
                <div class="payment-method selected">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-gear-fill text-warning fs-1 me-3"></i>
                        <div>
                            <h6>模拟支付</h6>
                            <p class="text-muted mb-0">开发测试模式，可直接完成支付</p>
                        </div>
                    </div>
                </div>

                <!-- 模拟支付控制面板 -->
                <div class="simulate-panel mt-3 p-3 border rounded bg-light">
                    <h6 class="text-warning"><i class="bi bi-exclamation-triangle"></i> 模拟支付控制面板</h6>
                    <p class="text-muted small mb-3">这是开发测试功能，您可以模拟不同的支付结果</p>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                        <button class="btn btn-success" onclick="simulatePaymentSuccess()">
                            <i class="bi bi-check-circle"></i> 模拟支付成功
                        </button>
                        <button class="btn btn-danger" onclick="simulatePaymentFail()">
                            <i class="bi bi-x-circle"></i> 模拟支付失败
                        </button>
                    </div>
                    
                    <div class="mt-2 text-center">
                        <small class="text-muted">
                            <i class="bi bi-info-circle"></i> 
                            实际生产环境中，此面板将被真实支付接口替代
                        </small>
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- 支付状态 -->
            <div class="payment-status" id="paymentStatus" style="display: none;">
                <div id="successStatus" style="display: none;">
                    <i class="bi bi-check-circle-fill text-success display-1"></i>
                    <h5 class="mt-3 text-success">支付成功</h5>
                    <p class="text-muted">正在跳转到订单详情...</p>
                </div>
                
                <div id="failStatus" style="display: none;">
                    <i class="bi bi-x-circle-fill text-danger display-1"></i>
                    <h5 class="mt-3 text-danger">支付失败</h5>
                    <p class="text-muted">请重新选择支付方式或联系客服</p>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="d-flex gap-2 mt-4" id="actionButtons">
                <button class="btn btn-primary flex-fill" onclick="startPayment()">
                    <i class="bi bi-credit-card"></i> 立即支付
                </button>
                <button class="btn btn-outline-secondary" onclick="checkPaymentStatus()">
                    <i class="bi bi-arrow-clockwise"></i> 刷新状态
                </button>
                <button class="btn btn-outline-danger" onclick="cancelOrder()">
                    <i class="bi bi-x-circle"></i> 取消订单
                </button>
            </div>

            <!-- 支付说明 -->
            <div class="payment-tips mt-4">
                <h6 class="text-muted">支付说明：</h6>
                <ul class="text-muted small">
                    <li>订单有效期为15分钟，请及时完成支付</li>
                    <li>支付成功后，订单状态将自动更新</li>
                    <li>如遇支付问题，请联系客服：400-123-4567</li>
                    {% if order.payment_method == 'simulate' %}
                    <li class="text-warning">当前为模拟支付模式，仅用于开发测试</li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/pay.js') }}"></script>
{% endblock %}