<!DOCTYPE html>
<html lang="ja">
<head>
    {% with subtitle = bio.subtitle %}
    {% include '_header.html' %}
    {% endwith  %}
    <link rel="stylesheet" href="/static/css/bioStyle.css">
    
    <script type="text/javascript">
        window.onload = function() {
            // 見出し固定初期化
            FixedMidashi.create();
            // ボタン、テキストボックス初期化
            formBtDisabled();
            // DatePickerを有効化
            enableDatePicker();
        };
    </script>
</head>

<body>
    <h1>生物由来検索一覧</h1>
    <form class="_form" id="bio_search" name="search" action="/bio/BioSearchList" method="POST">
        <table class="search_table">
            <tbody>
                <tr>
                    <td class="back_bt" colspan="7" align="right">
                        <input type="button" name="back" value="メニューへ" onclick="location.href='/menu/'">
                    </td>
                </tr>
                <tr>
                    <td>卸：</td>
                    <td class="search_tb" id="oroshi_dd">
                        <select class="text search_dropdown" name="ctrl_wholesaler" value="" onChange="formBtDisabled();">
                            <option value=""></option>
                            {% for whs_name in bio.display_wholesaler_names() %}
                                <option
                                    value="{{whs_name}}"
                                    {{bio.is_selected_whs_name(whs_name)}}>
                                    {{whs_name}}
                                </option>
                            {% endfor %}
                        </select>
                    </td>
                    <td>データ種別：</td>
                    <td class="search_tb">
                        <select class="text search_dropdown" name="ctrl_org_kbn" onChange="formBtDisabled();" value="">
                            {% for org_kbn_code, org_kbn_value in bio.display_org_kbn().items() %}
                            <option value="{{org_kbn_code}}" {{bio.is_selected_org_kbn(org_kbn_code)}} >{{org_kbn_value}}</option>
                            {% endfor %}
                        </select>
                    </td>
                    <td>処理日：</td>
                    <td colspan="2">
                        <input type="text" id="shoribi_start" class="date_picker" name="ctrl_rec_ymd_from"
                        value="{{bio.is_input_rec_ymd_from()}}"
                        onchange="formBtDisabled()"
                        onblur="autoModifyDate(this)"
                        >
                        ～
                        <input type="text" id="shoribi_end" class="date_picker" name="ctrl_rec_ymd_to"
                            value="{{bio.is_input_rec_ymd_to()}}"
                            onchange="formBtDisabled()"
                            onblur="autoModifyDate(this)"
                        >
                    </td>
                </tr>
                <tr>
                    <td>ロット番号：</td>
                    <td class="search_tb">
                        <input class="text" type="text" id="lot_tb" name="ctrl_rec_lot_num" style="ime-mode:disabled" maxlength="10"
                        value="{{bio.is_input_lot_num()}}"
                        oninput="checkSpaceForm(this); checkAimaiSearhForm(this); formBtDisabled()">
                    </td>
                    <td>データ区分：</td>
                    <td class="search_tb">
                        <select class="text search_dropdown" name="ctrl_data_kbn" onchange="formBtDisabled()">
                            {% for data_kbn_code, data_kbn_value in bio.display_data_kbn().items() %}
                            <option value="{{data_kbn_code}}" {{bio.is_selected_data_kbn(data_kbn_code)}} >{{data_kbn_value}}</option>
                            {% endfor %}
                        </select>
                    </td>
                    <td>製品：</td>
                    <td class="search_tb" id="seihin_dd">
                        <select class="text search_dropdown" name="ctrl_maker_cd" value="" onChange="formBtDisabled();">
                            <option value=""></option>
                            {% for phm in bio.phm_models %}
                            <option
                                value="{{phm['mkr_cd_name']}}" {{bio.is_selected_maker_cd(phm['mkr_cd_name'])}}>
                                {{phm['mkr_cd_name']}}
                            </option>
                            {% endfor %}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>発伝年月日：</td>
                    <td colspan="3">
                        <input type="text" id="shoribi_start" class="date_picker" name="ctrl_rev_hsdnymd_srk_from"
                            value="{{bio.is_input_rev_hsdnymd_srk_from()}}"
                            onchange="formBtDisabled()"
                            onblur="autoModifyDate(this)"
                        >
                        ～
                        <input type="text" id="shoribi_start" class="date_picker" name="ctrl_rev_hsdnymd_srk_to"
                            value="{{bio.is_input_rev_hsdnymd_srk_to()}}"
                            onchange="formBtDisabled()"
                            onblur="autoModifyDate(this)"
                        >
                    </td>
                    <td colspan="2">
                        <input type="checkbox" id="ikoFlg" name="ikoFlg" value="true" {{bio.is_checked_iko_flg()}}>
                        <label for="ikoFlg">2017年11月以前のデータを含める</label>
                    </td>
                    <td>
                        <input class="text clear_bt" id="clear" type="button" name="clear_bt" value="クリア" onclick="clr()">
                        <input class="search_bt" id="search_bt" value="検索" type="submit">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <!--検索結果-->
    <form class="_form" id="searchResult" name="searchResult">
        <input type="button" id="outExcel" name="outExcel" value="Excel出力" {{bio.disabled_button()}}
            data-bs-toggle="modal" data-bs-target="#modal_xlsx" data-bs-message="生物由来卸販売データ一覧をExcel出力しますか？"/>
        <input type="button" id="outCSV" name="outCSV" value="CSV出力" {{bio.disabled_button()}}
            data-bs-toggle="modal" data-bs-target="#modal_csv" data-bs-message="生物由来卸販売データ一覧をCSV出力しますか？" />
        <!--ページネーション-->
        <div id="light-pagination" class="pagination"></div>
        <!--検索結果表示テーブル-->
        <div class="bioScroll_div">
            <table class="tablesorter" _fixedhead='rows:1; cols:0; border-color:black; border-width:2px;'>
                <thead>
                    <tr class="result_tr">
                        <th>データ種別</th>
                        <th>伝票管理NO</th>
                        <th>処理日</th>
                        <th>卸コード</th>
                        <th>卸サブコード</th>
                        <th>卸名</th>
                        <th>卸組織コード</th>
                        <th>伝票番号</th>
                        <th>発伝年月日</th>
                        <th>卸取引区分</th>
                        <th>取引区分名</th>
                        <th>製品コード</th>
                        <th>統一商品コード</th>
                        <th>商品名</th>
                        <th>卸報告商品名</th>
                        <th>納入先コード</th>
                        <th>納入先名</th>
                        <th>卸報告納入先名</th>
                        <th>納入先住所</th>
                        <th>卸報告納入先住所</th>
                        <th>ロット番号</th>
                        <th>数量</th>
                        <th>有効期限</th>
                        <th>データ区分</th>
                        <th>エラー詳細種別</th>
                        <th>訂正前伝票管理NO</th>
                        <th>修正者</th>
                        <th>修正日時</th>
                        <th>施設コード</th>
                        <th>施設名</th>
                        <th>施設住所</th>
                        <th>施設電話番号</th>
                        <th>Veeva卸コード</th>
                        <th>Veeva卸組織コード</th>
                        <th>卸組織名</th>
                        <th>Veeva取引区分コード</th>
                        <th>移行</th>
                    </tr>
                </thead>
                    <tbody id="result_data" class="result_data"></tbody>
            </table>
            {% if bio.is_form_submitted() and bio.is_data_overflow_max_length() %}
            <div class="resultAreaMsg">
                検索結果が最大件数を超えました。検索条件を見直しして下さい。
            </div>
            {% endif %}
            {% if bio.is_form_submitted() and bio.is_data_empty() %}
            <div class="resultAreaMsg">
                対象のデータが存在しません
            </div>
            {% endif %}
        </div>
    </form>

    <!-- CSV/Excelダウンロードボタン。ここはajaxでやってる -->
    <script type="text/javascript">
        function download(filename, ext) {
            $(`#loading`).toggle()

            // 検索パラメータを取得
            const formData = $('#bio_search').serializeArray()
            // リクエスト用に加工
            const searchParams = {}
            for (let i = 0; i < formData.length; i++) {
                searchParams[formData[i].name] = formData[i].value
            }
            // ダウンロード固有のパラメータを設定
            const downloadRequestParams = {
                user_id: '{{bio.user_id}}',
                ext: ext,
            }
            $.extend(downloadRequestParams, searchParams)

            $.ajax({
                type: "POST",
                url: "/bio/download",
                contentType: 'application/json',
                data: JSON.stringify(downloadRequestParams),
                scriptCharset: 'utf-8',
                async: true,
                success: function(data) {
                    try {
                        if (data.status === 'batch_processing') {
                            location.href('/logout/?reason=batchProcessing')
                            return
                        }

                        if (data.status === 'session_expired') {
                            location.href('/logout/?reason=session_expired')
                            return
                        }
                        // データが存在しない場合の考慮が必要
                        /**if (data.download_url === '') {
                            // 予期せぬエラーが発生した場合
                            $(`#loading`).toggle();
                            $(`#modal_${ext}`).modal('toggle');
                            $(`#ErrorModal_Unexpected`).modal('toggle');
                        }
                        */
                        // S3の期限付き署名URLがレスポンスされる
                        window.location.href = data.download_url;
                        $(`#loading`).toggle();
                        $(`#modal_${ext}`).modal('toggle');
                    } catch (e) {
                        alert("エラーが発生しました。:" + e.message);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    const responseJson = jqXHR.responseJSON
                    if (responseJson?.detail?.error === 'db_error') {
                        $(`#loading`).toggle();
                        $(`#modal_${ext}`).modal('toggle');
                        $(`#ErrorModal_DB`).modal('toggle');
                        return
                    }
                    if (responseJson?.detail?.error === 'aws_error') {
                        $(`#loading`).toggle();
                        $(`#modal_${ext}`).modal('toggle');
                        $(`#ErrorModal_AWS`).modal('toggle');
                        return
                    }

                    // 予期せぬエラーが発生した場合
                    $(`#loading`).toggle();
                    $(`#modal_${ext}`).modal('toggle');
                    $(`#ErrorModal_Unexpected`).modal('toggle');
                    return
                }
            });
        }

        // <! --ページネーションの作成-- >
        $(function() {
            // スピナー出さない場合は以下、エスケープせず埋め込む
            // {% autoescape False%}
            let searchResultString = '{{bio.bio_data_json_str()}}'
            // {% endautoescape%}
            const searchResultData = JSON.parse(searchResultString)
            if (searchResultData.length == 0) {
                return
            }
            $(".pagination").pagination({
                dataSource: function(done) {
                    done(searchResultData)
                },
                pageNumber: 1, // 初期ページ番号
                pageSize: 50, //表示するコンテンツ数
                pageRange: 2, //選択されているページネーション番号の両隣に表示する個数
                ellipsisText: '...', //省略文字
                prevText: 'Prev', //「前へ」の文字。エスケープ文字
                nextText: 'Next', //「次へ」の文字。エスケープ文字
                showNavigator: true,
                formatNavigator: '件数: <%= totalNumber %>件 ページ数: <%= totalPage %>',
                callback: function(data, pagination) {
                    console.log(pagination.pageNumber)
                    $('#result_data').html(pagination_content(data))
                }
            })
        });

        function pagination_content(datas) {
            const display_keys = [
                'slip_org_kbn',
                'slip_mgt_num',
                'rec_ymd',
                'rec_whs_cd',
                'rec_whs_sub_cd',
                'whs_name',
                'rec_whs_org_cd',
                'rec_urag_num',
                'rev_hsdnymd_srk',
                'rec_tran_kbn',
                'tran_kbn_name',
                'mkr_cd',
                'rec_comm_cd',
                'product_name',
                'whs_rep_comm_nm',
                'nonyu_fcl_cd',
                'rec_nonyu_fcl_name',
                'whs_rep_nnskfcl_nm',
                'rec_nonyu_fcl_addr',
                'whs_rep_nnsk_fcl_addr',
                'rec_lot_num',
                'amt_fugo',
                'expr_dt',
                'data_kbn',
                'lot_no_err_flg',
                'bef_slip_mgt_num',
                'ins_usr',
                'ins_dt',
                'inst_cd',
                'inst_name_form',
                'address',
                'tel_no',
                'v_whs_cd',
                'v_whsorg_cd',
                'whs_org_name',
                'v_tran_cd',
                'iko_flg',
            ];
            return datas.map(function (data) {
                return  `
                <tr class="result_data">
                    ${display_keys.map((key) =>`<td>${data[key] || ''}</td>`)}
                </tr>
                `
            })
        }
    </script>

    <!-- Excel出力モーダル -->
    {% with
        modal_id='modal_xlsx',
        modal_title='確認',
        message='生物由来卸販売データ一覧をExcel出力しますか？',
        icon_key='info',
        modal_close_event='',
        buttons = [
            {
                'id': 'excel_confirm_ok',
                'class': 'btn btn-primary',
                'text': 'OK',
                'onclick_event': 'download("filename", "xlsx")'
            },
            {
                'id': 'excel_confirm_cancel',
                'class': 'btn btn-secondary',
                'dismiss': 'modal',
                'text': 'Cancel',
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}
    <!-- CSV出力モーダル -->
    {% with
        modal_id='modal_csv',
        modal_title='確認',
        message='生物由来卸販売データ一覧をCSV出力しますか？',
        icon_key='info',
        modal_close_event='',
        buttons = [
            {
                'id': 'csv_confirm_ok',
                'class': 'btn btn-primary',
                'text': 'OK',
                'onclick_event': 'download("filename", "csv")'
            },
            {
                'id': 'csv_confirm_cancel',
                'class': 'btn btn-secondary',
                'dismiss': 'modal',
                'text': 'Cancel',
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}
    <!-- AWS環境異常エラーモーダル -->
    {% with
        modal_id='ErrorModal_AWS',
        modal_title='エラー',
        message='ＡＷＳ環境に異常が発生しました。管理者にお問い合わせください。',
        icon_key='warning',
        modal_close_event='location.href="/logout/?reason="',
        buttons = [
            {
                'id': 'error_modal_aws',
                'class': 'btn btn-primary',
                'text': 'OK',
                'onclick_event': 'location.href="/logout/?reason=''"'
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}
    <!-- DB接続失敗エラーモーダル -->
    {% with
        modal_id='ErrorModal_DB',
        modal_title='エラー',
        message='DB接続に失敗しました。管理者にお問い合わせください。',
        icon_key='warning',
        modal_close_event='location.href="/logout/?reason="',
        buttons = [
            {
                'id': 'error_modal_db',
                'class': 'btn btn-primary',
                'text': 'OK',
                'onclick_event': 'location.href="/logout/?reason=''"'
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}

    <!-- エラーモーダル -->
    {% with
        modal_id='ErrorModal_Unexpected',
        modal_title='エラー',
        message='サーバーエラーが発生しました。管理者にお問い合わせください。',
        icon_key='warning',
        modal_close_event='location.href="/logout/?reason="',
        buttons = [
            {
                'id': 'error_modal_unexpected',
                'class': 'btn btn-primary',
                'text': 'OK',
                'onclick_event': 'location.href="/logout/?reason=''"'
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}

    <!-- ローディング -->
    <div id="loading">
        <div id="loading_content">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>出力中...
        </div>
    </div>
</body>
</html>