<!DOCTYPE html>
<html lang="ja">
<head>
    {% with subtitle = ultmarc.subtitle %}
    {% include '_header.html' %}
    {% endwith  %}
    <link rel="stylesheet" href="/static/css/ultStyle.css">

    <script type="text/javascript">
        window.onload = function(){
            // 見出し固定初期化
            FixedMidashi.create();
            // ボタン、テキストボックス初期化
            formBtDisabled();
            // Enter押下時にsubmitさせなくする
            $(function() {
                $(document).on("keypress", "input:not(.allow_submit)", function(event) {
                return event.which !== 13;
                });
            });
        }
    </script>
</head>

<!--検索フォーム-->
<body>
    <!-- タイトルと上部ボタン -->
        <table class="instSearchHeaderTable">
            <tr>
                <td class="instSearchHeaderTd"><h1>{{ultmarc.subtitle}}</h1></td>
                <td class="instSearchHeaderTdCenter instSearchHeaderTdCenter">
                    {% if ultmarc.is_batch_processing %}
                        <div class="docButchMsg">日次バッチ処理中のため、データが正しく表示されない可能性があります</div>
                    {% endif %}
                </td>
                <td class="instSearchHeaderTd instSearchHeaderTdRight"><button class="instSearchHeader_bt" onclick="backToMenu()">メニューへ</button></td>
            </tr>
        </table>
    <!-- 入力フォーム -->
    <form id="inst_search" class="_form" name="search" action="/ultmarc/instSearch" method="POST">
        <table class="search_table">
            <tbody>
                <tr>
                    <td>ULT施設コード：</td>
                    <td class="search_tb leftSearch_tb">
                        <input class="text search_textbox" style="ime-mode:disabled;" type="text" name="ctrl_dcf_dsf_inst_cd"
                        value="{{ultmarc.is_input_dcf_dsf_inst_cd()}}" maxlength='11' oninput="formBtDisabled()">
                    </td>
                    <td>施設区分：</td>
                    <td class="search_tb">
                        <!-- 施設区分のドロップダウン -->
                        <select class="text search_dropdown" name="ctrl_inst_div_cd" onchange="formBtDisabled()">
                            <option value=""></option>
                            {% for inst_div in ultmarc.inst_div_models %}
                            <option value="{{inst_div['inst_div_cd']}}" {{ultmarc.is_selected_inst_div_cd(inst_div['inst_div_cd'])}}>
                                {{inst_div['inst_div_cd']}}:{{inst_div['inst_div_name']}}
                            </option>
                            {% endfor %}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>ULT施設名(漢字)：</td>
                    <td class="search_tb">
                        <input class="text search_textbox" type="text" name="ctrl_form_inst_name_kanji"
                        value="{{ultmarc.is_input_form_inst_name_kanji()}}" oninput="formBtDisabled()">
                    </td>
                    <!-- アルトマーク課題管理表No.8の修正 （カナ）⇒(かな・カナ)-->
                    <td>ULT施設名(かな・カナ)：</td>
                    <td class="search_tb">
                        <input class="text search_textbox" type="text" name="ctrl_form_inst_name_kana"
                        value="{{ultmarc.is_input_form_inst_name_kana()}}" oninput="formBtDisabled()">
                    </td>
                </tr>
                <tr>
                    <td>郵便番号：</td>
                    <td class="search_tb"><input class="text search_textbox"  style="ime-mode:disabled;" type="text" name="ctrl_postal_number"
                        value="{{ultmarc.is_input_postal_number()}}" maxlength='8' oninput="formBtDisabled()">
                    <td>電話番号：</td>
                    <td class="search_tb"><input class="text search_textbox"  style="ime-mode:disabled;" type="text" name="ctrl_inst_phone_number"
                        value="{{ultmarc.is_input_inst_phone_number()}}" maxlength='15' oninput="formBtDisabled()">
                    </td>
                </tr>
                <tr>
                    <td>都道府県：</td>
                    <td class="search_tb">
                        <!-- 都道府県のドロップダウン -->
                        <select class="text search_dropdown" name="ctrl_prefc_cd" onchange="formBtDisabled()" onkeyup="formBtDisablead()">
                            <!-- 都道府県ドロップダウンの中身を作成 -->
                            <option value=""></option>
                            {% for prefc in ultmarc.prefc_models %}
                            <option
                                value="{{prefc['prefc_cd']}}" {{ultmarc.is_selected_prefc_cd(prefc['prefc_cd'])}}>
                                {{prefc['prefc_name']}}
                            </option>
                            {% endfor %}
                        </select>
                    </td>
                    <td>
                        <label><input type="checkbox" name="delFlg_ctrl" value="true"
                            {{ultmarc.is_checked_delFlg()}}> 削除施設表示</label>
                    </td>
                </tr>
                <tr>
                    <td>ULT施設住所：</td>
                    <td class="search_tb">
                        <input class="text search_textbox" type="text" name="ctrl_inst_addr"
                        value="{{ultmarc.is_input_inst_addr()}}" oninput="formBtDisabled()">
                    </td>
                    <td class="search_btTd" colspan="2">
                        <input class="text ult_bt search_bt" id="clear" type="button" name="clear_bt" value="クリア" onclick="clr()" >
                        <input class="ult_bt search_bt" id="search_bt" name="search_bt" value="検索" type="submit" >
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

    <!--検索結果-->
    <form class="_form" name="result" action="/ultmarc/instInfo" method="POST"  onsubmit="CheckBoxListProcessing()">
        <input type="button" name="allon" onclick="allOn(); resultBtDisabled()" value="全選択" class="ult_bt allOnOffButton" {{ultmarc.disabled_button()}}>
        <input type="button" name="alloff" onclick="allOff(); resultBtDisabled()" value="全解除" class="ult_bt allOnOffButton" {{ultmarc.disabled_button()}}>
        <input type="hidden" name="inst_id" id="inst_id" value="">
        <input type="hidden" name="page_num" value="0">

        <!--検索件数-->
        <!--ページネーション-->
        <div id="light-pagination" class="pagination"></div>
        <!--検索結果表示テーブル-->
        <div class="scroll_table">
            <table class="tablesorter instSearchResult" _fixedhead="rows:1; cols:1">
                <thead>
                    <tr>
                        <th></th>
                        <th>ULT施設コード</th>
                        <th>削除</th>
                        <th>ULT施設名(漢字)</th>
                        <th>ULT施設住所(漢字)</th>
                        <th>郵便番号</th>
                        <th>施設電話番号</th>
                        <th>施設区分名</th>
                        <th>病院種別</th>
                        <th>都道府県</th>
                    </tr>
                </thead>
                <tbody id="result_data" class="result_data"></tbody>
            </table>
            {% if ultmarc.is_form_submitted() and ultmarc.is_data_overflow_max_length() %}
            <div class="notFind">
                検索件数が500件を超えています 検索項目を見直してください
            </div>
            {% endif %}
            {% if ultmarc.is_form_submitted() and ultmarc.is_data_empty() %}
            <div class="notFind">
                対象のデータが存在しません
            </div>
            {% endif %}
            </div>

        <!--操作ボタン-->
        <input class="ult_bt info_bt" type="submit" name="detail" value="施設情報" disabled>
    </form>

    <script type="text/javascript">
        // <! --ページネーションの作成-- >
        $(function() {

            let searchResultData = [];
            // {% if not ultmarc.is_data_overflow_max_length() and  not ultmarc.is_data_empty()  %}
                // スピナー出さない場合は以下、エスケープせず埋め込む
                // {% autoescape False%}
                const searchResultString = '{{ultmarc.ultmarc_data_json_str()}}';
                // {% endautoescape%}
                searchResultData = JSON.parse(searchResultString);
            // {% endif %}


            // 検索条件をセッションに入れる
            sessionStorage.clear();
            sessionStorage.setItem('ctrl_dcf_dsf_inst_cd','{{ultmarc.is_input_dcf_dsf_inst_cd()}}');
            sessionStorage.setItem('ctrl_inst_div_cd','{{ultmarc.is_input_form_inst_div_cd()}}');
            sessionStorage.setItem('ctrl_form_inst_name_kanji','{{ultmarc.is_input_form_inst_name_kanji()}}');
            sessionStorage.setItem('ctrl_form_inst_name_kana','{{ultmarc.is_input_form_inst_name_kana()}}');
            sessionStorage.setItem('ctrl_postal_number','{{ultmarc.is_input_postal_number()}}');
            sessionStorage.setItem('ctrl_inst_phone_number','{{ultmarc.is_input_inst_phone_number()}}');
            sessionStorage.setItem('ctrl_prefc_cd','{{ultmarc.is_input_form_prefc_cd()}}');
            sessionStorage.setItem('delFlg_ctrl','{{ultmarc.is_input_delFlg()}}');
            sessionStorage.setItem('ctrl_inst_addr','{{ultmarc.is_input_inst_addr()}}');

            // ページネーションのページ番号取得
            let pagination_page_number = Number('{{ultmarc.init_pagination_page_number()}}');

            $(".pagination").pagination({
                dataSource: function(done) {
                    done(searchResultData)
                },
                pageNumber: pagination_page_number, // 初期ページ番号
                pageSize: 50, //表示するコンテンツ数
                pageRange: 2, //選択されているページネーション番号の両隣に表示する個数
                ellipsisText: '...', //省略文字
                prevText: 'Prev', //「前へ」の文字。エスケープ文字
                nextText: 'Next', //「次へ」の文字。エスケープ文字
                showNavigator: true,
                formatNavigator: '件数: <%= totalNumber %>件 ページ数: <%= totalPage %>',
                callback: function(data, pagination) {
                    sessionStorage.setItem('pagination_page_number',pagination.pageNumber);
                    $('#result_data').html(pagination_content(data))
                }
            })
        });

        function pagination_content(datas) {
            const display_keys = [
                'dcf_dsf_inst_cd',
                'abolish_ymd',
                'form_inst_name_kanji',
                'inst_addr',
                'postal_number',
                'inst_phone_number',
                'inst_div_name',
                'hp_assrt_name',
                'prefc_name'
            ];

            return datas.map(function (data) {
                let td = display_keys.map((key) =>{
                    let inner_content = data[key];
                    if(key=='dcf_dsf_inst_cd')
                        inner_content = `<a href="/ultmarc/instInfo?id=${data['dcf_dsf_inst_cd']}">${data['dcf_dsf_inst_cd']  || ''}</a>`;
                    if(key=='abolish_ymd' && data[key] != null)
                        inner_content = '削除';
                    return `<td>${inner_content || ''}</td>`
                });
                return  `
                <tr class="result_data">
                    <td><div class="checkNum">
                        <input type="checkbox" class="checkbox selected" name="data" onclick="resultBtDisabled()"
                        value=${data['dcf_dsf_inst_cd']}>
                    </div></td>
                    ${td}
                </tr>
                `
            })
        }

        // チェックボックスのチェックされている場合、施設情報ボタンを活性化させる
        function resultBtDisabled(){
            var checkboxes = $('input[name="data"]:checked').length;
            if(checkboxes == 0) {
                $(".info_bt").prop('disabled',true);
            }
            else {
                $(".info_bt").prop('disabled',false);
            }
        }

        // 検索結果のうち、チェックされている行のデータを非表示項目に詰め込む
        function CheckBoxListProcessing()
        {
            let vals = []; // 配列を定義
            $('input[name="data"]:checked').each(function() {
                vals.push( $(this).val() ); // 配列に値を追加
            });
            $("#inst_id").val(vals.join(','));
        }


    </script>
</body>
</html>