{include file='./header.inc.html' title=$lang_list.ArrivalDate css=$css_files js=$js_files tpl=$tpl_files}
<!-- #Body -->
<div id="Body" class="lang-{$lang}">
<!--	<h2>ご宿泊日の選択{if $con.from_list == 'edit'}<span class="ec-txt-note">[ご予約変更]</span>{/if}</h2>-->
	
{include file='./error.inc.html' err_msg=$err_msg sys_msg=$sys_msg}
	
	<!-- .rsv-nav -->
	<div class="rsv-nav clrfix">
		{if $con.from_list != 'edit'}
		<div class="clrfix">
			<a href="{$back_url}" class="rsv-btn rsv-nav-prev" onclick="$.showLoading()">
                {$lang_list.BackToPlan}
			</a>
			<a class="sroll-to" href="#Calendar">{$lang_list.MoveTo}</a>
		</div>
		{/if}
		<!-- a href="#"></a -->
		<div class="rsv-nav-guide">
			<ol class="rsv-nav-list">
				<li class="current">{$lang_list.SelectDateAndRoom}</li>
				<li>{$lang_list.SelectNumberOfRoomAndDate}</li>
				<li>{$lang_list.EnterBookingInfo}</li>
				<li>{$lang_list.EnterCustomerInfo}</li>
				<li>{$lang_list.ConfirmBookingContent}</li>
			</ol>
		</div>
		<!-- 2018/1/9 kurato 表示項目削減 start -->
		{if $disp_flg.page_navi}
		<p class="rsv-nav-message">
			{if $con.from_list == 'edit'}
			<span class="ec-txt-note">{$lang_list.PleaseMakeReservationAgain} </span>
			{else}
			{$lang_list.PleaseConfirmTheDetails}
            <br/>
            {$lang_list.PleaseConfirmTheDetails2}
			{/if}
		</p>
		{/if}
		<!-- 2018/1/9 kurato 表示項目削減 start -->
	</div><!-- /.rsv-nav -->
	
	<input type="hidden" id="PlnId" value="{$con.pln_id}" />
	<input type="hidden" id="InitY" value="{$con.year}" />
	<input type="hidden" id="InitM" value="{$con.month}" />
	<input type="hidden" id="InitD" value="{$con.days}" />
	<input type="hidden" id="EditRsvNo" value="{$con.edit_rsvno}" />
	<input type="hidden" id="choice" value="{$choice}" />
	
{if $plan_data}
	<!-- #TopList -->
	<ul id="TopList">
		<!-- .top-list-item -->
		<li class="top-list-item clrfix">
			<div class="box">
			<!-- プラン名 -->
			<h3 class="clrfix">
				<div class="box-title tli-planname">{$plan_data.PLN_NAME}</div>
				<!-- 販売期間 -->
				<div class="tli-sales"><span class="mark">{$lang_list.Available}</span>{$plan_data.PLN_START} {$lang_list.To} {$plan_data.PLN_END}</div>
			</h3>
				<div class="box-inner clearfix">
			<!-- プラン画像 -->
{if $plan_data.THUMB_LIST}
			<!-- 2018/02/08 17213 Tam edit start -->
			<div class="tli-thumb">
				<div class="tli-thumb-attn"><a class="popup-img" rel="tli-{$plan_data.PLN_ID}" title="{$plan_data.PLN_NAME}" href="{$smarty.const.PIC_URL}thumb/{$plan_data.THUMB_LIST[0]}"><img src="{$design_url}img/img-loader.gif" data-src="{$smarty.const.PIC_URL}thumb/{$plan_data.THUMB_LIST[0]}" alt="プラン画像" data-img="tli-{$plan_data.PLN_ID}"></a></div>
				<ul class="tli-thumb-list clrfix">
	{foreach from=$plan_data.THUMB_LIST key="i" item="t"}
		{if 0 < $i}
					<li class="rsv-selectable"><a class="popup-img" rel="tli-{$plan_data.PLN_ID}" title="{$plan_data.PLN_NAME}" href="{$smarty.const.PIC_URL}thumb/{$t}"><img class="js-hover-change-img" src="{$design_url}img/img-loader.gif" data-src="{$smarty.const.PIC_URL}thumb/{$t}" alt="プラン画像" data-target="tli-{$plan_data.PLN_ID}"></a></li>
		{/if}
	{/foreach}
				</ul>
				<span class="ec-txt-special">{$lang_list.ClickOnTheSmallImage}</span>
			</div>
{/if}
			<!-- プラン紹介文 -->
			<div class="tli-intro">{if $plan_data.PLN_CAP_PC}{$plan_data.PLN_CAP_PC}{else}{$plan_data.PLN_CAP_PC_LIGHT|nl2br}{/if}</div>
			<!-- 食事 -->
			<div class="tli-meals">
				<ul>
					<li>
						<p class="tli-meals-text">
							<span class="mark dinner">
							{$lang_list.Dinner5}
						</span>{$plan_data.PLN_DIN_NAME}
						</p>

	{if $plan_data.DIN_THUMB_LIST}
						<div class="tli-meals-thumb-attn">
							<a class="popup-img aspect-protected" rel="tli-dinl-{$plan_data.PLN_ID}"
							   title="{$plan_data.PLN_DIN_NAME}" href="{$smarty.const.PIC_URL}meal/{$plan_data.DIN_THUMB_LIST[0]}"
							   style="display: inline-block; height: 215px; width: 215px; position: relative;">
								<img style="max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"
									 src="{$smarty.const.PIC_URL}meal/{$plan_data.DIN_THUMB_LIST[0]}"
									 data-src="{$smarty.const.PIC_URL}meal/{$plan_data.DIN_THUMB_LIST[0]}"
									 data-img="tli-dinl-{$plan_data.PLN_ID}"/>
							</a>
						</div>
						<ul class="tli-meals-thumb-list">
		{foreach from=$plan_data.DIN_THUMB_LIST item="t" name=dinnerImages}
							{if $smarty.foreach.dinnerImages.index != 0 }
							<li class="rsv-selectable">
								<a class="popup-img aspect-protected"
								   style="display: inline-block; height: 62px; width: 62px; position: relative;"
								   rel="tli-dinl-{$plan_data.PLN_ID}"
								   title="{$plan_data.PLN_DIN_NAME}" href="{$smarty.const.PIC_URL}meal/{$t}">
									<img class="js-hover-change-img" src="{$smarty.const.PIC_URL}meal/{$t}"
										 style="width: 62px; height: 46px; position: absolute; left: 0px; top: 8px;"
										 data-src="{$smarty.const.PIC_URL}meal/{$t}" alt="夕食画像"
										 data-target="tli-dinl-{$plan_data.PLN_ID}">
								</a>
							</li>
							{/if}
		{/foreach}
						</ul>
	{/if}
					</li>
					<li>
						<p class="tli-meals-text">
							<span class="mark breakfast">{$lang_list.Breakfast5}</span>{$plan_data.PLN_BRK_NAME}
						</p>


	{if $plan_data.BRK_THUMB_LIST}
						<div class="clrfix">
							<div class="tli-meals-thumb-attn">
								<a class="popup-img aspect-protected" rel="tli-din-{$plan_data.PLN_ID}"
								   title="{$plan_data.PLN_BRK_NAME}"
								   href="{$smarty.const.PIC_URL}meal/{$plan_data.BRK_THUMB_LIST[0]}"
								   style="display: inline-block; height: 215px; width: 215px; position: relative;">
									<img style="max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"
										 src="{$smarty.const.PIC_URL}meal/{$plan_data.BRK_THUMB_LIST[0]}"
										 data-src="{$smarty.const.PIC_URL}meal/{$plan_data.BRK_THUMB_LIST[0]}"
										 data-img="tli-din-{$plan_data.PLN_ID}"/>
								</a>
							</div>
						<ul class="tli-meals-thumb-list">
		{foreach from=$plan_data.BRK_THUMB_LIST item="t" name=breakfirts}
							{if $smarty.foreach.breakfirts.index != 0 }
							<li class="rsv-selectable">
								<a class="popup-img" rel="tli-brk-{$plan_data.PLN_ID}"
								   title="{$plan_data.PLN_BRK_NAME}"
								   style="display: inline-block; height: 62px; width: 62px; position: relative;"
								   href="{$smarty.const.PIC_URL}meal/{$t}">
									<img class="js-hover-change-img" style="width: 62px; height: 46px; position: absolute; left: 0px; top: 8px;"
										  src="{$smarty.const.PIC_URL}meal/{$t}"
										 data-src="{$smarty.const.PIC_URL}meal/{$t}" alt="朝食画像"
										 data-target="tli-din-{$plan_data.PLN_ID}">
								</a>
							</li>
							{/if}
		{/foreach}
						</ul>
						</div><!-- /.clrfix-->
	{/if}
					</li>
				</ul>
			</div>
			<!-- 2018/02/08 17213 Tam edit end -->
			<!-- 料金一覧 -->
			<!--<div class="tli-charges">
				<table>
					<thead>
						<tr>
							<th class="tli-charges-name">お部屋一覧</th>
							<th class="tli-charges-price">1名様/室</th>
							<th class="tli-charges-price">2名様/室</th>
							<th class="tli-charges-price">3名様/室</th>
							<th class="tli-charges-price">4名様/室</th>
							<th class="tli-charges-price">5名様/室</th>
							<th class="tli-charges-price">6名様/室</th>
						</tr>
					</thead>
					<tbody>
	{foreach from=$plan_data.ROOM_INFO item="r"}
						<tr>
							<th class="tli-charges-name">{$r.TYPE_NAME}</th>
							<td class="tli-charges-price">{if 0 < $r.PLN_CHG_PERSON1 && $r.PLN_MIN <= 1 && 1 <= $r.PLN_MAX}&yen;{$r.PLN_CHG_PERSON1|number_format}{$lang_list.To}{/if}</td>
							<td class="tli-charges-price">{if 0 < $r.PLN_CHG_PERSON2 && $r.PLN_MIN <= 2 && 2 <= $r.PLN_MAX}&yen;{$r.PLN_CHG_PERSON2|number_format}{$lang_list.To}{/if}</td>
							<td class="tli-charges-price">{if 0 < $r.PLN_CHG_PERSON3 && $r.PLN_MIN <= 3 && 3 <= $r.PLN_MAX}&yen;{$r.PLN_CHG_PERSON3|number_format}{$lang_list.To}{/if}</td>
							<td class="tli-charges-price">{if 0 < $r.PLN_CHG_PERSON4 && $r.PLN_MIN <= 4 && 4 <= $r.PLN_MAX}&yen;{$r.PLN_CHG_PERSON4|number_format}{$lang_list.To}{/if}</td>
							<td class="tli-charges-price">{if 0 < $r.PLN_CHG_PERSON5 && $r.PLN_MIN <= 5 && 5 <= $r.PLN_MAX}&yen;{$r.PLN_CHG_PERSON5|number_format}{$lang_list.To}{/if}</td>
							<td class="tli-charges-price">{if 0 < $r.PLN_CHG_PERSON6 && $r.PLN_MIN <= 6 && 6 <= $r.PLN_MAX}&yen;{$r.PLN_CHG_PERSON6|number_format}{$lang_list.To}{/if}</td>
						</tr>
	{/foreach}
					</tbody>
				</table>
				<span class="ec-txt-special">※料金は大人1名様ごとの目安です。時期により異なる場合がございます。</span>
			</div>-->
				</div><!-- /.box-inner-->
			</div><!-- /.box-->
		</li><!-- /.top-list-item -->
	</ul><!-- /#TopList -->

	{if $con.timesale}
		<!-- #TimesaleStayDate -->
		<div id="TimesaleStayDate">
			<h4>{$lang_list.PleaseCheckTheArrivalDate}</h4>
			<p>
				<span class="tsd-date">{$con.year}{$lang_list.Year5_1}{$con.month}{$lang_list.Month5_1}{$con.days}{$lang_list.Day5_1}</span>
				<span class="ec-txt-note guide">{$lang_list.TheArrivalDateIsUnmodifiable}</span>
				<input type="hidden" id="TsSelectedY" value="{$con.year}" />
				<input type="hidden" id="TsSelectedM" value="{$con.month}" />
				<input type="hidden" id="TsSelectedD" value="{$con.days}" />
			</p>
			<p class="ec-txt-center">
				{$lang_list.PleaseClickTheButtonBelow}<br />
				<a id="BtnNext" href="#" class="rsv-btn rsv-btn-large rsv-nav-next">{$lang_list.NumberOfNightsRooms}</a>
			</p>
		</div><!-- /#TimesaleStayDate -->
	{else}
		<!-- #Calendar -->
		<div class="box box_calendar mb20">
		<div id="Calendar" class="clrfix">
			<h4>{$lang_list.PleaseClickOnYourDesired}</h4>
			<img src="{$design_url}img/tag_start{if $lang != ''}_{$lang}{/if}.gif" alt="予約開始" class="tag_start" />
			
			<!-- #CalControl -->
			<div id="CalControl">
				<a href="#" id="BtnCalPrev" class="rsv-btn rsv-cal-prev">
					{$lang_list.PreviousMonth}</a>
				<span id="CalCtrlYM">{$input.y}{$lang_list.Year} {$input.m}{$lang_list.Month}</span>
				<a href="#" id="BtnCalNext" class="rsv-btn rsv-cal-next">{$lang_list.NextMonth}

				</a>
			</div><!-- #CalControl -->
			
			<p class="ec-txt-special ec-txt-center">{$lang_list.BasicChargePerAdultPerson}
			<!-- 2018/06/22 23902-3 Tam edit start -->
			{if $hotel.AVAILABLE_STS_FLG == 1}
			<span style="margin: 8px;">{$lang_list.RemainingRoomStatus}</span>
			{/if}
			<!-- 2018/06/22 23902-3 Tam edit end -->
			</p>
			
			<!-- #CalRoomList -->
			<div id="CalSide">
				<p>{$lang_list.SelectRoom}</p>
			<ul id="CalRoomList">
				<li class="CalRoomList_title">{$lang_list.RoomType}</li>
		{foreach name="lp" from=$plan_data.ROOM_INFO item="r"}
				<li><a href="#" class="rsv-selectable R{$r.TYPE_ID}{if ($select_type && $select_type == $r.TYPE_ID) || (!$select_type && $smarty.foreach.lp.index == 0)} ec-selected{/if}">{$r.TYPE_NAME}</a></li>
		{/foreach}
			</ul>
			</div>
				<!-- /#CalRoomList -->
			
			<!-- #CalBody -->
			<div id="CalBody">
				<div class="ec-loader" style="display:none;"></div>
				<div id="CalBodyIn"></div>
			</div><!-- /#CalBody -->
		</div><!-- /#Calendar -->
		</div>
	{/if}
{/if}
	
	<!-- .rsv-nav -->
	<div class="rsv-nav clrfix">
		{if $con.from_list != 'edit'}
		<a href="{$back_url}" class="rsv-btn rsv-nav-prev" onclick="$.showLoading()">
            {$lang_list.BackToPlan}
		</a>
		{/if}
	</div><!-- /.rsv-nav -->
</div><!-- /#Body -->

<!-- #RoomDlg -->
<div id="RoomDlg" style="display:none;">
	<!-- #RoomDlgFace -->
	<div id="RoomDlgFace">
		<a id="BtnRoomDlgClose" class="rsv-btn" href="#">{$lang_list.ReturnToTheCalendar}</a>
		
		<!-- #RoomDlgHead -->
		<h2 id="RoomDlgHead">{$lang_list.RoomAvailabilityOn} <span class="roomdlg-year"></span>{$lang_list.Year_07}<span class="roomdlg-month"></span>{$lang_list.Month_07}<span class="roomdlg-day"></span>{$lang_list.EmptyRoom5}</h2><!-- #RoomDlgHead -->
		<!-- #RoomDlgBody -->
		<ol id="RoomDlgBody">
			<li>
				<h3>
					{if $plan_data.DAY_TRIP == 1}
					{if $lang == ''}１．{else}1.{/if}{$lang_list.PleaseCheckTheDate}
					{else}
					{if $lang == ''}１．{else}1.{/if}{$lang_list.PleaseChooseDesiredNumberOfNight}
					{/if}
				</h3>
				<p>
		{if $plan_data.DAY_TRIP == 1}
					<span class="roomdlg-year"></span>{$lang_list.Year_07}<span class="roomdlg-month"></span>{$lang_list.Month_07}<span class="roomdlg-day"></span>{$lang_list.Day}{$lang_list.SingleDay}
					<input type="hidden" id="RoomDlgStay" value="1" />
		{else}
					{$lang_list.FromArrivalDate} {if $lang == 'en'}({/if}<span class="roomdlg-year"></span>{$lang_list.Year_07}<span class="roomdlg-month"></span>{$lang_list.Month_07}<span class="roomdlg-day"></span>{if $lang == 'en'}) {/if}{$lang_list.Day5} <select id="RoomDlgStay">
		{foreach from=$stay_list item="v"}
						<option value="{$v}" {if $v == $select_stay}selected{/if}>{$v}</option>
		{/foreach}
					</select>{$lang_list.Night5}
		{/if}
				</p>
			</li>
			<li>
				<h3>
					{if $lang == ''}２．{else}2.{/if}{$lang_list.PleaseChooseDesiredNumberOfRoom}
			</h3>
				<span class="ec-txt-special">{$lang_list.YouCanReserveMoreThanOne}</span>
                                <input type="hidden" id="DefaultRoomCount" value="{$select_room}" />
				<table class="roomdlg-rooms">
					<thead>
						<tr>
							<th class="roomdlg-rooms-name">{$lang_list.RoomType2}</th>
							<th class="roomdlg-rooms-heads">{$lang_list.NumberOfGuests5}</th>
							<th class="roomdlg-rooms-rest">{$lang_list.Vacancy}</th>
							<th class="roomdlg-rooms-count">{$lang_list.DesiredNumberOfRoom}</th>
						</tr>
					</thead>
					<tbody>
		{foreach name="lp" from=$plan_data.ROOM_INFO item="r"}
						<tr id="T{$r.TYPE_ID}" class="roomdlg-rooms-row">
							<td class="roomdlg-rooms-name">{$r.TYPE_NAME}</td>
							<td class="roomdlg-rooms-heads">{$r.PLN_MIN} {$lang_list.To} {$r.PLN_MAX}{$lang_list.Person5}</td>
							<td class="roomdlg-rooms-rest"><span class="roomdlg-rest"></span>{$lang_list.Room6}</td>
							<td class="roomdlg-rooms-count"><select class="roomdlg-count"></select>{$lang_list.Room6}</td>
						</tr>
		{/foreach}
					</tbody>
				</table>
			</li>
		</ol><!-- /#RoomDlgBody -->
		<!-- #RoomDlgCtrl -->
		<div id="RoomDlgCtrl">
			<span id="RoomDlgNextMsg" class="ec-txt-special" style="display:none;">{$lang_list.PleaseClickTheNext}</span>
			<a id="BtnRoomDlgNext" href="#" class="rsv-btn rsv-btn-large ec-disabled">{$lang_list.ToTheNext}</a>
		</div><!-- /#RoomDlgCtrl -->
                            <!-- 2017-08-17 chinen bug #6094 [start] ロード画面用 -->
                            <div class="ec-loader" style="display:none;"></div>
                            <!-- 2017-08-17 chinen bug #6094 [end] ロード画面用 -->
        </div><!-- /#RoomDlgFace -->
</div><!-- /#RoomDlg -->
{include file='./footer.inc.html'}