{extend name="base" /}
{block name="title"}{:lang('admin_home')}{/block}

{block name="main"}
<div class="layui-layout layui-layout-admin">
    {include file="public/menu" /}

    <!-- 主体内容 -->
    <div class="layui-body royal-home-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12"> 
                <div class="royal-news-card"> 
                    <div class="royal-news-icon">
                        <i class="layui-icon layui-icon-notice"></i>
                    </div>
                    <div class="royal-news-container">
                        <div class="royal-news-list">
                            {foreach $latestNews as $news}
                            <div class="royal-news-item">
                                <span class="royal-news-time">【 {$news.time} 】</span>
                                <span class="royal-news-content">{$news.content}</span>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <!-- 数据概览卡片 -->
                <div class="royal-home-data layui-card">
                    <div class="layui-card-header royal-card-header">
                        <i class="layui-icon layui-icon-chart"></i>
                        {$pageTitles.website_data_overview}
                    </div>
                    <div class="layui-card-body royal-data-card-body layui-col-space15">
                        <!-- 循环生成数据卡片 -->
                        {foreach $cardsConfig as $card}
                        <div class="royal-data-card layui-col-xs6 layui-col-sm3">
                            <a href="{$card.url}" class="royal-data-card-link">
                                <div class="royal-data-card-content" style="background: linear-gradient(135deg, {$card.gradient.start}, {$card.gradient.end});">
                                    {if isset($card.badge)}
                                    <div class="royal-data-badge royal-badge-{$card.badge.color}">{$card.badge.text}</div>
                                    {/if}
                                    <div class="royal-data-icon">
                                        <i class="layui-icon {$card.icon}"></i>
                                    </div>
                                    <div class="royal-data-info">
                                        <div class="royal-data-count">{$card.count|default=0}</div>
                                        <div class="royal-data-title">{$card.title}</div>
                                    </div> 
                                </div>
                            </a>  
                        </div>
                        {/foreach}
                    </div>
                </div>
                                
               <!-- 快捷方式 -->
                <div class="layui-card royal-shortcut-card">
                    <div class="layui-card-header royal-card-header">
                        <i class="layui-icon layui-icon-app"></i>
                        {$pageTitles.quick_operations}
                    </div>
                    <div class="layui-card-body">
                        <div class="royal-shortcut">
                            {foreach $shortcuts as $shortcut}
                            <div class="royal-shortcut-item">
                                <a href="{$shortcut.url}" 
                                class="royal-shortcut-link {$shortcut.class|default='royal-normal-link'}"
                                {if isset($shortcut['data-url'])}data-url="{$shortcut['data-url']}"{/if} >
                                    <i class="layui-icon {$shortcut.icon}"></i>
                                    <cite>{$shortcut.title}</cite>
                                </a>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <!-- 程序信息 -->
                <div class="layui-card royal-program-card">
                    <div class="layui-card-header royal-card-header">
                        <i class="layui-icon layui-icon-console"></i>
                        {$pageTitles.system_information}
                    </div>
                    <div class="layui-card-body royal-program-body">
                        <ul class="royal-program-list">
                            <li class="royal-program-item">
                                <div class="royal-program-label">{$jsLang.system_version}</div>
                                <div class="royal-program-value">{$system_info.user_agent}</div>
                            </li>
                            <li class="royal-program-item">
                                <div class="royal-program-label">{$jsLang.php_version}</div>
                                <div class="royal-program-value">{$system_info.php_version}</div>
                            </li>
                            <li class="royal-program-item">
                                <div class="royal-program-label">{$jsLang.server_software}</div>
                                <div class="royal-program-value">{$system_info.server_software}</div>
                            </li>
                            <li class="royal-program-item">
                                <div class="royal-program-label">{$jsLang.database}</div>
                                <div class="royal-program-value">{$system_info.database}</div>
                            </li> 
                            <li class="royal-program-item">
                                <div class="royal-program-label">{$jsLang.login_ip}</div>
                                <div class="royal-program-value">{$system_info.remote_ip}</div>
                            </li>
                            
                            <li class="royal-program-item">
                                <div class="royal-program-label">{$jsLang.uptime}</div>
                                <div class="royal-program-value">{$system_info.uptime}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 右侧边栏 -->
            <div class="layui-col-md3 royal-sidebar">
                <!-- 网站到期倒计时 -->
                <div class="layui-card royal-countdown-card">
                    <div class="layui-card-header royal-card-header">
                        <i class="layui-icon layui-icon-time"></i>
                        {$pageTitles.website_expiry_countdown}
                    </div>
                    <div class="layui-card-body royal-countdown-body">
                        <div class="royal-countdown">
                            <div class="royal-countdown-item">
                                <div class="royal-countdown-number" id="royal-days">00</div>
                                <div class="royal-countdown-label">{$jsLang.day}</div>
                            </div>
                            <div class="royal-countdown-colon">:</div>
                            <div class="royal-countdown-item">
                                <div class="royal-countdown-number" id="royal-hours">00</div>
                                <div class="royal-countdown-label">{$jsLang.hour}</div>
                            </div>
                            <div class="royal-countdown-colon">:</div>
                            <div class="royal-countdown-item">
                                <div class="royal-countdown-number" id="royal-minutes">00</div>
                                <div class="royal-countdown-label">{$jsLang.minute}</div>
                            </div>
                            <div class="royal-countdown-colon">:</div>
                            <div class="royal-countdown-item">
                                <div class="royal-countdown-number" id="royal-seconds">00</div>
                                <div class="royal-countdown-label">{$jsLang.second}</div>
                            </div>
                        </div>
                        <div class="royal-countdown-tip">
                            {$jsLang.website_expiry} <span id="royal-expire-date">{$expire_date}</span>
                        </div>
                    </div>
                </div>
                
                <!-- 系统信息面板 -->
                <div class="layui-card royal-system-card">
                    <div class="layui-card-header royal-card-header">
                        <i class="layui-icon layui-icon-tips"></i>
                        {$pageTitles.notes}
                    </div>
                    <div class="layui-card-body royal-system-body">
                        <ul class="royal-notice-list">
                            {foreach $securityRules as $vo}
                            <li class="royal-notice-item">
                                <div class="royal-notice-title">{$vo.title}</div>
                                <div class="royal-notice-content">
                                    {$vo.content|raw}
                                </div>
                            </li>
                            {/foreach}
                        </ul> 
                    </div>
                </div>
            </div>
        </div>
        
 
    </div>
    
</div>
 
{/block}
  {block name="javascript"}
 
<script>
layui.use(['layer', 'jquery', 'carousel'], function(){
    var layer = layui.layer;
    var $ = layui.jquery;
 
    
    // 捐助按钮
    $('.royal-donate-btn').on('click', function(){
        layer.open({
            type: 1,
            title: '{$pageTitles.support_us}',
            area: ['400px', '400px'],
            content: '<div style="padding:20px;text-align:center;"><p>{$jsLang.thank_you_for_support}</p><p>{$jsLang.donation_help}</p><div style="margin:20px 0;"><img src="/static/admin/images/wechat-pay.jpg" alt="{$jsLang.wechat_qrcode}" style="max-width:200px;"></div></div>'
        });
    });

    // 网站到期倒计时
    function updateCountdown() {
        // 设置网站到期日期
        var expireDate = new Date('{$expire_date}').getTime();
        var now = new Date().getTime();
        var distance = expireDate - now;
        
        if (distance < 0) {
            document.getElementById("royal-days").innerHTML = "00";
            document.getElementById("royal-hours").innerHTML = "00";
            document.getElementById("royal-minutes").innerHTML = "00";
            document.getElementById("royal-seconds").innerHTML = "00";
            return;
        }
        
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        document.getElementById("royal-days").innerHTML = days.toString().padStart(2, '0');
        document.getElementById("royal-hours").innerHTML = hours.toString().padStart(2, '0');
        document.getElementById("royal-minutes").innerHTML = minutes.toString().padStart(2, '0');
        document.getElementById("royal-seconds").innerHTML = seconds.toString().padStart(2, '0');
    }
    
    // 初始化倒计时
    updateCountdown();
    setInterval(updateCountdown, 1000);
});
</script>

{/block}