<?php
$title='首页模板设置';
include __DIR__ . '/head.php';
if($userrow['vip'] <= 1)exit("<script language='javascript'>alert('无权限访问');window.location.href='./set.php';</script>");
if($conf['fenzhan_template'] < 1)exit("<script language='javascript'>alert('不可更换首页模板');window.location.href='./set.php';</script>");
?>
<div class="py-8">
    <div class="max-w-6xl 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
                $conf['template'] = $userrow['template'];
                $loadfile = \lib\Template::getList();
                $template_show = '';
                foreach ($loadfile as $template) {
                    $template_show.='
                    <div class="col-sm-6 col-md-3 mb-4">
                        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition-shadow cursor-pointer">
                            <a href="javascript:changeTemplate(\''.$template.'\')" class="block text-center">
                                <img class="w-full h-auto rounded-lg mb-3" src="../template/'.$template.'/preview.png" title="点击更换到该模板">
                                <p class="font-medium text-gray-800">'.$template.'</p>
                            </a>
                        </div>
                    </div>';
                }
            ?>
            
            <!-- 当前使用模板 -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-700 mb-4">当前使用模板：</h3>
                <div class="flex flex-col md:flex-row items-start gap-4">
                    <div class="w-full md:w-1/4">
                        <img class="w-full h-auto rounded-xl shadow-sm" src="../template/<?php echo $conf['template']?>/preview.png">
                    </div>
                    <div class="w-full md:w-3/4">
                        <p class="text-gray-800 mb-2">模板名称：<span class="font-medium"><?php echo $conf['template']?></span></p>
                        <p class="text-gray-600 text-sm bg-gray-50 p-3 rounded-lg">注：仅对分站生效</p>
                    </div>
                </div>
            </div>
            
            <hr class="my-6 border-gray-200">
            
            <!-- 更换模板 -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-700 mb-4">更换模板：</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                    <?php echo $template_show?>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="mt-6">
                <a href="javascript:history.back(-1)" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors">
                    <i class="fas fa-arrow-left mr-2"></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>
// 模态框相关函数
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 changeTemplate(template){
    showLoading();
    $.ajax({
        type : 'POST',
        url : 'ajax.php?act=template',
        data : {template:template},
        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>