{include file='./header_sp.inc.html' title=$title css=$css_files js=$js_files tpl=$tpl_files}
      <div class="step-nav">
            <ol class="step-list">
                {if $plan_data.OTHERS_ONLY == 1}
                    <!--備品のみ販売(日帰り予約)のナビゲータ-->
                    <li></li>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                {else}
                    <!--通常販売のナビゲータ-->
                    <li></li>
                    <li></li>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                {/if}
            </ol>
            <p class="step-current">{$lang_list.EnterBookingInfo}</p>
			<!-- 2018/1/18 kurato 表示項目削減 start-->
            {if $disp_flg.page_navi}
            <p>{$lang_list.PleaseEnterTheNumber}</p>
            {/if}
			<!-- 2018/1/18 kurato 表示項目削減 end-->
      </div>
      <div data-role="header">
            <h2 class="content-head">{$plan_data.PLN_NAME}</h2>
      </div>
      <div data-role="content">
          <!-- 2018/02/21 15718 tam edit start -->
          <input type="hidden" id="checkInDate" value="{$rsv->IN_STAMP|date_format:'Y/m/d'}">
          <input type="hidden" id="numPersonBokking" value="{$all_person}">
          {if $open_opt_dialog_others_id}
          <input type="hidden" id="isNeedOpenOptDialog" value="{$open_opt_dialog_others_id}" />
          {/if}
          {if $open_opt_dialog_course_id}
            <input type="hidden" id="openOptDialogCourseId" value="{$open_opt_dialog_course_id}" />
          {/if}
          <!-- 2018/02/21 15718 tam edit end -->
          <div class="text-plan-data">
              {if $plan_data.DAY_TRIP == 1}
              {'Y'|date:$rsv->IN_STAMP}{$lang_list.Year9}{'m'|date:$rsv->IN_STAMP}{$lang_list.Month9}{'d'|date:$rsv->IN_STAMP}{$lang_list.Day}{$lang_list.SingleDay}
              <!-- 2018/02/07 15718 tam edit start -->
              <input type="hidden" id="nunNight" value="1">
              {else}
              <input type="hidden" id="nunNight" value="{$rsv->NUM_STAY}">
              <!-- 2018/02/07 15718 tam edit end -->
              {$lang_list.From} {'Y'|date:$rsv->IN_STAMP}{$lang_list.Year9}{'m'|date:$rsv->IN_STAMP}{$lang_list.Month9}{'d'|date:$rsv->IN_STAMP}{$lang_list.Day9} {$rsv->NUM_STAY}{$lang_list.Nights}　{$rsv->NUM_ROOM}{$lang_list.Rooms}
              {/if}
              <input type="hidden" name="htl_id" id="HtlId" value="{$plan_data.HTL_ID}">
              <input type="hidden" name="pln_id" id="PlnId" value="{$plan_data.PLN_ID}">
              <input type="hidden" id="SecKey" value="{$sec_key}"/>
              <input type="hidden" id="DispStamp" value="{$disp_stamp}" />
              <input type="hidden" id="Lang" value="{$lang}">
                <!-- 2018/12/21 541 Tam edit start -->
                <input type="hidden" id="other_only" value="{$other_only}">
                <!-- 2018/12/21 541 Tam edit end -->
          </div>
          <!-- InputBox-->
          <div id="InputBox">
              {if $opt_list}
              <ul data-role="listview" data-theme="c" data-divider-theme="a">
                  <li data-role="list-divider" class="list-heading">
                      {$lang_list.WishToUse}
                  </li>
                  <li>
                      <p class="rsvhds-txt-note">
                          {$lang_list.PleaseEntryANumberForTheOption}
                      </p>
                      <div class="l-rsv-options">
                          <ul class="rsv-options">
                              {foreach from=$opt_list key="oid" item="o"}
                              <li class="rsvopt-item">
                                  <div class="rsvopt-item-thumb">
                                      {if $o.THUMB}
                                      <img src="{$smarty.const.PIC_URL}option/{$o.THUMB}" alt="{$o.OPT_NAME}" />
                                      {/if}
                                  </div>
                                  <div class="rsvopt-item-body">
                                      <div class="rsvopt-item-group">
                                          <div class="rsvopt-check-group">
                                              <!-- 2018/08/02 Tam edit start -->
                                              <input data-opid="{$oid}" type="checkbox" class="rsvopt-check O{$oid} form-checkbox" id="InRsvOpt{$oid}" {if $rsv->option[$oid].OPT_NUM} checked{/if}/>
                                              <!-- 2018/08/02 Tam edit end -->
                                              <label for="InRsvOpt{$oid}" class="rsvopt-item-name">{$o.OPT_NAME}</label>
                                          </div>
                                          <div class="rsvopt-select-group">
                                              <div data-role="fieldcontain">
                                                  <fieldset data-role="controlgroup" data-type="horizontal" class="m-option-select">
                                                      <legend>{$lang_list.Rate}： {$o.OPT_CHARGE|number_format}{$lang_list.YenX}</legend>
                                                      {if $o.OPT_SBJ==1}
                                                        {$lang_list.PerAdultPersonPerNight}
                                                      {elseif $o.OPT_SBJ==2}
                                                      <!-- 2018/03/02 17213 Tam edit start -->
                                                      {*<select class="ec-form-item-select rsvopt-num"  data-mini="true" id="opt-num{$oid}">
                                                          <option value="">--</option>
                                                          <option value="1" {if $rsv->option[$oid].OPT_NUM == 1}selected{/if}>1</option>
                                                          <option value="2" {if $rsv->option[$oid].OPT_NUM == 2}selected{/if}>2</option>
                                                          <option value="3" {if $rsv->option[$oid].OPT_NUM == 3}selected{/if}>3</option>
                                                      </select>*}
                                                      <input class="rsvopt-num" value="{$rsv->option[$oid].OPT_NUM}" data-mini="true" id="opt-num{$oid}" style="width: 3em">
                                                      <!-- 2018/03/02 17213 Tam edit end -->
                                                      <span class="unit-text">{$lang_list.Ko9}</span>
                                                      {else}
                                                      {$lang_list.PerRoomPerNight}
                                                      <!--<input type="text" class="rsvopt-num" placeholder="0" value="{$rsv->option[$oid].OPT_NUM}" />-->
                                                      {/if}

                                                  </fieldset>
                                              </div>
                                          </div>
                                      </div>
                                      <!-- オプション個数チェック -->
                                      <span id="ifIsZero" class="rsvopt-error" style="display: none;">※{$lang_list.AboveOnePeople9}</span>
                                      <!-- /オプション個数チェック -->
                                      {if ! $lang}<p class="rsvopt-item-cap">{$o.OPT_CAP|nl2br}</p>{/if}
                                  </div>
                              </li>
                              {/foreach}
                          </ul>
                      </div>
                  </li>
              </ul>
              {/if}
              <!-- end option list-->
          </div>
          <!-- /InputBox-->
          <input type="hidden" id="ActiveDialog" value="">
          <!-- 2018/2/2 Thai Hoang design start -->
          {if $others_include}
          <!-- 2018/08/22 Nhu edit start -->
          <div id="selectOptionDataTop">
                <ul data-role="listview">
                    <li data-role="list-divider" class="list-heading">{$lang_list.OptionIncluded}</li>
                    <!-- 2018/09/19 Nhu edit start -->
                    <li>
                        <table style="display: none" class="TblLimitTop">
                            <tr class="LimitTop">
                                <td><img src="{$design_url}img/noti-icon.png"/></td>
                                <td>
                                    <p id="LimitTimeOptTop"> {$lang_list.LimitTimeLeftText}<span></span>{$lang_list.LimitTimeRightText}</p>
                                </td>
                            </tr>
                        </table>
                        <li id="select-options-incl-summaries" total="0" style="margin-bottom:0">
                        </li>
                    </li>
                </ul>
          </div>
            <div class="DataOptionInclude">
                <!-- 2019/01/30 610 Nhu edit start -->
                {*<!-- <div id="showOptionInclude" class="show_all_rooms">{$lang_list.ReserveIncOption}</div> -->*}
                <div id="showOptionInclude" class="show_all_rooms" style="display: none;">{$lang_list.ReserveIncOption}</div>
                <!-- 2019/01/30 610 Nhu edit end -->
                <div id="optionInclude" class="select-options__add-btns">
                    {foreach from=$others_include item=other}
                    <div class="select_option_btn">
                    <a data-otherid="{$other.OTHERS_ID}" data-name="{$other.NAME}" data-seatflg="{$other.SEAT_RESERVE_FLG}" data-include="INC"
                        class="slider-img optionMaster select-options__add-btns__btn">
                        <img src="{$other.IMG}" alt="{$other.NAME}" style="margin-left: 2px">
                    </a>
                    <!-- 2018/09/19 Nhu edit end -->
                    <!-- 2018/06/18 15713 Tam edit end -->
                        <figcaption>
                        {$other.NAME}
                        </figcaption>
                    </div>
                    {/foreach}
                    <!-- 2018/04/16 15713 Tam edit end -->
                </div>
            </div>
            {/if}
            {if $m_others}
            <div>
                <ul data-role="listview">
                    <li data-role="list-divider" class="list-heading">{$lang_list.AddAnotherOption}</li>
                    <li>
                        <!-- 2019/02/25 651 Nhu edit start -->
                        {if $lang == 'en' and $hotel.OTHERS_DESCRIPTION_EN != ''}
                        <div class="HtlOthersDesc">
                            {$hotel.OTHERS_DESCRIPTION_EN}
                        </div>
                        {elseif $lang == 'ch' and $hotel.OTHERS_DESCRIPTION_CH != ''}
                        <div class="HtlOthersDesc">
                            {$hotel.OTHERS_DESCRIPTION_CH}
                        </div>
                        {elseif $lang == 'chh' and $hotel.OTHERS_DESCRIPTION_CHH != ''}
                        <div class="HtlOthersDesc">
                            {$hotel.OTHERS_DESCRIPTION_CHH}
                        </div>
                        {elseif $lang == 'ko' and $hotel.OTHERS_DESCRIPTION_KO != ''}
                        <div class="HtlOthersDesc">
                            {$hotel.OTHERS_DESCRIPTION_KO}
                        </div>
                        {elseif $lang == 'ja' || $lang == '' and $hotel.OTHERS_DESCRIPTION != ''}
                        <div class="HtlOthersDesc">
                            {$hotel.OTHERS_DESCRIPTION}
                        </div>
                        {/if}
                        <!-- 2019/02/25 651 Nhu edit end -->
                        <!-- 2018/04/16 15713 Tam edit start -->
                        {*<div class="select-options__add-btns">
                            {foreach from=$m_others item=other}
                            <a data-otherid="{$other.OTHERS_ID}" data-name="{$other.NAME}"
                                class="optionMaster select-options__add-btns__btn">
                                ＋{$other.NAME}
                            </a>
                            {/foreach}

                        </div>*}
                        <div class="select-options__add-btns">
                            {foreach from=$m_others item=other}
                            <div class="select_option_btn">
                            <!-- 2018/06/18 15713 Tam edit start -->
                            {*<a data-otherid="{$other.OTHERS_ID}" data-name="{$other.NAME}"
                                class="slider-img optionMaster select-options__add-btns__btn">
                                <img src="{$other.IMG}" alt="{$other.NAME}">*}
                            </a>
                            <a data-otherid="{$other.OTHERS_ID}" data-name="{$other.NAME}" data-seatflg="{$other.SEAT_RESERVE_FLG}" data-include="NON_INC"
                                class="slider-img optionMaster select-options__add-btns__btn">
                                <img src="{$other.IMG}" alt="{$other.NAME}">
                            </a>
                            <!-- 2018/06/18 15713 Tam edit end -->
                                <figcaption>
                                {$other.NAME}
                                </figcaption>
                            </div>
                            {/foreach}
                            <!-- 2018/04/16 15713 Tam edit end -->
                        </div>
                        <div id="selectOptionDataBottom">
                            <ul data-role="listview">
                                <table style="display: none" class="TblLimitBottom">
                                    <tr class="LimitBottom">
                                        <td><img src="{$design_url}img/noti-icon.png"/></td>
                                        <td>
                                            <p id="LimitTimeOptBottom"> {$lang_list.LimitTimeLeftText}<span></span>{$lang_list.LimitTimeRightText}</p>
                                        </td>
                                    </tr>
                                </table>
                                <li id="select-options-summaries" total="0">
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            {elseif $others_include}
            <li id="select-options-summaries" total="0" style="display:none">
                </li>
            {/if}
          <!-- 2018/08/22 Nhu edit end -->
          <!-- 2018/2/2 Thai Hoang design end -->
          <!-- charge -->
          <!-- 2018/12/19 524 Nhu edit start -->
          <!-- <div> -->
          <div {if $other_only}style="display: none"{/if}>
          <!-- 2018/12/19 524 Nhu edit end -->
              <ul data-role="listview" data-theme="c" data-divider-theme="a">
                  <li data-role="list-divider" class="list-heading">{$lang_list.PleaseConfirmTheCharge}</li>
                  <li>
                      <table class="customer_charge">
                          <tbody>
                          <tr>
                              <th>{$lang_list.AccommodationTotal}</th>
                              <td id="RoomChg" class="charge">
                                  <span class="js-text-price">--</span>
                                  {$lang_list.Yen}
                              </td>
                          </tr>
                          <tr>
                              <th>{$lang_list.OptionsTotal}</th>
                              <td id="OptChg" class="charge">
                                  <span class="js-text-price">--</span>
                                  {$lang_list.Yen}
                              </td>
                          </tr>
                          <tr>
                              <th>{$lang_list.OtherTotal}</th>
                              <td id="EtcChg" class="charge">
                                  <span class="js-text-price">--</span>
                                  {$lang_list.Yen}
                              </td>
                          </tr>
                          <tr>
                              <th>{$lang_list.TotalSP}</th>
                              <td id="TotalChg" class="total">
                                  <span class="js-text-price">--</span>
                                  {$lang_list.Yen}
                              </td>
                          </tr>
                          </tbody>
                      </table>
                  </li>
              </ul>
          </div>
          <div class="l-btn-container">
              <a class="ToInputBtn m-btn m-btn-enter m-btn-s ui-disabled" href="javascript:void(0);"
                 data-role="button" data-inline="true" data-icon="arrow-r"
                 data-ajax="false" data-theme="e" data-iconpos="right">
                  {$lang_list.ToTheNext9}
              </a>
            <!-- 2018/07/27 Nhu edit start -->
                <!-- <a class="backbtn m-btn m-btn-prev m-btn-s" href="{$back_url}" data-role="button" data-inline="true" data-icon="arrow-l" data-ajax="false"> -->
                <a class="backbtn m-btn m-btn-prev m-btn-s" href="javascript:void(0)" data-role="button" data-inline="true" data-icon="arrow-l" data-ajax="false">
                    {if $plan_data.OTHERS_ONLY == 1}
                        {$lang_list.BkDateAndNumberOfPeople}
                    {else}
                        {$lang_list.BackToNumberOfDateAndRoom}
                    {/if}
                </a>
            <!-- 2018/07/27 Nhu edit start -->
          </div>

      </div>
      <!--/content-->
  </div>
  <!--/#home-->
    <!--/dialog-->
    <!-- 2018/2/2 Thai Hoang dialog start -->
    <div id="masteroptionBox" data-role="dialog">
          <input type="hidden" id="other_image_url" value="{$smarty.const.PIC_URL}others/" >
            <div data-role="header">
                <h1 id="masteroptionBox__title"></h1>
            </div>
            <div data-role="content">
                <select id="masteroptionBox__select_courses" class="persons rsvhds-cell-man require" data-mini="true">
                    <!-- 2018/08/22 Nhu edit start -->
                    <option value="" data-checkflg="">{$lang_list.PleaseSelectCourse}</option>
                    <!-- 2018/08/22 Nhu edit end -->
                </select>
                <div class="img-option">
                  <div class='slider'></div>
                </div>
                <div class="select-option-tbl-detail" id="courseCap" style="display: none;"></div>
                <div class="ec-form-item-col col-date">
                    <label class="ui-input-text">{$lang_list.UseDateTable}</label>
                    <span class="srch-target">
                         <input type="text" name="option_date" id="masteroptionBox_date" value=""
                                class="ec-form-item-calendar form-text hasDatepicker" data-role="datebox"
                                data-options='{literal}{{/literal}"mode":"calbox", "useNewStyle":true{literal}}{/literal}'>
                    </span>
                </div>
                <div class="select-group ui-screen-hidden" id="selParentPersons">
                    <select class="persons rsvhds-cell-man require" data-mini="true" id="selPersons">
                        <option value="0">--</option>
                        {foreach from=$array_numPerson item="var"}
                        <option value="{$var}">{$lang_list.Adult}{if $lang=='en'} {/if}{$var}{if $lang=='en'} {/if}{$lang_list.Person3}</option>
                        {/foreach}
                    </select>
                    <!-- 2018/06/06 Tam edit start -->
                    <select class="persons rsvhds-cell-man require" data-mini="true" id="selchild">
                        <option value="0">--</option>
                        {foreach from=$array_numChild item="var"}
                        <option value="{$var}">{$lang_list.OtherChild}{if $lang=='en'} {/if}{$var}{if $lang=='en'} {/if}{$lang_list.Person3}</option>
                        {/foreach}
                    </select>
                    <select class="persons rsvhds-cell-man require" data-mini="true" id="selchild2">
                        <option value="0">--</option>
                        {foreach from=$array_numChild2 item="var"}
                        <option value="{$var}">{$lang_list.Preschooler}{if $lang=='en'} {/if}{$var}{if $lang=='en'} {/if}{$lang_list.Person3}</option>
                        {/foreach}
                    </select>
                    <!-- 2018/06/06 Tam edit end -->
                </div>
                <div  id="rankCapImage" style="text-align: center">
                  <img style='max-width: 100%; margin: auto' src='"+imgRankUrl+"' />
                </div>
                <div class="select-option-tbl-detail" id="rankCap" style="display: none;"></div>
                <!-- 2018/08/03 Nhu edit start -->
                <div id="list_rank">
                    {if $hotel.AVAILABLE_STS_FLG == 1}
                    <p class="text-accent ui-li-desc" style="margin-top:0px;"></p>
                    <p class="text-note ui-li-desc" style="margin-top:0px;"><span>{$lang_list.EmptySituation}</span></p>
                    {/if}
                    {if $ranks}
                    {foreach from=$ranks item="rank"}
                        <!-- 2018/10/17 Nhu edit start -->
                        <div class="opt_rank_details" data-courseid="{$courseId}" data-otherid="{$otherID}" data-priceperson="{$rank.RANK_CHG_PERSON} " data-pricechild="{$rank.RANK_CHG_CHILD1}" data-pricechild2="{$rank.RANK_CHG_CHILD2}" data-pricegroup="{$rank.RANK_CHG_GROUP}" data-name="{if $lang }{$rank.NUM_NAME_EN}{else}{$rank.NUM_NAME}{/if}" data-type="{$rank.NUM_TYPE}" data-chgtype="{$rank.CHG_TYPE}" data-rankid="{$rank.OTHERS_RANK_ID}" data-othermin="{$rank.OTHERS_MIN}" data-othermax="{$rank.OTHERS_MAX}" data-timestartdisplay="{$rank.TIME_START_DISPLAY}">
                        <!-- 2018/10/17 Nhu edit end -->
                            <div class="masteroptionBox__select_div">
                                <div class="select-rank-detail" id="RankDetail">
                                    <ul>
                                        <div class="rank-details">
                                            <div class="rank_name">
                                                {$rank.NAME}
                                                <br>
                                                {if $rank.NUM_TYPE == 1 && $rank.CHG_TYPE != 2}
                                                <span>
                                                    ({$capacity}{$rank.OTHERS_MIN}{$lang_list.Person3}～{$rank.OTHERS_MAX}{$lang_list.Person3})
                                                </span>
                                                {/if}
                                            </div>
                                            <!-- 2018/09/21 Nhu edit start -->
                                            <div class="rank_price">
                                                {if $rank.CHG_TYPE == 0}
                                                <!-- <span><span class="chg chg{$lang}">{$lang_list.Adult}</span> <span class="chg_dt">{if $rank.RANK_CHG_PERSON == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_PERSON|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">{$lang_list.OtherChild}</span> <span class="chg_dt">{if $rank.RANK_CHG_CHILD1 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD1|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">{$lang_list.Preschooler}</span> <span class="chg_dt">{if $rank.RANK_CHG_CHILD2 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD2|number_format}{$lang_list.Yen}{/if}</span></span> -->
                                                <span><span class="chg chg{$lang}">{$lang_list.Adult}</span> <span class="chg_dt{$lang}">{if $rank.RANK_CHG_PERSON == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_PERSON|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">{$lang_list.OtherChild}</span> <span class="chg_dt{$lang}">{if $rank.RANK_CHG_CHILD1 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD1|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">{$lang_list.Preschooler}</span> <span class="chg_dt{$lang}">{if $rank.RANK_CHG_CHILD2 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD2|number_format}{$lang_list.Yen}{/if}</span></span>
                                                {elseif ($rank.CHG_TYPE == 2)}
                                                <!-- <span><span class="chg chg{$lang}">4{$lang_list.Person5}</span> <span class="chg_dt">{if $rank.RANK_CHG_PERSON == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_PERSON|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">3{$lang_list.Person5}</span> <span class="chg_dt">{if $rank.RANK_CHG_CHILD1 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD1|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">2{$lang_list.Person5}</span> <span class="chg_dt">{if $rank.RANK_CHG_CHILD2 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD2|number_format}{$lang_list.Yen}{/if}</span></span> -->
                                                <span><span class="chg chg{$lang}">4{$lang_list.Person5}</span> <span class="chg_dt{$lang}">{if $rank.RANK_CHG_PERSON == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_PERSON|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">3{$lang_list.Person5}</span> <span class="chg_dt{$lang}">{if $rank.RANK_CHG_CHILD1 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD1|number_format}{$lang_list.Yen}{/if}</span></span>
                                                <span><span class="chg chg{$lang}">2{$lang_list.Person5}</span> <span class="chg_dt{$lang}">{if $rank.RANK_CHG_CHILD2 == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_CHILD2|number_format}{$lang_list.Yen}{/if}</span></span>
                                                {else}
                                                <span><span class="chg chg{$lang}">{if $lang }{$rank.NUM_NAME_EN}{else}{$rank.NUM_NAME}{/if}</span> <span class="chg_dt">{if $rank.RANK_CHG_GROUP == 0}{$lang_list.NoCharge}{else}{$rank.RANK_CHG_GROUP|number_format}{$lang_list.Yen}{/if}
                                                </span></span>
                                                {/if}
                                            </div>
                                            <!-- 2018/09/21 Nhu edit end -->
                                            <div class="info_btn" data-oid="{$otherID}" data-rid="{$rank.OTHERS_RANK_ID}">
                                                <div class="info_icon" data-oid="{$otherID}" data-rid="{$rank.OTHERS_RANK_ID}"></div><div class="info_text">{$lang_list.Details}</div>
                                            </div>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                            <div>
                                {if $rank.timeAreas}
                                {foreach from=$rank.timeAreas item="time"}
                                <a class="InputSelectBtn m-btn-enter m-btn-select m-btn-s {if $time.numSeat < 1} ui-disabled{/if} numseat_color" href="javascript:void(0);"
                                data-role="button" data-mini="true" data-inline="true" data-icon="delete"
                                data-ajax="false"
                                data-end="{$time.TIME_END}" data-start="{$time.TIME_START}" data-timeid="{$time.OTHERS_TIME_AREA_ID}" data-num="{$time.numSeat}">
                                    <span class="btn-text" style="padding: 0px 22px;display: inline-block;">
                                    {if $rank.TIME_START_DISPLAY}{$time.TIME_START} {/if}{if $rank.AVAILABLE_STS_FLG == 1 && $time.numSeat >= $rank.AVAILABLE_SWITCH}
                                    {$lang_list.RestRooms}〇
                                    {elseif $time.numSeat <= 0}
                                    ×
                                    {else}
                                    {$lang_list.RestRooms} {$time.numSeat} {if $lang }{$rank.NUM_NAME_EN}{else}{$rank.NUM_NAME}{/if}
                                    {/if} {if $time.CAP != ""}{$time.CAP}{/if}
                                    </span>
                                </a>
                                {/foreach}
                                {/if}
                                </a>
                            </div>
                        </div>
                    {/foreach}
                {/if}
                </div>
                <!-- 2018/08/03 Nhu edit end -->
                <a class="InputCloseBtnBottom m-btn m-btn-close m-btn-s" href="javascript:void(0);"
                   data-role="button" data-mini="true" data-inline="true" data-icon="delete"
                   data-ajax="false">
                   {$lang_list.Close}
                </a>
            </div>
    </div>
    <!-- 2018/2/2 Thai Hoang dialog end -->
    <input type="hidden" id="default_adult_num" value="{$default_adult_num}">
    <input type="hidden" id="default_child_num" value="{$default_child_num}">
    <input type="hidden" id="default_child_num2" value="{$default_child_num2}">
    <input type="hidden" value="{$lang_list.Rate}" id="Lang_Rate">
    <input type="hidden" value="{$lang_list.Adult}" id="Lang_Adult">
    <input type="hidden" value="{$lang_list.OtherChild}" id="Lang_OtherChild">
    <input type="hidden" value="{$lang_list.Preschooler}" id="Lang_OtherChild2">
    <input type="hidden" value="{$lang_list.Person6}" id="Lang_Person3">
    <input type="hidden" value="{$lang_list.Yen}" id="Lang_Yen">
    <input type="hidden" id="info-content" value="{$lang_list.PleaseChooseOption}"/>

    <!-- 2018/08/22 Nhu edit start -->
    <div style="display: none;" id="table__summary_incl">
    <table class="select-options-summary">
        <tr>
            <th colspan="2" class="date__info_incl"></th>
        </tr>
        </table>
    </div>
    <table id="item__info_incl" style="display: none;">
        <tr>
            <td>
                <a class="select-opt-btn-ctrl select-options-summary__btn-change">{$lang_list.SelectButton}</a>
                <!-- 2019/01/30 610 Nhu edit start -->
                {*<!-- <a class="select-opt-btn-ctrl select-options-summary__btn-delete">{$lang_list.DeleteOption}</a> -->*}
                <a class="select-opt-btn-ctrl select-options-summary__btn-delete" style="display:none">{$lang_list.DeleteOption}</a>
                <!-- 2019/01/30 610 Nhu edit end -->
            </td>
            <td>
                <p><label class="positionLabel"></label> <label></label> <label></label></p>
                <p class="time__info">
                <img style="width: 16px;padding-left: 3px;padding-right: 8px;position: relative;top: 2px" src="./style/default/img/clock-option2.png">
                </p>
                <p class="persons__info">
                <span class="icon"><img src="./style/default/img/icon_person.png"></span>
                </p>
            </td>
        </tr>
    </table>
    <!-- 2018/08/22 Nhu edit end -->
    <div style="display: none;" id="table__summary">
      <table class="select-options-summary">
          <tr>
            <th colspan="2" class="date__info"></th>
          </tr>
        </table>
    </div>
    <table id="item__info" style="display: none;">
        <tr>
            <td>
                <a class="select-opt-btn-ctrl select-options-summary__btn-change">{$lang_list.Modify}</a>
                <a class="select-opt-btn-ctrl select-options-summary__btn-delete">{$lang_list.DeleteOption}</a>
            </td>
            <td>
                <p><label class="positionLabel"></label> <label></label> <label></label></p>
                <p class="time__info">
                <img style="width: 16px;padding-left: 3px;padding-right: 8px;position: relative;top: 2px" src="./style/default/img/clock-option2.png">
                </p>
                <p class="persons__info">
                <span class="icon"><img src="./style/default/img/icon_person.png"></span>
                </p>
                <p class="charge__info">
                <span class="icon"><img src="./style/default/img/icon_charge.png"></span>
                </p>
            </td>
        </tr>
    </table>
    <!-- 2018/07/27 Nhu edit start -->
    <div id="error_dialog" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <div data-role="content">
            <p id="err_content" style="text-align: center;">
                {$lang_list.DeleteSelectedOpt}
            </p>
            <a class="m-btn m-btn-modal m-btn-close m-btn-s" href="#" data-role="button" data-rel="back" id="btnDelOpt">OK</a>
        </div>
    </div>
    <!-- 2018/07/27 Nhu edit end -->
    <div id="num_over_dialog" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <div data-role="content">
            <p id="num_over_text" style="text-align: center;">
                {$lang_list.MaxOptionUsers}
            </p>
        </div>
    </div>
    <!-- 2018/08/03 Nhu edit start -->
    <div id="seat_reserve_box" data-role="dialog">
        <div data-role="content">
            <div class="ui-header ui-bar-a">
                <h1 id="title-desc" class="content-head ui-title" style="width: unset"></h1>
            </div>
            <!--<p></p>-->
            <div class="box_img">
                <img src=""/>
            </div>
            <div class="select-option-tbl-detail" id="seatCap">
            </div>
            <a data-ajax="false" id="btn_cancel_popups" data-role="button" class="m-btn m-btn-modal">{$lang_list.Close}</a>
        </div>
    </div>
    <!-- 2018/08/03 Nhu edit end -->
    <!-- 2018/08/22 Nhu edit start -->
    <div id="null_course_dialog" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <div data-role="content">
            <p id="null_course_text" style="text-align: center;">
                {$lang_list.NullCourse}
            </p>
            <a data-ajax="false" id="btn_cancel_nullcourse" class="m-btn m-btn-modal m-btn-close m-btn-s" href="#" data-role="button">OK</a>
        </div>
    </div>
    <!-- 2018/08/22 Nhu edit end -->
    <!-- 2018/09/18 Nhu edit start -->
    <div id="comb_course_dialog" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <div data-role="content">
            <p id="comb_course_text" style="text-align: center;">
            </p>
            <a data-ajax="false" id="btn_cancel_comb" class="m-btn m-btn-enter m-btn-s" href="#" data-role="button">OK</a>
            <a data-ajax="false" id="btn_redo" class="m-btn m-btn-modal m-btn-s" href="#" data-role="button">{$lang_list.ToRedo}</a>
        </div>
    </div>
    <!-- 2018/09/18 Nhu edit end -->
  </body>
</html>