<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></title>
    <style>
        :root {
            --primary-color: #FF6B28;
            --vip-color: #F5A623;
            --border-color: #e0e0e0;
        }

        body {
            background: url(/images/indianPaymentBackground.png) no-repeat center;
            background-size: cover;
            background-position: center;
            margin: 0;
            line-height: 1.6;
            position: relative;
            /* z-index: 1000; */
            height: 610px;
        }

        /* 容器样式 */
        .container {
            /* max-width: 600px; */
            /* margin: -20% auto; */
            background: #F5F5F5;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: absolute;
            top: 15%;
            width: 380px;
            height: 300px;
            margin-top: 80%;
        }

        /* 页头区域 */
        .header {
            position: absolute;
            /* width: 350px; */
            /* height: 95px; */
            /* top: 80px; */
            /* left: 16px; */
            border-radius: 13px 13px 4px 4px;
            background: linear-gradient(135deg, #5689AF, #025E8E);
            /* padding: 1.2rem; */
            /* z-index: -10; */
            /* box-sizing: border-box; */
            /* margin-top: -160px; */
        }


        /* 渐变边框实现 */
        .header::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            background: linear-gradient(135deg, #5689AF, #025E8E);
            border-radius: inherit;
            z-index: -1;
        }

        .branding {
            display: flex;
            align-items: center;
            height: 100%;
            gap: 15px;
        }

        .robot-logo {
            width: 100px;
            height: 125px;
            /*animation: float 3s ease-in-out infinite;*/
            flex-shrink: 0;
        }

        .header-text {
            margin-left: 1rem;
            color: #FEDCC8;
            text-align: left;
        }

        .header-text h1 {
            font-size: 1.4rem;
            margin: 0 0 0.3rem;
            line-height: 1.2;
        }

        .header-text p {
            font-size: 0.9rem;
            margin: 0;
            opacity: 0.9;
        }

        /* 价格对比模块 */
        .price-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.6rem;
            padding: 1.0rem;
            margin-top: -2%;
            position: absolute;
        }

        .price-card {
            position: relative;
            padding: 0.8rem;
            border-radius: 10px;
            background: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            width: 140px;
            height: 50px;
            cursor: pointer;
        }

        .price-card.selected {
            border: 2px solid #d96b32;
            background-color: #ffe8e1;
        }

        .price-card .name {
            font-weight: bold;
            color: #333;
        }

        .price-card .price {
            font-size: 1.2em;
            color: #333;
        }

        /* 选中状态：名称和价格均橙色 */
        .price-card.selected .name,
        .price-card.selected .price {
            color: #d96b32; /* 覆盖为橙色 */
        }

        .vip-badge {
            position: absolute;
            top: -15px;
            right: -15px;
            width: 40px;
            height: 40px;
        }

        .redpacket-icon {
            width: 30px;
            vertical-align: middle;
            margin-right: 8px;
        }

        /* 功能对比表 */
        .feature-grid {
            display: grid;
            /*grid-template-columns: 2fr repeat(3, 1fr);*/
            /* gap: 1px; */
            background: #FFFFFF;
            margin: 0.6rem;
            position: relative;
            /* margin-top: -1%;
            border-radius: 10px;
             border: 1px solid #ccc;*/
        }

        .feature-grid_out {
            display: grid;
            grid-template-columns: 2fr repeat(2, 1fr);
            gap: 1px;
            background: #FFFFFF;
            margin: 0.8rem;
            position: relative;
            margin-top: 28%;
            border-radius: inherit;
            height: 50%;
        }

        .grid-item {
            /*padding: 1rem;*/
            background: white;
            /*display: flex;*/
            align-items: center;
            min-height: 50px;
        }

        .col-header {
            font-weight: 600;
            /*background: #f8f9fa;*/
            border: none; /* 隐藏边框 */
            box-shadow: none; /* 隐藏可能的盒子阴影 */
            outline: none; /* 隐藏可能的轮廓线 */
        }


        .isHighlight {
            color: #D1530B !important;
            font-weight: 600;
            position: relative;
        }


        /*.isHighlight::after {
            content: none; !* 删除左侧指示条 *!
        }*/

        /* 支付方式 */
        .payment-section {
            padding: 0.6rem;
            position: absolute;
            height: -webkit-fill-available;
            margin-top: 3%;
        }

        .payment-section-pay {
            display: flex;
            align-items: center;
        }

        /*.payment-logo {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }*/

        .payment-logo:hover {
            transform: scale(1.1);
        }

        /* 购买按钮 */
        .buy-button {
            /*display: block;
            margin: 2rem auto;
            width: 80%;
            max-width: 300px;
            transition: opacity 0.3s ease;*/
            margin-left: 5%;
        }

        .buy-button img {
            width: 100%;
        }

        .buy-button:hover {
            opacity: 0.9;
        }

        .middle {
            margin-top: -140px;
            position: relative;
        }

        .middle_picture {
            width: -webkit-fill-available;
        }

        .payment-section_div {
            position: absolute;
            display: grid;
        }

        .payment-section_picture {
            margin-left: 2%;
            margin-top: -2%;
            color: #474747;
            font-size: larger;
        }

        .middle_red_envelope {
            position: absolute;
            bottom: 16px;
            left: 10px; /* 可根据需要调整水平位置 */
            z-index: 1; /* 确保红包图片位于背景图片上方 */
        }

        .text {
            color: #c16c3f;
            font-size: 16px;
            position: absolute;
            top: 8px;
            left: 35px;
            z-index: 1;
        }

        .price-card .name {
            width: 72px;
            height: 25px;
            font-size: 18px;
        }

        .price-card .price {
            font-weight: 500; /* 字重（中等） */
            font-size: 18px; /* 字号 */
            line-height: 1; /* 行高 = 100%（1倍字号） */
            letter-spacing: 0; /* 字符间距 */
        }

        /* 动画效果 */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        /* 支付方式选项样式 */
        .pay-radio {
            margin-bottom: 2px; /* 选项间距 */
        }

        .pay-radio span {
            margin-left: 2%;
        }

        /* 单个支付选项 */
        .pay-radio label {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 16px 24px;
            /*border: 2px solid #e9ecef;*/
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            width: -webkit-fill-available;
        }

        /* 图片尺寸控制 */
        .payment-logo {
            width: 155px;
            height: 33px;
            object-fit: contain;
        }

        /* 文字样式 */
        /*.pay-radio input[type='radio'] {
            display: none;
        }*/

        /* 交互状态 */
        .pay-radio label:hover {
            border-color: #1890ff;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
        }

        .pay-radio input:checked + label {
            border-color: #1890ff;
            background-color: #e6f4ff;
        }

        .payment-methods {
            /*display: grid;*/
            grid-template-columns: 2fr repeat(3, 1fr);
            gap: 1px;
            /*background: #FFFFFF;*/
            /*margin: 0.8rem;*/
            /*position: relative;
            */

            margin: 0.2rem;
            width: 151%;
            position: relative;
            border-radius: inherit;
        }

        /*.payment-buy {
            margin-top: 5%;
            width: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }*/

        .container_agreement {
            display: flex;
            align-items: center;
        }

        .checkbox-container {
            display: inline-flex;
            vertical-align: middle; /* 固定垂直对齐方式 */
            position: relative;
            margin-right: 8px;
        }

        /* 自定义复选框视觉样式 */
        .custom-checkbox {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%); /* 垂直居中 */
            width: 16px;
            height: 16px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            background: white;
            transition: all 0.3s;
        }

        .checkbox {
            margin-right: 10px;
            position: relative;
        }

        .checkbox-container input[type="checkbox"] {
            display: none;
        }

        .checkbox-container input[type="checkbox"] + .checked-label:before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-right: 5px;
            position: relative;
        }

        .checkbox-container input[type="checkbox"]:checked + .checked-label:before {
            content: "✔";
            font-size: 14px;
            color: #1E90FF;
            text-align: center;
            line-height: 16px;
        }

        .text_agreement {
            color: #1E90FF; /* 蓝色字体 */
        }

        .container_agreement_font {
            font-size: 10px;
            font-family: Arial, sans-serif;
            /*margin-left: auto;*/
        }

        .price-display {
            flex: 1;
            text-align: left;
            font-size: 18px;
            font-weight: bold;
            color: white;
            margin-left: -200px;
            position: absolute;
        }

        .background-container {
            background-color: #005580;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            border-radius: 50px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 310px;
            height: 20px;
            margin-top: 20px;
            margin-left: 5px;
        }

        .purchase-button {
            background-color: #87CDFF;
            border: none;
            border-radius: 30px;
            padding: 15px 25px;
            font-size: 16px;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-right: -70%;
        }

        .pay-div {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            /*background-color: #f5f5f5;*/
            padding: 10px;
            border-radius: 8px;
            margin-left: auto;
        }

        /*协议复选框*/
        .container_agreement {
            display: flex;
            align-items: center;
            position: relative;
            margin: 8px 0 8px 20%;
        }

        .checkbox-container {
            margin-right: 10px;
        }

        .text_agreement {
            color: #1890ff;
            cursor: pointer;
        }

        /* 提示信息样式 */
        .error-tip {
            position: absolute;
            bottom: -20px;
            left: 30px;
            color: #ff4d4f;
            font-size: 12px;
            display: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* 新增错误提示样式 */
        .error-tip {
            position: absolute;
            bottom: 150px;
            left: 0;
            color: red;
            font-size: 12px;
            width: 210px;
            white-space: pre-line;
            display: none;
            margin-left: 150px;
            margin-bottom: 130px;
        }

        .show-tip {
            display: block;
            animation: fadeIn 0.3s;
        }

        /* 新增价格样式 */
        .price-display .price-number {
            font-size: 22px; /* 价格字体大小 */
            font-weight: bold;
            color: white;
        }

        /* 新增价格样式 */
        .price-card .price-number {
            font-size: 22px; /* 价格字体大小 */
            font-weight: bold;
        }

        .price-display .price-unit {
            font-size: 14px;
            color: #666;
        }


        /* 新增动画效果 */
        @keyframes modalSlideIn {
            from {
                transform: translateY(60px) scale(0.96);
                opacity: 0;
            }
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .modal-content {
            animation: modalSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
        }

        /* 悬停效果 */
        #copy-email:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(135, 205, 255, 0.4);
        }

        #copy-email {
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #87CDFF, #5A8FEB);
        }

        #copy-email.copied {
            background: #4CAF50 !important;
        }

        #copy-email.error {
            background: #ff4444 !important;
        }

        /* Flexbox方案 */
        .benefit-item {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 85px;
            margin-top: 50px;
            margin-left: 26px;
        }

        .benefit-item2 {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 85px;
            margin-top: 50px;
            margin-left: 105px;
        }

        .benefit-item3 {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 85px;
            margin-top: 50px;
            margin-left: 202px;
        }

        /* 文字样式 */
        .benefit-main {
            font-size: 10px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 8px;
        }

        .benefit-sub {
            font-size: 8px; /* 缩小副标题文字 */
            color: #7f8c8d;
            line-height: 1.5;
        }

        .benefit-icon img {
            width: 36px; /* 缩小图片尺寸 */
            height: 36px; /* 缩小图片尺寸 */
            object-fit: contain;
        }

        .benefit-content{
            margin-left: 10px;
        }
    </style>
</head>
<script src="/js/axios/axios.min.js"></script>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<body>
<!-- 页头动态数据绑定 -->
<div style="position: absolute">
    <div style="width: 220px;margin-top: 30px;margin-left: 23px;color: #699DF8;font-size: 20px;font-weight: bold;background: linear-gradient(90deg, #00aaff, #0066ff, #00aaff);-webkit-background-clip: text;background-clip: text;text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);"
         th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></div>
    <div style="width: 250px;
    margin-left: 8px;
    color: #699DF8;
    font-size: 16px;
    font-weight: bold;"
         th:text="${serviceInfo.get('now_connected_to_deepseek_large_model')}"></div>
</div>
<div style="
    position: absolute;
    top: 220px;
    left: 186px;
    width: 300px;
    height: 200px;
    background-color: #025E8E;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    z-index: 50;
    margin-top: -120px;
    margin-left: -175px;
    display: block;
    "></div>
<div style="
    position: absolute;
    height: 10px;
    color: #699DF8;
    font-size: 16px;
    color: #f8f9fa;
    font-weight: bold;
    z-index: 100;
    margin-top: 110px;
    margin-left: 36px;" th:text="${serviceInfo.get('annual_service_vip')}">
</div>
<div style="position: absolute;
    z-index: 100;
    margin-top: 8%;
    margin-left: 63%;"><img th:src="@{/images/助手机器人.png}" alt=""/>
</div>
<div style="
    position: absolute;
    z-index: 100;
    margin-top: 140px;
    margin-left: 30px;
    background-color: #FFFFFF;
    border-radius: 10px;
    width: 319px;
    height: 190px;
    ">
    <div style="position: absolute;display: flex;"><img style="
    position: absolute;
    width: 300px;
    height: 176px;
    border-radius: 10px;
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid #9FB7CC;
    margin-left: 10px;
    margin-top: 7px;
    " th:src="@{/images/rectangle20.png}" alt=""/>
        <img style="
    position: absolute;
    width: 270px;
    height: 32px;
    margin-left: 30px;" th:src="@{/images/rectangle18.png}" alt=""/>
    </div>
    <div style="
    position: absolute;
    height: 10px;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
    z-index: 100;
    margin-top: 5px;
    margin-left: 70px;
    " th:text="${serviceInfo.get('enjoy_three_premium_benefits')}">
    </div>
    <!-- 语音调用 -->
    <div class="benefit-item">
        <div class="benefit-icon">
            <img style="margin-left: -10px" th:src="@{/images/group1.png}" alt=""/>
        </div>
        <div class="benefit-content">
            <div class="benefit-main" th:text="${serviceInfo.get('voice_call')}"></div>
            <div class="benefit-sub" th:text="${serviceInfo.get('global_voice_scheduling')}"></div>
        </div>
    </div>
    <!-- 智能服务 -->
    <div class="benefit-item2">
        <div class="benefit-icon">
            <img style="margin-left: -20px" th:src="@{/images/group2.png}" alt=""/>
        </div>
        <div class="benefit-content">
            <div class="benefit-main" th:text="${serviceInfo.get('smart_service')}"></div>
            <div class="benefit-sub" th:text="${serviceInfo.get('worry_free_accurate_recognition')}"></div>
        </div>
    </div>
    <!-- AI会话 -->
    <div class="benefit-item3">
        <div style="margin-right: 30px;" class="benefit-icon">
            <img th:src="@{/images/group3.png}" alt=""/>
        </div>
        <div class="benefit-content">
            <div style="margin-left:15px;" class="benefit-main" th:text="${serviceInfo.get('ai_session')}"></div>
            <div style="width: 111px;" class="benefit-sub"
                 th:text="${serviceInfo.get('powerful_computing_support')}"></div>
        </div>
    </div>
</div>

<div class="container" th:fragment="main">
    <!--<div class="middle">
        <img th:src="@{/images/开通终身服务超级划算背景.png}" alt="AI助手" class="middle_picture">
        <div>
            <img th:src="@{/images/红包.png}" alt="AI助手" class="middle_red_envelope">
        </div>
        <div class="text">开通终身服务超级划算</div>
    </div>-->

    <!-- 年套餐价格 -->
    <input type="hidden" class="yearPrice" th:value="${yearPrice}"/>

    <!--<section class="price-cards">
        <div th:each="plan : ${pricingPlans}" class="price-card" onclick="selectPlan(this)">
            <p>
                <input type="hidden" class="priceCard" th:value="${plan.type}"/>
                <span th:text="${plan.name}" class="name"></span>
                <span th:text="${plan.price}" class="price price-number"></span>元
            </p>
        </div>
    </section>-->

    <!-- 功能对比表动态生成 -->
    <!--<section class="feature-grid_out">
        <th:block th:each="col : ${featureList}">
            <div class="feature-grid">
                <div class="grid-item col-header" th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
                     th:text="${col.name}"></div>
                <div th:each="detail : ${col.details}"
                     class="grid-item"
                     th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
                     th:text="${detail.value}"></div>
            </div>
        </th:block>
    </section>-->

    <div class="error-tip" id="errorTip"></div>

    <!--支付方式-->
    <section class="payment-section">
        <div class="payment-section-pay">
            <div>
                <img th:src="@{/images/付费方式前面的标志.png}" alt="">
            </div>
            <div class="payment-section_picture" th:text="${serviceInfo.get('pay')}"></div>
        </div>

        <div class="payment-methods">
            <div class="alipay-methods">
                <div class="pay-radio">
                    <label>
                        <img th:src="@{/images/razorpay.png}"
                             alt="pay type"
                             class="payment-logo">
                        <!--<span>razorpay</span>-->
                        <div class="pay-div">
                            <input type="radio" name="payment"
                                   th:value="razorpay"
                                   th:checked="true">
                        </div>
                    </label>
                </div>
            </div>

            <!--<div class="payment-methods">
                <div class="alipay-methods">
                    <div class="pay-radio">
                        <label>
                            <img th:src="@{/images/alipay-logo.png}"
                                 alt="支付方式"
                                 class="payment-logo">
                            <span>支付宝支付</span>
                            <div class="pay-div">
                                <input type="radio" name="payment"
                                       th:value="alipay"
                                       th:checked="true">
                            </div>
                        </label>
                    </div>
                </div>-->

            <!--<div>
                <div class="pay-radio">
                    <label>
                        <img th:src="@{/images/wechat-logo.png}"
                             alt="支付方式"
                             class="payment-logo">
                        <span>微信支付</span>
                        <div class="pay-div">
                            <input type="radio" name="payment"
                                   th:value="wechat">
                        </div>
                    </label>
                </div>
            </div>-->

            <!--<div class="container_agreement">
                <div class="checkbox-container">
                    <input type="checkbox" id="agreement" class="checkbox">
                    <label for="agreement" class="checked-label"></label>
                </div>
                <div class="container_agreement_font"  th:text="'我已阅读并同意'+${'《付费升级服务免责声明》'}"></div>
                <div class="error-tip" id="errorTip"></div>
            </div>-->

        </div>

        <!--<div class="payment-buy">
            <div class="price-display">9.9元/年</div>
            <div>
                <a th:href="@{/order/create}" class="buy-button">
                    <img th:src="@{/images/立即购买背景.png}"
                         alt="立即购买">
                </a>
            </div>
        </div>-->
        <div class="background-container">
            <div class="price-display"><span class="price-number" th:text="${yearPrice}"></span><span class="price-unit"
                                                                                                      th:text="${serviceInfo.get('unit')}"></span>
            </div>
            <button class="purchase-button" id="purchase-button" th:text="${serviceInfo.get('buy_now')}"></button>
        </div>
        <input class="validity" type="hidden" th:value="${validity}"/>
        <input class="siqi_smart_ai_assistant" type="hidden" th:value="${serviceInfo.get('siqi_smart_ai_assistant')}"/>

        <!-- 在background-container下方添加联系客服链接 -->
        <!--<div class="contact-service"
             style="text-align: center; font-size: 10px;font-family: Arial, sans-serif;margin-left: 50%;margin-top: 1%;">
            点击这里<a href="javascript:void(0)" id="contact-customer-service"
                       style="color: #1E90FF; font-size: 10px;font-family: Arial, sans-serif;margin-top: 15px; text-decoration: underline;">联系客服</a>
        </div>-->
    </section>
</div>


<!-- 客服弹窗模态框 -->
<div id="customer-service-modal" class="modal"
     style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);">
    <div class="modal-content"
         style="background-color: #fff; margin: 15% auto; padding: 0; width: 340px; border-radius: 16px; overflow: hidden; position: relative;">
        <!-- 顶部背景 -->
        <div style="position: relative; height: 180px; margin-top: -40px; margin-bottom: -20px;z-index: 1;overflow: visible; ">
            <img th:src="@{/images/child.png}" alt="背景" style="width: 50%;
    height: 100px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    margin-top: 15%;
    margin-left: 26%;">
            <!--<div class="stars" style="position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;">
                <img th:src="@{/images/child.png}" alt="星星" style="width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;">
            </div>-->
        </div>

        <!-- 内容区 -->
        <div style="padding: 24px; margin-top: -20px; position: relative; z-index: 2;">
            <div style="text-align: center; margin-bottom: 24px;">
                <div style="color: #1876FD; font-size: 18px; font-weight: 500; margin-bottom: 8px;">
                    service@sikey.com.cn
                </div>
                <div style="color: #474747; font-size: 12px;">请联系我们的客服邮箱</div>
            </div>

            <div style="display: flex; justify-content: center; position: relative; padding-bottom: 50px;">
                <button id="copy-email" style="
                    background: linear-gradient(135deg, #87CDFF, #5A8FEB);
                    border: none;
                    padding: 10px 32px;
                    border-radius: 24px;
                    color: #FFFFFF;
                    font-size: 14px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    box-shadow: 0 4px 12px rgba(135,205,255,0.3);
                ">
                    <!--<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 4V16H18V4H8Z" stroke="white" stroke-width="2"/>
                        <path d="M6 20H16V8H6V20Z" stroke="white" stroke-width="2"/>
                    </svg>-->
                    复制邮箱
                </button>

                <!-- 关闭按钮移动到复制按钮底部 -->
                <div class="close-container" style="
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    margin-top: 20px;
                ">
                    <div style="
                        background: #FFFFFF;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                        cursor: pointer;
                    ">
                        <span class="close" style="
                            color: #666;
                            font-size: 24px;
                            line-height: 1;
                            margin-bottom: 4px;
                        ">×</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 公共模板片段 -->
<!--<div th:fragment="css-resource" th:remove="tag">
    <link rel="stylesheet" th:href="@{/css/theme-${theme}.css}">
</div>-->

<!--<div th:fragment="scripts" th:remove="tag">
    <script th:src="@{/js/payment-validation.js}"></script>
</div>-->
</body>

<script>
    // 获取选择的套餐
    /*function selectPlan(clickedElement) {
        // 1. 移除所有卡片的选中样式（通过删除 CSS 类名）
        const allCards = document.querySelectorAll('.price-card');
        allCards.forEach(card => card.classList.remove('selected'));

        // 2. 为当前点击的卡片添加选中样式（通过添加 CSS 类名）
        clickedElement.classList.add('selected');

        // 3. 动态获取价格和服务类型，更新到价格显示区域
        const price = clickedElement.querySelector('.price').textContent;
        const serviceType = clickedElement.querySelector('.priceCard').value;

        const priceInput = document.querySelector('.price-display-price');
        priceInput.value = serviceType

        const unit = serviceType == 1 ? '元/年' : '元/终身';
        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
        // priceDisplay.textContent = `${price}${unit}`;  // 使用 textContent 修改内容

        // 使用模板字符串构建带样式的HTML
        priceDisplay.innerHTML = `
    <span class="price-number">${price}</span>
    <span class="price-unit">${unit}</span>`;
    }*/

    // 定义获取付费方式的函数
    function getSelectedPayment() {
        const radios = document.getElementsByName('payment');
        for (const radio of radios) {
            if (radio.checked) {
                return radio.value;
            }
        }
        return null;
    }

    // 确保DOM加载完成
    document.addEventListener("DOMContentLoaded", function () {
        const purchaseButton = document.getElementById('purchase-button');
        const errorTip = document.getElementById('errorTip');

        /*const yearPrice = document.querySelector('.yearPrice').value;
        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
        // priceDisplay.textContent = `${yearPrice}`;  // 使用 textContent 修改内容
        // 使用模板字符串构建带样式的HTML
        priceDisplay.innerHTML = `
    <span class="price-number" th:text="${yearPrice}"></span>
    <span class="price-unit" th:text="${serviceInfo.get("unit")}"></span>`;*/

        // 表单验证函数
        function validateForm() {
            let errors = [];

            // 1. 校验套餐选择
            /*const selectedPlan = document.querySelector('.price-card.selected');
            if (!selectedPlan) {
                errors.push("请选择套餐类型（包年或终身服务）");
            }*/

            // 2. 校验支付方式
            /*const paymentSelected = document.querySelector('input[name="payment"]:checked');
            if (!paymentSelected) {
                errors.push("请选择支付方式（支付宝或微信）");
            }

            // 3. 校验协议勾选
            const agreementChecked = document.getElementById('agreement').checked;
            if (!agreementChecked) {
                errors.push("请阅读并同意《付费升级服务免责声明》");
            }*/

            // 显示/隐藏错误提示
            if (errors.length > 0) {
                errorTip.innerHTML = errors.join("\n"); // 用换行符分隔错误
                errorTip.classList.add('show-tip');
                return false;
            } else {
                errorTip.classList.remove('show-tip');
                return true;
            }
        }


        function handlePurchaseButtonClick(e) {
            /*e.preventDefault(); // 阻止默认提交
            if (!validateForm()) return;*/

            const paymentMethod = getSelectedPayment();
            if (paymentMethod) {
                let path;

                // 获取当前页面的完整 URL
                const currentUrl = window.location.href;
                // 创建 URL 对象
                const urlObj = new URL(currentUrl);

                // 获取查询参数对象
                const params = new URLSearchParams(urlObj.search);
                // 获取单个参数
                const imei = params.get('imei');

                const validity = document.querySelector('.validity').value;
                const siqiSmartAiAssistant = document.querySelector('.siqi_smart_ai_assistant').value;

                if (paymentMethod === 'razorpay') {
                    path = "/app-api/hmd/razorpay/razorpayTradeWapPay";
                    const pathWithDomain = urlObj.origin + path;
                    const responseHtml = axios.get(pathWithDomain, {
                        params: {
                            validity: validity,
                            deviceId: imei,
                            subject: siqiSmartAiAssistant,
                            merchantProjectApplication: '1:hmd:3'
                        }
                    }).then(response => {
                        if (response.data.code !== 200) {
                            const errorTip = document.getElementById('errorTip');
                            errorTip.innerHTML = "Unknow Error";
                            errorTip.classList.add('show-tip');
                            return false;
                        }

                        // razorpay
                        var options = {
                            "key": "rzp_test_bwL1qbvhAdCZqw", // Enter the Key ID generated from the Dashboard
                            "amount": response.data.data.amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                            "currency": "INR",
                            "name": siqiSmartAiAssistant, //your business name
                            "description": "Test Transaction",
                            "image": "https://example.com/your_logo",
                            "order_id": response.data.data.outTradeNo, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
                            "callback_url": "https://pay.tecanswer.com/app-api/pay/razorpay/tradeWapPayGateway",
                            "redirect": true,
                            "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
                                "name": "Gaurav Kumar", //your customer's name
                                "email": "gaurav.kumar@example.com",
                                "contact": "9000090000" //Provide the customer's phone number for better conversion rates
                            },
                            "notes": {
                                "address": "Razorpay Corporate Office"
                            },
                            "theme": {
                                "color": "#3399cc"
                            }
                        };

                        var rzp1 = new Razorpay(options);
                        rzp1.open();
                        e.preventDefault();

                        /*const tempDiv = document.createElement('div');
                        document.body.appendChild(tempDiv); // 先插入 DOM
                        tempDiv.innerHTML = response.data.data;
                        const form = tempDiv.querySelector('form');
                        form.submit();*/
                    }).catch(error => {
                        // 处理请求错误
                        console.error('请求出错:', error);
                    });
                }
            } else {
                alert('请先选择支付方式！');
            }
        }

        if (purchaseButton) {
            purchaseButton.addEventListener('click', handlePurchaseButtonClick);
        }
    });

    /*协议复选框*/
    /*const checkbox = document.getElementById('agreement');
    const errorTip = document.getElementById('errorTip');*/

    // 实时监听复选框状态
    /*checkbox.addEventListener('change', function () {
        toggleErrorTip(this.checked);
    });*/

    // 切换提示显示状态
    /*function toggleErrorTip(isChecked) {
        if (isChecked) {
            errorTip.classList.remove('show-tip');
        } else {
            errorTip.classList.add('show-tip');
        }
    }*/

    // 点击协议文字时自动勾选
    /*document.querySelector('.text_agreement').addEventListener('click', function () {
        const checkbox = document.getElementById('agreement');
        checkbox.checked = !checkbox.checked;
        checkbox.dispatchEvent(new Event('change')); // 触发校验

        // 获取当前页面的完整 URL
        const currentUrl = window.location.href;
        // 创建 URL 对象
        const urlObj = new URL(currentUrl);
        window.location.href = urlObj.origin + "/h5/hmd/payment/agreement";
    });*/

    // 添加联系客服弹窗逻辑
    const modal = document.getElementById('customer-service-modal');
    const contactLink = document.getElementById('contact-customer-service');
    const closeBtn = document.querySelector('.close');
    const copyBtn = document.getElementById('copy-email');

    // 打开弹窗
    /*contactLink.onclick = function () {
        modal.style.display = 'block';
    }*/

    // 关闭弹窗
    /*closeBtn.onclick = function () {
        modal.style.display = 'none';
    }*/

    // 点击外部区域关闭
    /*window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }*/

    // 复制功能
    /*document.getElementById('copy-email').addEventListener('click', function () {
        const email = 'service@sikey.com.cn';

        // 现代浏览器方案
        if (navigator.clipboard) {
            navigator.clipboard.writeText(email)
                .then(() => showCopyFeedback('✓ 已复制'))
                .catch(() => fallbackCopy(email));
        }
        // 兼容旧版浏览器方案
        else {
            fallbackCopy(email);
        }
    });*/

    // 显示复制反馈
    function showCopyFeedback(message) {
        const btn = document.getElementById('copy-email');
        const originalHTML = btn.innerHTML;

        btn.innerHTML = message;
        btn.style.backgroundColor = '#4CAF50'; // 成功颜色

        setTimeout(() => {
            btn.innerHTML = originalHTML;
            btn.style.backgroundColor = ''; // 恢复原色
        }, 2000);
    }

    // 兼容旧浏览器的复制方案
    function fallbackCopy(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';  // 避免滚动跳转
        document.body.appendChild(textArea);
        textArea.select();

        try {
            const successful = document.execCommand('copy');
            if (successful) {
                showCopyFeedback('✓ 已复制');
            } else {
                showErrorFeedback();
            }
        } catch (err) {
            showErrorFeedback();
        } finally {
            document.body.removeChild(textArea);
        }
    }

    // 显示错误提示
    function showErrorFeedback() {
        const btn = document.getElementById('copy-email');
        btn.innerHTML = '⚠ 复制失败';
        btn.style.backgroundColor = '#ff4444';

        setTimeout(() => {
            btn.innerHTML = `<svg...>复制邮箱</>`; // 恢复原始内容
            btn.style.backgroundColor = '';
        }, 2000);
    }
</script>
</html>
