var swiper01;
var currentPopup = "01"; // 預設顯示第一張

window.addEventListener('load', function () {

    setTimeout(() => { AOS.init({}); }, 1500);

    document.querySelectorAll(".go-top").forEach(element => {
        element.addEventListener("click", function (e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });

    swiper01 = new Swiper(".swiper01", {
        spaceBetween: 0,
        slidesPerView: 1,
        centeredSlides: true,
        centerInsufficientSlides: true,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: 'bullets'
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            992: {
                slidesPerView: 3,
                spaceBetween: 0,
                centeredSlides: true
            },
            // >= 768px (平板版)
            768: {
                slidesPerView: 2,
                spaceBetween: 0,
                centeredSlides: false
            }
        }
    });

    // 監聽 Modal 顯示事件
    const popupModal = document.getElementById('p3-item');
    if (popupModal) {
        popupModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget; // 觸發事件的按鈕
            if (button && button.hasAttribute('data-popup')) {
                currentPopup = button.getAttribute('data-popup');
                updateModalContent(currentPopup);
            }
        });

        // 左右箭頭導航功能
        const arrowLeft = popupModal.querySelector('.arrow-left');
        const arrowRight = popupModal.querySelector('.arrow-right');

        if (arrowLeft) {
            arrowLeft.addEventListener('click', function () {
                navigatePopup('prev');
            });
        }

        if (arrowRight) {
            arrowRight.addEventListener('click', function () {
                navigatePopup('next');
            });
        }
    }
});

// 更新 Modal 內容
function updateModalContent(popupId) {
    const modal = document.getElementById('p3-item');
    if (!modal) return;

    const modalContent = modal.querySelector('.modal-content > div:not(.arrow-left):not(.arrow-right)');
    if (!modalContent) return;

    // 先設為透明以準備淡入效果
    modalContent.style.opacity = '0';
    modalContent.style.transition = 'opacity 0.5s ease';

    // 更新內容
    modalContent.innerHTML = `
        <div class="p-5">
            <div class="d-none d-lg-block">
                <img src="/sites/default/files/2025-04/240417_rtu_user-${popupId}.png" alt="" class="img-fluid" loading="lazy">
            </div>
            <div class="d-lg-none">
                <img src="/sites/default/files/2025-04/240417_rtu_m-user-${popupId}.png" alt="" class="img-fluid" loading="lazy">
            </div>
        </div>
    `;

    // 強制瀏覽器重繪
    modalContent.offsetHeight;

    // 圖片載入後套用淡入效果
    const images = modalContent.querySelectorAll('img');
    let loadedCount = 0;

    // 若沒有圖片或圖片載入時間過長，仍然執行淡入效果
    const fallbackTimer = setTimeout(() => {
        modalContent.style.opacity = '1';
    }, 300);

    // 監聽所有圖片載入事件
    images.forEach(img => {
        if (img.complete) {
            loadedCount++;
            if (loadedCount === images.length) {
                clearTimeout(fallbackTimer);
                modalContent.style.opacity = '1';
            }
        } else {
            img.onload = () => {
                loadedCount++;
                if (loadedCount === images.length) {
                    clearTimeout(fallbackTimer);
                    modalContent.style.opacity = '1';
                }
            };
            img.onerror = () => {
                loadedCount++;
                if (loadedCount === images.length) {
                    clearTimeout(fallbackTimer);
                    modalContent.style.opacity = '1';
                }
            };
        }
    });
}

// 左右導航功能
function navigatePopup(direction) {
    const totalItems = 8; // 總共8個項目，編號從01-08
    let currentNumber = parseInt(currentPopup);

    if (direction === 'next') {
        currentNumber = currentNumber >= totalItems ? 1 : currentNumber + 1;
    } else {
        currentNumber = currentNumber <= 1 ? totalItems : currentNumber - 1;
    }

    // 格式化為兩位數字
    currentPopup = currentNumber.toString().padStart(2, '0');
    updateModalContent(currentPopup);
}

document.addEventListener("DOMContentLoaded", function() {
    const content1 = document.querySelector('.p2-content-01');
    let animationTriggered = false;
    let elementCompletelyOutOfView = false;
    let prevScrollPos = window.pageYOffset;

    function checkScroll() {
        if (!content1) return;

        const rect = content1.getBoundingClientRect();
        const isInView = rect.top <= window.innerHeight && rect.bottom >= 0;
        const isCompletelyOutOfView = rect.bottom < 0 || rect.top > window.innerHeight;

        // 取得目前捲動位置
        const currentScrollPos = window.pageYOffset;

        // 當元素完全不在視線範圍時，移除旋轉動畫
        if (isCompletelyOutOfView) {
            content1.classList.remove('shake-animation');
        }

        // 如果元素完全不在視窗中（在視窗上方）且先前已觸發過動畫，設定標記
        if (rect.bottom < 0 && animationTriggered) {
            elementCompletelyOutOfView = true;
        }

        // 如果元素曾經完全離開視窗上方，且現在又回到視窗中，重置觸發狀態
        if (elementCompletelyOutOfView && isInView) {
            animationTriggered = false;
            elementCompletelyOutOfView = false;
            content1.classList.remove('shake-animation');
        }

        // 檢查元素是否在視窗內且動畫尚未觸發
        if (isInView && !animationTriggered) {
            animationTriggered = true;

            // 移除震動動畫，改為旋轉動畫
            content1.classList.remove('shake-animation');
            content1.classList.add('shake-animation');

        }

        // 更新前一次捲動位置
        prevScrollPos = currentScrollPos;
    }

    // 監聽捲動事件
    window.addEventListener('scroll', checkScroll);

    // 頁面載入時也檢查（以防元素已在視圖中）
    checkScroll();

    // 控制 fixed-box 在滾動到頁面底部時的顯示/隱藏
    const fixedBox = document.querySelector('.fixed-box');

    function toggleFixedBoxVisibility() {
        // 取得頁面總高度
        const pageHeight = document.documentElement.scrollHeight;
        // 取得目前視窗高度
        const windowHeight = window.innerHeight;
        // 取得目前滾動位置
        const scrollPosition = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;

        // 檢查是否接近頁面底部 (這裡設定距離底部 100px 內就視為到達底部)
        const isAtBottom = pageHeight - (scrollPosition + windowHeight) < 100;

        // 根據是否在底部決定顯示或隱藏 fixed-box
        if (isAtBottom) {
            fixedBox.style.opacity = '0';
            fixedBox.style.visibility = 'hidden';
            fixedBox.style.transition = 'opacity 0.3s, visibility 0.3s';
        } else {
            fixedBox.style.opacity = '1';
            fixedBox.style.visibility = 'visible';
            fixedBox.style.transition = 'opacity 0.3s, visibility 0.3s';
        }
    }

    // 初始檢查
    toggleFixedBoxVisibility();

    // 監聽滾動事件
    window.addEventListener('scroll', toggleFixedBoxVisibility);
    // 監聽視窗大小變化事件
    window.addEventListener('resize', toggleFixedBoxVisibility);
});

function GA(action, category, label) {
    gtag('event', action, {
        'event_category': category,
        'event_label': label,
        'value': 1
    });
}

function goTo(selector) {
    setTimeout(() => {
        const element = document.querySelector(selector);
        const top = element.getBoundingClientRect().top + window.pageYOffset - 40;

        window.scrollTo({
            top: top,
            behavior: 'smooth'
        });
    }, 10);
}

function clickNav() {
    if (document.body.clientWidth <= 992) {
        const button = document.querySelector('.container-fluid > button');
        if (button) {
            button.click();
        }
    }
}