{if $mode == 'rsv_history'}
    {if $rsv_history}
        {foreach from=$rsv_history key="sts" item="sts_rsv"}
            {if $sts==$status}
                {foreach from=$sts_rsv item="rsv"}
                <!-- 2018/09/14 Nhu edit start -->
                    {*<!-- <div data-role="collapsible" data-collapsed="true" class="clsColRideList status-{$sts}">
                        <h3 style="font-size:12px;" data-rsvno="{$rsv.rsv_no}" data-htlid="{$rsv.htl_id}" class="js-sp-rsv-title">
                            <p style="margin:0;">
                                {$lang_list.ReaservationDate}　：{"Y"|date:$rsv.rsv_stamp}{$lang_list.Year_07}{"m"|date:$rsv.rsv_stamp}{$lang_list.Month_07}{"d"|date:$rsv.rsv_stamp}{$lang_list.Day}
                            </p>
                            <p style="margin:0;">{$lang_list.NumberOfReserve}　　：{if $rsv.rsv_no_modifi}{$rsv.rsv_no_modifi}{else}{$rsv.rsv_no}{/if}</p>
                            <p style="margin:0;">{$lang_list.PlanName}　　　：{$rsv.plan_name}</p>
                            <p style="margin:0;">{$lang_list.Checkin}　：{"Y"|date:$rsv.in_stamp}{$lang_list.Year_07}{"m"|date:$rsv.in_stamp}{$lang_list.Month_07}{"d"|date:$rsv.in_stamp}{$lang_list.Day}{if $lang=="en"} {/if}</p>
                            <p style="margin:0;">{$lang_list.Checkout}：{"Y"|date:$rsv.out_stamp}{$lang_list.Year_07}{"m"|date:$rsv.out_stamp}{$lang_list.Month_07}{"d"|date:$rsv.out_stamp}{$lang_list.Day}</p>
                        </h3>
                        <div class="js-sp-rsv-detail">

                        </div>
                    </div> -->*}
                    <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-iconpos="right" data-collapsed="true" class="clsColRideList status-{$sts}">
                        <h3 data-rsvno="{$rsv.rsv_no}" data-htlid="{$rsv.htl_id}" class="js-sp-rsv-title">
                            <p><span>{"Y"|date:$rsv.in_stamp}{$lang_list.Year_07}{"m"|date:$rsv.in_stamp}{$lang_list.Month_07}{"d"|date:$rsv.in_stamp}{$lang_list.Day}{if $lang=="en"} {/if}</span> ～ {"m"|date:$rsv.out_stamp}{$lang_list.Month_07}{"d"|date:$rsv.out_stamp}{$lang_list.Day}</p>
                            <p class="lbl_planname">{$rsv.plan_name}</p>
                            <p>{$lang_list.NumberOfReserve}　：{if $rsv.rsv_no_modifi}{$rsv.rsv_no_modifi}{else}{$rsv.rsv_no}{/if}</p>
                            <p>
                                {$lang_list.ReaservationDate}：{"Y"|date:$rsv.rsv_stamp}{$lang_list.Year_07}{"m"|date:$rsv.rsv_stamp}{$lang_list.Month_07}{"d"|date:$rsv.rsv_stamp}{$lang_list.Day}
                            </p>
                        </h3>
                        <div class="js-sp-rsv-detail">

                        </div>
                    </div>
                <!-- 2018/09/14 Nhu edit end -->
                {/foreach}
            {/if}
        {/foreach}
    {else}
        <p style="text-align:center;">{$lang_list.Error}</p>
    {/if}
{elseif $mode == 'rsv_detail'}
<!-- 2017/02/04 17213 Tam edit start -->
<!-- 2018/09/14 Nhu edit start -->
<table class="PlanDetail">
   <tbody>
       <tr>
            <input type="hidden" id="confirm_text_edit_rsv" value="{$lang_list.ReallyModifyThis}" />
            <input type="hidden" id="not_modifi_text" value="{$lang_list.NotModify}">
            <!-- 2019/02/20 645 Nhu edit start -->
            <input type="hidden" id="cxl_reason_id" value="{$Question.CXL_REASON_ID}">
            <!-- 2019/02/20 645 Nhu edit end -->
            <!-- 2019/01/04 555 Nhu edit start -->
            <input type="hidden" id="rlt_mod" value="{$rlt_mod}" />
            <input type="hidden" id="CannotEditRsv" value="{$lang_list.CannotEditRsv}" />
            <!-- 2019/01/04 555 Nhu edit end -->
            <!-- 2019/01/14 569 Nhu edit start -->
            <input type="hidden" id="cxl_mess" value="{$confirm_mess}"/>
            <!-- 2019/01/14 569 Nhu edit end -->
           <input type="hidden" id="SalesStopToCannotEditRsv" value="{$lang_list.SalesStopToCannotEditRsv}" />
           <input type="hidden" id="PlanStopFlg" value="{$planStopFlg}" />
           <input type="hidden" id="RtypeStopFlg" value="{$rtypeStopFlg}" />
           <input type="hidden" id="PlanRtypeDayStopFlg" value="{$planRtypeDayStopFlg}" />
           <input type="hidden" id="other_only_cxl" value="{$other_only}" />
           <input type="hidden" id="cxl_flg" value="{$cxl_flg}" />
           <input type="hidden" id="confirmEditRsvCxlMessage01" value="{$lang_list.confirmEditRsvCxlMessage01}" />
           <th colspan="1">{$lang_list.BookingNumber}
                {if $rsv->RSV_STS != 9}
                <!-- 2018/12/19 526 Nhu edit start -->
                {*<!-- {if $rsv->ADJUST_TYPE != 2} -->*}
                {if $rsv->ADJUST_TYPE != 2 && !$other_only}
                <!-- 2018/12/19 526 Nhu edit end -->
                {if $rsv->RSV_STS==0 && "Ymd"|date < "Ymd"|date:$rsv->IN_STAMP}
                <!-- 2019/01/24 583 Nhu edit start -->
                {*<!-- <a class='editBtn chkin P{$rsv->PLN_ID} Y{"Y"|date:$rsv->IN_STAMP} M{"m"|date:$rsv->IN_STAMP} D{"d"|date:$rsv->IN_STAMP} {if $rsv->NOT_MODIFICATION_FLAG}show_not_modify{elseif $is_in_cancelfee_period != 0}show_err_pp{/if}'
                    href="javascript:void(0);" data-rsvno="{$rsv->RSV_NO}" data-htlid="{$rsv->HTL_ID}">
                    {$lang_list.Modify}
                </a> -->*}
                <a class='editBtn chkin P{$rsv->PLN_ID} Y{"Y"|date:$rsv->IN_STAMP} M{"m"|date:$rsv->IN_STAMP} D{"d"|date:$rsv->IN_STAMP} {if $rsv->NOT_MODIFICATION_FLAG}show_not_modify{elseif $planStopFlg == 0 || $rtypeStopFlg == 0}show_not_modify_planStop{elseif $is_in_cancelfee_period != 0}show_err_pp{/if}'
                    href="javascript:void(0);" data-rsvno="{$rsv->RSV_NO}" data-htlid="{$rsv->HTL_ID}" data-cxlfee="{if $cancel_chg > 0}{$lang_list.CannotChangeCheckinDate}{/if}">
                    {$lang_list.Modify}
                </a>
                <!-- 2019/01/24 583 Nhu edit end -->
                {/if}
                {/if}
                {/if}
           </th>
           <th colspan="1">{$lang_list.NumberOfGuests}
                {if $rsv->RSV_STS != 9}
                {if $rsv->ADJUST_TYPE != 2}
                {if $rsv->RSV_STS==0 && "Ymd"|date < "Ymd"|date:$rsv->IN_STAMP}
                <a class='editBtn nin P{$rsv->PLN_ID} Y{"Y"|date:$rsv->IN_STAMP} M{"m"|date:$rsv->IN_STAMP} D{"d"|date:$rsv->IN_STAMP} ST{$rsv->NUM_STAY} RN{$rsv->NUM_ROOM} {if $rsv->NOT_MODIFICATION_FLAG}show_not_modify{elseif $planStopFlg == 0 || $rtypeStopFlg == 0 || $planRtypeDayStopFlg == 1}show_not_modify_planStop{elseif $is_in_cancelfee_period != 0}show_err_pp{/if}'
                    href="javascript:void(0);" data-rsvno="{$rsv->RSV_NO}" data-htlid="{$rsv->HTL_ID}">
                    {$lang_list.Modify}
                </a>
                <input type="hidden" class="EditHtlId" value="{$rsv->HTL_ID}" />
                <input type="hidden" class="EditRsvNo" value="{$rsv->RSV_NO}" />
                <!-- 2018/12/19 526 Nhu edit start -->
                <input type="hidden" id="other_only" value="{$other_only}" />
                <!-- 2018/12/19 526 Nhu edit end -->
                {foreach from=$rsv->detail key="ymd" item="rooms"}
                {foreach from=$rooms key="n" item="r"}
                <input type="hidden" class="room_info" value="{$r.TYPE_ID}" />
                {/foreach}
                {/foreach}
                {/if}
                {/if}
                {/if}
           </th>
       </tr>
       <tr>
           <td style="font-weight: bold"  colspan="1">
                {if $rsv->IN_STAMP != $rsv->OUT_STAMP}
                    {$rsv->NUM_STAY} {$lang_list.Nights}
                {else}
                    {$lang_list.Day}{$lang_list.SingleDay3}
                {/if} &nbsp;
                {$rsv->NUM_ROOM} {$lang_list.Rooms}
           </td>
           <td style="font-weight: bold"  colspan="1">
                <ul class="myp-rsvdet-heads clrfix">
                    {if $heads.male != 0}
                    <li><span class="myp-rsvdet-heads-caps">{$lang_list.Adults}{if $lang == "en"} {else}　{/if}{$lang_list.Male}：</span>{$heads.male} {$lang_list.Person3}</li>
                    {/if}
                    {if $heads.female != 0}
                    <li><span class="myp-rsvdet-heads-caps">{$lang_list.Adults}{if $lang == "en"} {else}　{/if}{$lang_list.Female}：</span>{$heads.female} {$lang_list.Person3}</li>
                    {/if}
                    {if $heads.child1 != 0}
                    <li><span class="myp-rsvdet-heads-caps">{$lang_list.ElementaryStudent}：</span>{$heads.child1} {$lang_list.Person3}</li>
                    {/if}
                    {if $heads.child2 != 0}
                    <li><span class="myp-rsvdet-heads-caps">{$lang_list.PreschoolerWithMeal3}：</span>{$heads.child2} {$lang_list.Person3}</li>
                    {/if}
                    {if $heads.child3 != 0}
                    <li><span class="myp-rsvdet-heads-caps">{$lang_list.ToddlerWithMeal3}：</span>{$heads.child3} {$lang_list.Person3}</li>
                    {/if}
                    {if $heads.child4 != 0}
                    <li><span class="myp-rsvdet-heads-caps">{$lang_list.ToddlerWithBed3}：</span>{$heads.child4} {$lang_list.Person3}</li>
                    {/if}
                    {if $heads.child5 != 0}
                    <li><span class="myp-rsvdet-heads-caps">{$lang_list.ToddlerNoBed3}：</span>{$heads.child5} {$lang_list.Person3}</li>
                    {/if}
                    {if $heads.child6 != 0}
                        <li><span class="myp-rsvdet-heads-caps">{$lang_list.Infant}：</span>{$heads.child6} {$lang_list.Person3}</li>
                    {/if}
                </ul>
           </td>
       </tr>
       <!-- 2018/09/27 Nhu edit start -->
       {if $rsv->t_others_detail}
       <tr>
            <th colspan="2">{$lang_list.Option_Plan}</th>
       </tr>
       <tr>
            <td colspan="2">
                {foreach from=$rsv->t_others_detail key="k" item="t_others_detail"}
                <ul class="clr option_list" style="{if $k !== count($rsv->t_others_detail)-1}border-bottom: 1px solid #777;{/if}">
                <li style="font-weight: bold">
                {$t_others_detail.USEDATE|date_format:"m"}{$lang_list.Month_07}{$t_others_detail.USEDATE|date_format:"d"}{$lang_list.Day}
                <!-- 2018/10/17 Nhu edit start -->
                {if ($t_others_detail.TIME_START_DISPLAY)}{$t_others_detail.TIME_START[0]}{$t_others_detail.TIME_START[1]}:{$t_others_detail.TIME_START[2]}{$t_others_detail.TIME_START[3]}{/if}
                <!-- 2018/10/17 Nhu edit end -->
                {$t_others_detail.NAME}&nbsp;
                <!-- 2019/02/13 630 Nhu edit start -->
                <!-- 2019/02/19  kurato  start -->
                {if $t_others_detail.NUM_TYPE == 0}
                    {$t_others_detail.TOTAL_RANK_NUM}
                {else}
                    {$t_others_detail.RANK_NUM_GROUP}
                {/if}
                {$t_others_detail.NUM_NAME}
                <!-- {$t_others_detail.TOTAL_RANK_NUM} -->
                <!-- 2019/02/19  kurato  end -->
                <!-- 2019/02/13 630 Nhu edit end -->
                </li>
                <li style="font-size: 12px">
                {$t_others_detail.COURSE_NAME}&nbsp;&nbsp;{$t_others_detail.RANK_NAME}
                {if $rsv->RSV_STS==0 && "Ymd"|date < "Ymd"|date:$rsv->IN_STAMP}
                <!-- {if $t_others_detail.SEAT_RESERVE_FLG == 1}
                <a class="othersEditBtn {if $rsv->NOT_MODIFICATION_FLAG}show_not_modify{/if}"  data-ajax="false" {if $rsv->NOT_MODIFICATION_FLAG == 0}href="./other_assign.php?htl_id={$rsv->HTL_ID}&others_rsv_no={$t_others_detail.OTHERS_RSV_NO}&modiflg=1"{/if}>{$lang_list.Modify}</a>
                {/if} -->
                {/if}
                </li>
                <!-- 2019/02/13 630 Nhu edit start -->
                {if $t_others_detail.OTHER_ETC}
                <li>
                    <p class="disp_other_etc">{$t_others_detail.OTHER_ETC}</p>
                </li>
                {/if}
                <!-- 2019/02/13 630 Nhu edit end -->
                </ul>
                {/foreach}
            </td>
       </tr>
       {/if}
       <!-- 2018/09/27 Nhu edit end -->
       <!-- 2019/03/06 666 Nhu edit start -->
       {if $mypage_opt_flg}
        <tr>
            <td colspan="2">
                {if $rsv->RSV_STS != 9}
                {if $rsv->ADJUST_TYPE != 2}
                {if $rsv->RSV_STS==0 && "Ymd"|date < "Ymd"|date:$rsv->IN_STAMP}
                    <a class='editBtn nin P{$rsv->PLN_ID} Y{"Y"|date:$rsv->IN_STAMP} M{"m"|date:$rsv->IN_STAMP} D{"d"|date:$rsv->IN_STAMP} ST{$rsv->NUM_STAY} RN{$rsv->NUM_ROOM} {if $rsv->NOT_MODIFICATION_FLAG}show_not_modify{elseif $planStopFlg == 0 || $rtypeStopFlg == 0 || $planRtypeDayStopFlg == 1}show_not_modify_planStop{elseif $is_in_cancelfee_period != 0}show_err_pp{/if}'
                        href="javascript:void(0);" data-rsvno="{$rsv->RSV_NO}" data-htlid="{$rsv->HTL_ID}"
                        style="padding-right: 89px;">
                        {$lang_list.MypageOptionAddition}
                    </a>
                    <input type="hidden" class="EditHtlId" value="{$rsv->HTL_ID}" />
                    <input type="hidden" class="EditRsvNo" value="{$rsv->RSV_NO}" />
                    <input type="hidden" id="other_only" value="{$other_only}" />
                    {foreach from=$rsv->detail key="ymd" item="rooms"}
                    {foreach from=$rooms key="n" item="r"}
                    <input type="hidden" class="room_info" value="{$r.TYPE_ID}" />
                    {/foreach}
                    {/foreach}
                    {/if}
                    {/if}
                    {/if}
            </td>
        </tr>
       {/if}
       <!-- 2019/03/06 666 Nhu edit end -->

               
        <!-- 2020/07/20 21281 GoTo start -->
       {if $rsv->GOTO_DISCOUNT_FLG == 1}
       <tr>
            <th colspan="1">{$lang_list.TotalPayment}</th>
            <th colspan="1"></th>
       </tr>
       <tr>
            <td colspan="1">{$rsv->PLN_CHG_TOTAL|number_format} {$lang_list.Yen}</td>
            <td colspan="1"></td>
       </tr>
        <tr>
            <td colspan="1">- {$rsv->GOTO_DISCOUNT|number_format} {$lang_list.Yen}</td>
            <td colspan="1">{$lang_list.GotoCampaignDiscount}</td>
            
        </tr>

            <td><hr></td>
            <td><hr></td>
  
        <tr>
            <!-- 2020/07/20 21281 GoTo start -->
            <td colspan="1">{$rsv->GOTO_AFTER_AMOUNT|number_format} {$lang_list.Yen}</td>
            <td colspan="1">{if $rsv->ADJUST_TYPE == 2 || $rsv->ADJUST_TYPE == 4}{$lang_list.AdvanceCreditCard}{else}{if $rsv->ADJUST_TYPE == 3}{$lang_list.PayPithPayPal}{else}{$lang_list.PaymentAfterArrival}{/if}{/if}</td>
        </tr>

        {else}

        <tr>
            <th colspan="1">{$lang_list.Total}</th>
            <th colspan="1">{$lang_list.PaymentMethod}</th>
       </tr>

       <tr>
        <td colspan="1">{$rsv->PLN_CHG_TOTAL|number_format} {$lang_list.Yen}</td>
        <td colspan="1">{if $rsv->ADJUST_TYPE == 2 || $rsv->ADJUST_TYPE == 4}{$lang_list.AdvanceCreditCard}{else}{if $rsv->ADJUST_TYPE == 3}{$lang_list.PayPithPayPal}{else}{$lang_list.PaymentAfterArrival}{/if}{/if}</td>
   </tr>

        {/if}
        <!-- 2020/07/20 21281 GoTo end -->
   </tbody>
</table>
<!-- 2018/09/14 Nhu edit end -->
<!-- 2017/02/04 17213 Tam edit end -->

    {if $rsv->RSV_STS != 9}
    <!-- 2018/11/26 483 Nhu edit start -->
    {if $rsv->ADJUST_TYPE == 2}
    {if $rsv->RSV_STS==0 && "Ymd"|date < "Ymd"|date:$rsv->IN_STAMP}
        <div class="ec-control">
            <!-- 2019/01/04 555 Nhu edit start -->
            {if $rlt_cxl != '1'}
            <span style="color: #c63f28">{$lang_list.CannotCancelRsv}</span>
            {else}
            <a class="cancelBtn ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left m-btn m-btn-enter m-btn-s ui-btn-up-e"
                href="/responsive/PostCanelReservation.php?htl_id={$rsv->HTL_ID}&rsv_no={$rsv->RSV_NO}"
                data-role="button" data-mini="true" data-inline="true"
                data-theme="e" data-icon="arrow-r" data-ajax="false" data-corners="true"
                data-shadow="true" data-iconshadow="true" data-wrapperels="span">
                    <span class="ui-btn-inner ui-btn-corner-all">
                        <span class="ui-btn-text">{$lang_list.CancelThereservation}</span>
                        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
                    </span>
            </a>
            {/if}
            <!-- 2019/01/04 555 Nhu edit end -->
        </div>
    <!-- 2019/01/25 592 Nhu edit start -->
    {elseif $rsv->RSV_STS==0 && "Ymd"|date == "Ymd"|date:$rsv->IN_STAMP}
        <p class="ChkinDate_noti">{$lang_list.TodayIsCheckinDay}</p>
    <!-- 2019/01/25 592 Nhu edit end -->
    {/if}
	{/if}
    <!-- 2018/11/26 483 Nhu edit end -->
    {if $rsv->ADJUST_TYPE != 2}
    {if $rsv->RSV_STS==0 && "Ymd"|date < "Ymd"|date:$rsv->IN_STAMP}
    <p style="text-align:center;">
        <!-- 2019/01/04 555 Nhu edit start -->
        {if $rlt_cxl != '1'}
        <!-- 2019/01/29 602 Nhu edit start -->
        {*<!-- <span style="color: #c63f28">{$lang_list.CannotCancelRsv}</span> -->*}
        <span style="color: #c63f28; font-size: 12px;">{$lang_list.CannotCancelRsv}</span>
        <!-- 2019/01/29 602 Nhu edit end -->
        {else}
        <a class="cancelBtn ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left m-btn m-btn-enter m-btn-s ui-btn-up-e"
           href="javascript:void(0);" name="{$rsv->HTL_ID},{$rsv->RSV_NO}"
           data-htlid="{$rsv->HTL_ID}" data-rsvno="{$rsv->RSV_NO}"
           data-role="button" data-mini="true" data-inline="true"
           data-theme="e" data-icon="arrow-r" data-ajax="false" data-corners="true"
           data-shadow="true" data-iconshadow="true" data-wrapperels="span">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text">{$lang_list.CancelThereservation}</span>
                <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
            </span>
        </a>
        {/if}
        <!-- 2019/01/04 555 Nhu edit end -->
    </p>
    <!-- 2019/01/25 592 Nhu edit start -->
    {elseif $rsv->RSV_STS==0 && "Ymd"|date == "Ymd"|date:$rsv->IN_STAMP}
        <p class="ChkinDate_noti">{$lang_list.TodayIsCheckinDay}</p>
    <!-- 2019/01/25 592 Nhu edit end -->
    {/if}
    {/if}
    {/if}
{else}
{include file='./header_sp.inc.html' title=$title css=$css_files js=$js_files tpl=$tpl_files}
      <input type="hidden" id="HtlId" value="{$hotel.HTL_ID}" />
      <input type="hidden" id="Lang" value="{$lang}" />
      <input type="hidden" id="SecKey" value="{$sec_key}" />
      <input type="hidden" id="DispStamp" value="{$disp_stamp}" />
      <div data-role="content">
          {if $user}
          <div id="UserForm">
              <form id="AuthDlgFace" action="" method="post">
                  <input type="hidden" id="AuthDlgRequest" name="request" value="" />
                  <input type="hidden" name="once_key" value="{$once_key}" />
                  <!-- 2018/09/28 Do edit start -->
                  <div id="AfterLogin">
                      <!-- <p id="LoginUser">
                          {$lang_list.Welcome}
                          {$lang_list.DearMrMs}
                          {$user.USR_NAME}
                          {$lang_list.Mr}
                      </p> -->
                      <ul data-role="listview" data-inset="true">
                          <li data-role="list-divider">
                              <!-- 2019/06/21 36 Nhu edit start -->
                            {*<!-- {$lang_list.MypageMenu} -->*}
                            <p style="flex: 0 0 30%;">{$lang_list.MypageMenu}</p>
                              <!-- 2019/06/21 36 Nhu edit end -->
                            <p id="LoginUser">
                                {$lang_list.Welcome}
                                {$lang_list.DearMrMs}
                                {$user.USR_NAME}
                                {$lang_list.Mr}
                            </p>
                          </li>
                          <li>
                              <a id="getResListBtn" href="javascript:void(0);">{$lang_list.ReservationConfirmed}</a>
                          </li>
                          <li>
                              <a id="getCanceledBtn" href="javascript:void(0);">{$lang_list.ReservationCanceled}</a>
                          </li>
                          <li>
                              <a id="getCustomerBtn" href="javascript:void(0);">{$lang_list.ChangeCustomerInfo}</a>
                          </li>
                          <li>
                              <a id="LogoutBtn" href="javascript:void(0);" class="LogoutBtn">{$lang_list.LogoutSP}</a>
                          </li>
                      </ul>
                  <!-- 2018/09/28 Do edit end -->

                      <div class="l-btn-container">
                          <!-- 2019/07/19 43 Nhu edit start -->
                          {*<!-- <a class="backbtn m-btn m-btn-prev m-btn-s"
                             href="./plan_search.php?htl_id={$hotel.HTL_ID}&lang={$lang}"
                             data-role="button" data-icon="arrow-r" data-ajax="false">
                              {$lang_list.GoToPlanSearchPage}
                          </a> -->*}
                          <a class="backbtn m-btn m-btn-prev m-btn-s"
                              href="javascript:void(0);" data-role="button"
                              data-icon="arrow-r" data-ajax="false">
                              {$lang_list.GoToPlanSearchPage}
                          </a>
                          <!-- 2019/07/19 43 Nhu edit end -->
                      </div>
                  </div>
              </form>
          </div>
          {else}
          <div id="UserForm">
              <div id="Login">
                  <p class="m-lead-notes text-accent">
                         {$lang_list.PleaseProceedToLogin}
                  </p>
                  <div class="l-btn-container">
                      <a class="LoginBtn m-btn m-btn-submit"
                         href="javascript:void(0);" data-role="button"
                         data-inline="true" data-icon="gear" data-theme="e"
                         data-ajax="false">
                         {$lang_list.Login1}
                      </a>
                  </div>
                  <!-- 2018/01/18 17213 Tam edit start -->
                  <!-- 2018/02/09 17213 chinen edit start -->
                  <div class="l-btn-container" style="margin-top: 60px">
                  <!-- 2018/02/09 17213 chinen edit end -->
                      <a class="backbtn m-btn m-btn-prev"
                         href="./plan_search.php?htl_id={$hotel.HTL_ID}&lang={$lang}"
                         data-role="button" data-icon="arrow-r" data-ajax="false" onclick="$.showLoading()">
                          {$lang_list.GoToPlanSearchPage}
                      </a>
                  </div>
                  <!-- 2018/01/18 17213 Tam edit end -->

              </div>
          </div>
          <!--/#UserForm-->
          {/if}
      </div>
      <!--/content-->
    </div>
    {if !$user}
    <!-- LoginBox-->
    <div id="LoginBox" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.Login}</h1>
        </div>
        <div data-role="content">
            <form id="AuthDlgFace">
                <input type="hidden" id="AuthDlgRequest" name="request" value="" />
                <input type="hidden" name="once_key" value="{$once_key}" />
                <span class="authdlg-msg error EA01" style="display:none;">{$lang_list.TheLoginInformation}</span>
                <span class="authdlg-msg error ER01" style="display:none;">{$lang_list.PleaseEnterA}</span>
                <span class="authdlg-msg error ER02" style="display:none;">{$lang_list.ThisEmailAddress}</span>
                <span class="authdlg-msg error ER03" style="display:none;">{$lang_list.MailDeliveryError}</span>
                <span class="authdlg-msg success" style="display:none;">{$lang_list.MailHasBeen}</span>
                <p style="text-align:center;">
                    {$lang_list.LoginNotePopup}
                </p>
                <div data-role="fieldcontain">
                    <label for="LoginMail">{$lang_list.EmailAddress}</label>
                    <input type="email" name="auth_mail" id="LoginMail" value="" data-mini="true">
                </div>
                <div data-role="fieldcontain">
                    <label for="LoginPwd">{$lang_list.Password}</label>
                    <input type="password" name="auth_pwd" id="LoginPwd" value="" data-mini="true">
                    <div class="l-btn-container">
                        <a class="loginbtn m-btn m-btn-submit" href="javascript:void(0);"
                           data-role="button" data-inline="true" data-icon="gear" data-theme="e">{$lang_list.Login1}</a>
                    </div>
                </div>
                <div data-role="collapsible">
                    <h3>{$lang_list.ForgotPassword}</h3>
                    <p style="text-align:center;">
                       {$lang_list.LoginForgotPasswordNote}
                    </p>
                    <div data-role="fieldcontain">
                        <label for="RemindMail">{$lang_list.EmailAddress}</label>
                        <input type="email" name="login_mail" id="RemindMail" value="" data-mini="true">
                        <div class="l-btn-container">
                            <a class="remindbtn m-btn m-btn-submit" href="javascript:void(0);"
                               data-role="button" data-inline="true" data-icon="gear" data-ajax="false" data-theme="e">{$lang_list.Send}</a>
                        </div>
                    </div>
                </div>
                <div class="l-btn-container">
                    <a class="LoginCloseBtn m-btn m-btn-close m-btn-s" href="javascript:void(0);"
                       data-role="button" data-mini="true" data-inline="true" data-icon="delete">
                        {$lang_list.Close}
                    </a>
                </div>
            </form>

        </div>
    </div>
    {/if}
    <!--/#LoginBox -->
    {if $user}
    <!-- ログイン後予約履歴一覧 -->
    <div id="ReservedBox" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.ReservationConfirmed}</h1>
        </div>
        <!-- 2021/03/13 GiangLT edit start -->
        <div data-role="content" style="overflow: scroll; max-height: calc( 100vh - 130px );">
            <!-- 2021/03/13 GiangLT edit end -->

            <ul style="margin-bottom: 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>
            <p style="border-top: 1px solid #ccc; margin-bottom: 10px"></p>

            <p class="info_txt" style="text-align:center;display:none;">{$lang_list.PressReservationYouWantToSee}</p>
            <div id="DataLoading" style="text-align:center;">
                <img src="./style/default/img/loader.gif">　<span>{$lang_list.AcquiringData}</span>
            </div>
            <div data-role="collapsible-set" id="colTTRideList" style="display:none;"></div>
        </div>
    </div>
    <div id="ReservedCancelBox" data-role="dialog" >
        <div data-role="header">
            <h1>{$lang_list.ReservationCanceled}</h1>
        </div>
        <div data-role="content">
            <p class="info_txt" style="text-align:center;display:none;">{$lang_list.PressReservationYouWantToSee}</p>
            <div id="DataLoadingCancel" style="text-align:center;">
                <img src="./style/default/img/loader.gif">　<span>{$lang_list.AcquiringData}</span>
            </div>
            <div data-role="collapsible-set" id="colTTRideListCancel" style="display:none;"></div>
        </div>
    </div>
    <!-- 2019/01/14 569 Nhu edit start -->
    <div id="CancelCompleted" data-role="dialog" >
        <div data-role="header">
            <h1>{$lang_list.CancelComplete}</h1>
        </div>
        <div data-role="content">
            <!-- 2019/01/17 576 Tam edit start -->
            <p class="cxl_confirm"></p>
            <div id="cancel_cap" class="cxl_message">
            </div>
            <!-- 2019/01/17 576 Tam edit end -->
        </div>
    </div>
    <!-- 2019/01/14 569 Nhu edit end -->
    <!-- ログイン後登録顧客情報 -->
    <div id="CustomerBox" data-role="dialog">
        <div data-role="header">
            <h1 style="margin:0.6em 0 0.8em;">{$lang_list.ChangeCustomerInfo}</h1>
        </div>
        <div data-role="content">
            <p class="info_txt" style="text-align:center;">
                {$lang_list.CustomerInfoTitle}
            </p>
            <!-- 2019/07/18 43 Nhu edit start -->
            <div><p class="ec-txt-center" style="display: none;"></p></div>
            <!-- 2019/07/18 43 Nhu edit end -->
            <p style="text-align:center;"><span style="color:#FF0000;">※</span>
                {$lang_list.MarkedAdRequireSP}
            </p>
            <form id="CstmForm">
                <input type="hidden" name="request" value="user_edit" />
                <input type="hidden" name="usr_id" value="{$user.USR_ID}" />
                <input type="hidden" name="once_key" value="{$once_key}" />
                <div data-role="fieldcontain">
                    <label for="UsrMail">{$lang_list.EmailAddress}<span style="color:#FF0000;">※</span></label>
                    <input type="email" name="usr_mail" id="UsrMail"
                           class="require" value="{$user.USR_MAIL}" data-mini="true">
                </div>
                <!-- 2018/10/15 Nhu edit start -->
                {*<!-- <div data-role="fieldcontain">
                    <label for="UsrPwd">{$lang_list.Password}<span style="color:#FF0000;">※</span></label>
                    <input type="password" name="usr_pwd" id="UsrPwd" class="require"
                           value="{$user.USR_PWD}" data-mini="true">
                </div> -->*}
                <div data-role="fieldcontain">
                    <label for="CurPwd">{$lang_list.CurPwd}</label>
                    <input type="password" name="cur_pwd" id="CurPwd" value="" data-mini="true">
                    <label for="UsrPwd">{$lang_list.NewPwd}</label>
                    <input type="password" name="usr_pwd" id="UsrPwd" value="" data-mini="true">
                    <p class="text-note-normal" style="color:#384">※{$lang_list.PwdChkNewPolicy}</p>
                </div>
                <!-- 2018/10/15 Nhu edit end -->
                <div data-role="fieldcontain">
                    <label for="UsrName">{$lang_list.Name}<span style="color:#FF0000;">※</span></label>
                    <input type="text" name="usr_name" id="UsrName"
                           class="require"
                           value="{$user.USR_NAME}" data-mini="true" placeholder="{$lang_list.PlaceholderName}">
                </div>
                {if $lang == '' || $lang == 'ja'}
                <div data-role="fieldcontain">
                    <label for="UsrKana">お名前(カナ)<span style="color:#FF0000;">※</span></label>
                    <input type="text" name="usr_kana" id="UsrKana"
                           class="require" value="{$user.USR_KANA}"
                           data-mini="true" placeholder="例）ヤマダタロウ">
                </div>
                {/if}
                {if $disp_flg.gender}
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal" class="usr_sex">
                        <legend>{$lang_list.Gender}</legend>
                        <input type="radio" name="usr_sex" id="UsrSex1" class="usr_sex" data-mini="true" value="1" {if $user.USR_SEX!=2} checked{/if}>
                        <label for="UsrSex1">{$lang_list.Male}</label>
                        <input type="radio" name="usr_sex" id="UsrSex2" class="usr_sex" data-mini="true" value="2" {if $user.USR_SEX==2} checked{/if}>
                        <label for="UsrSex2">{$lang_list.Female}</label>
                    </fieldset>
                </div>
                {/if}
                {if $disp_flg.birthday}
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal" style="margin-top:5px;">
                        <legend>{$lang_list.DateofBirth}</legend>
                        <select name="usr_birth_y" id="UsrBirthYear" data-mini="true">
                            <option value="">----</option>
                            {foreach from=$useredit_year_list item="v"}
                            <!-- 2018/01/12 17213 Tam edit start -->
                            <!-- <option value="{$v}"{if $v==$user.USR_BIRTH|substr:0:4} selected{/if}>{$v}</option> -->
                            <option value="{$v}"{if $v==$user.USR_BIRTH|substr:0:4} selected{/if}>{$v}{$lang_list.Year_07_3}</option>
                            <!-- 2018/01/12 17213 Tam edit end -->
                            {/foreach}
                        </select>
                        <select name="usr_birth_m" id="UsrBirthMonth" data-mini="true">
                            <option value="">--</option>
                            {foreach from=$useredit_month_list item="v"}
                            <!-- 2018/01/12 17213 Tam edit start -->
                            <!-- <option value="{$v}"{if $v==$user.USR_BIRTH|substr:5:2} selected{/if}>{$v}</option> -->
                            <option value="{$v}"{if $v==$user.USR_BIRTH|substr:5:2} selected{/if}>{$v}{$lang_list.Month_07_3}</option>
                            <!-- 2018/01/12 17213 Tam edit end -->
                            {/foreach}
                        </select>
                        <select name="usr_birth_d" id="UsrBirthDay" data-mini="true">
                            <option value="">--</option>
                            {foreach from=$useredit_day_list item="v"}
                            <!-- 2018/01/12 17213 Tam edit start -->
                            <!-- <option value="{$v}"{if $v==$user.USR_BIRTH|substr:8:2} selected{/if}>{$v}</option> -->
                            <option value="{$v}"{if $v==$user.USR_BIRTH|substr:8:2} selected{/if}>{$v}{$lang_list.Day_07_3}</option>
                            <!-- 2018/01/12 17213 Tam edit end -->
                            {/foreach}
                        </select>
                    </fieldset>
                </div>
                {/if}
                <div data-role="fieldcontain">
                  <!-- 2018/01/17 17213 Tam edit start -->
                  <script >
                      {literal}
                      var onZip3Success = function(){
                        $("#pref").trigger("change");
                      }
                      AjaxZip3.onSuccess = onZip3Success;
                      {/literal}
                    </script>
                    <label for="zip">{$lang_list.PostalCode}</label>
                    <input type="tel" name="zip_cd" id="zip" value="{$user.ZIP_CD}"
                           data-inline="true" data-mini="true" pattern="\d{7}" placeholder="{$lang_list.PlaceholderPostCode}" style="width:40%;" onKeyUp="AjaxZip3.zip2addr(this,'','usr_pref_cd','usr_adr1','usr_adr2');">
                  <!-- 2018/01/17 17213 Tam edit end -->
                </div>
                <div data-role="fieldcontain" style="clear:both;">
                    <label for="pref" style="margin-top:5px;">{$lang_list.PrefectureState}</label>
                    <select id="pref" name="usr_pref_cd" data-mini="true">
                        <option value="">{$lang_list.PleaseSelect}</option>
                        {foreach from=$useredit_pref_list key="cd" item="v"}
                        <option value="{$cd}"{if $cd==$user.USR_PREF_CD} selected{/if}>{$v}</option>
                        {/foreach}
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="city" style="margin-top:5px;">{$lang_list.CityWardTown}<span style="color:#FF0000;">※</span></label>
                    <input type="text" name="usr_adr1" id="city" class="require"
                           value="{$user.USR_ADR1}"
                           data-mini="true"
                           placeholder="{$lang_list.AddressCharacterLimit}" maxlength="45" >
                </div>
                <div data-role="fieldcontain">
                    <label for="addr">{$lang_list.StreetAddress}<span style="color:#FF0000;">※</span></label>
                    <input type="text" name="usr_adr2" id="addr" class="require"
                           value="{$user.USR_ADR2}"
                           data-mini="true"
                           placeholder="{$lang_list.AddressCharacterLimit}" maxlength="45" >
                </div>
                {if $disp_flg.telephone}
                <div data-role="fieldcontain">
                    <label for="UsrTel">{$lang_list.TelephoneNumber}</label>
                    <input type="tel" name="usr_tel" id="UsrTel"
                           value="{$user.USR_TEL}"
                           data-mini="true" placeholder="{$lang_list.PlaceholderPhone}">
                </div>
                {/if}
                {if $disp_flg.fax}
                <div data-role="fieldcontain">
                    <label for="UsrFax">{$lang_list.FaxNumber}</label>
                    <input type="tel" name="usr_fax" id="UsrFax"
                           value="{$user.USR_FAX}"
                           data-mini="true" placeholder="{$lang_list.PlaceholderFax}">
                </div>
                {/if}
                <div data-role="fieldcontain">
                    <label for="UsrEmTel">{$lang_list.EmergencyContactTelephone}<span style="color:#FF0000;">※</span></label>
                    <input type="tel" name="usr_em_tel" id="UsrEmTel" class="require"
                           value="{$user.USR_EM_TEL}"
                           data-mini="true" placeholder="{$lang_list.PlaceholderEmTel}">
                </div>
                {if $disp_flg.workplace}
                <div data-role="fieldcontain">
                    <label for="OrgName">{$lang_list.Workplace}</label>
                    <input type="text" name="org_name" id="OrgName" value="{$user.ORG_NAME}" data-mini="true">
                </div>
                {if $lang == '' || $lang=='ja'}
                <div data-role="fieldcontain">
                    <label for="OrgKana">お勤め先名(カナ)</label>
                    <input type="text" name="org_kana" id="OrgKana" value="{$user.ORG_KANA}"  data-mini="true">
                </div>
                {/if}
                {/if}
                {if $ask_news === 1}
                <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup" data-type="horizontal" class="mag_allow">
                            <legend>{$lang_list.Newsemail}</legend>
                            <input type="radio" name="mag_allow" id="MagAllow1" class="mag_allow"
                                    data-mini="true"
                                    value="1" {if $user.MAG_ALLOW} checked{/if}>
                            <label for="MagAllow1">{$lang_list.Hope}</label>
                            <input type="radio" name="mag_allow" id="MagAllow2" class="mag_allow"
                                    data-mini="true"
                                    value="0" {if !$user.MAG_ALLOW} checked{/if}>
                            <label for="MagAllow2">{$lang_list.Donotwant}</label>
                        </fieldset>
                    </div>
                {/if}
                <div style="margin-top:5px;text-align:center;">
                    <a id="CstmEditBtn" href="javascript:void(0);" name="9991,63"
                       data-role="button" data-mini="true" data-inline="true" data-theme="e"
                       data-icon="arrow-r" data-ajax="false" data-corners="true" data-shadow="true"
                       data-iconshadow="true" data-wrapperels="span"
                       class="ui-btn ui-btn-up-e ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left m-btn m-btn-enter m-btn-s">
                        <span class="ui-btn-inner ui-btn-corner-all">
                        <span class="ui-btn-text">{$lang_list.Register2}</span>
                            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
                        </span>
                    </a>
                </div>
            </form>
        </div>
    </div>
    <!-- submit edit rsv-->
    <form id="CalEditForm" action="" method="POST" data-ajax="false">
        <input type="hidden" name="edit_rsvno" value="" />
    </form>
    {/if}
    <!-- 2019/02/20 645 Nhu edit start -->
    <div id="cancel_reason_dialog" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <!-- 2021/03/13 GiangLT edit start -->
        <div data-role="content">
            <!-- 2021/03/13 GiangLT edit end -->
            <div>
                <p style="margin: 0; text-align: center">{$Question.QUESTION}</p>
            </div>
            <div>
                <input type="hidden" id="q_type" value="{$Question.QUESTION_TYPE}" />
                <input type="hidden" id="q_id" value="{$Question.QUESTION_ID}" />
                <div>
                    <!-- 2019/02/27 653 Nhu edit start -->
                    <p style="margin:0;"><span style="color:#FF0000;">{$lang_list.Asterisk}</span>{$lang_list.CancelReasonTitle}</p>
                    <!-- 2019/02/27 653 Nhu edit end -->
                </div>
                {if $Question.QUESTION_TYPE == '0'}
                    <select id="ENQUETE" class="enquete_before_select" name="ENQUETE" data-question_id="{$enquete.QUESTION_ID}">
                        <option value="">{$lang_list.PleaseSelect}</option>
                        {foreach from=$select_answers[$Question.QUESTION_ID].BEFORE item="before_answer"}
                            <option value="{$before_answer.ANSWER_ID}">{$before_answer.ANSWER}</option>
                        {/foreach}
                    </select>
                    {if $select_answers[$Question.QUESTION_ID].AFTER}
                    <div class="enquete_after_contain enquete_after_contain">
                        <select id="ENQUETE_AFTER" name="ENQUETE_AFTER" class="ui-disabled">
                            <option value="">{$lang_list.PleaseSelect}</option>         
                        </select>
                        
                    </div>
                    <div style="display: none">
                        <select id="TEMP_ENQUETE_AFTER" name="TEMP_ENQUETE_AFTER" class="ui-disabled">
                            <option value="">{$lang_list.PleaseSelect}</option>
                            {foreach from=$select_answers[$Question.QUESTION_ID].AFTER item="after_answer"}
                                <option value="{$after_answer.ANSWER_ID}" data-before_id="{$after_answer.ANSWER_ID_BEFORE}">{$after_answer.ANSWER}</option>
                            {/foreach}                
                        </select>
                    </div>
                    {/if}
                {elseif $Question.QUESTION_TYPE == '2'}
                    <input id="ENQUETE_CHECK" type="checkbox" value="1" name="ENQUETE" data-mini="true">
                    <label id="ENQUETE_CHECK_TEXT" for="ENQUETE_CHECK">{$Question.CHECK_LABEL}</label>
                {/if}
                <div style="margin-top: 15px;">
                    <!-- 2019/02/27 653 Nhu edit start -->
                    <p>{$lang_list.CancelOtherReasonTitle}</p>
                    <!-- 2019/02/27 653 Nhu edit end -->
                    <textarea id="ex_reason" class="ec-w-long form-textarea" rows="1"></textarea><br />
                </div>
            </div>
            <a data-ajax="false" id="btn_cancel_reason" class="m-btn m-btn-enter m-btn-s" href="#" name="" data-htlid="" data-rsvno="" data-role="button">OK</a>
        </div>
    </div>
    <!-- 2019/02/20 645 Nhu edit end -->
    <!-- //ログイン後予約履歴一覧 -->
    <!-- 2021/03/13 GiangLT edit start -->
    <div class="ec-loader rsv-loader click_flg" style="z-index: 4;background: rgba(0, 0, 0, 0.5);">
        <div style="top: 45%; left: 45%">
        </div>
    </div>
    <!-- 2021/03/13 GiangLT edit end -->
   </body>
</html>
{/if}