<?php
$title='分站域名';
include __DIR__ . '/head.php';
if($userrow['vip'] <= 1)exit("<script language='javascript'>alert('无权限访问');window.location.href='./set.php';</script>");
if(!isset($conf['fenzhan_domain']) || $conf['fenzhan_domain'] == '')exit("<script language='javascript'>alert('分站域名未配置');window.location.href='./';</script>");
?>
<script src="../assets/js/jquery.min.js"></script>
<div class="py-8">
    <!-- 主容器 -->
    <div class="max-w-3xl mx-auto">
        <!-- 配置卡片 -->
        <div class="bg-white rounded-2xl shadow-2xl p-6 hover:shadow-2xl/80 transition-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-6">分站域名配置</h2>
            
            <?php
                $domains=explode(',',$conf['fenzhan_domain']);
                $select='';
                foreach($domains as $domain){
                    $select.='<option value="'.$domain.'">'.$domain.'</option>';
                }
                if($userrow['domain'] != ''){
                    echo '<div class="mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200"><p class="text-sm text-gray-700">已绑定的域名：<span class="font-medium">'.$userrow['domain'].'</span></p></div>';
                }
                if($userrow['domain2'] != ''){
                    echo '<div class="mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200"><p class="text-sm text-gray-700">已绑定的域名2：<span class="font-medium">'.$userrow['domain2'].'</span></p></div>';
                }
            ?>
            
            <form onsubmit="saveSetting(this);return false;" method="post" class="space-y-5">
                <!-- 域名前缀 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">域名前缀</label>
                    <div class="flex flex-wrap gap-3">
                        <input type="text" class="flex-1 min-w-[120px] pl-4 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all" 
                               name="qz" id="qz" placeholder="不修改请留空">
                        <select class="flex-1 min-w-[150px] pl-4 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all" name="domain">
                            <?php echo $select?>
                        </select>
                        <button type="button" onclick='$("#qz").val(Math.random().toString(36).substr(9))' 
                                class="px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors whitespace-nowrap">
                            随机
                        </button>
                    </div>
                </div>
                
                <?php
                    if($conf['fenzhan_domain_num']=='2'){
                        echo '<div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">域名二前缀</label>
                            <div class="flex flex-wrap gap-3">
                                <input type="text" class="flex-1 min-w-[120px] pl-4 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all" 
                                       name="qz2" id="qz2" placeholder="不修改请留空">
                                <select class="flex-1 min-w-[150px] pl-4 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all" name="domain2">
                                    '.$select.'
                                </select>
                                <button type="button" onclick="$(\'#qz2\').val(Math.random().toString(36).substr(9))" 
                                        class="px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors whitespace-nowrap">
                                    随机
                                </button>
                            </div>
                        </div>';
                    }
                ?>
                
                <!-- 提示信息 -->
                <div class="p-3 bg-yellow-50 rounded-lg border border-yellow-200">
                    <p class="text-sm text-yellow-700"><i class="fas fa-info-circle mr-2"></i>可用2-5个的数字、字母，不能有标点符号（尽量简短）</p>
                    <p class="text-sm text-yellow-700 mt-1"><i class="fas fa-exclamation-triangle mr-2"></i>注意：绑定域名后就不要随便修改，否则会导致下级用户无法访问，造成下级用户流失</p>
                </div>
                
                <!-- 提交按钮 -->
                <button type="submit" 
                        class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-semibold rounded-xl shadow-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                    <i class="fas fa-save mr-2"></i>保存设置
                </button>
            </form>
            
            <!-- 底部链接 -->
            <div class="mt-6 text-center text-sm text-gray-500">
                <a href="javascript:history.back(-1)" class="hover:text-indigo-600 transition-colors duration-300">
                    <i class="fas fa-arrow-left mr-1"></i>返回上一层
                </a>
            </div>
        </div>
    </div>
</div>
<!-- 通用模态框 -->
<div id="appModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50 transition-opacity" onclick="closeModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[85vh] flex flex-col relative transform transition-all">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800"></h3>
                <button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="modalBody" class="px-5 py-4 overflow-y-auto"></div>
            <div id="modalFooter" class="px-5 py-3 border-t border-gray-100 hidden"></div>
        </div>
    </div>
</div>

<!-- Toast 提示 -->

<script type="text/javascript">
// 模态框相关函数
function openModal(title, content, footerCallback) {
    document.getElementById('modalTitle').textContent = title;
    document.getElementById('modalBody').innerHTML = content;
    
    const modalFooter = document.getElementById('modalFooter');
    if (footerCallback) {
        modalFooter.innerHTML = footerCallback();
        modalFooter.classList.remove('hidden');
    } else {
        modalFooter.classList.add('hidden');
    }
    
    document.getElementById('appModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    document.getElementById('appModal').classList.add('hidden');
    document.body.style.overflow = '';
}

// Toast 提示函数
function showToast(message, type = 'info', duration = 2000) {
    const toastWrap = document.getElementById('toastWrap');
    const toast = document.createElement('div');
    
    let bgClass = 'bg-gray-800';
    if (type === 'success') bgClass = 'bg-green-600';
    if (type === 'error') bgClass = 'bg-red-600';
    if (type === 'warning') bgClass = 'bg-yellow-600';
    
    toast.className = `${bgClass} text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transform transition-all duration-300 ease-in-out opacity-0 translate-y-[-10px]`;
    toast.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'exclamation' : type === 'warning' ? 'exclamation-triangle' : 'info'}"></i><span>${message}</span>`;
    
    toastWrap.appendChild(toast);
    
    // 触发动画
    setTimeout(() => {
        toast.classList.remove('opacity-0', 'translate-y-[-10px]');
    }, 10);
    
    // 自动移除
    setTimeout(() => {
        toast.classList.add('opacity-0', 'translate-y-[-10px]');
        setTimeout(() => {
            toastWrap.removeChild(toast);
        }, 300);
    }, duration);
}

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

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

	function saveSetting(obj){
		var qz = $("input[name='qz']").val();
		var qz2 = $("input[name='qz2']").val();
		if(qz==''){showToast('请确保每项不能为空！', 'error');return false;}
		if(qz.length<2){
			showToast('域名前缀太短！', 'error'); return false;
		}else if(qz.length>10){
			showToast('域名前缀太长！', 'error'); return false;
		}
		if(qz2!=undefined){
			if(qz2.length<2){
				showToast('备用域名前缀太短！', 'error'); return false;
			}else if(qz2.length>10){
				showToast('备用域名前缀太长！', 'error'); return false;
			}
		}
		showLoading();
		$.ajax({
			type : 'POST',
			url : 'ajax.php?act=fenzhan',
			data : $(obj).serialize(),
			dataType : 'json',
			success : function(data) {
				hideLoading();
				if(data.code == 1){
					openModal('提示', '设置保存成功！', function() {
						return '<button onclick="window.location.reload()" class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors">确定</button>';
					});
				}else{
					showToast(data.msg, 'error');
				}
			},
			error:function(data){
				hideLoading();
				showToast('服务器错误', 'error');
			}
		});
	}
</script>