<?php
$title='个人信息';
include __DIR__ . '/head.php';
$key = md5(mt_rand(0,999).time());
$_SESSION["check_key"] = $key;
?>
<div class="py-8">
    
    <!-- 信息卡片 -->
    <div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-2xl p-6 hover:shadow-2xl/80 transition-shadow">
        <form onsubmit="saveSetting(this);return false;" method="post" class="space-y-5">
            <input type="hidden" name="key" value="<?php echo $key?>">
            
            <!-- 登录账号 -->
            <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">
                        <i class="fas fa-user"></i>
                    </span>
                    <input type="text" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl bg-gray-50 cursor-not-allowed" 
                           value="<?php echo $userrow['user']?>" disabled="disabled">
                </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-lock"></i>
                    </span>
                    <input type="password" 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="newpwd" placeholder="不修改请留空">
                </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-lock"></i>
                    </span>
                    <input type="password" 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="newpwd2" placeholder="不修改请留空">
                </div>
            </div>
            
            <!-- QQ账号 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">QQ账号</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="fab fa-qq"></i>
                    </span>
                    <input type="number" 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="qq" value="<?php echo $userrow['qq']?>" placeholder="可用于找回登录密码、客服QQ">
                </div>
            </div>
            
            <!-- 手机号 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                <div class="flex gap-3">
                    <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="fas fa-phone"></i>
                        </span>
                        <input type="text" id="phone" 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" 
                               value="<?php echo $userrow['phone']?>" placeholder="用于接收通知、找回密码">
                    </div>
                    <div class="flex-shrink-0">
                        <button type="button" onclick="edit_phone_check()" 
                                class="h-12 px-4 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white rounded-xl font-medium transition-all shadow-sm hover:shadow-md">
                            绑定
                        </button>
                    </div>
                </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 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>



<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');
}

function edit_phone_check(){
    var phone = $('#phone').val();
    var key = $('input[name="key"]').val();
    if(phone == ''){
        showToast('手机号不能为空', 'error');return false;
    }
    showLoading();
    $.ajax({
        type : 'POST',
        url : 'ajax.php?act=edit_phone_check',
        data : {phone:phone,key:key},
        dataType : 'json',
        success : function(data) {
            hideLoading();
            if(data.code == '1'){
                var content = '<input type="text" id="codeInput" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="输入手机验证码">';
                openModal('手机验证码', content, function() {
                    return '<div class="flex gap-2"><button onclick="closeModal()" class="flex-1 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors">取消</button><button onclick="submitCode(\'' + phone + '\')" class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors">确定</button></div>';
                });
            }else{
                showToast(data.msg, 'error');
            }
        },
        error:function(data){
            hideLoading();
            showToast('请求超时', 'error');
        }
    });  
}

function submitCode(phone) {
    var code = document.getElementById('codeInput').value;
    if(!code) {
        showToast('请输入验证码', 'error');
        return;
    }
    closeModal();
    showLoading();
    $.post('ajax.php?act=edit_phone', {phone:phone,code:code}, function(d, textStatus, xhr){
        hideLoading();
        if(d.code == 1){
            showToast(d.msg, 'success');
            setTimeout(function() {
                location.reload();
            }, 1500);
        }else{
            showToast(d.msg, 'error');
        }
    },'json');
}

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