<?php
/**
 * 证书轮播区块模板
 * 一行显示5个证书，每次切换一个
 */

// 检查是否显示证书轮播
if (!get_certificates_carousel_show()) {
    return;
}

// 获取配置数据
$title = get_certificates_carousel_title();
$subtitle = get_certificates_carousel_subtitle();
$autoplay = get_certificates_carousel_autoplay();
$delay = get_certificates_carousel_delay();
$images = get_certificates_carousel_images();

// 如果没有图片，则不显示
if (empty($images)) {
    return;
}
?>

<section class="certificates-carousel-section" id="certificates-carousel">
    <div class="certificates-carousel-container">
        <div class="certificates-carousel-header">
            <h2 class="certificates-carousel-title">奖项与证书</h2>
        </div>
        <!-- 证书轮播容器 -->
        <div class="certificates-carousel" id="certificatesCarousel">
            <div class="carousel-track" id="carouselTrack">
                <?php foreach ($images as $index => $image): ?>
                <div class="slide" data-slide="<?php echo $index; ?>">
                    <img src="<?php echo esc_url($image['url']); ?>" 
                         alt="<?php echo esc_attr($image['alt']); ?>" 
                         loading="<?php echo $index < 5 ? 'eager' : 'lazy'; ?>">
                    <h3 class="slide-title"><?php echo esc_html($image['title']); ?></h3>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<style>
.certificates-carousel-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.certificates-carousel-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23000" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    pointer-events: none;
}

.certificates-carousel-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.certificates-carousel-header {
    text-align: center;
    margin-bottom: 60px;
}

.certificates-carousel-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.certificates-carousel-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border-radius: 2px;
}

.certificates-carousel-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    font-weight: 400;
    margin: 0;
}

.certificates-carousel {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 40px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.certificates-carousel .carousel-track {
    display: flex;
    gap: 20px;
    /* transition handled by JS/GSAP to avoid conflicts */
    width: max-content;
    min-width: 100%;
    will-change: transform;
    touch-action: pan-y;
}

.certificates-carousel .slide {
    flex: 0 0 auto;
    /* width calculated by JS, fallback CSS below */
    width: 260px; 
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    opacity: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.certificates-carousel .slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.certificates-carousel .slide img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

.certificates-carousel .slide img:hover {
    transform: scale(1.05);
}

.certificates-carousel .slide-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 15px 0 0;
    line-height: 1.4;
}

/* 导航容器样式 */
.carousel-navigation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    position: relative;
}

.carousel-nav {
    background: rgba(255,255,255,0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-nav:hover {
    background: rgba(52, 152, 219, 0.95);
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 6px 25px rgba(52, 152, 219, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    /* Slide width handled by JS */
}

@media (max-width: 768px) {
    .certificates-carousel-section {
        padding: 60px 0;
    }
    
    .certificates-carousel-container {
        padding: 0 15px;
    }
    
    .certificates-carousel-title {
        font-size: 2rem;
    }
    
    .certificates-carousel-subtitle {
        font-size: 1.1rem;
    }
    
    .certificates-carousel {
        padding: 30px 20px;
    }
    
    .certificates-carousel .slide {
        padding: 15px;
    }
    
    .certificates-carousel .slide img {
        height: 160px;
    }
    
    .certificates-carousel .carousel-track {
        gap: 15px;
    }
    
    .carousel-navigation {
        margin-top: 25px;
        gap: 15px;
    }
    
    .carousel-nav {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .certificates-carousel-title {
        font-size: 1.8rem;
    }
    
    .certificates-carousel {
        padding: 25px 15px;
    }
    
    .certificates-carousel .slide {
        padding: 10px;
    }
    
    .certificates-carousel .slide img {
        height: 180px;
    }
    
    .carousel-navigation {
        margin-top: 20px;
        gap: 12px;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}
</style>

<?php
// 确保GSAP库被加载
if (!wp_script_is('gsap', 'enqueued')) {
    $theme_url = get_template_directory_uri();
    wp_enqueue_script('gsap', $theme_url . '/assets/js/gsap.min.js', array('jquery'), '3.12.2', true);
}
?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.getElementById('certificatesCarousel');
    const track = document.getElementById('carouselTrack');
    if (!carousel || !track) return;
    
    const slides = track.querySelectorAll('.slide');
    const totalSlides = slides.length;
    let currentIndex = 0;
    
    // 获取自定义器设置
    const autoplay = <?php echo get_certificates_carousel_autoplay() ? 'true' : 'false'; ?>;
    const delay = <?php echo get_certificates_carousel_delay(); ?>;
    
    // 移除 CSS transition 以避免与 GSAP 冲突
    if (typeof gsap !== 'undefined') {
        track.style.transition = 'none';
    }

    // 计算每次显示的幻灯片数量
    function getSlidesPerView() {
        const width = window.innerWidth;
        if (width <= 480) return 1;
        if (width <= 768) return 2;
        if (width <= 1200) return 4;
        return 5;
    }
    
    // 获取当前gap间距
    function getCurrentGap() {
        const width = window.innerWidth;
        if (width <= 768) return 15;
        return 20;
    }
    
    // 更新 Slide 尺寸
    function updateSlideDimensions() {
        const slidesPerView = getSlidesPerView();
        const gap = getCurrentGap();
        
        // 计算轨道容器的实际可用宽度
        const carouselStyles = window.getComputedStyle(carousel);
        const paddingLeft = parseFloat(carouselStyles.paddingLeft);
        const paddingRight = parseFloat(carouselStyles.paddingRight);
        const availableWidth = carousel.clientWidth - paddingLeft - paddingRight;
        
        const slideWidth = (availableWidth - (slidesPerView - 1) * gap) / slidesPerView;
        
        slides.forEach(slide => {
            slide.style.width = `${slideWidth}px`;
            slide.style.flex = `0 0 ${slideWidth}px`;
        });
        
        return slideWidth;
    }
    
    // 更新轮播位置
    function updateCarousel() {
        const slidesPerView = getSlidesPerView();
        const gap = getCurrentGap();
        
        // 确保尺寸正确
        const slideWidth = updateSlideDimensions();
        
        const translateX = -(currentIndex * (slideWidth + gap));
        
        // 使用GSAP实现平滑动画
        if (typeof gsap !== 'undefined') {
            gsap.to(track, {
                x: translateX,
                duration: 0.8,
                ease: "power2.out",
                overwrite: true
            });
        } else {
            // 降级到CSS过渡
            track.style.transform = `translateX(${translateX}px)`;
        }
    }
    
    // 下一张
    function nextSlide() {
        const slidesPerView = getSlidesPerView();
        const maxIndex = Math.max(0, totalSlides - slidesPerView);
        if (currentIndex >= maxIndex) {
            currentIndex = 0; // 循环到开始
        } else {
            currentIndex++;
        }
        updateCarousel();
        updateNavigationState();
    }
    
    // 上一张
    function prevSlide() {
        const slidesPerView = getSlidesPerView();
        const maxIndex = Math.max(0, totalSlides - slidesPerView);
        if (currentIndex <= 0) {
            currentIndex = maxIndex; // 循环到结束
        } else {
            currentIndex--;
        }
        updateCarousel();
        updateNavigationState();
    }
    
    // 更新导航按钮状态
    function updateNavigationState() {
        const slidesPerView = getSlidesPerView();
        const maxIndex = Math.max(0, totalSlides - slidesPerView);
        
        // 如果幻灯片数量少于或等于显示数量，隐藏导航
        if (totalSlides <= slidesPerView) {
            navContainer.style.display = 'none';
        } else {
            navContainer.style.display = 'flex';
        }
    }
    
    // 创建导航容器
    const navContainer = document.createElement('div');
    navContainer.className = 'carousel-navigation';
    navContainer.style.cssText = 'display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-top: 30px; position: relative;';
    
    // 创建导航按钮
    const prevBtn = document.createElement('button');
    prevBtn.innerHTML = '‹';
    prevBtn.className = 'carousel-nav carousel-prev';
    prevBtn.style.cssText = 'background: rgba(255,255,255,0.9); border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #333; font-weight: bold;';
    prevBtn.addEventListener('click', prevSlide);
    
    const nextBtn = document.createElement('button');
    nextBtn.innerHTML = '›';
    nextBtn.className = 'carousel-nav carousel-next';
    nextBtn.style.cssText = 'background: rgba(255,255,255,0.9); border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #333; font-weight: bold;';
    nextBtn.addEventListener('click', nextSlide);
    
    // 将按钮添加到导航容器
    navContainer.appendChild(prevBtn);
    navContainer.appendChild(nextBtn);
    
    // 将导航容器添加到轮播容器
    carousel.appendChild(navContainer);
    
    // 按钮悬停效果 - 使用GSAP
    [prevBtn, nextBtn].forEach(btn => {
        btn.addEventListener('mouseenter', () => {
            if (typeof gsap !== 'undefined') {
                gsap.to(btn, {
                    backgroundColor: 'rgba(52, 152, 219, 0.95)',
                    color: '#fff',
                    scale: 1.15,
                    boxShadow: '0 4px 20px rgba(52, 152, 219, 0.3)',
                    duration: 0.3,
                    ease: "power2.out"
                });
            } else {
                btn.style.background = 'rgba(52, 152, 219, 0.95)';
                btn.style.color = '#fff';
                btn.style.transform = 'scale(1.15)';
                btn.style.boxShadow = '0 4px 20px rgba(52, 152, 219, 0.3)';
            }
        });
        btn.addEventListener('mouseleave', () => {
            if (typeof gsap !== 'undefined') {
                gsap.to(btn, {
                    backgroundColor: 'rgba(255,255,255,0.9)',
                    color: '#333',
                    scale: 1,
                    boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
                    duration: 0.3,
                    ease: "power2.out"
                });
            } else {
                btn.style.background = 'rgba(255,255,255,0.9)';
                btn.style.color = '#333';
                btn.style.transform = 'scale(1)';
                btn.style.boxShadow = '0 4px 15px rgba(0,0,0,0.1)';
            }
        });
    });
    
    // 自动播放
    let autoplayInterval;
    
    function startAutoplay() {
        if (autoplayInterval) clearInterval(autoplayInterval);
        autoplayInterval = setInterval(nextSlide, delay);
    }
    
    if (autoplay) {
        startAutoplay();
        
        // 鼠标悬停暂停
        carousel.addEventListener('mouseenter', () => {
            if (autoplayInterval) {
                clearInterval(autoplayInterval);
            }
        });
        
        carousel.addEventListener('mouseleave', () => {
            if (autoplay) {
                startAutoplay();
            }
        });
    }

    // Touch Support (Swipe)
    let touchStartX = 0;
    let touchEndX = 0;
    let isDragging = false;

    track.addEventListener('touchstart', e => {
        touchStartX = e.changedTouches[0].screenX;
        isDragging = true;
        if (autoplayInterval) clearInterval(autoplayInterval);
    }, { passive: true });

    track.addEventListener('touchend', e => {
        if (!isDragging) return;
        isDragging = false;
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
        if (autoplay) startAutoplay();
    }, { passive: true });

    function handleSwipe() {
        const threshold = 50;
        if (touchEndX < touchStartX - threshold) {
            nextSlide();
        }
        if (touchEndX > touchStartX + threshold) {
            prevSlide();
        }
    }
    
    // 响应式更新
    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            updateCarousel();
            updateNavigationState();
        }, 100);
    });
    
    // 初始化GSAP动画效果
    function initGSAPEffects() {
        if (typeof gsap !== 'undefined') {
            // 证书卡片悬停动画
            slides.forEach(slide => {
                const img = slide.querySelector('img');
                if (img) {
                    slide.addEventListener('mouseenter', () => {
                        gsap.to(img, {
                            scale: 1.05,
                            duration: 0.3,
                            ease: "power2.out"
                        });
                        gsap.to(slide, {
                            y: -5,
                            boxShadow: '0 10px 25px rgba(0,0,0,0.15)',
                            duration: 0.3,
                            ease: "power2.out"
                        });
                    });
                    
                    slide.addEventListener('mouseleave', () => {
                        gsap.to(img, {
                            scale: 1,
                            duration: 0.3,
                            ease: "power2.out"
                        });
                        gsap.to(slide, {
                            y: 0,
                            boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
                            duration: 0.3,
                            ease: "power2.out"
                        });
                    });
                }
            });
            
            // 移除初始加载动画，确保内容立即可见
            
            // 标题动画
            const title = document.querySelector('.certificates-carousel-title');
            const subtitle = document.querySelector('.certificates-carousel-subtitle');
            if (title) {
                gsap.fromTo(title, {
                    opacity: 0,
                    y: -20
                }, {
                    opacity: 1,
                    y: 0,
                    duration: 0.8,
                    ease: "power2.out"
                });
            }
            if (subtitle) {
                gsap.fromTo(subtitle, {
                    opacity: 0,
                    y: -15
                }, {
                    opacity: 1,
                    y: 0,
                    duration: 0.8,
                    delay: 0.2,
                    ease: "power2.out"
                });
            }
        }
    }
    
    // 初始化
    updateCarousel();
    updateNavigationState();
    initGSAPEffects();
});
</script>