{% 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>{{ order.payment_method }}
                    </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 %}
            </div>

            <!-- 支付状态 -->
            <div class="payment-status" id="paymentStatus" style="display: none;">
                <i class="bi bi-check-circle-fill text-success display-1"></i>
                <h5 class="mt-3">支付成功</h5>
                <p class="text-muted">正在跳转到订单详情...</p>
            </div>

            <!-- 操作按钮 -->
            <div class="d-flex gap-2 mt-4">
                <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="mt-3 text-center">
                <button class="btn btn-warning btn-sm" onclick="simulatePayment()">
                    <i class="bi bi-bug"></i> 模拟支付成功（测试用）
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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