<?php
@header('Content-Type: text/html; charset=UTF-8');
include_once dirname(__DIR__) . '/includes/common.php';
if ($islogin2 != 1) {
    exit("<script>window.location.href='./login.php';</script>");
}

// 系统开关变量（优先使用 qzone_open，兼容 qzone_enabled）
$QZONE_ENABLED = (($conf['qzone_open'] ?? ($conf['qzone_enabled'] ?? '0')) == '1');
$CLOUD_ENABLED = (($conf['cloud_enabled'] ?? '1') == '1');
$DG_ENABLED = (($conf['dg_open'] ?? '0') == '1');
$VERSION_NAME_DG = preg_replace('/版$/u', '', ($conf['version_name_dg'] ?? '代挂'));
$CURRENT_PAGE = basename($_SERVER['PHP_SELF']);
$CURRENT_BIZ = (isset($_GET['biz']) && $_GET['biz'] === 'dg') ? 'dg' : 'cloud';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?php echo $title . ' - ' . $conf['sitename']; ?></title>
    <script src="../assets/js/tailwind.js"></script>
    <script src="../assets/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../assets/css/all.min.css">
    <style>
        .nav-active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white !important;
        }
        .nav-item.active {
            color: #6366f1;
            font-weight: 600;
        }
        .nav-item.active i {
            color: #6366f1;
        }
        .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            border-radius: 3px 3px 0 0;
        }
        .nav-item:hover i {
            transform: translateY(-2px);
        }
        .nav-item:active i {
            transform: scale(0.9);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.1), 0 8px 10px -6px rgba(99, 102, 241, 0.1);
        }
    </style>
    <?php if(!empty($conf['tongji_code'])){ echo html_entity_decode($conf['tongji_code'], ENT_QUOTES, 'UTF-8'); } ?>
</head>
<body class="bg-gray-50 min-h-screen">
    <?php if(!empty($conf['shouhou_qun'])){ $shouhou_qun_url = htmlspecialchars($conf['shouhou_qun']); ?>
    <a href="<?php echo $shouhou_qun_url; ?>" target="_blank" rel="noopener noreferrer" class="fixed right-0 top-1/2 -translate-y-1/2 z-40 flex flex-col items-center justify-center gap-1 py-2 px-1.5 w-9 bg-emerald-500 hover:bg-emerald-600 text-white shadow-lg rounded-l-lg transition-all duration-300 hover:shadow-emerald-500/40" title="加入售后QQ群">
        <i class="fab fa-qq text-lg"></i>
        <span class="text-[12px] font-semibold leading-[13px] flex flex-col items-center">
            <span>售</span>
            <span>后</span>
            <span>Q</span>
            <span>Q</span>
            <span>群</span>
        </span>
    </a>
    <?php } ?>
    <!-- 顶部导航 -->
    <header class="bg-white/95 backdrop-blur-sm shadow-sm sticky top-0 z-50 transition-all duration-300 border-b border-gray-100/50">
        <div class="max-w-4xl sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl mx-auto px-4">
            <div class="flex items-center justify-between h-14 sm:h-16">
                <div class="flex items-center gap-2.5">
                    <a href="./" class="flex items-center gap-2.5 hover:opacity-80 transition-opacity">
                        <?php if (!empty($conf['site_logo'])): ?>
                        <img src="<?php echo htmlspecialchars($conf['site_logo']); ?>" class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg shadow-sm hover:shadow-md transition-shadow" alt="<?php echo htmlspecialchars($conf['sitename']); ?>">
                        <?php else: ?>
                        <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center shadow-sm hover:shadow-md transition-shadow">
                            <i class="fas fa-robot text-white text-sm sm:text-base"></i>
                        </div>
                        <?php endif; ?>
                        <span class="font-bold text-gray-800 text-sm sm:text-base"><?php echo $conf['sitename']; ?></span>
                    </a>
                </div>
                
                <div class="flex items-center gap-4">
                    <nav class="hidden lg:flex items-center gap-4">
                        <a href="./" class="flex items-center gap-2 px-4 py-2 rounded-lg text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 font-medium transition-colors <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'bg-indigo-100 text-indigo-600' : ''; ?>">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </a>
                        <?php if ($CLOUD_ENABLED): ?>
                        <a href="./qqlist.php" class="flex items-center gap-2 px-4 py-2 rounded-lg text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 font-medium transition-colors <?php echo ($CURRENT_PAGE === 'qqlist.php' && $CURRENT_BIZ === 'cloud') ? 'bg-indigo-100 text-indigo-600' : ''; ?>">
                            <i class="fab fa-qq"></i>
                            <span>云端</span>
                        </a>
                        <?php endif; ?>
                        <?php if ($DG_ENABLED): ?>
                        <a href="./qqlist.php?biz=dg" class="flex items-center gap-2 px-4 py-2 rounded-lg text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 font-medium transition-colors <?php echo ($CURRENT_PAGE === 'qqlist.php' && $CURRENT_BIZ === 'dg') ? 'bg-indigo-100 text-indigo-600' : ''; ?>">
                            <i class="fas fa-link"></i>
                            <span><?php echo htmlspecialchars($VERSION_NAME_DG) ?></span>
                        </a>
                        <?php endif; ?>
                        <?php if ($QZONE_ENABLED): ?>
                        <a href="./qzone.php" class="flex items-center gap-2 px-4 py-2 rounded-lg text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 font-medium transition-colors <?php echo basename($_SERVER['PHP_SELF']) == 'qzone.php' ? 'bg-indigo-100 text-indigo-600' : ''; ?>">
                            <i class="fas fa-bolt"></i>
                            <span>秒赞</span>
                        </a>
                        <?php endif; ?>
                        <a href="./shop.php" class="flex items-center gap-2 px-4 py-2 rounded-lg text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 font-medium transition-colors <?php echo basename($_SERVER['PHP_SELF']) == 'shop.php' ? 'bg-indigo-100 text-indigo-600' : ''; ?>">
                            <i class="fas fa-shopping-cart"></i>
                            <span>购买</span>
                        </a>
                        <a href="./set.php" class="flex items-center gap-2 px-4 py-2 rounded-lg text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 font-medium transition-colors <?php echo basename($_SERVER['PHP_SELF']) == 'set.php' ? 'bg-indigo-100 text-indigo-600' : ''; ?>">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </a>
                    </nav>
                    
                    <div class="relative">
                    <button id="userMenuButton" class="flex items-center gap-1.5 sm:gap-2 bg-gray-50 px-2 py-1.5 sm:px-3 sm:py-2 rounded-full text-xs hover:bg-gray-100 transition-colors focus:outline-none border border-gray-100">
                        <div class="relative">
                            <img src="//q4.qlogo.cn/headimg_dl?dst_uin=<?php echo $userrow['qq']; ?>&spec=100" class="w-6 h-6 sm:w-7 sm:h-7 rounded-full border-2 border-white shadow-sm">
                        </div>
                        <div class="flex items-center gap-1">
                            <i class="fas fa-coins text-yellow-500 text-[10px] sm:text-xs"></i>
                            <span class="font-semibold text-gray-800 text-[11px] sm:text-xs"><?php echo $userrow['rmb']; ?>元</span>
                        </div>
                        <i class="fas fa-chevron-down text-[10px] sm:text-xs text-gray-400 transition-transform duration-200" id="menuChevron"></i>
                    </button>
                    <!-- 下拉菜单 -->
                    <div id="userDropdown" class="absolute right-0 mt-2 w-56 sm:w-64 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                        <div class="px-3 py-2 border-b border-gray-100">
                            <p class="text-xs text-gray-500">账号余额</p>
                            <p class="font-semibold text-gray-800 text-sm sm:text-base"><?php echo $userrow['rmb']; ?> 元</p>
                        </div>
                        <div class="px-3 py-2 border-b border-gray-100">
                            <p class="text-xs text-gray-500">可用佣金</p>
                            <p class="font-semibold text-gray-800 text-sm sm:text-base"><?php echo $userrow['rmb_tc']; ?> 元</p>
                        </div>
                        <div class="px-3 py-2 border-b border-gray-100 flex items-center justify-between">
                            <div>
                                <p class="text-xs text-gray-500">当前等级</p>
                                <p class="font-semibold text-gray-800 text-sm sm:text-base">VIP<?php echo $userrow['vip']; ?></p>
                            </div>
                            <?php 
                            // 获取最高VIP等级
                            $max_vip = $DB->getColumn("SELECT MAX(vip) FROM pre_user_vip");
                            if($userrow['vip'] < $max_vip){
                            ?>
                            <a href="./upgrade.php" class="bg-gradient-to-r from-orange-500 to-pink-500 hover:from-orange-600 hover:to-pink-600 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all shadow-sm hover:shadow-md">
                                <i class="fas fa-arrow-up mr-1"></i>升级
                            </a>
                            <?php }
                            ?>
                        </div>
                        <div class="px-3 py-2">
                            <div class="flex gap-2">
                                <a href="./recharge.php" class="flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-2 py-1.5 sm:px-3 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all shadow-sm hover:shadow-md text-center">
                                    <i class="fas fa-plus mr-1"></i>充值
                                </a>
                                <a href="./tixian.php" class="flex-1 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-2 py-1.5 sm:px-3 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all shadow-sm hover:shadow-md text-center">
                                    <i class="fas fa-wallet mr-1"></i>提现
                                </a>
                            </div>
                        </div>
                        <div class="px-3 py-2 border-t border-gray-100">
                            <a href="./login.php?logout" class="w-full bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-medium py-1.5 px-4 sm:py-2 sm:px-5 rounded-lg transition-colors text-center inline-block text-xs sm:text-sm">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
                <script>
                    // 下拉菜单功能
                    document.addEventListener('DOMContentLoaded', function() {
                        const menuButton = document.getElementById('userMenuButton');
                        const dropdown = document.getElementById('userDropdown');
                        const menuChevron = document.getElementById('menuChevron');
                        
                        if (menuButton && dropdown && menuChevron) {
                            menuButton.addEventListener('click', function() {
                                dropdown.classList.toggle('hidden');
                                menuChevron.classList.toggle('rotate-180');
                            });
                            
                            // 点击其他地方关闭下拉菜单
                            document.addEventListener('click', function(event) {
                                if (!menuButton.contains(event.target) && !dropdown.contains(event.target)) {
                                    dropdown.classList.add('hidden');
                                    menuChevron.classList.remove('rotate-180');
                                }
                            });
                        }
                    });
                </script>
            </div>
        </div>
    </header>

    <script>
        // Toast 提示函数
        function showToast(message, duration = 3000, type = 'info') {
            const toastWrap = document.getElementById('toastWrap');
            if (!toastWrap) return;

            const toast = document.createElement('div');
            toast.className = `px-4 py-2 rounded-lg shadow-md transform transition-all duration-300 ease-in-out opacity-0 translate-y-[-10px]`;

            // 根据类型设置不同的样式
            switch (type) {
                case 'success':
                    toast.className += ' bg-green-500 text-white';
                    break;
                case 'error':
                    toast.className += ' bg-red-500 text-white';
                    break;
                case 'warning':
                    toast.className += ' bg-yellow-500 text-white';
                    break;
                default:
                    toast.className += ' bg-gray-700 text-white';
            }

            toast.textContent = message;
            toastWrap.appendChild(toast);

            // 显示动画
            setTimeout(() => {
                toast.classList.remove('opacity-0', 'translate-y-[-10px]');
                toast.classList.add('opacity-100', 'translate-y-0');
            }, 10);

            // 隐藏动画
            setTimeout(() => {
                toast.classList.remove('opacity-100', 'translate-y-0');
                toast.classList.add('opacity-0', 'translate-y-[-10px]');
                setTimeout(() => {
                    if (toastWrap.contains(toast)) {
                        toastWrap.removeChild(toast);
                    }
                }, 300);
            }, duration);
        }

        // Loading 遮罩函数
        function showLoading() {
            const loadingOverlay = document.getElementById('loadingOverlay');
            if (loadingOverlay) {
                loadingOverlay.classList.remove('hidden');
            }
        }

        function hideLoading() {
            const loadingOverlay = document.getElementById('loadingOverlay');
            if (loadingOverlay) {
                loadingOverlay.classList.add('hidden');
            }
        }

        // HTML转义函数
        function escHtml(s) {
            var d = document.createElement('div');
            d.textContent = s;
            return d.innerHTML;
        }

        // 属性转义函数
        function escAttr(s) {
            return String(s).replace(/[&<>"']/g, function(m) {
                return {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[m];
            });
        }
    </script>
    
    <!-- 底部导航 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl border-t border-gray-100/50 z-50 shadow-[0_-4px_20px_-5px_rgba(0,0,0,0.05)] lg:hidden">
        <div class="max-w-4xl sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl mx-auto">
            <?php
            $mobile_cols = 3;
            if ($CLOUD_ENABLED) $mobile_cols++;
            if ($DG_ENABLED) $mobile_cols++;
            if ($QZONE_ENABLED) $mobile_cols++;
            if ($mobile_cols < 4) $mobile_cols = 4;
            if ($mobile_cols > 6) $mobile_cols = 6;
            ?>
            <div class="grid <?php echo 'grid-cols-' . $mobile_cols; ?>">
                <a href="./" class="flex flex-col items-center py-2.5 sm:py-3 text-gray-400 hover:text-indigo-500 nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?> transition-all duration-300 relative group">
                    <i class="fas fa-home text-base sm:text-lg mb-0.5 sm:mb-1 transition-all duration-300 group-hover:scale-110"></i>
                    <span class="text-[10px] sm:text-xs font-medium tracking-wide">首页</span>
                </a>
                <?php if ($CLOUD_ENABLED): ?>
                <a href="./qqlist.php" class="flex flex-col items-center py-2.5 sm:py-3 text-gray-400 hover:text-indigo-500 nav-item <?php echo ($CURRENT_PAGE === 'qqlist.php' && $CURRENT_BIZ === 'cloud') ? 'active' : ''; ?> transition-all duration-300 relative group">
                    <i class="fab fa-qq text-base sm:text-lg mb-0.5 sm:mb-1 transition-all duration-300 group-hover:scale-110"></i>
                    <span class="text-[10px] sm:text-xs font-medium tracking-wide">云端</span>
                </a>
                <?php endif; ?>
                <?php if ($DG_ENABLED): ?>
                <a href="./qqlist.php?biz=dg" class="flex flex-col items-center py-2.5 sm:py-3 text-gray-400 hover:text-indigo-500 nav-item <?php echo ($CURRENT_PAGE === 'qqlist.php' && $CURRENT_BIZ === 'dg') ? 'active' : ''; ?> transition-all duration-300 relative group">
                    <i class="fas fa-link text-base sm:text-lg mb-0.5 sm:mb-1 transition-all duration-300 group-hover:scale-110"></i>
                    <span class="text-[10px] sm:text-xs font-medium tracking-wide"><?php echo htmlspecialchars($VERSION_NAME_DG) ?></span>
                </a>
                <?php endif; ?>
                <?php if ($QZONE_ENABLED): ?>
                <a href="./qzone.php" class="flex flex-col items-center py-2.5 sm:py-3 text-gray-400 hover:text-indigo-500 nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'qzone.php' ? 'active' : ''; ?> transition-all duration-300 relative group">
                    <i class="fas fa-bolt text-base sm:text-lg mb-0.5 sm:mb-1 transition-all duration-300 group-hover:scale-110"></i>
                    <span class="text-[10px] sm:text-xs font-medium tracking-wide">秒赞</span>
                </a>
                <?php endif; ?>
                <a href="./shop.php" class="flex flex-col items-center py-2.5 sm:py-3 text-gray-400 hover:text-indigo-500 nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'shop.php' ? 'active' : ''; ?> transition-all duration-300 relative group">
                    <i class="fas fa-shopping-cart text-base sm:text-lg mb-0.5 sm:mb-1 transition-all duration-300 group-hover:scale-110"></i>
                    <span class="text-[10px] sm:text-xs font-medium tracking-wide">购买</span>
                </a>
                <a href="./set.php" class="flex flex-col items-center py-2.5 sm:py-3 text-gray-400 hover:text-indigo-500 nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'set.php' ? 'active' : ''; ?> transition-all duration-300 relative group">
                    <i class="fas fa-user text-base sm:text-lg mb-0.5 sm:mb-1 transition-all duration-300 group-hover:scale-110"></i>
                    <span class="text-[10px] sm:text-xs font-medium tracking-wide">我的</span>
                </a>
            </div>
        </div>
    </nav>
    
    <!-- Toast 提示 -->
    <div id="toastWrap" class="fixed top-6 left-1/2 -translate-x-1/2 z-[60] flex flex-col items-center gap-2"></div>

    <!-- Loading 遮罩 -->
    <div id="loadingOverlay" class="fixed inset-0 z-50 hidden bg-white/30 flex items-center justify-center">
        <div class="w-10 h-10 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
    </div>

    <!-- 主内容区 -->
    <main class="max-w-4xl sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl mx-auto px-4 py-4 sm:py-6 lg:py-7 xl:py-8 pb-24">

<?php
if(($conf['cs_enabled'] ?? '0') == '1') {
    $cs_top_info = '';
    if (!empty($conf['cs_top_info'])) {
        $content = (string)$conf['cs_top_info'];
        $content = stripslashes($content);
        ob_start();
        eval('?>' . $content);
        $cs_top_info = ob_get_clean();
    }
    $cs_config = json_encode(array(
        'apiBase' => 'ajax_customer.php',
        'icon' => $conf['cs_bubble_icon'] ?? '',
        'serviceAvatar' => '//q4.qlogo.cn/headimg_dl?dst_uin=' . ($conf['qq'] ?? '1223134470') . '&spec=100',
        'userAvatar' => '//q4.qlogo.cn/headimg_dl?dst_uin=' . ($userrow['qq'] ?? '') . '&spec=100',
        'welcome' => $conf['cs_welcome_msg'] ?? '您好，欢迎咨询！请选择下方问题或直接输入。',
        'position' => $conf['cs_bubble_position'] ?? 'right',
        'noMatchMsg' => $conf['cs_no_match_msg'] ?? '',
        'topInfo' => $cs_top_info,
        'showBubble' => true
    ), JSON_UNESCAPED_UNICODE);
?>
<link rel="stylesheet" href="../assets/css/customer_service.css">
<script src="../assets/js/customer_service.js?ver=<?php echo VERSION ?>"></script>
<script>document.addEventListener("DOMContentLoaded",function(){CSWidget.init(<?php echo $cs_config; ?>);});</script>
<?php } ?>
