<?php 
/**
 * Tabs区块模板
 * 支持自定义器设置和短代码调用
 */
 
// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 获取短代码参数（如果通过短代码调用）
global $tabs_shortcode_atts;
$is_shortcode = !empty($tabs_shortcode_atts) && is_array($tabs_shortcode_atts);

// 获取容器设置
$container_id = $is_shortcode ? $tabs_shortcode_atts['id'] : 'nenghui-tabs';
$container_class = $is_shortcode ? $tabs_shortcode_atts['class'] : '';
$show_animation = $is_shortcode ? $tabs_shortcode_atts['show_animation'] : 'true';

// 获取选项卡数量设置
$tabs_count = $is_shortcode && !empty($tabs_shortcode_atts['tabs_count']) ?
    intval($tabs_shortcode_atts['tabs_count']) :
    get_theme_mod('tabs_count', 3);

// 获取实际有效的选项卡（只有设置了标题的才算有效）
$valid_tabs = array();
$max_check = max($tabs_count, 5); // 检查范围扩大到5或设定数量
for ($i = 1; $i <= $max_check; $i++) {
    // 使用自定义器中设置的默认值
    $tab_title = get_theme_mod('tab_title_' . $i, "选项卡 {$i}");
    if (!empty(trim($tab_title))) {
        $valid_tabs[] = $i;
    }
}

// 如果简码指定了数量，则只取前N个有效选项卡
if ($is_shortcode && !empty($tabs_shortcode_atts['tabs_count'])) {
    $valid_tabs = array_slice($valid_tabs, 0, $tabs_count);
} else {
    // 否则取设定数量的有效选项卡
    $valid_tabs = array_slice($valid_tabs, 0, $tabs_count);
}

$first_tab_id = '';
$first_tab_title = '';
$first_tab_image = '';
$first_tab_image_alt = '';
$first_tab_button_text = '';
$first_tab_button_url = '';

// 获取第一个有效选项卡的信息作为默认显示
$default_placeholder = get_template_directory_uri() . '/assets/images/NaN-img.png';
if (!empty($valid_tabs)) {
    $first_tab_index = $valid_tabs[0];
    $first_tab_id = get_theme_mod('tab_id_' . $first_tab_index, "tab-{$first_tab_index}");
    $first_tab_title = get_theme_mod('tab_main_title_' . $first_tab_index, "这是选项卡 {$first_tab_index} 的主要内容标题");
    $first_tab_image = get_theme_mod('tab_image_' . $first_tab_index, $default_placeholder);
    $first_tab_image_alt = get_theme_mod('tab_image_alt_' . $first_tab_index, "选项卡 {$first_tab_index} 图片");
    $first_tab_button_text = get_theme_mod('tab_button_text_' . $first_tab_index, '了解更多');
    $first_tab_button_url = get_theme_mod('tab_button_url_' . $first_tab_index, '#');
    
    // 如果没有设置图片，使用默认占位图片
    if (empty($first_tab_image)) {
        $first_tab_image = $default_placeholder;
    }
} else {
    // 如果没有有效选项卡，使用第一个选项卡的默认值
    $first_tab_id = 'tab-1';
    $first_tab_title = '这是选项卡 1 的主要内容标题';
    $first_tab_image = $default_placeholder;
    $first_tab_image_alt = '选项卡 1 图片';
    $first_tab_button_text = '了解更多';
    $first_tab_button_url = '#';
    // 确保至少有一个默认选项卡
    $valid_tabs = array(1);
}
?>

<style>
/* Tabs区块样式 - 使用更具体的选择器避免冲突 */
#<?php echo esc_attr($container_id); ?>.nenghui-container,
.nenghui-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'NotoSans', Arial, sans-serif;
}

#<?php echo esc_attr($container_id); ?> .nenghui-tabs,
.nenghui-container .nenghui-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    gap: 10px;
}

#<?php echo esc_attr($container_id); ?> .nenghui-tab,
.nenghui-container .nenghui-tab {
    padding: 12px 24px;
    background-color: #e8e8e8;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 20px;
    margin-right: 15px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#<?php echo esc_attr($container_id); ?> .nenghui-tab:hover,
.nenghui-container .nenghui-tab:hover {
    background-color: #d0d0d0;
}

#<?php echo esc_attr($container_id); ?> .nenghui-tab.active,
.nenghui-container .nenghui-tab.active {
    background-color: #1e5a96;
    color: white;
}

#<?php echo esc_attr($container_id); ?> .nenghui-tab.active:hover,
.nenghui-container .nenghui-tab.active:hover {
    background-color: #1e5a96;
}

#<?php echo esc_attr($container_id); ?> .main-content,
.nenghui-container .main-content {
    display: flex;
    align-items: center;
    gap: 60px;
    border-radius: 20px;
    padding: 10px;
    background: #ffffff;
    margin-top: 20px;
}

#<?php echo esc_attr($container_id); ?> .content-left,
.nenghui-container .content-left {
    flex: 1;
    max-width: 50%;
}

#<?php echo esc_attr($container_id); ?> .content-right,
.nenghui-container .content-right {
    flex: 1;
    max-width: 50%;
}

#<?php echo esc_attr($container_id); ?> .main-title,
.nenghui-container .main-title {
    font-size: 48px;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
    margin-bottom: 30px;
    transition: all 0.5s ease;
}

#<?php echo esc_attr($container_id); ?> .main-title .highlight,
.nenghui-container .main-title .highlight {
    color: #1e5a96;
}

#<?php echo esc_attr($container_id); ?> .learn-more-btn,
.nenghui-container .learn-more-btn {
    background-color: #1e5a96;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.5s ease;
}

#<?php echo esc_attr($container_id); ?> .learn-more-btn:hover,
.nenghui-container .learn-more-btn:hover {
    background-color: #164a7a;
    text-decoration: none;
}

#<?php echo esc_attr($container_id); ?> .learn-more-btn .arrow,
.nenghui-container .learn-more-btn .arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
}

#<?php echo esc_attr($container_id); ?> .learn-more-btn:hover .arrow,
.nenghui-container .learn-more-btn:hover .arrow {
    transform: translateX(3px);
}

#<?php echo esc_attr($container_id); ?> .tab-image,
.nenghui-container .tab-image {
    width: 100%;
    height: 300px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#<?php echo esc_attr($container_id); ?> .tab-image img,
.nenghui-container .tab-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.5s ease;
}

/* 当没有图片时的占位样式 */
#<?php echo esc_attr($container_id); ?> .tab-image:empty::before,
.nenghui-container .tab-image:empty::before {
    content: "暂无图片";
    color: #999;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 动画效果类 */
#<?php echo esc_attr($container_id); ?> .fade-out,
.nenghui-container .fade-out {
    opacity: 0;
    transform: translateY(20px);
}

#<?php echo esc_attr($container_id); ?> .fade-in,
.nenghui-container .fade-in {
    opacity: 1;
    transform: translateY(0);
}

#<?php echo esc_attr($container_id); ?> .content-left,
.nenghui-container .content-left {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#<?php echo esc_attr($container_id); ?> .content-right,
.nenghui-container .content-right {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    #<?php echo esc_attr($container_id); ?>.nenghui-container,
    .nenghui-container {
        max-width: 95%;
        padding: 40px 15px;
        border-radius: 20px;
    }
    
    #<?php echo esc_attr($container_id); ?> .main-content,
    .nenghui-container .main-content {
        gap: 40px;
        padding: 40px;
    }
}

@media (max-width: 768px) {
    #<?php echo esc_attr($container_id); ?>.nenghui-container,
    .nenghui-container {
        padding: 30px 15px;
        border-radius: 15px;
        max-width: 90%; /* Increase max-width for mobile */
    }
    
    #<?php echo esc_attr($container_id); ?> .main-content,
    .nenghui-container .main-content {
        flex-direction: column;
        padding: 30px 20px;
        gap: 30px;
        align-items: stretch;
    }

    #<?php echo esc_attr($container_id); ?> .content-left,
    .nenghui-container .content-left,
    #<?php echo esc_attr($container_id); ?> .content-right,
    .nenghui-container .content-right {
        width: 100%;
        max-width: 100%;
    }

    #<?php echo esc_attr($container_id); ?> .main-title,
    .nenghui-container .main-title {
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px;
    }

    #<?php echo esc_attr($container_id); ?> .nenghui-tabs,
    .nenghui-container .nenghui-tabs {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 30px;
    }

    #<?php echo esc_attr($container_id); ?> .nenghui-tab,
    .nenghui-container .nenghui-tab {
        font-size: 13px;
        padding: 10px 18px;
    }
    
    #<?php echo esc_attr($container_id); ?> .tab-image,
    .nenghui-container .tab-image {
        height: auto;
        width: 100%;
        max-width: 80%;
        margin: 0 auto;
    }
    
    #<?php echo esc_attr($container_id); ?> .tab-image img,
    .nenghui-container .tab-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    #<?php echo esc_attr($container_id); ?>.nenghui-container,
    .nenghui-container {
        padding: 20px 10px;
    }
    
    #<?php echo esc_attr($container_id); ?> .main-content,
    .nenghui-container .main-content {
        padding: 20px 15px;
    }
    
    #<?php echo esc_attr($container_id); ?> .main-title,
    .nenghui-container .main-title {
        font-size: 28px;
    }
    
    #<?php echo esc_attr($container_id); ?> .nenghui-tab,
    .nenghui-container .nenghui-tab {
        font-size: 12px;
        padding: 8px 16px;
    }
    
    #<?php echo esc_attr($container_id); ?> .learn-more-btn,
    .nenghui-container .learn-more-btn {
        padding: 12px 24px;
        font-size: 14px;
        margin: 0 auto;
        display: inline-flex;
    }
    
    #<?php echo esc_attr($container_id); ?> .content-left,
    .nenghui-container .content-left {
        text-align: center;
    }
    
    #<?php echo esc_attr($container_id); ?> .tab-image,
    .nenghui-container .tab-image {
        max-width: 90%;
    }
}
</style>
<div id="<?php echo esc_attr($container_id); ?>" class="nenghui-container <?php echo esc_attr($container_class); ?>" data-aos="fade-up">
    <!-- 选项卡导航 -->
    <div class="nenghui-tabs" data-aos="fade-up" data-aos-delay="200">
        <?php 
        if (is_array($valid_tabs) && !empty($valid_tabs)) {
            foreach ($valid_tabs as $index => $i) {
                $tab_title = get_theme_mod('tab_title_' . $i, "选项卡 {$i}");
                $tab_id = get_theme_mod('tab_id_' . $i, "tab-{$i}");
                
                if (!empty($tab_title)) {
                    $active_class = ($index == 0) ? ' active' : '';
                    echo '<button class="nenghui-tab' . $active_class . '" data-nenghui-tab="' . esc_attr($tab_id) . '">';
                    echo esc_html($tab_title);
                    echo '</button>';
                }
            }
        } else {
            // 如果没有有效选项卡，显示提示信息
            echo '<div style="text-align: center; padding: 20px; color: #666;">请在自定义器中设置选项卡内容</div>';
        }
        ?>
    </div>
    <!-- 主要内容区域 -->
    <div class="main-content" data-aos="fade-up" data-aos-delay="400">
        <div class="content-left" data-aos="fade-up" data-aos-delay="600">
            <h1 class="main-title">
                <?php echo wp_kses_post($first_tab_title); ?>
            </h1>
            <?php if (!empty($first_tab_button_text)) : ?>
            <a href="<?php echo esc_url($first_tab_button_url); ?>" class="learn-more-btn">
                <span><?php echo esc_html($first_tab_button_text); ?></span>
            </a>
            <?php endif; ?>
        </div>
        <div class="content-right" data-aos="fade-up" data-aos-delay="800">
            <div class="tab-image">
                <img src="<?php echo esc_url($first_tab_image); ?>" alt="<?php echo esc_attr($first_tab_image_alt); ?>">
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * 选项卡切换功能
     * 处理用户鼠标移入不同选项卡时的交互
     */
    function initNenghuiTabs() {
        const container = document.getElementById('<?php echo esc_js($container_id); ?>');
        if (!container) return;
        
        const nenghuiTabs = container.querySelectorAll('.nenghui-tab');

        nenghuiTabs.forEach(nenghuiTab => {
            nenghuiTab.addEventListener('mouseenter', function () {
                // 移除所有选项卡的活动状态
                nenghuiTabs.forEach(t => t.classList.remove('active'));

                // 为当前鼠标移入的选项卡添加活动状态
                this.classList.add('active');

                // 获取选项卡类型
                const nenghuiTabType = this.getAttribute('data-nenghui-tab');

                // 根据选项卡类型更新内容
                updateContent(nenghuiTabType, container);
            });
        });
    }

    /**
     * 根据选项卡类型更新页面内容
     * @param {string} nenghuiTabType - 选项卡类型
     */
    function updateContent(nenghuiTabType, container) {
        // 获取PHP传递的选项卡数据
        const tabsData = <?php 
            $tabs_data = array();
            if (is_array($valid_tabs) && !empty($valid_tabs)) {
                foreach ($valid_tabs as $i) {
                    // 使用自定义器中设置的默认值
                    $tab_title = get_theme_mod('tab_title_' . $i, "选项卡 {$i}");
                    if (!empty($tab_title)) {
                        $tab_id = get_theme_mod('tab_id_' . $i, "tab-{$i}");
                        $tab_main_title = get_theme_mod('tab_main_title_' . $i, "这是选项卡 {$i} 的主要内容标题");
                        $tab_image = get_theme_mod('tab_image_' . $i, $default_placeholder);
                        $tab_image_alt = get_theme_mod('tab_image_alt_' . $i, "选项卡 {$i} 图片");
                        $tab_button_text = get_theme_mod('tab_button_text_' . $i, '了解更多');
                        $tab_button_url = get_theme_mod('tab_button_url_' . $i, '#');
                        
                        // 如果没有设置图片，使用默认占位图片
                        if (empty($tab_image)) {
                            $tab_image = $default_placeholder;
                        }
                        
                        $tabs_data[$tab_id] = array(
                            'title' => wp_kses_post($tab_main_title),
                            'image' => $tab_image,
                            'imageAlt' => $tab_image_alt,
                            'buttonText' => $tab_button_text,
                            'buttonUrl' => $tab_button_url
                        );
                    }
                }
            }
            echo json_encode($tabs_data, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
        ?>;

        // 更新内容
        if (tabsData[nenghuiTabType]) {
            const data = tabsData[nenghuiTabType];
            const contentLeft = container.querySelector('.content-left');
            const contentRight = container.querySelector('.content-right');
            const title = container.querySelector('.main-title');
            const button = container.querySelector('.learn-more-btn');
            const image = container.querySelector('.tab-image img');

            // 添加淡出效果
            contentLeft.classList.add('fade-out');
            contentRight.classList.add('fade-out');

            // 延迟更新内容，等待淡出动画完成
            setTimeout(() => {
                // 更新标题
                if (title && data.title) {
                    title.innerHTML = data.title;
                }

                // 更新按钮
                if (button && data.buttonText) {
                    button.href = data.buttonUrl;
                    const textSpan = button.querySelector('span:not(.arrow)');
                    if (textSpan) {
                        textSpan.textContent = data.buttonText;
                    } else {
                        button.innerHTML = '<span>' + data.buttonText + '</span><span class="arrow">→</span>';
                    }
                }

                // 更新图片
                if (image && data.image) {
                    image.src = data.image;
                    image.alt = data.imageAlt;
                }

                // 移除淡出效果，添加淡入效果
                contentLeft.classList.remove('fade-out');
                contentRight.classList.remove('fade-out');
                contentLeft.classList.add('fade-in');
                contentRight.classList.add('fade-in');

                // 清理动画类
                setTimeout(() => {
                    contentLeft.classList.remove('fade-in');
                    contentRight.classList.remove('fade-in');
                }, 500);
            }, 250); // 等待一半的过渡时间
        }
    }

    // 页面加载完成后初始化功能
    document.addEventListener('DOMContentLoaded', function () {
        initNenghuiTabs();
        // 如果存在initLearnMoreButton函数则调用
        if (typeof initLearnMoreButton === 'function') {
            initLearnMoreButton();
        }
    });
</script>