{% extends "tables/editor_table.html" %}
{% block table_body %}
<!-- <script type="text/javascript" src="/static/config.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
<script type="text/javascript" src="/static/js/yo.js"></script>
<tbody id='swfData'>
    {% for idx in range(0, length) %}
    <tr>
        <td class="table__data">{{ idx + 1 }}</td>
        <td class="table__data">{{ '[' + furnitures[idx].type + '] ' + furnitures[idx].title }}</td>
        <td class="table__data">{{ furnitures[idx].date }}</td>
        <!-- <td class="table__data">1</td> -->
        <td class="table__data"><input type="checkbox" {{ 'checked' if (furnitures[idx].draft.lower()=='false' ) }}
                onclick="toggleDraft(this,'{{ furnitures[idx].url }}');" /></td>
        <td>
            <div class="d-flex justify-content-center">
                <button class="btn btn_light mr-1" onclick="getHeader('{{ furnitures[idx].url }}');"><b>修改</b> <i
                        class="fas fa-pencil-alt"></i></button>
                <button class="btn__delete" value="delete"
                    onclick="if(confirm('確定要刪除?')) delfur('{{ furnitures[idx].url }}');"><i
                        class="fas fa-trash-alt"></i></button>
            </div>

        </td>
    </tr>
    {% endfor %}
</tbody>
<script>$('#swfData')[0].innerHTML = ReplaceSwfType($('#swfData')[0].innerHTML);</script>
{% endblock table_body %}


{% block modal_body %}

<div class="form-group">
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>
                    <h4>名稱</h4>
                </td>
                <td>
                    <input class="form-control" id="newSwfName" type="text" />
                    <div class="mt-1 text-danger">（建議字數：15 字內）</div>
                </td>
            </tr>
            <tr>
                <td>
                    <h4>類別</h4>
                </td>
                <td><select id="newSwfDropdown"></select></td>
            </tr>
        </tbody>
    </table>

    <!-- 類別：<select id="newSwfDropdown"></select><br />
    名稱：<input id="newSwfName" type="text" /><br /> -->
    
    <!--     敘述：<input id="swfDesc" type="text" /><br />
    <hr>
    圖片：
    <div id="editorjs" style='border:inset 1px;'></div>
    <hr>
    定價：<input id="swfPrice" type="text" /><br />
    顏色：<input id="swfColor" type="text" /><br />
    尺寸：<input id="swfSize" type="text" /><br />
    材質：<input id="swfMet" type="text" /><br /> -->
</div>
<div class="modal-footer  pb-0 border-0">
    <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn__submitadd" onclick="newfur();">完成</button>
</div>
<script>GenSwfDD($('#newSwfDropdown')[0]);</script>
<script>
    function newfur() {
        //alert('/backstage/new_system_furniture?newSwfDropdown='+ $('#newSwfDropdown').val() +'&newSwfName='+$('#newSwfName').val());
        axios.get('/backstage/new_system_furniture?newSwfDropdown=' + $('#newSwfDropdown').val() + '&newSwfName=' + $('#newSwfName').val()).then((data) => { location.reload() });
    }
    function delfur(iurl) {
        //alert('/backstage/new_system_furniture?newSwfDropdown='+ $('#newSwfDropdown').val() +'&newSwfName='+$('#newSwfName').val());
        axios.get('/backstage/del_system_furniture?url=' + iurl).then((data) => { location.reload() });
    }
</script>
{% endblock modal_body %}

{% block main_info_modal_body %}
<style>
    .image-tool__caption {
        display: none;
    }
</style>
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title">模組系統櫃-修改</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>

            <div class="modal-body">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <td>
                                <h4>名稱</h4>
                            </td>
                            <td>
                                <input class="form-control" id="ctitle" type="text" />
                                <div class="mt-1 text-danger">（建議字數：15 字內）</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                              <h4>Meta 標題</h4>
                            </td>
                            <td><input class="form-control" id="cmetattl" type="text" />
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <h4>Meta 說明</h4>
                            </td>
                            <td><input class="form-control" id="cmetadsc" type="text" />
                            </td>
                          </tr>
                        <tr>
                            <td>
                                <h4>類別</h4>
                            </td>
                            <td><select id="swfDropdown" onchange="$('#ctype').val(this.value);" disabled></select></td>
                        </tr>
                        <tr>
                            <td>
                                <h4>敘述</h4>
                            </td>
                            <td>
                                <textarea class="form-control" rows="3" id="swfDesc" type="text" style="width: 100%;"></textarea>
                                <div class="mt-1 text-danger">（建議字數：50 字內）</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h4>日期</h4>
                            </td>
                            <td><input class="form-control" id="cdate" type="text" /></td>
                        </tr>
                        <tr>
                            <td>
                                <h4>是否顯示</h4>
                            </td>
                            <td><input id="cdraft" type="checkbox" checked="true" /></td>
                        </tr>
                        <tr>
                            <td colspan="2"> </td>
                        </tr>
                        <tr>
                            <td>
                                <h4>單品圖</h4>
                            </td>
                            <td>
                                <div class="form-control" id="editorjs" style='border:inset 1px;'></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h4>定價</h4>
                            </td>
                            <td><input class="form-control" id="swfPrice" type="text" style="width: 100%;" /></td>
                        </tr>
                        <tr>
                            <td>
                                <h4>顏色</h4>
                            </td>
                            <td><input class="form-control" id="swfColor" type="text" style="width: 100%;" /></td>
                        </tr>
                        <tr>
                            <td>
                                <h4>尺寸(mm)</h4>
                            </td>
                            <td><input class="form-control" id="swfSize" type="text" style="width: 100%;" /></td>
                        </tr>
                        <tr>
                            <td>
                                <h4>材質</h4>
                            </td>
                            <td><input class="form-control" id="swfMat" type="text" style="width: 100%;" /></td>
                        </tr>
                        <tr>
                            <td>
                                <h4>備註</h4>
                            </td>
                            <td><input class="form-control" id="swfMemo" type="text" style="width: 100%;" /></td>
                        </tr>
                        <tr>
                            <td>
                                <h4>規格圖</h4>
                            </td>
                            <td>
                                <div class="form-control" id="editorjs1" style='border:inset 1px;'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="d-none">
                    <input class="form-control" id="cfile" type="file" />
                    <input id="ctype" type="text" /><br />
                    <input id="curl" type="text" /><br />
                    <input id="cimage" type="text" /><br />
                    <input id="cweight" type="text" /><br />
                    <input id="ctag" type="text" /><br />
                    <input id="ccategories" type="text" /><br />
                    <input id="ccol1" type="text" /><br />
                    <input id="ccol2" type="text" /><br />
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn__submitadd" id='addNewButton'
                    onclick="UpdateProduct();">完成</button>
                <!-- <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button> -->
            </div>

        </div>
    </div>
</div>
<script>GenSwfDD($('#swfDropdown')[0]);</script>
<script>

    function UpdateProduct() {
        editor.save().then((mimg) => {
            sectionContent = "";
            editor1.save().then((specimg) => {
                sectionContent = GenProductSection(mimg, specimg);

                var mdContent = GetMdHeader();
                
                mdContent += '\n' + sectionContent;
                //GenProductSection(outputData);
                postData = {
                    content: mdContent,
                    url: editTarget
                };

                /* alert(contentApiUrl);
                alert(editTarget); */
                //alert(mdContent);
                axios.post(contentApiUrl + editTarget, json = postData).then(({ data }) => {
                    alert('作品資料已儲存');
                }).finally((data) => { location.reload(); });
            });
        }).catch((error) => {
            console.log('Saving failed: ', error)
        })
    };
</script>
{% endblock %}