<?php
/**
 * 证书画廊区块模板
 * 显示公司认证证书的画廊
 */

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

// 获取短代码参数（如果通过短代码调用）
global $certification_shortcode_atts;
$shortcode_atts = isset($certification_shortcode_atts) ? $certification_shortcode_atts : array();

// 获取自定义器设置
$certification_gallery = get_theme_mod('certification_gallery_images', '');
$certification_columns = get_theme_mod('certification_gallery_columns', 5);
$certification_show_lightbox = get_theme_mod('certification_gallery_lightbox', true);
$certification_show_animation = get_theme_mod('certification_gallery_animation', true);

// 短代码参数覆盖自定义器设置
if (!empty($shortcode_atts['images'])) {
    $certification_gallery = $shortcode_atts['images'];
}
if (!empty($shortcode_atts['columns'])) {
    $certification_columns = intval($shortcode_atts['columns']);
}
if (isset($shortcode_atts['lightbox'])) {
    $certification_show_lightbox = $shortcode_atts['lightbox'] === 'true';
}
if (isset($shortcode_atts['animation'])) {
    $certification_show_animation = $shortcode_atts['animation'] === 'true';
}

// 处理画廊数据
$gallery_images = array();
if (!empty($certification_gallery)) {
    $image_ids = explode(',', $certification_gallery);
    foreach ($image_ids as $image_id) {
        $image_id = intval(trim($image_id));
        if ($image_id > 0) {
            $image_url = wp_get_attachment_image_url($image_id, 'full');
            $image_full_url = wp_get_attachment_image_url($image_id, 'full');
            $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
            $image_title = get_the_title($image_id);
            
            if ($image_url) {
                $gallery_images[] = array(
                    'id' => $image_id,
                    'url' => $image_url,
                    'full_url' => $image_full_url,
                    'alt' => $image_alt ?: $image_title,
                    'title' => $image_title
                );
            }
        }
    }
}
// 设置容器ID和类
$container_id = !empty($shortcode_atts['id']) ? $shortcode_atts['id'] : 'nenghui-certification';
$container_class = 'nenghui-certification';
if (!empty($shortcode_atts['class'])) {
    $container_class .= ' ' . $shortcode_atts['class'];
}
// 动画属性
$animation_attrs = '';
if ($certification_show_animation) {
    $animation_attrs = 'data-aos="fade-up" data-aos-duration="800"';
}
// 如果没有图片，显示默认提示
if (empty($gallery_images)) {
    $gallery_images = array(
        array(
            'id' => 0,
            'url' => get_template_directory_uri() . '/assets/images/certification-placeholder.svg',
            'full_url' => get_template_directory_uri() . '/assets/images/certification-placeholder.svg',
            'alt' => '证书占位图',
            'title' => '暂无证书'
        )
    );
}
?>
<section id="<?php echo esc_attr($container_id); ?>" class="certification-section <?php echo esc_attr($container_class); ?>" <?php echo $animation_attrs; ?>>
    <div class="container">
        <!-- 证书画廊 -->
        <div class="certification-gallery" data-aos="fade-up" data-aos-delay="200">
            <div class="certification-grid" style="--columns: <?php echo esc_attr($certification_columns); ?>">
                <?php foreach ($gallery_images as $index => $image): ?>
                    <div class="certification-item" data-aos="zoom-in" data-aos-delay="<?php echo ($index * 100 + 300); ?>">
                        <?php if ($certification_show_lightbox && !empty($image['full_url'])): ?>
                            <a href="<?php echo esc_url($image['full_url']); ?>" 
                               class="certification-link" 
                               data-lightbox="certification-gallery" 
                               data-title="<?php echo esc_attr($image['title']); ?>">
                        <?php endif; ?>
                        
                        <div class="certification-image-wrapper">
                            <img src="<?php echo esc_url($image['url']); ?>" 
                                 alt="<?php echo esc_attr($image['alt']); ?>" 
                                 class="certification-image" 
                                 loading="lazy">
                            
                            <?php if ($certification_show_lightbox): ?>
                                <div class="certification-overlay">
                                    <div class="certification-overlay-content">
                                        <svg class="certification-zoom-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M13.5 10.5H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M10.5 7.5V13.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <p class="certification-overlay-text">View Certificate</p>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>
                        <?php if ($certification_show_lightbox && !empty($image['full_url'])): ?>
                            </a>
                        <?php endif; ?>
                        <?php if (!empty($image['title']) && $image['id'] > 0): ?>
                            <div class="certification-title-text"><?php echo esc_html($image['title']); ?></div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<style>
.nenghui-certification {
    padding: 80px 0;
    background: #f8f9fa;
}

.nenghui-certification .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.certification-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 5), 1fr);
    gap: 30px;
}

.certification-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.certification-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.certification-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
}

.certification-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.certification-item:hover .certification-image {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.certification-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.certification-item:hover .certification-overlay {
    opacity: 1;
    transition: all 0.3s ease;
}

.certification-overlay-content {
    text-align: center;
    color: white;
}

.certification-zoom-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
}

.certification-overlay-text {
    font-size: 14px;
    font-weight: 500;
}

.certification-title-text {
    padding: 15px;
    text-align: center;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.certification-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .certification-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .certification-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .certification-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .nenghui-certification {
        padding: 60px 0;
    }
}
</style>

<script>
// 简单的灯箱功能
document.addEventListener('DOMContentLoaded', function() {
    const lightboxLinks = document.querySelectorAll('[data-lightbox="certification-gallery"]');
    
    if (lightboxLinks.length > 0) {
        // 创建灯箱HTML
        const lightboxHTML = `
            <div id="certification-lightbox" class="certification-lightbox" style="display: none;">
                <div class="lightbox-overlay"></div>
                <div class="lightbox-content">
                    <button class="lightbox-close">&times;</button>
                    <img class="lightbox-image" src="" alt="">
                    <div class="lightbox-title"></div>
                    <button class="lightbox-prev">&#8249;</button>
                    <button class="lightbox-next">&#8250;</button>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', lightboxHTML);
        
        const lightbox = document.getElementById('certification-lightbox');
        const lightboxImage = lightbox.querySelector('.lightbox-image');
        const lightboxTitle = lightbox.querySelector('.lightbox-title');
        const closeBtn = lightbox.querySelector('.lightbox-close');
        const prevBtn = lightbox.querySelector('.lightbox-prev');
        const nextBtn = lightbox.querySelector('.lightbox-next');
        
        let currentIndex = 0;
        const images = Array.from(lightboxLinks);
        
        function showImage(index) {
            const link = images[index];
            lightboxImage.src = link.href;
            lightboxImage.alt = link.dataset.title || '';
            lightboxTitle.textContent = link.dataset.title || '';
            currentIndex = index;
        }
        
        function showLightbox(index) {
            showImage(index);
            lightbox.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
        
        function hideLightbox() {
            lightbox.style.display = 'none';
            document.body.style.overflow = '';
        }
        
        // 绑定事件
        lightboxLinks.forEach((link, index) => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                showLightbox(index);
            });
        });
        
        closeBtn.addEventListener('click', hideLightbox);
        lightbox.querySelector('.lightbox-overlay').addEventListener('click', hideLightbox);
        
        prevBtn.addEventListener('click', function() {
            const newIndex = currentIndex > 0 ? currentIndex - 1 : images.length - 1;
            showImage(newIndex);
        });
        
        nextBtn.addEventListener('click', function() {
            const newIndex = currentIndex < images.length - 1 ? currentIndex + 1 : 0;
            showImage(newIndex);
        });
        
        // 键盘导航
        document.addEventListener('keydown', function(e) {
            if (lightbox.style.display === 'flex') {
                if (e.key === 'Escape') {
                    hideLightbox();
                } else if (e.key === 'ArrowLeft') {
                    prevBtn.click();
                } else if (e.key === 'ArrowRight') {
                    nextBtn.click();
                }
            }
        });
    }
});
</script>

<style>
/* 灯箱样式 */
.certification-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-title {
    color: white;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 500;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.lightbox-prev {
    left: -70px;
}

.lightbox-next {
    right: -70px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
    }
}
</style>