(() => { // webpackBootstrap
    var __webpack_exports__ = {};
    (() => {
        const { pageHelper, EventManager, utils } = ShopbySkin;

        const articleWriteFormLayerModalHelper = pageHelper.articleWriteFormLayerModalHelper();
        articleWriteFormLayerModalHelper.initialize({
            layerModalHelperKey: 'article-write-form',
        });

        const boardNo = '277061';

        const getCapchaKey = () => {
            return (new Date()).getTime().toString();
        };

        const getCapchaImage = async (key) => {
            const res = await fetch(`https://shop-api.shopby.co.kr/captcha/image?key=${key}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    Version: '1.0',
                    clientId: '99ZDpWfrizZV8irrjPvB8w==',
                    platform: 'PC',
                    language: 'ko',
                },
            }).then((res) => res.json());

            return res.url;
        };

        const verifyCapcha = async (key, code) => {
            const res = await fetch(`https://shop-api.shopby.co.kr/captcha/verify?key=${key}&code=${code}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    Version: '1.0',
                    clientId: '99ZDpWfrizZV8irrjPvB8w==',
                    platform: 'PC',
                    language: 'ko',
                },
            });

            return ( res.status === 204 || res.status === 200 );
        };

        const refreshCapcha = async () => {
            const key = getCapchaKey();
            getCapchaImage(key).then((url) => {
                document.querySelector('.captcha_key').value = key;
                document.querySelector('.captcha_image').src = url;
                document.querySelector('.captcha_image').style.visibility = '';
                document.querySelector('.captcha_code').value = '';
            });
        }

        const internationalTelephoneInput = (() =>{
            // HTML 입력 필드에 대한 인스턴스 생성
            const tel = document.querySelector("[name='tel']");

            // International Telephone Input 초기화
            const iti = window.intlTelInput(tel, {
                // 옵션 설정 (선택 사항)
                nationalMode: false,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js", // 추가 스크립트 로드
            });

            // 전화번호가 변경될 때 이벤트 처리
            //tel.addEventListener("change", function () {
                // const selectedCountryData = iti.getSelectedCountryData();
                // console.log("국가코드:", selectedCountryData.iso2);
                // console.log("전화번호:", iti.getNumber());
            //});

            return iti;
        })();
        
        const getFormData = (formElement) => {
            const formData = new FormData(formElement);

            return {
                inquiryType: formData.get('inquiryType'),
                companyName: formData.get('companyName'),
                managerName: formData.get('managerName'),
                productKind: formData.get('productKind'),
                tel: formData.get('tel'),
                email: formData.getAll('email[]').join('@').trim(),
                title: formData.get('title'),
                content: formData.get('content').replaceAll(/\n/g, '<br>'),
                agreement: formData.get('agreement'),
            }
        }

        const checkInvalidPostForm = async (data) => {
            if (!data.inquiryType) {
                return { message: 'Please select the inquiry type.', invalid: true };
            }

            if (!data.companyName) {
                return { message: 'Please enter the company name.', invalid: true };
            }

            if (!data.managerName) {
                return { message: 'Please enter the name of the person in charge.', invalid: true };
            }

            if (!data.productKind) {
                return { message: 'Please enter the product you are looking for.', invalid: true };
            }

            if (!data.tel) {
                return { message: 'Please enter your contact information.', invalid: true };
            }

            if (!internationalTelephoneInput.isValidNumber()) {
                return { message: 'Please enter a valid contact information.', invalid: true };
            }

            if ('@' == data.email) {
                return { message: 'Please enter your email.', invalid: true };
            }

            if (!/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/.test(data.email)) {
                return { message: 'Please enter a valid email.', invalid: true };
            }

            if (!data.title) {
                return { message: 'Please enter a title.', invalid: true };
            }

            if (!data.content) {
                return { message: 'Please enter the content.', invalid: true };
            }

            const captchaKey = document.querySelector('.captcha_key').value;
            const captchaCode = document.querySelector('.captcha_code').value;
            const isCaptchaVerified = await verifyCapcha(captchaKey, captchaCode);

            if (!isCaptchaVerified) {
                return { message: 'Please enter the characters correctly to prevent automatic input.', invalid: true };
            }

            if ('on' != data.agreement) {
                return { message: 'Please agree to the collection and use of personal information.', invalid: true };
            }

            return { message: '', invalid: false };
        };

        const filesUpload = async (files) => {
            const result = [];

            try {
                if ( true === files[0].type.startsWith('image') ) {
                    await utils.postImages({
                        files: files,
                    }).then((res)=>{
                        res.data.forEach((file) => {
                            result.push({
                                originalFileName: file.value.originName,
                                uploadedFileName: file.value.imageUrl
                            });
                        });
                    });
                }
                else {
                    await utils.postFiles({
                        files: files,
                    }).then((res)=>{
                        res.data.forEach((file) => {
                            result.push(file.value);
                        });
                    });
                }
            }
            catch(e) {
                console.log(e);
            }

            return result;
        }

        const savePost = async (data) => {
            const combinedContents
                 = '문의구분: ' + data.inquiryType + '<br/>'
                 + '업 체 명: ' + data.companyName + '<br/>'
                 + '담당자명: ' + data.managerName + '<br/>'
                 + '문의제품: ' + data.productKind + '<br/>'
                 + '연 락 처: ' + data.tel         + '<br/>'
                 + '이 메 일: ' + data.email       + '<br/>'
                 + '문의내용: ' + '<br/>'
                 + data.content + '<br/>'
                 ;

            const files = await filesUpload(document.querySelector('.upload_hidden').files);

            const { isSuccess } = await articleWriteFormLayerModalHelper.saveArticle({
                articleNo: null,
                boardNo: boardNo,
                articleTitle: '[EN]' + data.title,
                articleContent: combinedContents,
                guestName: data.managerName,
                password: '1111',
                secreted: false,
                images: files,
                isModify: false,
            });

            if (isSuccess) {
                EventManager.fire('MODAL_ALERT_OPEN', {
                    noticeType: 'SUCCESS',
                    label: 'Confirm',
                    message: '<em>Your inquiry has been accepted.<br/>We will contact you after confirmation.</em>',
                    onClose: () => {
                        EventManager.fire('CLOSE_TITLE_MODAL');
                        window.location.href = '/en/index.html';
                    },
                });
            }
        }

        document.querySelector('.btn_inquiry').addEventListener('click', async (event) => {
            try {
                const formElement = document.forms['formContactUs'];
                const data = getFormData(formElement);
                const { message, invalid } = await checkInvalidPostForm(data);

                if (invalid) {
                    console.log('invalid:', message);
                    EventManager.fire('MODAL_ALERT_OPEN', {
                        noticeType: 'WARNING',
                        label: 'Confirm',
                        message: `<em>${message}</em>`,
                    });

                    return;
                }

                await savePost(data);
            }
            catch (e) {
                console.log(e);
                /*
                EventManager.fire('MODAL_ALERT_OPEN', {
                    message: e.error.description ?? e.description,
                });
                */
            }
        });

        document.querySelector('.btn_captcha_refresh').addEventListener('click', async (event) => {
            refreshCapcha();
        });

        EventManager.on('PAGE_LOAD_COMPLETED', (data) => {
            refreshCapcha();
        });
    })();
})();


/* 240610 서주원 - 셀렉트박스 & 이메일 셀렉트 박스 */
document.querySelectorAll('.select_box').forEach(box => {
    const dataName = box.getAttribute('data-name');
    const inputs = box.querySelectorAll('input[type="radio"]');
    inputs.forEach(input => {
        input.setAttribute('name', dataName);
    });

    const selected = box.querySelector('.selected');
    const formData = box.querySelector('.form_data');
    const ul = box.querySelector('ul');
    const reset = ul.querySelector('.reset');
    const isMailSelectBox = box.classList.contains('select_box--mail');
    let eDomainInput = null;

    if (isMailSelectBox) {
        eDomainInput = document.querySelector('.e-domain');
    }

    selected.addEventListener('click', function (event) {
        event.stopPropagation();
        closeAllSelectBoxes();
        slideToggle(ul, 300);
    });

    inputs.forEach(radio => {
        radio.addEventListener('change', function () {
            selected.textContent = this.parentElement.textContent.trim();
            slideToggle(ul, 300);
            if (isMailSelectBox && eDomainInput) {
                eDomainInput.value = this.parentElement.textContent.trim();
            }
        });

        radio.parentElement.addEventListener('click', function (event) {
            event.stopPropagation();
            if (radio.checked) {
                slideToggle(ul, 300);
            }
        });
    });

    if (reset) {
        reset.parentElement.addEventListener('click', function (event) {
            event.stopPropagation();
            const resetText = reset ? reset.textContent.trim() : '선택하세요.';
            selected.textContent = resetText;
            inputs.forEach(radio => radio.checked = false);
            slideToggle(ul, 300);

            if (isMailSelectBox && eDomainInput) {
                eDomainInput.value = '';
            }
        });
    }
});

document.addEventListener('click', function () {
    closeAllSelectBoxes();
});

function closeAllSelectBoxes() {
    document.querySelectorAll('.select_box ul').forEach(ul => {
        if (window.getComputedStyle(ul).display !== 'none') {
            slideUp(ul, 300);
        }
    });
}

function slideUp(element, duration) {
    setTimeout(function () {
        element.parentNode.classList.remove('show');
    }, 150)
    element.style.transitionProperty = 'height, margin, padding';
    element.style.transitionDuration = duration + 'ms';
    element.style.boxSizing = 'border-box';
    element.style.height = element.offsetHeight + 'px';
    element.offsetHeight; // force reflow
    element.style.overflow = 'hidden';
    element.style.height = 0;
    element.style.paddingTop = 0;
    element.style.paddingBottom = 0;
    element.style.marginTop = 0;
    element.style.marginBottom = 0;
    window.setTimeout(() => {
        element.style.display = 'none';
        element.style.removeProperty('height');
        element.style.removeProperty('padding-top');
        element.style.removeProperty('padding-bottom');
        element.style.removeProperty('margin-top');
        element.style.removeProperty('margin-bottom');
        element.style.removeProperty('overflow');
        element.style.removeProperty('transition-duration');
        element.style.removeProperty('transition-property');
    }, duration);
}

function slideDown(element, duration) {
    element.parentNode.classList.add('show');
    element.style.removeProperty('display');
    let display = window.getComputedStyle(element).display;
    if (display === 'none') display = 'block';
    element.style.display = display;

    let height = element.offsetHeight;
    element.style.overflow = 'hidden';
    element.style.height = 0;
    element.style.paddingTop = 0;
    element.style.paddingBottom = 0;
    element.style.marginTop = 0;
    element.style.marginBottom = 0;
    element.offsetHeight; // force reflow
    element.style.boxSizing = 'border-box';
    element.style.transitionProperty = "height, margin, padding";
    element.style.transitionDuration = duration + 'ms';
    element.style.height = height + 'px';
    element.style.removeProperty('padding-top');
    element.style.removeProperty('padding-bottom');
    element.style.removeProperty('margin-top');
    element.style.removeProperty('margin-bottom');
    window.setTimeout(() => {
        element.style.removeProperty('height');
        element.style.removeProperty('overflow');
        element.style.removeProperty('transition-duration');
        element.style.removeProperty('transition-property');
    }, duration);
}

function slideToggle(element, duration) {
    if (window.getComputedStyle(element).display === 'none') {
        return slideDown(element, duration);
    } else {
        return slideUp(element, duration);
    }
}
/* 240610 서주원 - 셀렉트박스 & 이메일 셀렉트 박스 끝 */

// 240610 서주원 - 파일업로드
var fileTargets = document.querySelectorAll('.area_filebox .upload_hidden');

fileTargets.forEach(function (fileTarget) {
    fileTarget.addEventListener('change', function () {
        let maxSize  = 5 * 1024 * 1024; //* 5MB 사이즈 제한
        let fileSize = this.files[0].size; //업로드한 파일용량
    
        if(fileSize > maxSize){
            openAlertModal("The file size is too large. (Maximum 5MB)");
            this.value = ''; //업로드한 파일 제거
            return; 
        }

        var filename;
        if (window.FileReader) {
            filename = this.files[0].name;
        } else {
            filename = this.value.split('/').pop().split('\\').pop();
        }

        var sibling = this.parentElement.querySelector('.upload_name');
        if (sibling) {
            sibling.value = filename;
        }
    });
});


/* 240610 서주원 - 상단비주얼 애니메이션 */
/* const leftElement = document.querySelector('.left');
const rightElement = document.querySelector('.right');

// 초기 너비 계산 함수
function calculateInitialWidth() {
    const viewportWidth = window.innerWidth;
    return (viewportWidth * 0.5) - 715;
}

// 초기 너비 설정 함수
function setInitialWidth() {
    const initialWidth = calculateInitialWidth();
    console.log('initialWidth:', initialWidth); // 로그 추가
    leftElement.style.width = initialWidth + 'px';
    rightElement.style.width = initialWidth + 'px';
}

// CSS 트랜지션 설정 함수
function setTransition() {
    leftElement.style.transition = 'width 0.3s ease';
    rightElement.style.transition = 'width 0.3s ease';
}

// 초기 CSS 트랜지션 설정
setTransition();

// ScrollMagic 컨트롤러 생성
const controller = new ScrollMagic.Controller();

// 애니메이션 정의
const tween = gsap.to('.left, .right', { 
    width: '0%', 
    duration: 2,
    ease: 'linear.none' 
});

// ScrollMagic 씬 생성 함수
function createScene() {
    return new ScrollMagic.Scene({
        triggerElement: '.visual', // 트리거 요소
        duration: 340 // 애니메이션 지속 거리 (px 단위)
    }).setTween(tween).addTo(controller);
}

// 초기 너비 설정
setInitialWidth();

// ScrollMagic 씬 생성
let scene = createScene();

// 리사이즈 이벤트 핸들러
let resizeTimeout;
window.addEventListener('resize', function() {
    console.log('resize event triggered');
    if (resizeTimeout) {
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function() {
        console.log('executing resize logic');
        // 트랜지션 제거
        leftElement.style.transition = 'none';
        rightElement.style.transition = 'none';

        // 기존 씬 제거
        scene.destroy(true);

        // 새로운 초기 너비 설정
        setInitialWidth();

        // 새로운 씬 생성
        scene = createScene();

        // 트랜지션 재설정
        setTimeout(setTransition, 50); // 약간의 지연 후 트랜지션 재설정
    }, 300); // 300ms 후에 새로고침
}); */
var controller = new ScrollMagic.Controller();

// 애니메이션 정의
var tween = gsap.to(".visual2", {
    duration: 1, // 애니메이션 시간 (초)
    width: "2000px", // 최종 너비
    // ease: "power2.inOut" // 이징 적용
});

// ScrollMagic 씬 생성
var scene = new ScrollMagic.Scene({
    triggerElement: ".visual2", // 애니메이션 시작 요소
    triggerHook: 0.4, // 스크롤 위치 (0.5는 화면 중앙)
    duration: 270 // 애니메이션 지속 거리
})
    .setTween(tween)
    // .addIndicators({name: "Box Animation"}) // 디버그를 위한 인디케이터 추가 (선택 사항)
    .addTo(controller);
/* 240610 서주원 - 상단비주얼 애니메이션 끝 */

/* 걍제새로고침 */
/* let resizeTimeout;
window.addEventListener('resize', function() {
    if (resizeTimeout) {
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function() {
        location.reload();
    }, 300); // 300ms 후에 새로고침
}); */