<!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="docHeaderTable">
        <tr>
            <td class="docHeaderTd"><h1>{{ultmarc.subtitle}}</h1></td>
            <td class="docHeaderTdCenter docHeaderTdCenter">
                {% if ultmarc.is_batch_processing %}
                <div class="docButchMsg">日次バッチ処理中のため、データが正しく表示されない可能性があります</div>
                {% endif %}
            </td>
            <td class="docHeaderTd docHeaderTdRight"><button class="docHeader_bt" onclick="backToMenu()">メニューへ</button></td>
        </tr>
    </table>
    <form id="doctor_search" class="_form" name="search" action="/ultmarc/docSearch" method="POST">
        <table class="docSearchTableDivTwo">
            <tbody>
                <tr>
                    <td class="docSearchColumnTd">医師コード:</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" style="ime-mode:disabled;" type="text" name="ctrl_dcf_pcf_dr_cd"
                        value="{{ultmarc.is_input_dcf_pcf_dr_cd()}}" maxlength='10' oninput="formBtDisabled()">
                    </td>
                    <td class="docSearchColumnTd">氏名(漢字)：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" type="text" name="ctrl_dr_name"
                        value="{{ultmarc.is_input_dr_name()}}" oninput="formBtDisabled()">
                    </td>
                    <td class="docSearchColumnTd">氏名(かな・カナ)：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" type="text" name="ctrl_dr_name_kana"
                        value="{{ultmarc.is_input_dr_name_kana()}}" oninput="formBtDisabled()">
                    </td>
                </tr>
                <tr>
                    <td class="docSearchColumnTd">勤務先コード：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" 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 class="docSearchColumnTd">勤務先名(漢字)：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" type="text" name="ctrl_form_inst_name_kanji"
                        value="{{ultmarc.is_input_form_inst_name_kanji()}}" oninput="formBtDisabled()">
                    </td>
                    <td class="docSearchColumnTd">勤務先名(かな・カナ)：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" type="text" name="ctrl_form_inst_name_kana"
                        value="{{ultmarc.is_input_form_inst_name_kana()}}" oninput="formBtDisabled()">
                    </td>
                </tr>
                <tr>
                    <td class="docSearchColumnTd">勤務先都道府県：</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 class="docSearchColumnTd">所属部科(漢字)：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" type="text" name="ctrl_blng_sec_name"
                        value="{{ultmarc.is_input_blng_sec_name()}}" oninput="formBtDisabled()">
                    </td>
                    <td class="docSearchColumnTd">診療科目(漢字)：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" type="text" name="ctrl_trt_course_name"
                        value="{{ultmarc.is_input_trt_course_name()}}" oninput="formBtDisabled()">
                    </td>
                </tr>
                <tr>
                    <td class="docSearchColumnTd">出身大学(漢字)：</td>
                    <td class="docSearchTextboxTd">
                        <input class="text docSearchTextbox" type="text" name="ctrl_alma"
                        value="{{ultmarc.is_input_alma()}}" oninput="formBtDisabled()">
                    </td>
                    <td class="docSearchColumnTd">卒年：</td>
                    <td class="docSearchTextboxTd"><input class="text docSearchTextbox" style="ime-mode:disabled;" type="text" name="ctrl_grad_y"
                        value="{{ultmarc.is_input_grad_y()}}" maxlength='4' 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 id="doctor_info" class="_form" name="result" action="/ultmarc/docInfo" 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="doc_id" id="doc_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>医師コード</th>
                        <th>氏名</th>
                        <th>勤務先名</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_pcf_dr_cd','{{ultmarc.is_input_dcf_pcf_dr_cd()}}');
            sessionStorage.setItem('ctrl_dr_name','{{ultmarc.is_input_dr_name()}}');
            sessionStorage.setItem('ctrl_dr_name_kana','{{ultmarc.is_input_dr_name_kana()}}');
            sessionStorage.setItem('ctrl_dcf_dsf_inst_cd','{{ultmarc.is_input_dcf_dsf_inst_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_prefc_cd','{{ultmarc.is_input_form_prefc_cd()}}');
            sessionStorage.setItem('ctrl_blng_sec_name','{{ultmarc.is_input_blng_sec_name()}}');
            sessionStorage.setItem('ctrl_trt_course_name','{{ultmarc.is_input_trt_course_name()}}');
            sessionStorage.setItem('ctrl_alma','{{ultmarc.is_input_alma()}}');
            sessionStorage.setItem('ctrl_grad_y','{{ultmarc.is_input_grad_y()}}');

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

            $(".pagination").pagination({
                dataSource: function(done) {
                    done(searchResultData)
                },
                pageNumber: pagination_page_number, // 初期ページ番号
                pageSize: 50, //表示するコンテンツ数
                pageRange: 1, //選択されているページネーション番号の両隣に表示する個数
                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 OnLinkClick(){
            sessionStorage.clear();
            return true;
        }

        function pagination_content(datas) {
            const display_keys = [
                'dcf_pcf_dr_cd',
                'dr_name',
                'dcf_dsf_inst_cd',
                'blng_sec_name',
                'trt_course_name',
                'form_post_name',
                'alma',
                'grad_y'
            ];
            return datas.map(function (data) {
                let td = display_keys.map((key) =>{
                    let inner_content = data[key];
                    if(key=='dcf_pcf_dr_cd')
                        inner_content = `<a href="/ultmarc/docInfo?id=${data['dcf_pcf_dr_cd']}">${data['dcf_pcf_dr_cd']  || ''}</a>`;
                    if(key=='dcf_dsf_inst_cd')
                        inner_content = `<a href="/ultmarc/instInfo?id=${data['dcf_dsf_inst_cd']}" onclick="OnLinkClick()">${data['form_inst_name_kanji']  || ''}</a>`;
                    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_pcf_dr_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() ); // 配列に値を追加
            });
            $("#doc_id").val(vals.join(','));
        }
</script>
</body>
</html>