/*****************************
 *****************************
 ********             ********
 ********   通用功能   ********
 ********             ********
 *****************************
 *****************************/

function convertToChinese(number) {
    switch (number) {
        case 0:
            return "零";
        case 1:
            return "一";
        case 2:
            return "二";
        case 3:
            return "三";
        case 4:
            return "四";
        case 5:
            return "五";
        case 6:
            return "六";
        case 7:
            return "七";
        case 8:
            return "八";
        case 9:
            return "九";
        default:
            return "無效數字";
    }
}

// 數字轉換千分位
function toCurrency(num){
    var parts = num.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
}

// check value is Finite or NaN return 0 or ParseFloat;
function ckVFN( num ){
    if (isNaN(num) || typeof num === 'string') {
        num = parseFloat(num);
    }
    if (!isFinite(num)) {
        return 0;
    } else {
        return num;
    }
}

// 月曆 防呆版本
function appendEventDatepicker(){
    $.each( $(`.dateClass:not(.hasDatepicker)`), function(){
        //日期工具(Start)
        var nowYear = new Date().getFullYear(),
            yearCon = "1911:"+(nowYear+5),
            tDate = $(this),
            spanHtml = tDate.siblings('.spanDateClass'),
            tDefDate=tDate.attr('md-append-defdate'),
            tMinDate=tDate.attr('md-append-mindate'),
            tMaxDate=tDate.attr('md-append-maxdate');
        null != tDefDate ? tDate.val( tDefDate ) : '';
        tDate.datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            defaultDate: tDefDate,
            minDate: tMinDate,
            maxDate: tMaxDate,
            yearRange: yearCon,
            onSelect: function(dateText){
                spanHtml.length ? spanHtml.html( this.value ) : '';
            }
        });
        // 點 日曆 ( 開啟 )
        tDate.siblings('.fa').on('click', function(){ tDate.datepicker('show'); });
        // 點 父層 ( 開啟 )
        tDate.parent().on('click', function(){ tDate.datepicker('show'); });
        // 若有 隱藏 預設日期
        spanHtml.length ? spanHtml.html( tDate.val() ) : '';
        //日期工具(End)
    });
}

/*****************************
 *****************************
 ********             ********
 ********   頁面功能   ********
 ********             ********
 *****************************
 *****************************/

// 補充 月曆 反應
function setDateBoxDetail(){
    function mbRange(){
        var sDateVal = $(`[data-area=pc][data-type=s_date]`).val(),
            eDateVal = $(`[data-area=pc][data-type=e_date]`).val();
        if( ( '' != sDateVal ) | ( '' != eDateVal ) ){
            $('[data-starget=range_m]').val( `${sDateVal} - ${eDateVal}` );
        }
    }
    $.each( $('.content [data-date-box]'), function(){
        var tRoot = $(this),
            tDateS = tRoot.find('[data-type=s_date]'),
            tDateE = tRoot.find('[data-type=e_date]');
        // 入住 日期
        tDateS.addClass( 'detailOption' );
        tDateS.datepicker( "option", { onSelect: function(dateText) {
            var target = $(this),
                n_area = target.attr('data-area'),
                n_type = target.attr('data-type'),
                n_syn = 'pc' == n_area ? 'mb' : 'pc',
                n_syn_type = 's_date' == n_type ? 'e_date' : 's_date',
                target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`),
                target_syn_date = $(`[data-area=${n_syn}][data-type=${n_syn_type}]`),
                tmrDate = returnDateTomorrow( this.value );
            target.parent().removeClass('min');
            tDateE.datepicker( "option", { "minDate" : tmrDate } );
            tDateE.datepicker( "refresh" );
            tDateE.datepicker( "setDate", tmrDate );
            tDateE.datepicker( "refresh" );
            target_syn_date.parent().removeClass('min');
            target_syn_date.datepicker( "option", { "minDate" : tmrDate } );
            target_syn_date.datepicker( "refresh" );
            target_syn_date.datepicker( "setDate", tmrDate );
            target_syn_date.datepicker( "refresh" );
            target_syn.datepicker( "setDate", this.value );
            target_syn.datepicker( "refresh" );
            ckSelectRoom();
            mbRange();
        }});
        // 退房 日期
        tDateE.addClass( 'detailOption' );
        tDateE.datepicker( "option", { onSelect: function(dateText) {
            var target = $(this),
                n_area = target.attr('data-area'),
                n_type = target.attr('data-type'),
                n_syn = 'pc' == n_area ? 'mb' : 'pc',
                n_syn_type = 's_date' == n_type ? 'e_date' : 's_date',
                target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`),
                target_syn_date = $(`[data-area=${n_syn}][data-type=${n_syn_type}]`);
            target.parent().removeClass('min');
            // tDateS.datepicker( "option", {"maxDate":this.value} );
            // tDateS.datepicker( "refresh" );
            target_syn_date.parent().removeClass('min');
            // target_syn_date.datepicker( "option", {"maxDate":this.value} );
            // target_syn_date.datepicker( "refresh" );
            target_syn.datepicker( "setDate", this.value );
            target_syn.datepicker( "refresh" );
            ckSelectRoom();
            mbRange();
        }});
    });
}

// 簡查是否顯示 選擇房型按鈕
function ckSelectRoom(){
    var domHotelDetailInfo = '#orderBox',
        sVal = $(`${domHotelDetailInfo} [data-area=pc][data-type=s_date]`).val(),
        eVal = $(`${domHotelDetailInfo} [data-area=pc][data-type=e_date]`).val(),
        rVal = ckVFN( $(`${domHotelDetailInfo} [data-area=pc][data-type=room]`).val() ),
        aVal = ckVFN( $(`${domHotelDetailInfo} [data-area=pc][data-type=adults]`).val() ),
        cVal = ckVFN( $(`${domHotelDetailInfo} [data-area=pc][data-type=children]`).val() );
   
    // 只要異動, 就灰皆 "立即預定" 按鈕
    $('.tripdatabox .prices .p2 .btn').addClass('stop');
	$('div#joinSendBtnShow').show(); //切換點選按鈕
	$('div#joinSendBtn').hide();
	$('input#program_choose').val(""); //將所選擇的方案清空
	$('[data-room-btn]').html("選擇房型").removeClass('gray');
		
    // 只要異動, 就歸零 金額
    pageTotalPrice.html(`$ 0`);
    // console.log( `房間 => ${rVal}` );
    // console.log( `大人 => ${aVal}` );
    // console.log( `小孩 => ${cVal}` );
    // 填寫日期 + 一房一人 以上 解所 選擇房型 功能
    if( ( ( '' != sVal ) && ( '' != eVal ) ) && ( 1 <= rVal ) && ( 1 <= aVal ) && ( rVal <= aVal ) ){
        // 若人數正確, 解鎖 "選擇房型" 按鈕
        $('[data-room-btn]').removeClass('gray');
    }else{
        $('[data-room-btn]').addClass('gray');
    }
}

// 小孩 樣板 ( 因為 要還原預設值 ) v230814
function createChildrenDetailTemplete( type, data ){
    var tempReturn = '',
        tempOption;
    // 小孩子 動態選單 的 選項
    for(var i=0;i<=19;i++){
        var defChild = '';
        if( undefined !== data['def-child-age'] )
            if( i == data['def-child-age'] )
                defChild = ' selected="selected"';
        tempOption+=`<option value="${i}"${defChild}>${i}</option>`;
    }
    switch(type){
        case "page":        // page 內頁 同步 行動版 的 小孩欄位
            tempReturn =`<div class="grids">
                            <div class="gh1">小孩${data.n_now}</div>
                            <div class="ginput"><div class="select"><select name="child_age[]" class="input" data-area="pc" data-type="c_${data.n_now}">${tempOption}</select></div></div>
                        </div>`;
        break;
        default:            // header => 全站通用
            tempReturn =`<div class="grids">
                            <div class="gh1">小孩${data.n_now}</div>
                            <div class="ginput"><div class="select"><select name="child_age[]" class="input" data-area="mb" data-type="c_${data.n_now}">${tempOption}</select></div></div>
                        </div>`;
        break;
    }
    return tempReturn;
}

// 設定 加減 功能
function setNumberBoxDetail(){
    var domHotelDetailInfo = '#orderBox';
    // 小人 動態 選單 同步 選項
    function synChildrenFunction(){
        var tRoot = $(this),
            n_area = tRoot.attr('data-area'),
            n_type = tRoot.attr('data-type'),
            n_syn = 'pc' == n_area ? 'mb' : 'pc',
            target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`);
        target_syn.val( tRoot.val() );
    }
    // 小人 動態 選單 附加功能
    function synChildren( tCBox, tCBox_syn ){
        $.each( tCBox.find('select'), function(){
            $(this).off().on('change', synChildrenFunction);
        });
        $.each( tCBox_syn.find('select'), function(){
            $(this).off().on('change', synChildrenFunction);
        });
    }
    // 小人 數量 & 動態 選單
    function addChildren( n_now, tCBox, tCBox_syn ){
        var nowCBoxChil = tCBox.children().length,
            tempOption='';
        if( n_now > nowCBoxChil ){
            tCBox.append( createChildrenDetailTemplete( 'page', { 'n_now' :n_now } ) );
            // tCBox.append(`<div class="grids">
            //         <div class="gh1">小孩${n_now}</div>
            //         <div class="ginput"><div class="select"><select name="child_age[]" class="input" data-area="pc" data-type="c_${n_now}">${tempOption}</select></div></div>
            //     </div>`);
            tCBox_syn.append( createChildrenDetailTemplete( 'mb', { 'n_now' : n_now } ) );
            // tCBox_syn.append(`<div class="grids">
            //         <div class="gh1">小孩${n_now}</div>
            //         <div class="ginput"><div class="select"><select name="child_age[]" class="input" data-area="mb" data-type="c_${n_now}">${tempOption}</select></div></div>
            //     </div>`);
            // synChildren( tCBox, tCBox_syn );
        }else{
            if( 0 != n_now ){
                tCBox.children().eq( ( n_now - 1 ) ).nextAll().remove();
                tCBox_syn.children().eq( ( n_now - 1 ) ).nextAll().remove();
            }else{
                tCBox.children().remove();
                tCBox_syn.children().remove();
            }
        }
    }
    $.each( $(`${domHotelDetailInfo} [data-number-box]`), function(){
        var tRoot = $(this),
            target = tRoot.children('.dr-input').children('input'),
            n_area = target.attr('data-area'),
            n_type = target.attr('data-type'),
            n_syn = 'pc' == n_area ? 'mb' : 'pc',
            target_syn = $(`[data-area=${n_syn}][data-type=${n_type}]`),
            n_now = ckVFN( target.val() ),
            n_min = ckVFN( target.attr('min') ),
            n_max = ckVFN( target.attr('max') ),
            btn_l = tRoot.children('.arrow-01'),
            btn_r = tRoot.children('.arrow-02'),
            tCBox = tRoot.closest('.durooom').find('.childbox'),
            tCBox_syn = target_syn.closest('.durooom').find('.childbox');
        btn_l.on('click', function(){
            n_now = ckVFN( target.val() );
            if( n_min < n_now ) n_now = n_now-1;
            target.val( n_now );
            target_syn.val( n_now );
            ckSelectRoom();
            if( 'children' == n_type ) addChildren( n_now, tCBox, tCBox_syn );
        });
        btn_r.on('click', function(){
            n_now = ckVFN( target.val() );
            if( n_max > n_now ) n_now = n_now+1;
            target.val( n_now );
            target_syn.val( n_now );
            ckSelectRoom();
            if( 'children' == n_type ) addChildren( n_now, tCBox, tCBox_syn );
        });
    });
}

// 選擇房型 => 房型資訊
var hotelDetailJson = {
        "page":{},
        "select":{},
        "asiayo":{},
        "asiayoCount":0
    },
    speedFade=210,
    lightBoxL1_selector = '.plan_lightbox',
    lightBoxL1 = $(lightBoxL1_selector),
    lightBoxL2_selector = '.roomdata_lightbox',
    lightBoxL2 = $(lightBoxL2_selector),
    pageTotalPrice = $('#total_price'),
	pageRoomProgram = $('#room_program_info');

ajaxRoomSelectByPage(); //預載畫面資訊
	

// 住房 房型說明 樣板
function returnTemplate( type, data ){
    tempReturn='';
    switch(type){
        case "page":
            let tempAsiaList = '';
            // Asia 方案
            if( data.asiayo != undefined && data.asiayo != null ){
                tempAsiaList+=`<div class="tagList">`;
                $.each( data.asiayo, function ( idx, ival ){
                    // [data-room-asiayo] 要保留
                    tempAsiaList += `<a class="li" href="#" data-room-asiayo="${ival.id}">${ival.name}</a>`;
                });
                tempAsiaList+=`</div>`;
                // <div class="tagList">
                //     <a class="li" href="#" data-room-asiayo="RI_44835_0">包含早餐</a>
                //     <a class="li" href="#" data-room-asiayo="RI_44835_0">包含早餐</a>
                //     <a class="li" href="#" data-room-asiayo="RI_44835_0">包含早餐</a>
                //     <a class="li" href="#" data-room-asiayo="RI_44835_0">包含早餐</a>
                // </div>
            }
            tempReturn=`<div class="roomexbox">
                <div class="title_s">${data.title}</div>
                <div class="roombox">
                    <div class="roomimg" style="background-image:url(${data.pic}" data-room-box="${data.id}"></div>
                    <div class="roomtxt">
                        <div class="picflex">
                            <div class="h3">基本入住人數：${data.people}</div>
                            <div class="prices">TWD <span>$${data.amount}</span> 起</div>
                        </div> 
                        <div class="r_op">
                            ${data.info}
                            <!-- Asiayo -->
                            ${ tempAsiaList }
                            <div class="rright"><a href="#" data-room-box="${data.id}">詳情</a></div>
                        </div>
                    </div>
                </div>
            </div>`;
        break;
        case "loading": // 載入中 房型說明
            tempReturn=`
			<div class="roomexbox skeleton">
				<div class="title_s"></div>
				<div class="roombox">
					<div class="roomimg"></div>
					<div class="roomtxt">
						<div class="picflex">
							<div class="h3"></div>
							<div class="prices"></div>
						</div> 
						<div class="r_op">
							<div class="rleft">
								<div class="sortop"></div>
								<div class="sortop"></div>
								<div class="sortop"></div>
								<div class="sortop"></div>
								<div class="sortop"></div>
								<div class="sortop"></div>
							</div>
						</div>
					</div>
				</div>
			</div>`;
        break;
        default:    // select
            $.each( data, function( idx, ival){
                if( null!=ival.plant && undefined!=ival.plant ){
                    var tempPlan='';
                    $.each( ival.plant, function( jdx, jval){
                        var unsubscribe = null != jval.unsubscribe ? `<a href="#" class="link">退訂政策</a><span class="red" style="display:none;">${jval.unsubscribe}</span>` : "",
                            quantity = 2 > jval.quantity ? `<span class="red text_r">最後${convertToChinese(jval.quantity)}房</span>` : "",
                            tempAsiaList = '';
                        // Asia 方案
                        if( jval.discount != null && jval.discount.length > 0 ){
                            // if( ival.asiayo ){
                                // $.each( ival.asiayo, function ( kdx, kval ){
                                //     tempAsiaList += `<div class="li"><a href="#" data-room-asiayo="${kval.id}">${kval.name}</a></div>`;
                                // });
                                // 更新取得 選擇房型 API 連帶參數 ( v.240621 )
                                $.each( jval.discount, function ( kdx, kval ){
                                    tempAsiaList += `<div class="li"><a href="#" data-room-asiayo="${ kdx }">${ kval.info_title }</a></div>`;
                                });
                            // }
                        }
                        tempPlan+=`<div class="roomplan" data-index="${ jdx }">
                                        <div class="list01">
                                            <div class="leftTitle">${jval.title}</div>
                                            <div class="righttxt">TWD $${jval.amount}</div>
                                        </div>
                                        <div class="list02">
                                            <div class="leftTitle">
                                                <div class="tagList">${ tempAsiaList }</div>
                                            </div>
                                            <div class="righttxt">${jval.info_content}</div>
                                        </div>
                                        <div class="list03">
                                            <div class="list-a">${unsubscribe}</div>
                                            <div class="list-b">${quantity}</div>
                                            <div class="list-btn" data-room-quantity="${jval.quantity}" data-room-amount="${jval.amount}" data-room-title="${jval.showTitle}" data-room-order="${jdx}">選取</div>
                                        </div>
                                    </div>`;
                    });
                }
                tempReturn+=`<div class="grids" data-index="${ idx }">
                                <div class="titles">${ival.title}</div>
                                <div class="roombox">
                                    <div class="roomimg" style="background-image:url(${ival.pic})" data-room-box="${idx}"></div>
                                    <div class="roomtxt">
                                        <div class="h3">基本入住人數：${ival.people}</div>
                                        <div class="r_op">
                                            <div class="rleft">${ival.info}</div>
                                            <div class="rright"><a href="#" data-room-box="${idx}">詳情</a></div>
                                        </div>
                                    </div>
                                </div>
                                ${tempPlan}
                            </div>`;
            });
        break;
    }
    return tempReturn;
}

// 建立 樣板 房型說明 / 選擇房型( 光箱 )
function setRoomSelect( type ){
    if( null!=hotelDetailJson[type] && undefined!=hotelDetailJson[type] ){
        var target_selector = `[data-room-select=${type}]`,
            target = $(target_selector);
        if( 1<=target.length ){
            if( "page" == type ){
                
                // 房型說明 - 清空
				target.children('.title').siblings().remove();
				if( 1 <= Object.keys( hotelDetailJson['page'] ).length ){
					$.each( hotelDetailJson[type], function( idx, ival ){
						ival.id=idx;
						target.append( returnTemplate( type, ival ) );
					});

                    // AsiaYo 房型 ( Page 用 )
                    $.each( target.find(`[data-room-asiayo]`), function(){
                        $(this).on('click', function( event ){
                            event.preventDefault();
                            setRoomDataLightBox( 'asiayo', $(this).attr('data-room-asiayo') );
                        });
                    });
				}else{
					target.append( `<span>查無任何房型方案，請重新設定入住條件！</span>` );
				}
								
            }else{
                // 光箱 data-room-select="select" 內容
                
                // 選擇房型 - 清空
                target.html('');
                // 選擇房型 - 塞樣板
                target.append( returnTemplate( type, hotelDetailJson[type] ) );
                // 選擇房型 - 退訂政策 開起反應
                $('.plan_lightbox .wbgs .conts .range .grids .roomplan .list03 .list-a .link').off().on('click', function(event){
                    event.preventDefault();
                    $(this).hide().siblings('.red').show();
                });
                $(`${target_selector} [data-room-order]`).on('click', function(event){
                    event.preventDefault();
                    lightBoxL1.fadeOut(speedFade);
                    $('.tripdatabox .prices .p2 .btn').removeClass('stop');
                    
					// 立即訂購 金額
                    pageTotalPrice.html( `$ ${toCurrency( ckVFN( $(this).attr('data-room-amount') ) )}` ); //回寫金額
					pageRoomProgram.html($(this).attr('data-room-title')); //將選擇的內容回寫到按鈕上
					
					//選擇資訊寫回form中
					$('input#asiayo_amount').val($(this).attr('data-room-amount'));
					$('input#asiayo_quantity').val($(this).attr('data-room-quantity'));
					$('input#program_choose').val($(this).attr('data-room-order'));
					$('input#program_choose_name').val($(this).attr('data-room-title'));


					//取回GA4 DataLayer資訊
					//------------------------------------------------------------------------
					$.ajax({
						type: "POST",
						url: "/ajax/orderlist_check_amount_hotel.php",
						dataType: "json",
						cache: false,
						data: $('form#roomRuleForm').serialize()
						})
						.done(function(data) {
							if(data['status'] == '000'){				
								//GA4使用
								dataLayerAddToCart = data['dataLayerGA4'];	
								//切換立即預訂的按鈕	
								$('div#joinSendBtnShow').hide(); //關閉按鈕
								$('div#joinSendBtn').show(); //開啟送出按鈕
								$('[data-room-sendbtn]').removeClass('stop');
							}else{
								alert("所選擇的房型資訊有誤，請重新選擇，謝謝。");	
								$('[data-room-sendbtn]').addClass('stop');		
							}
						})
						.fail(function() {
							//console.log("error::orderlist_check_amount_hotel");			
						});	
					//------------------------------------------------------------------------
					
					
                });
            }
            // Tripbaa 房型
            $.each( $(`${target_selector} [data-room-box]`), function(){
                $(this).on('click', function( event ){
                    event.preventDefault();
                    setRoomDataLightBox( type, $(this).attr('data-room-box') );
                });
            });
            // AsiaYo 房型
            $.each( $(`${target_selector} [data-room-asiayo]`), function(){
                $(this).on('click', function( event ){
                    event.preventDefault();
                    setRoomDataLightBox( 'asiayo', $(this).attr('data-room-asiayo'), this );
                });
            });
        }
    }else if( "pageLoading" == type ){
        var target = $(`[data-room-select=page]`);
        if( 1<=target.length ){
            // 房型說明 - 清空
            var targetLength = 1 >= target.children('.title').siblings().length ? 1 : target.children('.title').siblings().length;
            target.children('.title').siblings().remove();
            for( var i = 0 ; i < targetLength ; i++ ){
                target.append( returnTemplate( 'loading', null ) );
            }
        }
    }else if( "pageRemove" == type ){
        var target = $(`[data-room-select=page]`);
        if( 1<=target.length ){
            // 房型說明 - 清空
            target.children('.title').siblings().remove();
        }
    }
}

// 住房頁 Loading 遮罩
function hotelLoading(loadingSwitch){
    var loadingKey = 'hodel-loading-id',
        loadingTarget = $(`[${loadingKey}]`),
        loadingSpeed = 500;
    if( loadingSwitch ){
        if( 0==loadingTarget.length ){
            $('body').append(`<div class="hodelLoading" ${loadingKey}><div class="sk-box"><div class="sk-chase"><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div></div></div></div>`);
            $(`[${loadingKey}]`).fadeIn(loadingSpeed);
        }
    }else{
        var classLoadingRemoving = 'removing';
        if( 1 <= loadingTarget.length ){
            loadingTarget
                .addClass(classLoadingRemoving)
                .fadeOut( loadingSpeed, function(){
                    $(this).remove();
                });
        }
    }
}

//頁面預載資料 Ajax
function ajaxRoomSelectByPage(){

    // 頁面 - 房型說明, 載入中
    setRoomSelect( 'pageLoading' );

	$.ajax({
		type: "POST",
		url: "/ajax/get_asiayo_package.php",
		dataType: "json",
		cache: false,
		data: $('form#roomRuleForm').serialize()
		})
		.done(function(data) {
			if(data['status'] == '000'){				
				// 回填資料
				hotelDetailJson["page"]   = data["page"];
				hotelDetailJson["select"] = data["select"];
                
                // 房型載入時 順便帶入 AsiaYo 資訊
				hotelDetailJson["asiayo"] = data["asiayo"];
                hotelDetailJson["asiayoCount"] = data["asiayoCount"];
								
				// 房型說明 - 頁面
				setRoomSelect( 'page' );
						
			}else{
				//畫面不做任何的反應				
			}
		})
		.fail(function() {
			console.log("error::ajaxRoomSelectByPage");			
		});
}


// 選擇房型 Ajax
function ajaxRoomSelect(){
    // 開起 Loading 遮罩
    hotelLoading( true );
    // 頁面 - 房型說明, 載入中
    setRoomSelect( 'pageLoading' );

	$.ajax({
		type: "POST",
		url: "/ajax/get_asiayo_package.php",
		dataType: "json",
		cache: false,
		data: $('form#roomRuleForm').serialize()
		})
		.done(function(data) {
			if(data['status'] == '000'){				
				// 回填資料
				hotelDetailJson["page"]   = data["page"];
                // 增加 AsiaYo 資訊
				hotelDetailJson["select"] = data["select"];
                // 房型載入時 順便帶入 AsiaYo 資訊
				hotelDetailJson["asiayo"] = data["asiayo"];
                hotelDetailJson["asiayoCount"] = data["asiayoCount"];
				
				// 房型說明 - 頁面
				setRoomSelect( 'page' );
				// 選擇房型 - 建構 光箱內容
				setRoomSelect( "select" );
				// 關閉 Loading 遮罩
				hotelLoading( false );
				// 開啟 選擇房型
				lightBoxL1.fadeIn(speedFade);				
			}else{
				//畫面不做任何的反應
				//回填資料
				hotelDetailJson["page"]   = Array();
				hotelDetailJson["select"] = Array();
                hotelDetailJson["asiayo"] = Array();
                hotelDetailJson["asiayoCount"] = 0;
				
				
				// 房型說明 - 頁面
				setRoomSelect( 'page' );	
				// 關閉 Loading 遮罩
				hotelLoading( false );		
				alert('查無任何房型方案，請重新設定入住條件！');
					
			}
		})
		.fail(function() {
			console.log("error::ajaxRoomSelect");			
		});
}

// 住宿 房型 光箱功能
function setRoomInfoDetail(){
    // MB 開啟 查詢與預定
    $('.mobbtnboxfix .bottoms01').on('click', function(){
        $('#orderBox').fadeIn(speedFade);
        // fbq('track', 'Schedule');
    });
    $('.MobClose').on('click', function(){
        $('#orderBox').fadeOut(speedFade, function(){
            $(this).css('display','');
        });
    });

    // 選擇房型 ( 浮動按鈕 )
    $('[data-room-btn]').on('click', function( event ){
        event.preventDefault();
        if( !$(this).attr('class').match(/gray/g) ){
            ajaxRoomSelect();
        }
    });

    // 關閉 方型光箱
    $('.closebtn').on('click', function(){
        $(this).closest(lightBoxL1_selector).fadeOut();
    });

    // 有錢人的煩惱 - 包棟或背包房客
    $.each( $('.durooom_qas .inlines'), function(){
        var tExtxt = $(this).siblings('.extxt');
        $(this).on( 'focusin', function(){
            tExtxt.stop().fadeIn(speedFade);
        });
        $(this).on( 'focusout', function(){
            tExtxt.stop().fadeOut(speedFade);
        });
        $(this).mouseenter(function(){
            tExtxt.stop().fadeIn(speedFade);
        }).mouseleave(function(){
            tExtxt.stop().fadeOut(speedFade);
        });
    });
    // Q&A 內層收合 ( 更多在 base_.....js )
    var target_items = $('.qa_box .qa_list .qa_title'),
        class_hold = 'hold';
    if( target_items.length ){
        target_items.on('click', function(){
            var target_root = $(this).closest('.qa_list');
            target_root.toggleClass(class_hold).siblings().removeClass(class_hold);
        });
    }
    // 房型光箱 點旁邊要關閉
    $(document).on('click', function(e) {
        // alert( $(e.target).attr('class') );
        if( 'none' != $('.pc_search').css('display') ){
            if( $(e.target).closest('.rf03').length === 0 ) {
                // $('.durooom_qas').fadeOut(speedFade);
            }
        }
        if( ( $(e.target).closest('.roomdata_lightbox').length === 0 ) && ( $(e.target).closest('.wbgs').length === 0 ) && ( $(e.target).closest('[data-room-btn]').length === 0 ) ) {
            lightBoxL1.fadeOut(speedFade);
        }
        if( ( $(e.target).closest('.rbg').length === 0 ) && ( $(e.target).closest('[data-room-box]').length === 0 ) && ( $(e.target).closest('[data-room-asiayo]').length === 0 ) ) {
            lightBoxL2.fadeOut(speedFade);
            $('.aGallery').css('opacity', 0);
        }
	});
    $(window).resize(function(){
        $('.dateClass').datepicker("hide");
        // $('.durooom_qas').hide();
    });
}

// 開啟 房型光箱 相簿
function setRoomDataLightBox( type, rid, thisElement ){

    // 大圖樣版
    function templateGalleryTarget( rid ){
        // 如果 選擇房型光箱開啟, 使用 API 內 Select 相簿
        var galleryJson = lightBoxStatus == true ? hotelDetailJson[ 'select' ][ gridsIndex ][ 'gallery' ] : hotelDetailJson[ 'asiayo' != type ? 'page' : 'asiayo' ][rid].gallery,
            itemB='',
            itemT='';
        $.each( galleryJson, function(idx,ival){
            itemB+=`<div><div class="aGallery-target">
                        <div class="aGallery-target-pc" style="background-image: url(${ival});"></div>
                        <div class="aGallery-target-mb" style="background-image: url(${ival});"></div>
                    </div></div>`;
            itemT+=`<div class="grids gallery-active"><img src="${ival}"></img></div>`;
        });
        $('.photos').html(`<div class="aGallery"><div class="aGallery-slick">${itemB}</div><div class="aGallery-Box"><div class="aGallery-thumbnail">${itemT}</div></div></div>`);
    }
        
        
    // 建立 房型資訊 左側 相簿
    function setSlickAG( rid ){
        // 拆除 現有 slick
        if( $('.aGallery-slick.slick-slider').length ){
            $('.aGallery-slick').slick('unslick');
            $('.aGallery-thumbnail').slick('unslick');
            $('.photos').html('');
        }
        
        // 建立 骨架
        $('.photos').html( templateGalleryTarget( rid ) );
        // 建立 輪播 / 相片輯
        var main_selector = '.aGallery-slick',
            main_slick = $(main_selector),    
            thum_selector = '.aGallery-thumbnail',
            thum_slick=$(thum_selector);

        // 主輪播
        main_slick.slick({
            arrows: false,
            autoplay: false,
            dots: false,
            accessibility:  true, //Enables tabbing and arrow key navigation
            infinite: false,
            speed: 333,
            slidesToShow: 1,
            slidesToScroll: 1,
            asNavFor: thum_selector
        });
        
        // 縮圖 輪播
        thum_slick.slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: main_selector,
            arrows: false,
            dots: false,
            infinite: false,
            centerMode: true,
            focusOnSelect: true
        });
        thum_slick.on('init', function(event, slick){
            $('.aGallery').css('opacity', 1);
            setTimeout(function(){
                $('.aGallery-slick').slick('refresh');
                $('.aGallery-thumbnail').slick('refresh');
            }, 333);
        });
    }

    // 如果 選擇房型光箱 有開啟, 使用 API 回應的 JSON 內 Select 資料集.
    let gridsIndex,
        roomIndex,
        lightBoxStatus = false;
        informationType = 'asiayo' != type ? type : 'asiayo',
        informationJson = hotelDetailJson[ informationType ][rid];
    if( lightBoxL1.css('display') != 'none' && thisElement != undefined && thisElement != null ){
        gridsIndex = $( thisElement ).closest(`.grids`).attr(`data-index`),
        roomIndex = $( thisElement ).closest('.roomplan').attr('data-index')
        lightBoxStatus = true;
        informationJson = hotelDetailJson[ 'select' ][ gridsIndex ]['plant'][ roomIndex ]['discount'][ rid ];
    }

    // 淡入相簿光箱
    lightBoxL2.fadeIn( speedFade );
    // 填入 光箱 右側 房型資訊 ( 非 asiayo 帶入 type )
    // console.log( informationJson );
    if(type == 'asiayo'){
        if( lightBoxStatus == true ){
            $('.roomdata_lightbox .rbg .data .wbg .conts .gh').html( informationJson.info );
            $('.roomdata_lightbox .rbg .data .wbg .h4').html( informationJson.info_title );
        }else{
            $('.roomdata_lightbox .rbg .data .wbg .conts .gh').html( hotelDetailJson[ 'asiayo' != type ? type : 'asiayo' ][rid].gallery_info );
            $('.roomdata_lightbox .rbg .data .wbg .h4').html( hotelDetailJson[ 'asiayo' != type ? type : 'asiayo' ][rid].info_title );
        }
    }else{
        $('.roomdata_lightbox .rbg .data .wbg .conts .gh').html( hotelDetailJson[ 'asiayo' != type ? type : 'asiayo' ][rid].gallery_info );
        // $('.roomdata_lightbox .rbg .data .wbg .h4').html( hotelDetailJson[ 'asiayo' != type ? type : 'asiayo' ][rid].info_title );
    }
    
    if(type == 'asiayo'){
        $('.photos').html( templateGalleryTarget( rid ) );
    }
        
        
    // 左側 相簿 預設 透明, 待相簿更新完成後顯示 
    $('.aGallery').css('opacity', 0);
    setTimeout(function(){
        setSlickAG( rid );
    }, speedFade);
}

// 建立 通用 月曆 工具
appendEventDatepicker();
// 建立 住房 詳細頁 Event
setRoomInfoDetail();
// 補充 月曆 工具
setDateBoxDetail();
// 建立 加減 功能
setNumberBoxDetail();