{include file='./header_sp.inc.html' title=$title css=$css_files js=$js_files tpl=$tpl_files}
    <!-- 2018/11/1 Nhu edit start -->
    <input type="hidden" id="others_rsv_no" value="{$others_rsv_no}" />
    <input type="hidden" id="modiflg" value="{$modiflg}" />
    <input type="hidden" id="HtlId" value="{$htl_id}">
    {if $t_others === null}
    <input type="hidden" id="ReserveSeatFailed" value="{$lang_list.ReserveSeatFailed}">
    {else}
    <input type="hidden" id="others_course_id" value="{$t_others.OTHERS_COURSE_ID}">
    <input type="hidden" id="no_max" value="0">
    <input type="hidden" id="quantity" value="{$t_others.QUANTITY}" />
    <input type="hidden" id="num_name" value="{$t_others.NUM_NAME}">
    <input type="hidden" id="SecKeyRsv" value="{$t_others.SEC_KEY}" />
    <input type="hidden" id="Lang" value="{$lang}">
    <input type="hidden" id="NoCharge" value="{$lang_list.NoCharge}">
    <!-- 2018/11/28 Nhu edit start -->
    <input type="hidden" id="CheckReservedSeat" value="{$lang_list.CheckReservedSeat}" />
    <input type="hidden" id="NumberIsOver" value="{$lang_list.NumberIsOver}" />
    <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}" />
    <!-- 2018/11/28 Nhu edit end -->
    {/if}
    <!-- 2018/11/1 Nhu edit end -->

    <div data-role="header" style="overflow-x: hidden">
      <h2 class="content-head">{$other_name}　{$lang_list.ReservationSeat} <span style="float:right; padding-right: 20px;">◯ {$lang_list.DesignatableSeat}</span></h2>
    </div>
    <div class="sp_canvas_top"  style="word-break: keep-all;">
        <!-- 2018/09/14 Do edit start -->
        <!-- 2018/12/07 510 Nhu edit start -->
        <div class="sp_canvas_top__first">
            <div class="sp_date_time">
                <label>{$usedate}({$day_of_week}){$time_start_full}</label>
                <!-- <label id="time_start"></label> -->
            </div>
            <div class="sp_rank_name">
                <label id="rank_name">{$t_others.RANK_NAME}</label>
                <!-- <label id="count_seat"></label><span class="cvuser" id="label_all_seat">/{$t_others.QUANTITY}{$t_others.NUM_NAME}</span> -->
            </div>
            <div class="sp_seat_rsv">
                <label id="count_seat"></label><span class="cvuser" id="label_all_seat">/{$t_others.QUANTITY}{$t_others.NUM_NAME}</span>
            </div>
        </div>
        <!-- 2018/09/14 Do edit end -->
        <!-- <div class="sp_canvas_top__last"> -->
        <div class="sp_canvas_top__last paging-sp">
            <!-- <a id="loadAssignRsvNo" data-role="button" data-inline="true" data-theme="e" data-ajax="false" class="m-btn m-btn-modal m-btn-ss">{$lang_list.ShowTheLatest}</a> -->
            <a id="loadAssignRsvNo" data-ajax="false" class="rsv-btn m-btn-ss"><img /></a>
        </div>
        <!-- 2018/12/07 510 Nhu edit end -->
    </div>
    <!-- <div class="sp_canvas_top">
        <div class="sp_canvas_top__first">
            <label id="label_rank_name">{$t_others.RANK_NAME}</label>
            <img src="{$design_url}img/1303_001_seat_annotation.png" style="width:36px; height:36px; padding-left: 10px"/>
            <label style="font-size: 16px">指定可能席</label>
        </div>
        <div class="sp_canvas_top__last">
        </div>
    </div> -->
    <div class="canvas-container__center">
        <div class="select_location menu-toggle">
            <div class="one"></div>
            <div class="two {$lang}">{$lang_list.AreaSelection}</div>
            <div class="three"></div>
        </div>
        <div class="plus_minus menu-toggle zoom">
            <button data-role="none" class="plus" >+</button>
            <button data-role="none" class="minus">-</button>
        </div>
        <nav>
            <ul role="navigation" class="hidden" id="zoom_to">
                <li><a href="javascript:void(0)" data-role="none" data-rankId="1">{$lang_list.PremiumSeatSS}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="2">{$lang_list.RightSideSeatS}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="3">{$lang_list.LeftSideSeatS}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="4">{$lang_list.SeatA}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="5">{$lang_list.RightSideSeatB}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="6">{$lang_list.LeftSideSeatB}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="7">{$lang_list.RightSideSeatC}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="8">{$lang_list.LeftSideSeatC}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="9">{$lang_list.2FLeftSideSeatC}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="10">{$lang_list.BackwardSeatC}</a></li>
            </ul>
        </nav>
        <div id="canvas_container" >
            <!--<canvas id="canvas" ></canvas>-->
        </div>
    </div>
    <div class="paging-sp" id="paging_sp">
        <div class="btn-next-prev">
            <!-- 2018/11/1 Nhu edit start -->
            {if $modiflg == 0}
                {if ($temp_other_no == '0')}
                    <!-- 新規で座席備品の予約の場合はCancelAssignSeatをIDにセットして「他ランクを選ぶ」ボタンを表示。
                    画面遷移するタイミングで座席備品の仮予約を削除する -->
                    <a data-ajax="false" id="CancelAssignSeat" data-role="button" data-icon="arrow-l" class="m-btn m-btn-prev sp-paging paging-prev rsv-btn rsv-sp-prev" style="padding: 0">{$lang_list.ChooseAnotherRank}</a>
                {else}
                    <!-- 座席備品の変更の場合はbtn_cancelをIDにセットし、「戻る」ボタンを表示する。
                    座席が指定されていない場合はダイアログを表示して座席を指定するよう表示する -->
                    <a data-ajax="false" id="btn_cancel" data-role="button" data-icon="arrow-l" class="m-btn m-btn-prev sp-paging paging-prev rsv-btn rsv-sp-prev" style="padding: 0">{$lang_list.ReturnToOption}</a>
                {/if}
            {/if}
            <a data-ajax="false" id="btn_cancel" data-role="button" class="m-btn m-btn-enter paging-next rsv-btn rsv-sp-next" {if $modiflg == 1}style = "width: 95%;margin: 0 10px;"{/if}>{$lang_list.SpecifiedTermination}</a>
            <!-- 2018/11/1 Nhu edit end -->
        </div>
    </div>
    <!--/content-->
  </div>
  <!--/home-->
    <div id="seat_reserve_box" data-role="dialog">
        <div data-role="content">
            <div class="ui-header ui-bar-a">
                <h1 class="content-head ui-title" style="width: unset" id="title-desc"></h1>
            </div>
            <div class="box_img">
                <img src=""/>
            </div>
            <div class="select-option-tbl-detail" id="seatCap">
            </div>
            <div class="seat_no" id="item_no">{$lang_list.Object} No. <span></span></div>
            <!-- 2018/11/14 Nhu edit start -->
            <p id="seat_cancel_noti">{$lang_list.CancelSeatNoti}</p>
            <!-- 2018/11/14 Nhu edit end -->
            <a data-ajax="false" data-role="button" class="m-btn m-btn-enter" id="price_seat_reserve"></a>
            <a data-ajax="false" data-role="button" class="m-btn m-btn-enter" id="status_seat_reserve">{$lang_list.UnselectSeat}</a>
            <a data-ajax="false" id="cancel_seat_reserve" data-role="button" class="m-btn m-btn-modal">{$lang_list.Close}</a>
        </div>
    </div>

    <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">
        
            </p>  
            <a class="m-btn m-btn-modal m-btn-close m-btn-s" href="#" data-role="button" data-rel="back">OK</a>
        </div>
    </div>
    <!-- 2018/08/22 Nhu edit start -->
    <div id="err_rsv_seat" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <div data-role="content">  
            <p id="err_content_rsv_seat" style="text-align:center">
            </p>  
            <a class="m-btn m-btn-modal m-btn-close m-btn-s" href="#" data-role="button" id="backtoprevscreen" data-rel="back">OK</a>
        </div>
    </div>

    <div id="no_seat_rsv" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <div data-role="content">  
            <p id="no_seat_rsv_content" style="text-align:center">
                {$lang_list.ReserveSeatFailed}
            </p>  
            <a class="m-btn m-btn-modal m-btn-close m-btn-s" href="#" data-role="button" id="backtoselectscreen">OK</a>
        </div>
    </div>
    <!-- 2018/12/18 522 Nhu edit start -->
    <div id="note_and_info" data-role="dialog">
        <div data-role="header">
            <h1>{$lang_list.AlertMessage}</h1>
        </div>
        <div data-role="content">  
            <p id="note_and_info_content">
                {$lang_list.NoteAndNotification1}
                <br>
                {$lang_list.NoteAndNotification2}
                <br>
                {$lang_list.NoteAndNotification3}
                <br>
                {$lang_list.NoteAndNotification4}
            </p>  
            <a class="m-btn m-btn-modal m-btn-close m-btn-s" href="#" data-role="button" id="backtoassignhome">OK</a>
        </div>
    </div>
    <!-- 2018/12/18 522 Nhu edit end -->
    <!-- 2018/08/22 Nhu edit end -->
  <!--/#LoginBox -->
</body>
<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>
</html>