<?php
$title='信息通知管理';
include __DIR__ . '/head.php';
?>
<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>
            
            <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="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 transition-colors group-focus-within:text-indigo-500">
                            <i class="fas fa-envelope"></i>
                        </span>
                        <input type="email" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all group" 
                               name="email" value="<?php echo $userrow['email']?>">
                    </div>
                </div>
                
                <!-- 手机号码 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 transition-colors group-focus-within:text-indigo-500">
                            <i class="fas fa-phone"></i>
                        </span>
                        <input type="text" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all group" 
                               name="phone" value="<?php echo $userrow['phone']?>">
                    </div>
                </div>
                
                <!-- 微信UID -->
                <?php if($conf['wechat_apptoken']!=''){?>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">微信UID</label>
                    <div class="flex gap-2">
                        <div class="flex-1 relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 transition-colors group-focus-within:text-indigo-500">
                                <i class="fab fa-weixin"></i>
                            </span>
                            <input type="text" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all group" 
                                   name="wechat_appuid" value="<?php echo $userrow['wechat_appuid']?>" placeholder="请点击右侧获取">
                        </div>
                        <div class="flex-shrink-0">
                            <button type="button" onclick="get_appuid()" 
                                    class="h-12 px-4 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white rounded-xl font-medium transition-all shadow-sm hover:shadow-md">
                                <i class="fas fa-qrcode mr-2"></i>获取
                            </button>
                        </div>
                    </div>
                </div>
                <?php }?>
                
                <!-- 提示信息 -->
                <div class="bg-red-50 border border-red-200 rounded-xl p-4">
                    <p class="text-sm text-red-600">以上信息填写后，QQ账号异常、过期、或其他信息您将会收到通知</p>
                </div>
                
                <!-- 接收通知方式 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">接收通知方式</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 transition-colors group-focus-within:text-indigo-500">
                            <i class="fas fa-bell"></i>
                        </span>
                        <select class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all group" 
                                name="notice_type" default="<?php echo $userrow['notice_type']?>">
                            <option value="0">邮箱</option>
                            <option value="1">手机短信</option>
                            <option value="2">微信</option>
                        </select>
                    </div>
                </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>

<script src="../assets/js/jquery.min.js"></script>
<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');
}

var t;
function get_appuid(){
    clearInterval(t);
    showLoading();
    $.ajax({
        type : 'GET',
        url : 'ajax.php?act=get_WxPusher_qr',
        dataType : 'json',
        success : function(data) {
            hideLoading();
            if(data.code != 1000){
                showToast('获取失败', 'error');return false;
            }
            openModal('请使用微信扫描二维码', '<div style="padding:10px;"><div class="text-center"><p>请在10分钟内扫码</p><img width="200px" src="'+data.data.url+'"></div></div>');
            window.t = setInterval(() => {
              setTimeout(get_WxPusher_uid(data.data.code), 0)
            }, 10000);
        },
        error:function(data){
            hideLoading();
            showToast('服务器错误', 'error');
            return false;
        }
    });
}
function get_WxPusher_uid(code){
    $.ajax({
        type : 'GET',
        url : 'https://wxpusher.zjiecode.com/api/fun/scan-qrcode-uid?code='+code,
        dataType : 'json',
        success : function(data) {
            if(data.code == 1000){
                clearInterval(t);
                $ ("input[name='wechat_appuid']").val(data.data);
                closeModal();
            }
        },
        error:function(data){
            showToast('服务器错误', 'error');
            return false;
        }
    });
}

function saveSetting(obj){
    showLoading();
    $.ajax({
        type : 'POST',
        url : 'ajax.php?act=site',
        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');
            return false;
        }
    });
}

// 设置默认值
var items = $ ("select[default]" );
for (i = 0; i < items.length; i++) {
    $ (items[i]).val($(items[i]).attr("default")||0);
}
</script>

<!-- 通用模态框 -->
<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>

