<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付接入 - 选择支付方式</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .payment-card {
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
        }
        .payment-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .payment-card.selected {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .payment-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .alipay-icon {
            color: #1677ff;
        }
        .paypal-icon {
            color: #0070ba;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h3 class="mb-0"><i class="fas fa-credit-card me-2"></i>支付接入</h3>
                    </div>
                    <div class="card-body">
                        <form th:action="@{/payment/create}" th:object="${payment}" method="post">
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="card payment-card h-100" onclick="selectPaymentMethod('ALIPAY')">
                                        <div class="card-body text-center">
                                            <i class="fas fa-mobile-alt payment-icon alipay-icon"></i>
                                            <h5 class="card-title">支付宝</h5>
                                            <p class="card-text">安全便捷的移动支付</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="amount" class="form-label">支付金额</label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" class="form-control" id="amount" name="amount" 
                                           th:field="*{amount}" step="0.01" min="0.01" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="currency" class="form-label">货币类型</label>
                                <select class="form-select" id="currency" name="currency" th:field="*{currency}">
                                    <option value="CNY">人民币 (CNY)</option>
                                    <option value="USD">美元 (USD)</option>
                                    <option value="EUR">欧元 (EUR)</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="description" class="form-label">支付描述</label>
                                <textarea class="form-control" id="description" name="description" 
                                          th:field="*{description}" rows="3" placeholder="请输入支付描述..."></textarea>
                            </div>
                            
                            <input type="hidden" id="paymentMethod" name="paymentMethod" th:field="*{paymentMethod}">
                            
                            <div th:if="${error}" class="alert alert-danger" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <span th:text="${error}"></span>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg" id="submitBtn" disabled>
                                    <i class="fas fa-lock me-2"></i>确认支付
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function selectPaymentMethod(method) {
            // 移除所有选中状态
            document.querySelectorAll('.payment-card').forEach(card => {
                card.classList.remove('selected');
            });
            
            // 添加选中状态
            event.currentTarget.classList.add('selected');
            
            // 设置隐藏字段值
            document.getElementById('paymentMethod').value = method;
            
            // 启用提交按钮
            document.getElementById('submitBtn').disabled = false;
            
            // 根据支付方式调整货币选项
            const currencySelect = document.getElementById('currency');
            if (method === 'ALIPAY') {
                currencySelect.value = 'CNY';
                currencySelect.options[0].selected = true;
            }
        }
        
        // 表单验证
        document.querySelector('form').addEventListener('submit', function(e) {
            const amount = document.getElementById('amount').value;
            const paymentMethod = document.getElementById('paymentMethod').value;
            
            if (!paymentMethod) {
                e.preventDefault();
                alert('请选择支付方式');
                return;
            }
            
            if (!amount || parseFloat(amount) <= 0) {
                e.preventDefault();
                alert('请输入有效的支付金额');
                return;
            }
        });
    </script>
</body>
</html>

