<?php 
/**
 * 流程图Tab切换区块模板
 * 支持自定义器设置和短代码调用
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

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

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

// 定义三个固定的tab数据
$flowchart_tabs = array(
    1 => array(
        'id' => 'pack-process',
        'title' => get_theme_mod('flowchart_tab_1_title', 'PACK Process Flowchart'),
        'image' => get_theme_mod('flowchart_tab_1_image', get_template_directory_uri() . '/assets/images/pack-process flow-chart.png'),
        'note' => get_theme_mod('flowchart_tab_1_note', 'Note 1: Blue procedures denote liquid-cooled project operations; Turquoise procedures indicate universal processes (Air-cooled PACK units require turquoise procedures only). 2.Operations marked with [★] denote critical processes; those marked with [▲] indicate inspection operations.')
    ),
    2 => array(
        'id' => 'enclosure-manufacturing',
        'title' => get_theme_mod('flowchart_tab_2_title', 'Enclosure Manufacturing Process Flow Diagram'),
        'image' => get_theme_mod('flowchart_tab_2_image', get_template_directory_uri() . '/assets/images/cabinet-process flow-chart.png'),
        'note' => get_theme_mod('flowchart_tab_2_note', '') // 第二个tab没有文案
    ),
    3 => array(
        'id' => 'module-manufacturing',
        'title' => get_theme_mod('flowchart_tab_3_title', 'Module Manufacturing Process Flow Diagram'),
        'image' => get_theme_mod('flowchart_tab_3_image', get_template_directory_uri() . '/assets/images/module-process flow.png'),
        'note' => get_theme_mod('flowchart_tab_3_note', 'Note: [★] denotes Critical Processes; [▲] denotes Inspection Processes.')
    )
);

// 获取第一个tab作为默认显示
$first_tab = $flowchart_tabs[1];
?>

<style>
/* 流程图Tab区块样式 */
#<?php echo esc_attr($container_id); ?>.nenghui-flowchart-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'NotoSans', Arial, sans-serif;
    bacgroud: #fafafa;
}

#<?php echo esc_attr($container_id); ?> .flowchart-tabs {
    display: flex;
    margin-bottom: 40px;
}

#<?php echo esc_attr($container_id); ?> .flowchart-tab {
    width: 100%;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

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

#<?php echo esc_attr($container_id); ?> .flowchart-tab.active {
    background: linear-gradient(135deg, #2cb5a9, #00699f);
    border-color: #2cb5a9;
    color: white;
}

#<?php echo esc_attr($container_id); ?> .flowchart-tab.active:hover {
    background: linear-gradient(135deg, #2cb5a9, #00699f);
    border-color: #2cb5a9;
}

#<?php echo esc_attr($container_id); ?> .flowchart-content {
    padding: 30px;
}

#<?php echo esc_attr($container_id); ?> .flowchart-image {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

#<?php echo esc_attr($container_id); ?> .flowchart-image img {
    max-width: 100%;
    height: auto;
}

#<?php echo esc_attr($container_id); ?> .flowchart-note {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
}

/* 动画效果 */
#<?php echo esc_attr($container_id); ?> .flowchart-content {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#<?php echo esc_attr($container_id); ?> .flowchart-content.fade-out {
    opacity: 0;
    transform: translateY(10px);
}

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

/* 响应式设计 */
@media (max-width: 768px) {
    #<?php echo esc_attr($container_id); ?>.nenghui-flowchart-container {
        padding: 30px 15px;
    }
    
    #<?php echo esc_attr($container_id); ?> .flowchart-tabs {
        gap: 5px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }
    
    #<?php echo esc_attr($container_id); ?> .flowchart-tab {
        font-size: 11px;
        padding: 8px 4px;
        flex: 1;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
    }
    
    #<?php echo esc_attr($container_id); ?> .flowchart-content {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    #<?php echo esc_attr($container_id); ?> .flowchart-content {
        padding: 15px;
    }
    
    #<?php echo esc_attr($container_id); ?> .flowchart-note {
        font-size: 13px;
        padding: 12px;
    }
}
</style>

<div id="<?php echo esc_attr($container_id); ?>" class="nenghui-flowchart-container <?php echo esc_attr($container_class); ?>" data-aos="fade-up">
    <!-- 选项卡导航 -->
    <div class="flowchart-tabs" data-aos="fade-up" data-aos-delay="200">
        <?php foreach ($flowchart_tabs as $index => $tab) : ?>
            <button class="flowchart-tab<?php echo $index === 1 ? ' active' : ''; ?>" 
                    data-flowchart-tab="<?php echo esc_attr($tab['id']); ?>">
                <?php echo esc_html($tab['title']); ?>
            </button>
        <?php endforeach; ?>
    </div>
    
    <!-- 内容区域 -->
    <div class="flowchart-content" data-aos="fade-up" data-aos-delay="400">
        <div class="flowchart-image">
            <img src="<?php echo esc_url($first_tab['image']); ?>" 
                 alt="<?php echo esc_attr($first_tab['title']); ?>" 
                 id="flowchart-current-image">
        </div>
        <?php if (!empty($first_tab['note'])) : ?>
            <div class="flowchart-note" id="flowchart-current-note">
                <?php echo wp_kses_post($first_tab['note']); ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<script>
/**
 * 流程图Tab切换功能
 */
function initFlowchartTabs() {
    const container = document.getElementById('<?php echo esc_js($container_id); ?>');
    if (!container) return;
    
    const tabs = container.querySelectorAll('.flowchart-tab');
    const content = container.querySelector('.flowchart-content');
    const image = container.querySelector('#flowchart-current-image');
    const note = container.querySelector('#flowchart-current-note');
    
    // 流程图数据
    const flowchartData = <?php echo json_encode($flowchart_tabs, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // 移除所有活动状态
            tabs.forEach(t => t.classList.remove('active'));
            
            // 添加当前活动状态
            this.classList.add('active');
            
            // 获取tab类型
            const tabType = this.getAttribute('data-flowchart-tab');
            
            // 更新内容
            updateFlowchartContent(tabType);
        });
    });
    
    function updateFlowchartContent(tabType) {
        // 找到对应的数据
        let tabData = null;
        for (let key in flowchartData) {
            if (flowchartData[key].id === tabType) {
                tabData = flowchartData[key];
                break;
            }
        }
        
        if (!tabData) return;
        
        // 添加淡出效果
        content.classList.add('fade-out');
        
        // 延迟更新内容
        setTimeout(() => {
            // 更新图片
            if (image) {
                image.src = tabData.image;
                image.alt = tabData.title;
            }
            
            // 更新注释
            if (note) {
                if (tabData.note && tabData.note.trim() !== '') {
                    note.innerHTML = tabData.note;
                    note.style.display = 'block';
                } else {
                    note.style.display = 'none';
                }
            }
            
            // 移除淡出效果，添加淡入效果
            content.classList.remove('fade-out');
            content.classList.add('fade-in');
            
            // 清理动画类
            setTimeout(() => {
                content.classList.remove('fade-in');
            }, 300);
        }, 150);
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initFlowchartTabs();
});
</script>