<?php
require 'config.php';
if (empty($_POST)) $_POST = $_GET;  //如果为GET方式访问
$username = $_POST['username'];
$amount = $_POST['amount'];
$serverid = $_POST['serverid'];
$roleId = $_POST['roleId'];
$roleName = $_POST['roleName'];
$goodsId = $_POST['goodsId'];
$roleId = $_POST['roleId'];
//根据礼包计算出金额
$money = $libaoconfig[$goodsId][0];
//区服名称
$quname = $quconfig[$serverid][1];
//拼接账号，格式为：分区ID-账号
$account = $serverid."-".$username;
?>
<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>游戏充值中心</title>
    <style>
        /* 基础重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
        }

        body {
            background: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        /* 容器样式 */
        .container {
            max-width: 100%;
            padding: 15px;
        }

        /* 标题 */
        .page-title {
            font-size: 20px;
            font-weight: 500;
            color: #333;
            padding: 5px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
            margin-bottom: 15px;
        }

        /* 用户信息卡片 */
        .info-card {
            background: #fff;
            border-radius: 12px;
            padding: 0px 10px;
            margin-bottom: 15px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        /* 支付选项 */
        .payment-section {
            background: #fff;
            border-radius: 12px;
            padding: 5px 10px;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
            padding-left: 5px;
        }

        .payment-select {
            width: 100%;
            padding: 12px;
            border: 1px solid #eee;
            border-radius: 8px;
            font-size: 15px;
            appearance: none;
            background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 12px center/15px;
        }

        /* 支付方式 */
        .payment-methods {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .method-item {
            flex: 1;
            position: relative;
        }

        .method-input {
            position: absolute;
            opacity: 0;
        }

        .method-label {
            display: block;
            border: 2px solid #eee;
            border-radius: 8px;
            text-align: center;
            transition: all 0.2s;
        }

        .method-input:checked + .method-label {
            border-color: #07c160;
            background: rgba(7,193,96,0.05);
        }

        .method-label img {
            width: auto;
            height: 30px;
            object-fit: contain;
        }

        /* 提交按钮 */
        .submit-btn {
            width: 100%;
            padding: 10px 20px;
            background: linear-gradient(135deg, #07c160, #05ae55);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .submit-btn:active {
            opacity: 0.9;
        }

        /* 响应式调整 */
        @media (min-width: 768px) {
            .container {
                max-width: 500px;
                margin: 20px auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 信息 -->
        <div class="info-card">
            <div class="info-item">
                <span>游戏区服</span>
                <strong><?php echo $quname; ?></strong>
            </div>
            <div class="info-item">
                <span>角色名称</span>
                <strong><?php echo $roleName; ?></strong>
            </div>
            <div class="info-item">
                <span>游戏账号</span>
                <strong><?php echo $username; ?></strong>
            </div>
            <!--<div class="info-item">
                <span>礼包ID</span>
                <strong><?php echo $goodsId; ?></strong>
            </div>-->
        </div>

        <!-- 支付表单 -->
        <form action="<?php echo $payurl;?>" method="post">
            <!-- 使用param参数来存放礼包ID -->
			<input type='hidden' name='param' value ='<?php echo $goodsId;?>'/>
            <input type='hidden' name='money' value ='<?php echo $money;?>'/>
            <input type='hidden' name='account' value ='<?php echo $account;?>'/>
			<input type='hidden' name='hidetitle' value ='true'/>

            <!-- 充值礼包 -->
            <div class="payment-section">
                <h3 class="section-title">选择充值礼包：</h3>
                <select id="libao" class="payment-select">
                <?php
                    foreach ($libaoconfig as $key=>$value) {
                        $selected="";
                        if($goodsId==$key){
                            $selected = "selected";
                        }
                        echo "<option price='".$value[0]."' value='".$key."' ".$selected.">".$value[1]."</option>";
                    }
                ?>
                </select>
                <div class="info-item">
                <span>需要支付金额：</span>
                <strong id="showmoney" style="color:red;"><?php echo $money; ?>元</strong>
                 </div>
            </div>

            <!-- 支付方式 -->
            <div class="payment-section">
                <h3 class="section-title">选择支付方式</h3>
                <div class="payment-methods">
                    <div class="method-item">
                        <input class="method-input" type="radio" name="paytype" value="1" id="alipay" checked='true'>
                        <label class="method-label" for="alipay">
                            <img src="static/images/pay-zfb.jpg" alt="支付宝">
                        </label>
                    </div>
                    <div class="method-item">
                        <input class="method-input" type="radio" name="paytype" value="2" id="wxpay">
                        <label class="method-label" for="wxpay">
                            <img src="static/images/pay-wx.jpg" alt="微信支付">
                        </label>
                    </div>
                </div>
            </div>
            <div style="width:100%;text-align:center;">
            <button type="submit" class="submit-btn">立即支付</button>
            </div>
        </form>
    </div>
<!--引入jquery-->
<script src="static/js/jquery.min.js" charset="utf-8"></script>
<script language="javascript">
$('#libao').on('change', function () {
    //获取选中的value值
	var value = $(this).val();
	$("input[name='param']").val(value);
	//获取礼包价格
    var price = $(this).find("option:selected").attr("price");
    $("#showmoney").text(price+"元");
    $("input[name='money']").val(price);
});
</script>
</body>
</html>