let date = new Date();
let workTime = [];
let holiday = [];
let publicHolidayUseYn='';
function getSelectedDateTime() {
    // 선택된 날짜
    const selectedDate = $('.dates .on').text();
    // 선택된 시간
    const selectedTime =$('.times button.on').text();
    // 선택된 진료
    const selectedClinic = $('.clinic_list button.on').text();
    // 선택된 시술
    const selectedProcedures = getSelectedProcedures();

    if (selectedDate && selectedTime) {
        console.log('선택된 날짜:', selectedDate);
        console.log('선택된 시간:', selectedTime);
        return { date: selectedDate, time: selectedTime };
    } else {
        console.log('날짜 또는 시간이 선택되지 않았습니다.');
        return null;
    }
}
function getSelectedProcedures() {
    // 선택된 시술 체크박스 리스트 가져오기
    const selectedProcedures = [];
    document.querySelectorAll('input[name="reservation_list"]:checked').forEach(checkbox => {
        const procedureLabel = checkbox.nextElementSibling.textContent;
        selectedProcedures.push(procedureLabel);
    });

    return selectedProcedures;
}
/****************************************************************************
 * 진료 시간데이타 설정
 ****************************************************************************/
function fn_selectHospitalWorkTimeCombo() {
    let formData = new FormData();

    $.ajax({
        url: encodeURI('/mobilehospital/selectHospitalWorkTime.do'),
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        type: 'POST',
        async: false,
        success: function(data) {
            if ('0' == data.msgCode) {
                workTime = data.workTime[0];
                holiday = data.holiday;
                publicHolidayUseYn = data.workTime[0].publicHolidayUseYn;

            } else if (data.msgCode == '-1') {
                modalEvent.warning("조회 오류", data.msgDesc);
            } else {
                modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시 시도하십시오.");
            }
        },
        error: function(xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시 시도하십시오.");
        }
    });
}

function fn_setWorkTime(){
    let selectDay = $('.dates .date.on');

    let year = date.getFullYear();
    let month = ('0' + (date.getMonth() + 1)).slice(-2);

    if(selectDay)
        if (selectDay.hasClass('prev')) {
            // 이전 달 조회 시 월과 연도 조정
            month = ('0' + ((date.getMonth() + 1) - 1 || 12)).slice(-2); // 1월일 경우 12월로 설정
            if ((date.getMonth() + 1) === 1) year--; // 1월에서 이전 달은 전년도 12월
        } else if (selectDay.hasClass('next')) {
            // 다음 달 조회 시 월과 연도 조정
            month = ('0' + ((date.getMonth() + 1) + 1 > 12 ? 1 : (date.getMonth() + 1) + 1)).slice(-2); // 12월일 경우 다음 달은 1월
            if ((date.getMonth() + 1) === 12) year++; // 12월에서 다음 달은 다음 해 1월
        }

    let day = $('.dates .date.on').text();
    let todayDate = `${year}.${month}.${day}`; // 조회할 날짜 형식
    let selectDate = new Date(year,month-1,day)
    let dayOfWeek = selectDate.getDay();

    switch (dayOfWeek) {
        case 0 :
            dayOfWeek = 'sun'
            break;
        case 1 :
            dayOfWeek = 'mon'
            break;
        case 2 :
            dayOfWeek = 'tue'
            break;
        case 3 :
            dayOfWeek = 'wed'
            break;
        case 4 :
            dayOfWeek = 'thu'
            break;
        case 5 :
            dayOfWeek = 'fri'
            break;
        case 6 :
            dayOfWeek = 'sat'
            break;
    }

    // 요일에 따라 진료 시간 가져오기
    let todayWorkStart = workTime[`${dayOfWeek}OpenStartTime`];
    let todayWorkEnd = workTime[`${dayOfWeek}OpenEndTime`];
    let todayHoliday = holiday.find(holidayData => holidayData.locDate === todayDate);

    let timeHtml = fn_setWorkTimeValue(todayWorkStart,todayWorkEnd,selectDate)
    let workTimeContainer = $('.times'); // 진료 시간이 뿌려질 컨테이너
    workTimeContainer.empty(); // 기존 내용 제거

    if (todayHoliday&&(('Y'===publicHolidayUseYn && 'publicHoliday'===todayHoliday.dateType)
        ||'hospitalHoliday'===todayHoliday.dateType)) {
        // 공휴일 또는 휴무일 처리
        workTimeContainer.append(`<p>오늘은 휴무입니다.</p>`);
    } else{
        if (timeHtml) {
            // 진료 시간이 있으면 출력
            workTimeContainer.append(timeHtml);
            $('.times button').on('click', function(event) {
                $('.times button').removeClass('on');
                $(this).addClass('on');
            });
        }
        else{
            // 진료 시간이 없으면 기본 처리
            workTimeContainer.append(`<p>진료 시간이 없습니다.</p>`);
        }
    }
}

function fn_setWorkTimeValue(openStartTime, openEndTime,thisDate) {
    let timeHTML = '';
    const now = new Date(); // 현재 시간
    const currentHour = now.getHours(); // 현재 시간의 시간 값
    const currentMinutes = now.getMinutes(); // 현재 시간의 분 값

    const startTime = parseInt(openStartTime.split(':')[0], 10);
    const endTime = parseInt(openEndTime.split(':')[0], 10);

    // 선택된 날짜가 오늘인지 확인
    const isToday = thisDate.getDate() === now.getDate() &&
        thisDate.getMonth() === now.getMonth() &&
        thisDate.getFullYear() === now.getFullYear();

    for (let i = startTime; i < endTime; i++) {
        let hour = ('0' + i).slice(-2);

        // 오늘인 경우 현재 시간 이전 버튼 비활성화 또는 숨김 처리
        if (!isToday || (isToday && i > currentHour)) {
            timeHTML += `<button>${hour}:00</button>`;
            timeHTML += `<button>${hour}:30</button>`;
        } else if (isToday && i === currentHour) {
            // 현재 시간의 경우 30분 단위로 현재 분과 비교하여 생성
            if (currentMinutes < 30) {
                timeHTML += `<button>${hour}:30</button>`;
            }
        }
    }

    return timeHTML;
}
/****************************************************************************
 * 진료 콤보데이타 설정
 ****************************************************************************/
function fn_setTreatmentCombo(){
    let formData = new FormData();

    $.ajax({
        url: encodeURI('/mobiletreatment/selectListTreatmentOption.do'),
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        type: 'POST',
        async: false,
        success: function(data){
            let innerHtml = '';
            let otherTreatmentIds = [];

            if ('0' == data.msgCode) {
                const treatmentWrapper = $('.clinic_list');
                treatmentWrapper.empty();

                if(0<data.rows.length){
                    data.rows.forEach((treatmentData,index)=>{
                        let className = (index === 0) ? 'first' : '';

                        let treatmentName = treatmentData.treatmentName;
                        if (treatmentName !== '쁘띠' && treatmentName !== '피부' && treatmentName !== '비만') {
                            otherTreatmentIds.push(treatmentData.muTreatmentId); // 기타 항목으로 분류
                        } else {
                            // 기타가 아닌 경우는 그대로 처리
                            innerHtml = `<li class="${className}">
                                            <button class="treatment-button" data-muTreatmentId="${treatmentData.muTreatmentId}">${treatmentName}</button>
                                         </li>`;
                            treatmentWrapper.append(innerHtml);
                        }
                    });

                    // "기타" 항목들이 있으면, 하나의 '기타' 항목으로 리스트에 추가
                    if (otherTreatmentIds.length > 0) {
                        innerHtml = `<li>
                                        <button class="treatment-button" data-muTreatmentId="${otherTreatmentIds.join(',')}">기타</button>
                                     </li>`;
                        treatmentWrapper.append(innerHtml);
                    }

                    $('.treatment-button').on('click', function() {
                        let muTreatmentId = $(this).data('mutreatmentid'); // 버튼에서 muTreatmentId 가져오기
                        fn_setTreatmentProcedureCombo(muTreatmentId); // 함수 호출
                    });
                } else {
                    innerHtml = `<li><span>진료항목이 없습니다.</span></li>`;
                    treatmentWrapper.append(innerHtml);
                }

            } else if (data.msgCode == '-1') {
                modalEvent.warning("조회 오류", data.msgDesc);
            } else {
                modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시 시도하십시오.");
            }
        },
        error: function(xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시 시도하십시오.");
        }
    });
}

/****************************************************************************
 * 예약등록
 ****************************************************************************/
function fn_insertReserveIntro(){
    let reserveYear = date.getFullYear();
    let reserveMonth = ('0' + (date.getMonth() + 1)).slice(-2);
    let selectDate = $('.dates .date.on');

    if(selectDate)
        if (selectDate.hasClass('prev')) {
            // 이전 달 조회 시 월과 연도 조정
            reserveMonth = ('0' + ((date.getMonth() + 1) - 1 || 12)).slice(-2); // 1월일 경우 12월로 설정
            if ((date.getMonth() + 1) === 1) reserveYear--; // 1월에서 이전 달은 전년도 12월
        } else if (selectDate.hasClass('next')) {
            // 다음 달 조회 시 월과 연도 조정
            reserveMonth = ('0' + ((date.getMonth() + 1) + 1 > 12 ? 1 : (date.getMonth() + 1) + 1)).slice(-2); // 12월일 경우 다음 달은 1월
            if ((date.getMonth() + 1) === 12) reserveYear++; // 12월에서 다음 달은 다음 해 1월
        }

    let reserveDay = ('0' + date.getDate()).slice(-2);
    let reserveDate = reserveYear + '-' + reserveMonth + '-' + reserveDay;
    let muProcedureId = '';
    let procedureName = '';

    $('input[name="reservation_list"]:checked').each(function() {
        if(muProcedureId){
            muProcedureId+=', '+$(this).data("muprocedureid");
        }else{
            muProcedureId+=$(this).data("muprocedureid");
        }
        const procedure = $(this).siblings('label').text().trim();
        if(procedureName){
            procedureName+=', '+procedure;
        }else{
            procedureName+=procedure;
        }
    });

    let reserveTime = $('.times .on').text();
    let muTreatmentId = $('.treatment-button.on').data('mutreatmentid');
    let treatmentName = $('.treatment-button.on').text();

    let pagingParam = "?reserveDate=" + reserveDate;
    pagingParam    += "&reserveTime="+reserveTime;
    pagingParam    += "&muTreatmentId="+muTreatmentId;
    pagingParam    += "&treatmentName="+treatmentName;
    pagingParam    += "&muProcedureId="+muProcedureId;
    pagingParam    += "&procedureName="+procedureName;

    location.href = '/mobilereservation/selectReserveIntro.do'+pagingParam;
}

/****************************************************************************
 * 시술 콤보데이타 설정
 ****************************************************************************/
function fn_setTreatmentProcedureCombo(param){
    let result = [];

    let formData = new FormData();
    formData.append("muTreatmentId",param)

    $.ajax({
        url: encodeURI('/mobiletreatmentprocedure/selectListTreatmentProcedureOption.do'),
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        type: 'POST',
        async: false,
        success: function(data){
            if('0'==data.msgCode) {
                const procedureWrapper = $('.reservation_list');
                procedureWrapper.empty();

                if (0 < data.rows.length) {
                    data.rows.forEach((procedureData, index) => {
                        let className = (index === 0) ? 'first' : '';
                        const innerHtml = `<li class="${className}">
                                                    <input type="checkbox" id="checkbox${index + 1}" data-muProcedureId="${procedureData.muTreatmentProcedureId}" name="reservation_list">
                                                    <label for="checkbox${index + 1}">${procedureData.treatmentProcedureName}</button>
                                                 </li>`;
                        procedureWrapper.append(innerHtml);
                    });
                } else {
                    const innerHtml = `<li><span>진료항목이 없습니다.</span></li>`;
                    procedureWrapper.append(innerHtml);
                }
            }
            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_renderCalender(){
    const viewYear = date.getFullYear();
    const viewMonth = date.getMonth();

    document.querySelector('.year').textContent = `${viewYear}`;
    document.querySelector('.month').textContent = `${viewMonth + 1}`;

    //이전달 마지막날
    const prevLast = new Date(viewYear, viewMonth, 0);
    //이달 마지막날
    const thisLast = new Date(viewYear, viewMonth + 1, 0);

    const PLDate = prevLast.getDate();
    const PLDay = prevLast.getDay();

    const TLDate = thisLast.getDate();
    const TLDay = thisLast.getDay();

    const prevDates = [];
    const thisDates = [...Array(TLDate + 1).keys()].slice(1);
    const nextDates = [];

    if (PLDay !== 6) {
        for (let i = 0; i < PLDay + 1; i++) {
            prevDates.unshift(PLDate - i);
        }
    }

    for (let i = 1; i < 7 - TLDay; i++) {
        nextDates.push(i);
    }

    const dates = prevDates.concat(thisDates, nextDates);
    const firstDateIndex = dates.indexOf(1);
    const lastDateIndex = dates.lastIndexOf(TLDate);

    const today = new Date(); // 오늘 날짜 가져오기
    const todayYear = today.getFullYear();
    const todayMonth = today.getMonth();
    const todayDate = today.getDate();

    // 각 날짜에 클래스 추가 (이전 달, 이번 달, 다음 달)
    dates.forEach((date, i) => {
        let condition;

        if (i < firstDateIndex) {
            condition = 'prev'; // 이전 달 날짜
        } else if (i >= firstDateIndex && i <= lastDateIndex) {
            condition = 'this'; // 이번 달 날짜
        } else {
            condition = 'next'; // 다음 달 날짜
        }

        // 지난 날짜 확인 (이번 달의 현재 날짜 이전 날짜만)
        let isPastDate = (condition === 'this') &&
                         ((viewYear < todayYear) ||
                          (viewYear === todayYear && viewMonth === todayMonth && date < todayDate));

        // 지난 날짜일 경우 'past' 클래스를 추가
        if (isPastDate || viewYear < todayYear || (viewYear === todayYear && viewMonth < todayMonth)) {
            condition += ' past';
        }

        dates[i] = `<div class="date ${condition}">${date}</div>`;
    });

    document.querySelector('.dates').innerHTML = dates.join('');

    // 오늘 날짜 강조
    if (viewMonth === todayMonth && viewYear === todayYear) {
        for (let date of document.querySelectorAll('.this')) {
            if (+date.innerText === todayDate) {
                date.classList.add('today');
                date.classList.add('on');
                break;
            }
        }
    }

    // 지난 날짜 선택 불가 처리
    for (let pastDate of document.querySelectorAll('.past')) {
        pastDate.classList.add('disabled'); // 선택 불가 클래스를 추가
        pastDate.style.pointerEvents = 'none'; // 클릭 이벤트를 비활성화하여 선택할 수 없게 만듦
    }
}

function checkAllFields(changeElement) {
    let selectedCheckboxes = $('input[name="reservation_list"]:checked').length;
    let date = $('.date.on').length;
    let time = $('.times .on').length;
    let treatment = $('.treatment-button.on').length;
    const completeButton = $('.button_box button');

    if(selectedCheckboxes&&date&&time&&treatment){
        completeButton.addClass('active');
        completeButton.attr("disabled", false);
    }else {
        completeButton.removeClass('active')
        completeButton.attr("disabled", true);
    }

}

/****************************************************************************
 * 페이지 init
 ****************************************************************************/
function fn_pageInit(){
    fn_renderCalender();
    fn_setTreatmentCombo();
    fn_selectHospitalWorkTimeCombo();
    fn_setWorkTime();
}

/****************************************************************************
 * 페이지 event
 ****************************************************************************/
function fn_pageEvent(){
    //이전달 조회
    $('.nav_btn.prev').on('click', function(event) {
        // 현재 달보다 이전 달로 이동하려고 할 때 이벤트 중지
        if (date.getMonth() <= new Date().getMonth() && date.getFullYear() <= new Date().getFullYear()) {
            return; // 현재 달보다 과거라면 동작하지 않음
        }

        date.setMonth(date.getMonth() - 1);
        date.setDate(1); // 이전 달의 첫 번째 날짜로 설정
        fn_renderCalender(true); // skipTodayHighlight를 true로 설정하여 오늘 날짜 강조 건너뜀

    // 현재 날짜와 선택한 날짜 비교
    const today = new Date();
    const selectedDate = new Date(date.getFullYear(), date.getMonth(), 1); // 선택한 달의 첫 번째 날짜

    if (selectedDate >= today) {
        $('.date.this').first().addClass('on'); // 선택한 날짜가 현재 날짜 이상일 때만 'on' 클래스 추가
    }
    fn_setWorkTime(); // 선택 날짜에 맞춰 진료 시간 설정
});

    //다음달 조회
    $('.nav_btn.next').on('click', function(event) {
        date.setMonth(date.getMonth() + 1);
        date.setDate(1); // 다음 달의 첫 번째 날짜로 설정
        fn_renderCalender(true); // skipTodayHighlight를 true로 설정하여 오늘 날짜 강조 건너뜀

        $('.date.this').first().addClass('on'); // 첫 번째 날짜에 'on' 클래스 추가
        fn_setWorkTime(); // 선택 날짜에 맞춰 진료 시간 설정
    });

    //진료 선택
    $('.clinic_list button').on('click', function() {
        // 모든 버튼에서 'on' 클래스 제거
        $('.clinic_list button').removeClass('on');

        // 클릭한 버튼에 'on' 클래스 추가
        $(this).addClass('on');
    });

    $('.calender_main').on('click','.date:not(.past)', function() {
        $('.date.on').removeClass('on');

        $(this).addClass('on');
        const year = $('.year').text();
        const month = $('.month').text();
        const day = $('.date.on').text();
        date.setFullYear(year,month-1,day);
        fn_setWorkTime($(this));
    });

    $('.date,.times,.treatment-button,.reservation_list').each(function () {
        $(this).on('click', ()=>checkAllFields($(this)));
    });

    $('.next_btn').on('click', ()=>fn_insertReserveIntro());
}

$(function(){
    // 페이지 init
    fn_pageInit();

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