<?php 
/**
 * 视频Banner区块模板
 */

// 检查是否从简码调用
global $video_banner_shortcode_values;

if (isset($video_banner_shortcode_values)) {
    // 从简码获取配置
    $bg_image = $video_banner_shortcode_values['video_banner_bg_image'];
    $height = $video_banner_shortcode_values['video_banner_height'];
    $video_bg_enabled = $video_banner_shortcode_values['video_banner_video_bg_enabled'];
    $video_bg_url = $video_banner_shortcode_values['video_banner_video_bg_url'];
    $video_bg_opacity = $video_banner_shortcode_values['video_banner_video_bg_opacity'];
    $video_bg_lazy_load = $video_banner_shortcode_values['video_banner_video_bg_lazy_load'];
    $block_id = $video_banner_shortcode_values['video_banner_block_id'];
    $block_class = $video_banner_shortcode_values['video_banner_block_class'];
} else {
    // 获取区块ID和类名
    $block_id = isset($block['id']) ? $block['id'] : 'video-banner-' . uniqid();
    $block_class = isset($block['className']) ? $block['className'] : '';

    // 获取视频Banner配置
    $bg_image = get_video_banner_bg_image();
    $height = get_video_banner_height();

    // 视频背景配置
    $video_bg_enabled = get_video_banner_enable_background();
    $video_bg_url = get_video_banner_background_url();
    $video_bg_opacity = get_video_banner_background_opacity();
    $video_bg_lazy_load = get_video_banner_enable_lazy_load();

    // 设置默认值
    $height = $height ?: '80vh';
    $video_bg_opacity = ($video_bg_opacity ?: 80) / 100; // 转换为0-1的小数
}

// 生成唯一ID
$unique_id = 'video-banner-' . uniqid();
?>

<div class="video-banner-block <?php echo esc_attr($block_class); ?>" id="<?php echo esc_attr($block_id); ?>">
    <div class="video-banner-container" 
         id="<?php echo esc_attr($unique_id); ?>" 
         style="height: <?php echo esc_attr($height); ?>;"
         data-height="<?php echo esc_attr($height); ?>">
        
        <!-- 背景图片 -->
        <?php if ($bg_image): ?>
        <div class="video-banner-bg-image" style="background-image: url('<?php echo esc_url($bg_image); ?>');">
        </div>
        <?php endif; ?>
        
        <!-- 视频背景 -->
        <?php if ($video_bg_enabled && $video_bg_url): ?>
        <div class="video-background-container" style="opacity: 1;">
            <video class="video-background" 
                   autoplay 
                   muted 
                   loop 
                   playsinline
                   <?php echo $video_bg_lazy_load ? 'preload="none"' : 'preload="auto"'; ?>>
                <source src="<?php echo esc_url($video_bg_url); ?>" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
        </div>
        <?php endif; ?>
        
        <!-- 视频内容 -->
        <?php if (get_video_banner_content_title() || get_video_banner_content_subtitle() || get_video_banner_content_description()): ?>
        <div class="video-banner-content">
            <?php if (get_video_banner_content_title()): ?>
            <h1 class="video-banner-title"><?php echo esc_html(get_video_banner_content_title()); ?></h1>
            <?php endif; ?>
            
            <?php if (get_video_banner_content_subtitle()): ?>
            <h2 class="video-banner-subtitle"><?php echo esc_html(get_video_banner_content_subtitle()); ?></h2>
            <?php endif; ?>
            
            <?php if (get_video_banner_content_description()): ?>
            <p class="video-banner-description"><?php echo esc_html(get_video_banner_content_description()); ?></p>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>
</div>



<?php
// 动态加载video-banner相关资源
if (!wp_style_is('video-banner-css', 'enqueued')) {
    $theme_url = get_template_directory_uri();
    $theme_path = get_template_directory();
    $css_file = '/assets/css/video-banner.css';
    
    if (file_exists($theme_path . $css_file)) {
        wp_enqueue_style('video-banner-css', $theme_url . $css_file, array(), '1.0.0');
    } else {
        error_log('Missing CSS file: ' . $theme_path . $css_file);
    }
}

if (!wp_script_is('video-banner-js', 'enqueued')) {
    $theme_url = get_template_directory_uri();
    $theme_path = get_template_directory();
    $js_file = '/assets/js/video-banner.js';
    
    if (file_exists($theme_path . $js_file)) {
        // 确保GSAP已加载
        wp_enqueue_script('gsap', $theme_url . '/assets/js/gsap.min.js', array('jquery'), '3.12.2', true);
        wp_enqueue_script('video-banner-js', $theme_url . $js_file, array('jquery', 'gsap'), '1.0.0', true);
    } else {
        error_log('Missing JS file: ' . $theme_path . $js_file);
    }
}
?>

<script>
// 确保视频背景功能正常工作
document.addEventListener('DOMContentLoaded', function() {
    // 初始化视频背景
    const videoContainers = document.querySelectorAll('.video-banner-container');
    videoContainers.forEach(function(container) {
        const video = container.querySelector('.video-background');
        if (video) {
            // 确保视频自动播放
            video.play().catch(function(error) {
                console.log('视频自动播放失败:', error);
            });
            
            // 监听视频加载
            video.addEventListener('loadeddata', function() {
                video.style.opacity = '1';
            });
        }
    });
    
    // 初始化视频播放按钮
    const playButtons = document.querySelectorAll('.video-play-button');
    playButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            const videoUrl = this.getAttribute('data-video-url');
            const videoTitle = this.getAttribute('data-video-title');
            
            if (videoUrl) {
                // 创建视频模态框
                const modal = document.createElement('div');
                modal.className = 'video-modal';
                modal.innerHTML = `
                    <div class="video-modal-content">
                        <div class="video-modal-header">
                            <h3>${videoTitle}</h3>
                            <button class="video-modal-close">&times;</button>
                        </div>
                        <div class="video-modal-body">
                            <video controls autoplay>
                                <source src="${videoUrl}" type="video/mp4">
                                您的浏览器不支持视频播放。
                            </video>
                        </div>
                    </div>
                `;
                
                document.body.appendChild(modal);
                
                // 关闭模态框
                const closeBtn = modal.querySelector('.video-modal-close');
                closeBtn.addEventListener('click', function() {
                    document.body.removeChild(modal);
                });
                
                // 点击背景关闭
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        document.body.removeChild(modal);
                    }
                });
            }
        });
    });
});
</script>