{include file='./header.inc.html' title="" css=$css_files js=$js_files tpl=$tpl_files}
    <!-- #Body -->
    <div id="Body">
        {include file='./error.inc.html' err_msg=$err_msg sys_msg=$sys_msg}
        <div class="box">
            <h3>
                <div class="box-title">
                    <!-- 2018/08/01 Nhu edit start -->
                    <!-- フラガールショー　サンライトカーニバル　予約 -->
                    {$other_name}　{$lang_list.ReservationSeat}
                    <!-- 2018/08/01 Nhu edit end -->
                    <span style="float:right">◯ {$lang_list.DesignatableSeat}</span>
                </div>
            </h3>
        </div>
        <!-- main-->
        <!-- 2018/11/1 Nhu edit start -->
        <input type="hidden" id="others_rsv_no" value="{$others_rsv_no}" />
        <input type="hidden" id="modiflg" value="{$modiflg}" />
        <!-- 2018/11/28 Nhu edit start -->
        <input type="hidden" id="CheckReservedSeat" value="{$lang_list.CheckReservedSeat}" />
        <input type="hidden" id="NumberIsOver" value="{$lang_list.NumberIsOver}" />
        <!-- 2018/11/28 Nhu edit end -->
        <input type="hidden" id="temp_other_no" value="{$temp_other_no}">
        <input type="hidden" id="TempCheckReservedSeat" value="{$lang_list.TempCheckReservedSeat}">
        <input type="hidden" id="others_id" value="{$others_id}" />
        {if $t_others === null}
        <div style="background-color: white; height: -webkit-fill-available"></div>
        <input type="hidden" id="ReserveSeatFailed" value="{$lang_list.ReserveSeatFailed}">
        <!-- <script>
            alert("{$lang_list.ReserveSeatFailed}");
        </script> -->
        {else}
        <!-- 2018/11/1 Nhu edit end -->
        <div id="canvas-container">
            <input type="hidden" id="others_course_id" value="{$t_others.OTHERS_COURSE_ID}">
            <input type="hidden" id="htl_id" value="{$htl_id}">
            <input type="hidden" id="no_max" value="0">
            <input type="hidden" id="num_name" value="{$t_others.NUM_NAME}">
            {*<!-- <input type="hidden" id="others_rsv_no" value="{$others_rsv_no}" /> -->*}
            <input type="hidden" id="quantity" value="{$t_others.QUANTITY}" />
            <input type="hidden" id="SecKeyRsv" value="{$t_others.SEC_KEY}" />
            <input type="hidden" id="NoCharge" value="{$lang_list.NoCharge}">

            <!-- 2018/08/21 Nhu edit start -->
            {*<!-- <input type="hidden" id="modiflg" value="{$modiflg}" /> -->*}
            <!-- 2018/08/21 Nhu edit end -->
            <!-- 2018/07/26 15718 Phuong edit start -->
            <input type="hidden" id="check_php" value="1">
            <!-- 2018/07/26 15718 Phuong edit end -->
            <div class="canvas-container_top">
                <table>
                    <tr>
                        <th style="width: 190px">{$lang_list.Date}</th>
                        <th style="width: 40px">{$lang_list.Time}</th>
                        <th style="width: 106px"></th>
                        <th>{$lang_list.DesignatedRank}</th>
                        <th style="width: 200px">{$lang_list.Specified}/{$lang_list.SpecifiableNumber}</th>
                        <th style="width: 50px">
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <label>{$usedate}&nbsp;（{$day_of_week}）</label>
                        </td>
                        <td>
                            <label id="time_start">{$time_start_full}</label>
                        </td>
                        <td>
                            <button class="canvas-btn rsv-btn" id="loadAssignRsvNo" style="margin-left: 15px;">
                                {$lang_list.ShowTheLatest}
                            </button>
                        </td>
                        <td>
                            <label id="label_rank_name">{$t_others.RANK_NAME}</label>
                        </td>
                        <td>
                            <label id="count_seat"></label><span class="cvuser" id="label_all_seat">/{$t_others.QUANTITY}{$t_others.NUM_NAME}</span>
                        </td>
                        <td>
                            <!-- <img src="{$design_url}img/1303_001_seat_annotation.png" style="width:36px; height:36px"/> <span>指定可能席</span> -->
                        </td>
                    </tr>
                </table>
            </div>
            <div class="canvas-container__center">
                <div class="select_location menu-toggle">
                    <div class="one"></div>
                    <div class="two">{$lang_list.AreaSelection}</div>
                    <div class="three"></div>
                </div>
                <div class="plus_minus menu-toggle zoom">
                    <button class="plus">+</button>
                    <button class="minus">-</button>
                </div>
                <nav>
                    <ul role="navigation" class="hidden" id="zoom_to">
                        <li><a href="javascript:void(0)" data-rankId="1">{$lang_list.PremiumSeatSS}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="2">{$lang_list.RightSideSeatS}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="3">{$lang_list.LeftSideSeatS}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="4">{$lang_list.SeatA}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="5">{$lang_list.RightSideSeatB}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="6">{$lang_list.LeftSideSeatB}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="7">{$lang_list.RightSideSeatC}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="8">{$lang_list.LeftSideSeatC}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="9">{$lang_list.2FLeftSideSeatC}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="10">{$lang_list.BackwardSeatC}</a></li>
                    </ul>
                </nav>
                <canvas id="canvas" ></canvas>
                <div class="ec-loader rsv-loader " style="display: block;">
                    <div style="top: 250px;">
                    </div>
                </div>
                <div class="ec-loader rsv-loader click_flg" style="z-index: 4;background: rgba(0, 0, 0, 0.5);">
                    <div style="top: 250px;">
                    </div>
                </div>
                <!-- 2018/11/1 Nhu edit start -->
                <div class="btn-foo">
                    {if ($modiflg == 0)}
                        {if ($temp_other_no == '0')}
                            <button class="canvas-btn rsv-btn rsv-nav-prev" id="CancelAssignSeat">
                                {$lang_list.ChooseAnotherRank}
                            </button>
                        {else}
                            <button class="canvas-btn rsv-btn rsv-nav-prev" id="btn_cancel" style="width: 136px">
                                {$lang_list.ReturnToOption}
                            </button>
                        {/if}
                    {/if}
                    <!-- 2018/08/06 Nhu edit start -->
                    <button class="canvas-btn-close rsv-btn rsv-btn-reserve" id="btn_cancel" {if ($modiflg == 1)}style="margin-left:40%"{/if}>{$lang_list.SpecifiedTermination}</button>
                    <!-- 2018/08/06 Nhu edit end -->
                </div>
                <!-- 2018/11/1 Nhu edit end -->
            </div>
        </div>
        {/if}
    </div>
        <!-- /#Body -->
        <!-- 2018/6/14 Nhu edit start -->
    <div class="seat_reserve_dialog">
        <div class="select-seat-modal-content">
            <div class="theme-head" id="seat_title_dialog"><p></p></div>
            <div class="select-seat-content">
                <div class="content_image">
                    <img src="">
                </div>
                <div id="seat_desc">
                </div>
                <div class="seat_no" id="item_no">{$lang_list.Object} No. <span></span></div>
            </div>
            <!-- 2018/11/14 Nhu edit start -->
            <p id="seat_cancel_noti">{$lang_list.CancelSeatNoti}</p>
            <!-- 2018/11/14 Nhu edit end -->
            <button class="canvas-btn rsv-btn rsv-btn-large" id="price_seat_reserve">
            </button>
            <!-- 2018/08/06 Nhu edit start -->
            <button class="canvas-btn rsv-btn rsv-btn-large" id="status_seat_reserve">
                {$lang_list.UnselectSeat}
            </button>
            <button class="canvas-btn-close rsv-btn" id="cancel_seat_reserve">{$lang_list.Close}</button>
            <!-- 2018/08/06 Nhu edit end -->
        </div>
    </div>

    <!-- 2018/8/21 Nhu edit start -->
    <div class="error_dialog" title="{$lang_list.AlertMessage}">  
        <p id="err_content">
            
        </p>  
    </div> 

    <div class="err_rsv_seat" title="{$lang_list.AlertMessage}">  
        <p id="err_rsv_seat">
        </p>  
    </div> 

    <div class="no_seat_rsv" title="{$lang_list.AlertMessage}">  
        <p id="no_seat_rsv_content">
            {$lang_list.ReserveSeatFailed}
        </p>  
    </div> 
    <!-- 2018/12/18 522 Nhu edit start -->
    <div class="note_and_info" title="{$lang_list.AlertMessage}">  
        <p id="note_and_info_content">
            {$lang_list.NoteAndNotification1}
            <br>
            {$lang_list.NoteAndNotification2}
            <br>
            {$lang_list.NoteAndNotification3}
            <br>
            {$lang_list.NoteAndNotification4}
        </p>  
    </div> 
    <!-- 2018/12/18 522 Nhu edit end -->
    <!-- 2018/8/21 Nhu edit end -->
        <!-- 2018/6/14 Nhu edit end -->
<script>
    // set it to global
    {if $seat_area_flg === '1'}
        window.IMAGE_URL = "{$design_url}img/1303_001_map.png?20240426";
    {else}
        window.IMAGE_URL = "{$design_url}img/1303_001_map_old.png?20240325";
    {/if};
    window.IMAGE_SEAT_URL = "{$design_url}img/1303_001_seat_empty.png";
    window.IMAGE_NON_SEAT = "{$design_url}img/1303_001_non_seat.png";
    var isSmartPhone = {if $is_smartphone}true{else}false{/if};
</script>