/****************************************************************************
 * 메인이벤트조회
 ****************************************************************************/
function fn_selectMainEventList(){
    let formData = new FormData();
    formData.append("exposedYn", "Y")
    $.ajax({
        url: encodeURI('/mobilehome/selectListEvent.do'),
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        type: 'POST',
        async: false,
        success: function(data){
            if('0'==data.msgCode){
                if(0 < data.rows.length){
                    const events = data.rows;
                    const swiperWrapper = $('.swiper-wrapper');
                    swiperWrapper.empty(); // 기존 콘텐츠 초기화

                    events.forEach((event, index) => {
                        // swiper-slide 클래스를 생성하여 이벤트 정보 삽입
                        const className = `swiper-slide slide-${index + 1}`;

                        const slideHTML = `
                            <div class="${className}">
                                <div class="banner_box" onClick="fn_eventIntro('${event.muAppEventId}')">
                                    <div class="img_box">
                                        <img style="width: 100%; height: 100%;" src="${decodeURI(event.filePath)}" alt="${event.title}">
                                    </div> 
                                    <div class="dday_box">
                                        <p>
                                            남은기간<br/>
                                            <span>D - ${0<event.daysRemaining?event.daysRemaining:0}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        `;

                        // swiper-wrapper에 추가
                        swiperWrapper.append(slideHTML);
                        const homeSwiper = new Swiper('.homeSwiper', {
                            loop: true,
                            autoplay: true,
                            direction: 'horizontal',
                            /*pagination: {
                                el: '.swiper-pagination',
                                type: 'bullets'
                            },*/
                        });
                    });
                }else{
                    $('.tab_panel').css('padding-top',0);
                }
            }
            else if(data.msgCode=='-1'){
                modalEvent.warning("조회 오류", data.msgDesc);
            }
            else{
                modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
            }
        },
        error : function(xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
        },
        beforeSend:function(){

        },
        complete:function(){

        }
    });
}
/****************************************************************************
 * 메인컨텐츠 보드조회
 ****************************************************************************/
function fn_selectListMedicalBoardJson(){
    let formData = new FormData();
    $.ajax({
        url: encodeURI('/mobilemedical/selectListMedicalBoard.do'),
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        type: 'POST',
        async: false,
        success: function(data){
            const boardWrapper = $('#popularity');
            $('.popular_box').remove(); // 기존 콘텐츠 초기화
            if (0 < Object.keys(data.rows).length) {
                const boards = data.rows;
                console.log(boards);
                // 각 boardId에 대해 처리
                Object.keys(boards).forEach((boardId,index) => {
                    const board = boards[boardId];

                    const boardDiv = document.createElement('div');
                    boardDiv.className = `popular_box ${index===0?'first':''}`;

                    // 첫 번째 board의 제목과 콘텐츠 추가
                    boardDiv.innerHTML = `
                            <p class="title">${board[0].boardTitle}</p>
                            <p>${board[0].boardContent}</p>
                         `;

                    // 각 콘텐츠 항목을 처리
                    board.forEach((content, index) => {
                        const contentUl = document.createElement('ul');
                        contentUl.className='list_box';
                        contentUl.innerHTML = `
                                <li onclick="fn_medicalIntro('${content.muAppContentId}')">
                                    <p class="number">${index + 1}</p>
                                    <div>
                                        <div class="img_box">
                                            <img style="width: 48px; height: 48px;" src="${decodeURI(content.filePath2)}" alt="${content.title}">
                                        </div>
                                        <div class="text_box">
                                            <p class="label">${content.title}</p>
                                            <p>${content.content}</p>
                                        </div>
                                    </div>
                                </li>
                            `;

                        // boardDiv에 contentUl 추가
                        boardDiv.appendChild(contentUl);
                    });

                    // boardWrapper에 boardDiv 추가
                    boardWrapper.append(boardDiv);
                });
            } else if (data.msgCode=='-1'){
                modalEvent.warning("조회 오류", data.msgDesc);
            }
            else{
                boardWrapper.append(`<div class="popular_box" style="width: 100%;height:72px;padding: 0;margin: 0;border: none;display: flex;align-items: center;justify-content: center;background: white">
                                                <p class="user">조회 정보가 없습니다.</p>
                                            </div>`);
            }
        },
        error : function(xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
        },
        beforeSend:function(){

        },
        complete:function(){

        }
    });
}

/****************************************************************************
 * 시술 리스트 정보 조회
 ****************************************************************************/
function fn_selectListMedicalJson(){
    let contentWrapper = ''
    switch (categoryCode) {
        case 'popular':
            contentWrapper = $('#popularity ul');
            break;
        case 'petit':
            contentWrapper = $('#petit ul');
            break;
        case 'skin':
            contentWrapper = $('#skin ul');
            break;
        case 'fat':
            contentWrapper = $('#diet ul');
            break;
    }
    contentWrapper.empty();
    let formData = new FormData();
    formData.append("categoryCode", categoryCode)
    $.ajax({
        url: encodeURI('/mobilemedical/selectListMedical.do'),
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        type: 'POST',
        async: false,
        success: function(data){
            if('0'==data.msgCode){
                if(0 < data.rows.length) {
                    const contents = data.rows;
                    contents.forEach((content, index) => {
                        const innerHtml = `
                        <li class="${0 === index ? 'first' : ''}" onclick="fn_medicalIntro('${content.muAppContentId}')">
                            <div class="img_box">
                                <img style="width: 72px; height: 72px;" src="${decodeURI(content.filePath2)}" alt="${content.title}">
                            </div>
                            <div class="text_box">
                                <p class="label">${content.title}</p>
                                <p>${content.content}</p>
                            </div>
                        </li>
                        `
                        contentWrapper.append(innerHtml);
                    });
                }else{
                    contentWrapper.append(`<div class="" style="width: 100%;height:72px;padding: 0;margin: 0;border: none;display: flex;align-items: center;justify-content: center;background: white">
                                                <p class="user">조회 정보가 없습니다.</p>
                                            </div>`);
                }
            }
            else if(data.msgCode=='-1'){
                modalEvent.warning("조회 오류", data.msgDesc);
            }
            else{
                modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
            }
        },
        error : function(xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
        },
        beforeSend:function(){

        },
        complete:function(){

        }
    });
}

/****************************************************************************
 * 검색하기
 ****************************************************************************/
function fn_medicalSearch(target){
    if(target){
        categoryCode     = $(target).data('code')
    }else{
        categoryCode = $('.nav-tabs .active p').data('code');
    }

    if("popular" == categoryCode){
        referTap = "popularity";
    }else if("petit" == categoryCode){
        referTap = "petit";
    }else if("skin" == categoryCode){
        referTap = "skin";
    }else if("fat" == categoryCode){
        referTap = "diet";
    }else{
        referTap = "popularity";
    }

    if('popular'===categoryCode||''===categoryCode){
        fn_selectListMedicalBoardJson();
    }else{
        fn_selectListMedicalJson();
    }
}
/***************************************************************************
 * 이벤트 상세페이지 이동
 ****************************************************************************/
function fn_eventIntro(id){
    fn_tapPageMove("medical", referTap, '/mobileevent/selectEventIntro.do?muAppEventId='+id);
    // location.href = '/mobileevent/selectEventIntro.do?muAppEventId='+id;
}

/****************************************************************************
 * 시술 상세페이지 이동
 ****************************************************************************/
function fn_medicalIntro(id){
    fn_tapPageMove("medical", referTap, '/mobilemedical/selectMedicalIntro.do?muAppContentId='+id);
    // location.href = '/mobilemedical/selectMedicalIntro.do?muAppContentId='+id;
}

/****************************************************************************
 * 페이지 init
 ****************************************************************************/
function fn_pageInit(){
    if($('.notify_box').hasClass('open')){
        $('main').addClass('short');
    }else{
        $('main').addClass('short2');
    }

    if(!categoryCode){

    }else{
        // 모든 <a> 태그 안의 <p> 태그를 순환
        $('.nav-tabs p').each(function() {
            const dataCode = $(this).data('code'); // 각 <p> 태그의 텍스트 가져오기

            // 특정 텍스트와 일치하는지 확인
            if (dataCode === categoryCode) {
                $(this).siblings('li').addClass('active');// 텍스트 색상 변경
            }
        });
    }
    fn_medicalSearch();
    fn_selectMainEventList();
}

/****************************************************************************
 * 페이지 event
 ****************************************************************************/
function fn_pageEvent(){
    $('.nav_box a').on('click', function(event) {
        fn_medicalSearch(event.target);
    });
}

/****************************************************************************
 * 페이지 탭 선택
 ****************************************************************************/
function fn_pageTapSelect(){
    $(".navTap").removeClass("active");
    $(".tabContent").removeClass("active");
    if("popularity" == referTap){
        $("#navTap_popularity a").click();
    }else if("petit" == referTap){
        $("#navTap_petit a").click();
    }else if("skin" == referTap){
        $("#navTap_skin a").click();
    }else if("diet" == referTap){
        $("#navTap_diet a").click();
    }else{
        $("#navTap_popularity a").click();
    }
}

$(function(){
    // 페이지 탭 선택
    fn_pageTapSelect();

    // 페이지 init
    fn_pageInit();

    // 페이지 event
    fn_pageEvent();
});