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

    <script>
        window.onload = function(){
            // 見出し固定初期化
            FixedMidashi.create();
            // ボタン、テキストボックス初期化
            formBtDisabled();
            // DatePickerを有効化
            enableDatePicker();
        }
    </script>
</head>

<body>
    <table class="headerTable">
        <tr>
            <td class="headerTd"><h1>{{bio.subtitle}}</h1></td>
            <td class="headerTdCenter headerTdCenter"></td>
            <td class="headerTd headerTdRight">
                <button class="header_bt toMenu_bt" onclick="backToMenu()">メニューへ</button>
            </td>
        </tr>
    </table>
    <form class="_form _border" id="bio_search" name="search">
        <table class="search_table">
            <tbody>
                <tr>
                    <td>卸：</td>
                    <td class="search_tb" id="oroshi_dd">
                        <select class="text search_dropdown" name="ctrl_wholesaler" value="" onChange="formBtDisabled();applySearchParam(this)">
                            <option value=""></option>
                            {% for whs_name in bio.display_wholesaler_names() %}
                                <option value="{{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();applySearchParam(this)" value="">
                            {% for org_kbn_code, org_kbn_value in bio.display_org_kbn().items() %}
                                <option value="{{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" maxlength="10"
                        value=""
                        onchange="formBtDisabled();applySearchParam(this)"
                        >
                        ～
                        <input type="text" id="shoribi_end" class="date_picker" name="ctrl_rec_ymd_to" maxlength="10"
                            value=""
                            onchange="formBtDisabled();applySearchParam(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=""
                        oninput="checkSpaceForm(this); checkAimaiSearhForm(this); formBtDisabled();applySearchParam(this)">
                    </td>
                    <td>データ区分：</td>
                    <td class="search_tb">
                        <select class="text search_dropdown" name="ctrl_data_kbn" onchange="formBtDisabled();applySearchParam(this)">
                            {% for data_kbn_code, data_kbn_value in bio.display_data_kbn().items() %}
                                <option option value="{{data_kbn_value}}">
                                    {{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();applySearchParam(this);">
                            <option value=""></option>
                            {% for phm in bio.phm_models %}
                                <option value="{{phm['mkr_cd']}}">
                                    {{phm['mkr_cd_name']}}
                                </option>
                            {% endfor %}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>発伝年月日：</td>
                    <td colspan="3">
                        <input type="text" id="hsdnymd_start" class="date_picker" name="ctrl_rev_hsdnymd_srk_from" maxlength="10"
                            value=""
                            onchange="formBtDisabled();applySearchParam(this)"
                        >
                        ～
                        <input type="text" id="hsdnymd_end" class="date_picker" name="ctrl_rev_hsdnymd_srk_to" maxlength="10"
                            value=""
                            onchange="formBtDisabled();applySearchParam(this)"
                        >
                    </td>
                    <td colspan="2">
                        <input type="checkbox" id="ikoFlg" name="ikoFlg" value="true" oninput="applySearchParam(this)">
                        <label for="ikoFlg">2017年11月以前のデータを含める</label>
                    </td>
                    <td>
                        <input class="buttonSize" id="clear" type="button" name="clear_bt" value="クリア" onclick="clr();clearHidden('bioSearchHidden')">
                        <input class="buttonSize" id="search_bt" value="検索" type="button" onclick="searchBioList()">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <!--検索結果-->
    <form class="_form" id="searchResult" name="searchResult">
        <input type="button" id="outExcel" name="outExcel" value="Excel出力" disabled
            data-bs-toggle="modal" data-bs-target="#modal_xlsx" data-bs-message="生物由来卸販売データ一覧をExcel出力しますか？"/>
        <input type="button" id="outCSV" name="outCSV" value="CSV出力" disabled
            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 search_longtextbox" _fixedhead='rows:1; cols:0;'>
                <thead>
                    <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>2017年11月以前データ</th>
                    </tr>
                </thead>
                    <tbody id="result_data" class="result_data"></tbody>
            </table>
            <div id="message_area" class="resultAreaMsg"></div>
        </div>
    </form>
    <form id="search_param_hidden" name="bioSearchHidden">
        <input type="hidden" name="ctrl_wholesaler" value="">
        <input type="hidden" name="ctrl_org_kbn" value="">
        <input type="hidden" name="ctrl_rec_ymd_from" value="">
        <input type="hidden" name="ctrl_rec_ymd_to" value="">
        <input type="hidden" name="ctrl_rec_lot_num" value="">
        <input type="hidden" name="ctrl_data_kbn" value="">
        <input type="hidden" name="ctrl_maker_cd" value="">
        <input type="hidden" name="ctrl_rev_hsdnymd_srk_from" value="">
        <input type="hidden" name="ctrl_rev_hsdnymd_srk_to" value="">
        <input type="checkbox" name="ikoFlg" value="true" style="display: none;">
    </form>
    <form id="download_hidden" name="bioDownloadHidden">
        <input type="hidden" name="ctrl_wholesaler" value="">
        <input type="hidden" name="ctrl_org_kbn" value="">
        <input type="hidden" name="ctrl_rec_ymd_from" value="">
        <input type="hidden" name="ctrl_rec_ymd_to" value="">
        <input type="hidden" name="ctrl_rec_lot_num" value="">
        <input type="hidden" name="ctrl_data_kbn" value="">
        <input type="hidden" name="ctrl_maker_cd" value="">
        <input type="hidden" name="ctrl_rev_hsdnymd_srk_from" value="">
        <input type="hidden" name="ctrl_rev_hsdnymd_srk_to" value="">
        <input type="checkbox" name="ikoFlg" value="true" style="display: none;">
    </form>

    <script type="text/javascript">

        function clearHidden(hiddenName) {
            // 非表示項目をクリア
            const formElement = document[hiddenName]
            const formInputElements = Array.from(formElement.elements)
            for (const formInput of formInputElements) {
                if (formInput.name.startsWith('ctrl_')) {
                    formInput.value = "";
                }
                if (formInput.type === 'checkbox') {
                    formInput.checked = false;
                }
            }
        }
        // CSV/Excelダウンロード処理
        function download(ext) {
            // ローディング開始
            const loading = new Loading();
            loading.start();

            // ダウンロード固有のパラメータを設定
            const downloadRequestParams = {
                user_id: '{{bio.user_id}}',
                ext: ext,
            }
            // 検索パラメータを取得
            const searchParams = createSearchParams('download_hidden')
            $.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=batch_processing';
                            return
                        }

                        if (data.status === 'session_expired') {
                            location.href='/logout/?reason=session_expired';
                            return
                        }
                        // S3の期限付き署名URLがレスポンスされる
                        window.location.href = data.download_url;
                        // ローディング停止
                        loading.stop();
                        $(`#modal_${ext}`).modal('toggle');
                    } catch (e) {
                        // 予期せぬエラーが発生した場合
                        loading.stop();
                        $(`#modal_${ext}`).modal('toggle');
                        $(`#ErrorModal_Unexpected`).modal('toggle');
                        return
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    loading.stop()
                    const responseJson = jqXHR.responseJSON
                    if (responseJson?.detail?.error === 'db_error') {
                        $(`#modal_${ext}`).modal('toggle');
                        $(`#ErrorModal_DB`).modal('toggle');
                        return
                    }
                    if (responseJson?.detail?.error === 'aws_error') {
                        $(`#modal_${ext}`).modal('toggle');
                        $(`#ErrorModal_Unexpected`).modal('toggle');
                        return
                    }

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

        function createSearchParams(paramId) {
            // 検索パラメータを取得
            const formData = $(`#${paramId}`).serializeArray()
            // リクエスト用に加工
            const searchParams = {}
            for (let i = 0; i < formData.length; i++) {
                searchParams[formData[i].name] = formData[i].value
            }

            return searchParams
        }

        function applySearchParam(elem) {
            const bioSearchHiddenForm = document['bioSearchHidden']
            bioSearchHiddenForm[elem.name].value = elem.value

            if (elem.type === 'checkbox') {
                bioSearchHiddenForm[elem.name].checked = elem.checked
            }
        }

        // 生物由来データの検索＆ページネーションの作成
        function searchBioList() {
            const messageArea = $('#message_area')
            messageArea.text('')
            messageArea.hide()
            const loading = new Loading('_loading_for_other')
            const searchParams = createSearchParams('search_param_hidden')
            $('.pagination').pagination({
                dataSource: '/bio/search',
                locator: 'data',
                totalNumberLocator: function(response) {
                    // you can return totalNumber by analyzing response content
                    return response.count
                },
                pageNumber: 1, // 初期ページ番号
                pageSize: 100, //表示するコンテンツ数
                pageRange: 2, //選択されているページネーション番号の両隣に表示する個数
                ellipsisText: '...', //省略文字
                prevText: 'Prev', //「前へ」の文字。エスケープ文字
                nextText: 'Next', //「次へ」の文字。エスケープ文字
                showNavigator: true,
                formatNavigator: '件数: <%= totalNumber %>件 ページ数: <%= totalPage %>',
                ajax: {
                    type: 'POST',
                    data: searchParams,
                    async: true,
                    beforeSend: function() {
                        loading.start()
                    }
                },
                formatAjaxError: function(jqXHR, textStatus, errorThrown) {
                    loading.stop()
                    const responseJson = jqXHR.responseJSON

                    if (!responseJson) {
                        $(`#ErrorModal_Unexpected`).modal('toggle')
                        return
                    }

                    const status = responseJson?.status
                    if (status === 'batch_processing') {
                        location.href='/logout/?reason=batch_processing';
                        return
                    }

                    if (status === 'session_expired') {
                        location.href='/logout/?reason=session_expired';
                        return
                    }

                },
                callback: function(data, pagination) {
                    // ダウンロード用の非表示項目に検索値を埋め込む
                    const bioSearchHiddenForm = document['bioSearchHidden']
                    const bioDownloadHiddenForm = document['bioDownloadHidden']
                    for (const key of Object.keys(searchParams)) {
                        const elem = bioDownloadHiddenForm[key]
                        elem.value = searchParams[key]
                        if (elem.type === 'checkbox') {
                            elem.checked = searchParams[key] === 'true' ? true : false
                        }
                    }
                    $('#result_data').html('')
                    if (pagination.totalNumber === 0) {
                        loading.stop()
                        messageArea.text('対象のデータが存在しません')
                        messageArea.show()
                        $('.pagination').pagination('hide')
                        $('#outExcel').attr('disabled', 'disabled')
                        $('#outCSV').attr('disabled', 'disabled')
                        return
                    }

                    if (pagination.totalNumber > bioDataOverflowMaxLength()) {
                        loading.stop()
                        messageArea.text('検索結果が最大件数を超えました。検索条件を見直しして下さい。')
                        messageArea.show()
                        $('.pagination').pagination('hide')
                        $('#outExcel').attr('disabled', 'disabled')
                        $('#outCSV').attr('disabled', 'disabled')
                        return
                    }
                    messageArea.hide()
                    $('.pagination').pagination('show')
                    $('#result_data').html(pagination_content(data))
                    loading.stop()
                    $('#outExcel').removeAttr('disabled')
                    $('#outCSV').removeAttr('disabled')

                    $('.paginationjs-pages > ul > li').not('.disabled,.active').each(function(index, val) {
                        // paginationにtabindexをつける
                        $(val).attr('tabindex', '0')
                        // Enterキー押下時に要素をクリックできるようにイベントを付加する
                        $(val).on('keypress', function(e) {
                            if (e.code === 'Enter') {
                                $(e.target).click()
                                $(val).off('keypress')
                                return false
                            }
                            $(val).off('keypress')
                        })
                    })
                    // ページ送りしたときにヘッダがずれるのを修正
                    FixedMidashi.remove()
                    FixedMidashi.create()
                }
            })
        }

        function bioDataOverflowMaxLength() {
            const maxlength = '{{bio.search_data_max_length}}'
            return Number(maxlength)
        }

        function pagination_content(datas) {
            const display_keys = [
                'data_kind',
                '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_name',
                'nonyu_fcl_cd',
                'rec_nonyu_fcl_name',
                'whs_rep_nonyu_fcl_name',
                'rec_nonyu_fcl_addr',
                'whs_rep_nonyu_fcl_addr',
                'rec_lot_num',
                'qty',
                'expr_dt',
                'data_kbn',
                'err_dtl_kind',
                'bef_slip_mgt_num',
                'ins_usr',
                'ins_dt',
                'inst_cd',
                'inst_name_form',
                'address',
                'tel_num',
                'v_whs_cd',
                'v_whsorg_cd',
                'whs_org_name',
                'v_tran_cd',
                'iko_flg',
            ];
            return datas.map(function (data) {
                const td = display_keys.map((key) =>{
                    let inner_content = data[key] || '';
                    // 数量のみ右寄せにする
                    const align = key === 'qty' ? 'align="right"' : ''
                    return `<td ${align}>${inner_content}</td>`
                });
                return  `
                <tr class="result_data">
                    ${td}
                </tr>
                `
            })
        }

    </script>

    <!-- Excel出力モーダル -->
    {% with
        modal_id='modal_xlsx',
        modal_title='確認',
        message='生物由来卸販売データ一覧をExcel出力しますか？<br>※出力件数が' + bio.excel_max_lines + '件に制限されます。全件出力したい場合はCSVで出力してください。',
        icon_key='info',
        modal_close_event='',
        buttons = [
            {
                'id': 'excel_confirm_ok',
                'class': 'btn btn-primary',
                'text': 'OK',
                'onclick_event': 'download("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("csv")'
            },
            {
                'id': 'csv_confirm_cancel',
                'class': 'btn btn-secondary',
                'dismiss': 'modal',
                'text': 'Cancel',
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}
    <!-- DB接続失敗エラーモーダル -->
    {% with
        modal_id='ErrorModal_DB',
        modal_title='エラー',
        message='DB接続に失敗しました。しばらく経ってから再度実行してください。',
        icon_key='warning',
        modal_close_event='',
        buttons = [
            {
                'id': 'error_modal_db',
                'class': 'btn btn-primary',
                'dismiss': 'modal',
                'text': 'OK'
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}

    <!-- エラーモーダル -->
    {% with
        modal_id='ErrorModal_Unexpected',
        modal_title='エラー',
        message='サーバーからの応答がありません。しばらく経ってから再度実行してください。',
        icon_key='warning',
        modal_close_event='',
        buttons = [
            {
                'id': 'error_modal_unexpected',
                'class': 'btn btn-primary',
                'text': 'OK',
                'dismiss': 'modal'
            }
        ]
    %}
    {% include '_modal.html' %}
    {% endwith %}

    <!-- ローディング -->
    <!-- ダウンロード中 -->
    {% with progress_message = '出力中...'%}
    {% include '_loading.html' %}
    {% endwith %}
    <!-- それ以外 -->
    {% with progress_message = '', id = '_loading_for_other' %}
    {% include '_loading.html' %}
    {% endwith %}
</body>
</html>