{include file='./header_sp.inc.html' title=$lang_list.CalendarSearch css=$css_files js=$js_files tpl=$tpl_files}
<div data-role="content" style="padding-bottom: 60px;">
    <!-- 多言語 -->
    {if $hotel.LANG_SELECT_FLG}
    <select id="lang-selector" style="float: left; margin-right: 15px;">
        <option value="" data-imagesrc="./style/default/img/flag-blank.png">Languages</option>
        <option value="ja" data-imagesrc="./style/default/img/flag-jp.gif" {if $lang=='ja' }selected{/if}>{$lang_list.Japanese}</option>
        <option value="en" data-imagesrc="./style/default/img/flag-us.gif" {if $lang=='en' }selected{/if}>{$lang_list.English}</option>
        <option value="ch" data-imagesrc="./style/default/img/flag-tw.gif" {if $lang=='ch' }selected{/if}>{$lang_list.ChineseSimpled}</option>
        <option value="chh" data-imagesrc="./style/default/img/flag-cn.gif" {if $lang=='chh' }selected{/if}>{$lang_list.ChineseTraditional}</option>
        <option value="ko" data-imagesrc="./style/default/img/flag-kr.gif" {if $lang=='ko' }selected{/if}>{$lang_list.Korean}</option>
    </select>
    {/if}
    {if is_array($plan_list)}
    {if $plan_list|@count > 0}
        <a data-role="button" data-transition="fade" href="#next"
            data-icon="arrow-r" data-iconpos="right" class="m-btn m-btn-search m-btn-arrow">
            {$lang_list.SearchForPlan}
        </a>
    {/if}
    {/if}
    <input type="hidden" id="HtlId" name="htl_id" value="{$hotel.HTL_ID}">
    <input type="hidden" id="CoId" name="co_id" value="{$con.co_id}">
    <input type="hidden" id="RoomCnt" name="room_cnt" value="{if is_array($room_list)}{$room_list|@count}{else}0{/if}">
    <input type="hidden" id="RoomDispCnt" name="room_disp_cnt" value="5">
    <input type="hidden" id="Stay" value="{$con.select_stay}">
    <input type="hidden" id="page" value="calendar_search">

    <ul style="margin-top: 10px;">
        <p class="text-accent" style="text-align: center; font-size: 1em;">{$lang_list.Asterisk}{$lang_list.IfYouAreUsingATabBrowser}</p>
        <p class="ui-li-desc">
            {$lang_list.PleaseDoNotMakeReservation}<br />
            {$lang_list.GoingBackAndForth}
        </p>
    </ul>

    {if is_array($plan_list)}
    {if $plan_list|@count == 0} 
    <p class="no_result_lead">{$lang_list.NoSearchResultsSP}</p>
    <a data-role="button" data-transition="fade" href="#next"
    data-icon="arrow-r" data-iconpos="right" class="m-btn m-btn-search m-btn-arrow">
    {$lang_list.SearchForPlan}
    </a>
    <br>
    <a id="ReturnCalendarSearch" data-role="button" data-transition="fade"
    href="javascript:void(0);"
    data-icon="arrow-r" data-iconpos="right"
    class="m-btn m-btn-enter ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-right"
    data-corners="true" data-shadow="true" data-iconshadow="true"
    data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">{$lang_list.PlanReserveGlance}</span>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
    </span>
    </a>
    {else}
    <p class="search_result_lead">{$lang_list.PlanResultIs}
        <em>{$plan_list|@count}</em>
        {$lang_list.PlanResultNumbers}
    </p>
    <span style="color:red; font-weight:bold;">{$lang_list.CalendarSearchNote}</span>
    <ul data-role="listview" data-theme="c" data-divider-theme="a">
        <!-- 2018/09/26 Do edit start -->
        <li data-role="list-divider" class="headerCalendar" >{$lang_list.SearchFromCalendar}<span><input id="datetime" type="text" data-role="datebox" value="{$con.year}-{$con.month}-{$con.days}"/></span></li>
        <!-- 2018/09/26 Do edit end -->
        <!-- <li class="liCalendarHdTop" id="con_list">
                <div class="clr">
                    <input id="datetime" type="text" data-role="datebox"/>
                </div>
        </li> -->
        <li class="liCalendarHd" id='calendar-box'>
            {if !$plan_list}
                <p class="no-result-msg ">{$lang_list.NoSearchResults}</p>
            {else}
                <div>
                    <ul class="jscCalendarContentsWrap" style="position: relative;">
                        <li class="">
                            <div class="jscCalendarHd calendarHd sticky">
                                <table>
                                    <tr id="template" style="display: none">
                                        <th nowrap="nowrap" colspan="" elem="month">
                                            <div class="month" style="text-align: center">
												<!-- 2018/09/26 Do edit start -->
                                                <span></span>{if $lang == 'en'}{elseif $lang == 'ko'}월{else}月{/if}
												<!-- 2018/09/26 Do edit end -->
                                            </div>
                                        </th>
                                    </tr>
                                    <tr id="month"></tr>
                                    <!-- 2018/09/26 Do edit start -->
                                    <tr id="days" {if $lang == 'en'}style="font-size: 1.1rem;"{else}style="font-size: 1.3rem;"{/if}>
                                        {section name=foo start=0 loop=13 step=1}
                                        <td day="1"></td>
                                        {/section}
                                    </tr>
                                    <!-- 2018/09/26 Do edit end -->
                                </table>
                            </div>
                            <dl class="calendarContents">
                                {foreach from=$plan_list key="pid" item="plist"}
                                    <dt data-role="list-divider" role="heading" class="dt-head plan_header" data-id="{$plist.PLN_ID}">
                                        <p class="plan_name">{$plist.PLN_NAME}</p>
                                        <p class="info_icon" data-id="{$plist.PLN_ID}"></p>
                                    </dt>
                                    {if $plist.CONDITIONS}
                                        <dt data-role="list-divider" role="heading" class="tli-conditions plan-conditions" id="Condition_list">
                                            {foreach from=$plist.CONDITIONS item="condition"}
                                            <p class="{if $condition.id|in_array:$con.condition_list} match_condition {else} condition {/if}">{$condition.name}</p>
                                            {/foreach}
                                        </dt>
                                    {/if}
                                {foreach from=$plist.ROOM_INFO item="tlist"}
                                    <dt>{$tlist.TYPE_NAME} ({$tlist.PLN_MIN}{$lang_list.Person3} {$lang_list.To} {$tlist.PLN_MAX}{$lang_list.Person3})</dt>
                                        <dd>
                                            <table>
                                                <tr class="PL{$plist.PLN_ID} TY{$tlist.TYPE_ID}">
                                                        {section name=foo start=0 loop=13 step=1}
                                                        <td class="cell">
                                                            <div class="ec-loader"><span class="image"></span></div>
                                                            <div class="cell-content"></div>
                                                        </td>
                                                        {/section}
                                                </tr>
                                            </table>
                                        </dd>
                                    {/foreach}
                                {/foreach}
                            </dl>
                        </li>
                    </ul>
                </div>
            {/if}
        </li>
    </ul>
    {/if}
    {/if}
</div>
<!-- <div class="paging-sp">
    <div class="btn-next-prev">
        <a href="#"   class="sp-paging paging-prev rsv-btn rsv-sp-prev ec-disabled">
            {$lang_list.PrevSP}
        </a>
        <a href="#"  class="sp-paging paging-next rsv-btn rsv-sp-next">
            {$lang_list.NextSP}
        </a>
    </div>
</div> -->
<!--/content-->
</div>
</div>
<!--/#home-->
<div id="next" data-role="page" style="overflow-y: visible;">
    <div data-role="header" style="height:43px;">
        <a data-role="button" data-transition="fade" href="#home" data-rel="back" class="m-btn m-btn-close m-btn-s">{$lang_list.Close}</a>
        <h1>{$lang_list.SearchForPlan}</h1>
    </div>
    {include file='./search_sp.inc.html'}
    <div data-role="content" class="modal-main">
        <div style="text-align:center;">
            <input id="PageMode" type="hidden" value="plan">
            <!-- 2018/09/26 Do edit start -->
            <input id="Lang" type="hidden" value="{$lang}">
            <!-- 2018/09/26 Do edit end -->
            <a href="javascript:void(0);" data-role="button" data-icon="arrow-r"
                data-iconpos="right" data-ajax="false" data-theme="e"
                class="ToSearchBtn m-btn m-btn-search m-btn-s">
                {$lang_list.SearchText}
            </a>
            <br>
            <a id="ClearTextSp" class="rsv-link" href="#">{$lang_list.ClearSearch}</a>
            <br>
            <br>
            <a data-transition="fade" href="#home" class="m-btn m-btn-close m-btn-s"
                data-rel="back">
                {$lang_list.Close}
            </a>
        </div>
    </div>
</div>
<div id="plan_info_sp" data-role="dialog">
</div>
<div id="AVAILABLE" data-sts="{$hotel.AVAILABLE_STS_FLG}" data-switch="{$hotel.AVAILABLE_SWITCH}" style="display:none"></div>
</body>
<!-- 2018/01/15 17213 Tam edit start -->
<script type="text/javascript" src="{$design_url}js/change_lang.js"></script>
<style>
{
    literal
}

.dd-selected {
    height: 30px;
    padding: 0;
    border-radius: 3px;
    background: #fff;
    font-size: 108.33333%;
    cursor: pointer;
    font-weight: normal;
}

.dd-selected-text {
    line-height: 30px!important;
}

.dd-option {
    padding: 5px;
    border-bottom: none;
}

.dd-selected-image {
    margin-top: 9px;
    margin-left: 9px;
}

.dd-option-image {
    margin-top: 4px;
}

#lang-selector li {
    float: none;
    margin-right: 0px;
}
/* 2018/10/24 Nhu edit start */
#lang-selector {
    float: none;
    margin: 0px 0 20px;
}
/* 2018/10/24 Nhu edit end */

.dd-pointer-down {
    border: solid 2px transparent;
    border-top: solid 3px #ccc;
}

.dd-pointer-up {
    border: solid 2px transparent !important;
    border-bottom: solid 3px #ccc !important;
    margin-top: -4px;
}

.ui-body-c .ui-link {
    color: #000;
    font-weight: 400;
}

.ui-body-c .ui-link:hover {
    color: #000;
}

{
    /literal
}
</style>
<!-- 2018/01/15 17213 Tam edit end -->

</html>