var projectTable;
var projectRowID;
var projectPos;

var quotationTable;
var quotationRowID;
var quotationPos;

var quotation_total;
$(document).ready(function () {
    deptList();
    companyList();
    loadyearmonth();
    loadQuotationTable();

    var actualDate = new Date(); // convert to actual date
    var prevDate = new Date(actualDate.getFullYear(), actualDate.getMonth() - 13, actualDate.getDate());

    var startTxt = prevDate.getFullYear().toString() + "/" + padding(prevDate.getMonth() + 1, 2);
    var endTxt = actualDate.getFullYear().toString() + "/" + padding(actualDate.getMonth() + 1, 2);

    const fpStart = flatpickr("#dateStart", {
        "locale": "zh_tw",
        "plugins": [
            new monthSelectPlugin({
                shorthand: true, //defaults to false
                dateFormat: "Y/m", //defaults to "F Y"
                altFormat: "Y M", //defaults to "F Y"
                theme: "light" // defaults to "light"
            })
        ]
    });

    const fpEnd = flatpickr("#dateEnd", {
        "locale": "zh_tw",
        "plugins": [
            new monthSelectPlugin({
                shorthand: true, //defaults to false
                dateFormat: "Y/m", //defaults to "F Y"
                altFormat: "Y M", //defaults to "F Y"
                theme: "light" // defaults to "light"
            })
        ]
    });

    fpStart.setDate(new Date(startTxt + '/1'))
    fpEnd.setDate(new Date(endTxt + '/1'))

    $("#quotation_range").flatpickr({
        mode: 'range',
        onChange: function (selectedDates, dateStr, instance) {
            if (selectedDates.length == 2) {
                var dateStart = instance.formatDate(selectedDates[0], "Y/m/d");
                var dateEnd = instance.formatDate(selectedDates[1], "Y/m/d");

                $('#quotation_expStart').val(dateStart);
                $('#quotation_expEnd').val(dateEnd);

                // interact with selected dates here
            }
        }
    })

    $('#projectSaveBtn').on('click', function () {
        var company_uid = $('#company_select').val();
        var project_name = $('#project_name').val();
        var project_ps = $('#project_ps').val();
        var project_uid = $('#project_uid').val();
        var method = $('#project_method').val();
        var dept_uid = $('#dept_select').val();

        var msg = '';

        if (company_uid == "") {
            msg += '請選擇客戶公司!\n';
        }

        if (project_name == '') {
            msg += '請輸入專案名稱!\n';
        }

        if (msg != '') {
            alert(msg);
            return;
        }

        var formData = {
            method: method,
            project_uid: project_uid,
            project_name: project_name,
            company_uid: company_uid,
            project_ps: project_ps,
            dept_uid: dept_uid
        }

        $.ajax({
            url: "/Api/addEditDelGetProject",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    var obj = data.projectViews[0];

                    if (method == "add") {
                        projectTable.fnAddData(obj);
                    }

                    if (method == "edit") {
                        projectTable.fnUpdate(obj, projectRowPos);
                    }



                    $('#clientProjectModal').modal('toggle');
                } else {
                    alert(data.message);

                    if (data.err_code == "99999") {
                        location.href = "/Root/Login";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });
    });

    $('#QuotationListNewBtn').on('click', function () {
       
        quotation_total = 0;
        

        $('#quotation_method').val('add');
        $('#clientModelQuotationModal').modal("toggle");
    });

    $('#dept_select').on('change', function () {
        $('#dt-responsive').DataTable().ajax.reload();
    });
    $('#projectNewBtn').on('click', function () {
        $('#project_method').val('add');
        $('#clientProjectModal').modal("toggle");
    });

    $("#modelProject_select").on('change', function () {
        var modelProj_uid = $("#modelProject_select").val();

        $("#modelQuotation_select").empty().append('<option value="">請先選擇專案類型</option>');

        if (modelProj_uid != '') {
            var formData = {
                dept_uid: $('#dept_select').val(),
                modelProj_uid: modelProj_uid
            }

            $.ajax({
                url: "/Api/modalQuotationList",
                type: "post",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "yes") {
                        var obj = data.modelQuotations;

                        

                        $.each(obj, function (i, item) {
                            $("#modelQuotation_select").append($("<option>", {
                                value: item.modelQuotation_uid,
                                text: item.modelQuotation_name
                            }));
                        });



                    } else {
                        alert(data.message);

                        if (data.err_code == "99999") {
                            location.href = "/Root/Login";
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('網路或伺服器發生錯誤，請稍後重試!');
                }
            });
        }
    });

    //套用範本鈕
    $('#applyTemp_btn').on('click', function () {
        var modelProj_uid = $('#modelProject_select').val();
        var modelQuotation_uid = $('#modelQuotation_select').val();
        var dept_uid = $('#dept_select').val();

        if (modelProj_uid == '' || modelQuotation_uid == '') {
            alert('請選擇要套用的範本!');
            return;
        }

        var formData = {
            dept_uid: dept_uid,
            modelQuotation_uid: modelQuotation_uid,
            modelProj_uid: modelProj_uid,
            method: 'get'
        }

        $.ajax({
            url: "/Api/getModelQuotation",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    var obj = data.modelQuotationDetails[0];

                    quotation_total = 0;

                    var htmlCode = '';
                    $.each(obj.modelMainItemDetails, function (i, item) {
                        htmlCode += mainItemHtml(item);
                    });

                    $('#quotation_noTaxTotal').val(quotation_total).trigger('change');

                    $('#quotation_tax').val(Math.round(quotation_total * 0.05)).trigger('change');

                    $('#quotation_grandTotal').val(quotation_total + Math.round(quotation_total * 0.05)).trigger('change');

                    $('#modelItem_div').html(htmlCode);

                
                } else {
                    alert(data.message);

                    if (data.err_code == "99999") {
                        location.href = "/Root/Login";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });

    });
    function loadyearmonth() {
        var actualDate = new Date(); // convert to actual date

        var nowYear = actualDate.getFullYear();

        for (tmpY = nowYear; tmpY >= 2019; tmpY--) {
            $("#project_year").append($("<option></option>").attr("value", tmpY).text(tmpY + " 年度"));
        }

        for (tmpM = 1; tmpM <= 12; tmpM++) {
            $("#project_month").append($("<option></option>").attr("value", tmpM).text(tmpM + " 月"));

        }

    }
});

function loadContactPersion() {
    var data = $('#dt-responsive').DataTable().row(projectRowPos).data();
    var uid = $('#quotation_company_uid').val();
    var formData = {
        company_uid: uid
    }

    $.ajax({
        url: "/Api/contactPersonList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.contactPersons;

                $("#contactPerson_uid").empty();

                $.each(obj, function (i, item) {
                    $("#contactPerson_uid").append($("<option>", {
                        value: item.contactPerson_uid,
                        text: item.contactPerson_name + '   (Tel:' + item.contactPerson_tel + ',  Email:' + item.contactPerson_email + ')'
                    }));
                });
            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function loadQuotation_custom() {
    var formData = {
        dept_uid: $('#dept_select').val()
    }

    $.ajax({
        url: "/Api/modalProjList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.modelProjs;

                $("#modelProject_select").empty().append('<option value="">請選擇專案類型</option>');
                $("#modelQuotation_select").empty().append('<option value="">請先選擇專案類型</option>');

                $.each(obj, function (i, item) {
                    $("#modelProject_select").append($("<option>", {
                        value: item.modelProj_uid,
                        text: item.modelProj_name
                    }));
                });

                

            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function buttonClick(obj) {
    var type = obj.getAttribute('data-method');
    var uid = obj.getAttribute('data-uid');
    var dept_uid = $('#dept_select').val();

    projectRowID = $('#' + uid);

    projectRowPos = projectTable.fnGetPosition($('#' + uid)[0]);

    if (type == "preview") {
        var data = $('#dt-responsive').DataTable().row(projectRowPos).data();
        
        var project_name = data.project_name;
        var company_name = data.company_name;
        var company_uid = data.company_uid;

        var project_info_div = '專案名稱: ' + project_name + ", 客戶公司:" + company_name;

        var formData = {
            project_uid: uid,
            dept_uid: dept_uid
        }

        $.ajax({
            url: "/Api/quotationList",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {

                    var obj = data.quotationViews;

                    $('#dt-responsive-quotation').dataTable().fnClearTable();
                    if (obj.length > 0) {

                        $('#dt-responsive-quotation').dataTable().fnAddData(obj);
                    }

                    

                    $('#quotation_project_uid').val(uid);
                    $('#quotation_company_uid').val(company_uid);
                    $('#project_info_div').text(project_info_div);

                    loadContactPersion();
                    $('#clientQuotationListModal').modal('toggle');
                   
                } else {
                    alert(data.message);

                    if (data.err_code == "99999") {
                        location.href = "/Root/Login";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });

        

        
      
    }

    if (type == "edit") {
        var formData = {
            method: 'get',
            project_uid: uid,
            dept_uid: dept_uid
        }

        $.ajax({
            url: "/Api/addEditDelGetProject",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    var obj = data.projectViews[0];

                    $("#project_method").val('edit');
                    $("#project_uid").val(obj.project_uid);
                    $("#project_name").val(obj.project_name).trigger('change');
                    $("#company_select").val(obj.company_uid);
                    $("#project_ps").val(obj.project_ps).trigger('change');

                    $('#clientProjectModal').modal('toggle');
                } else {
                    alert(data.message);

                    if (data.err_code == "99999") {
                        location.href = "/Root/Login";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });


    }

    if (type == "del") {
        if (confirm('確定刪除此筆專案資料? 所有此專案的報價單項目也會一併刪除~')) {
            if (confirm('再次確認是否刪除所有此專案與報價單項目?')) {
                var formData = {
                    method: 'del',
                    project_uid: uid,
                    dept_uid: dept_uid
                }

                $.ajax({
                    url: "/Api/addEditDelGetProject",
                    type: "del",
                    data: formData,
                    success: function (data, textStatus, jqXHR) {
                        if (data.ret == "yes") {
                            var row = projectTable.api().row(projectRowID).remove().draw(false);
                            alert('刪除成功');

                        } else {
                            alert(data.message);

                            if (data.err_code == "99999") {
                                location.href = "/Root/Login";
                            }
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('網路或伺服器發生錯誤，請稍後重試!');
                    }
                });
            }

        }
    }
}

function loadQuotationTable() {
    var dataTables = {
        init: function init() {

            this.bindUIActions();
        },
        bindUIActions: function bindUIActions() {

            // event handlers
            this.table = this.handleDataTables();

            // add buttons
            //this.table.buttons().container().appendTo('#dt-buttons').unwrap();
        },
        handleDataTables: function handleDataTables() {
            //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
            return $('#dt-responsive-quotation').DataTable({
                dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                lengthChange: true,
                lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
                pageLength: 50,
                buttons: [
                    //{
                    //    text: '休假設定',
                    //    action: function (e, dt, node, config) {
                    //        vacationBtnFun();

                    //    }
                    //},
                    //'excelHtml5'
                ],
                language: {
                    paginate: {
                        previous: '<i class="fa fa-lg fa-angle-left"></i>',
                        next: '<i class="fa fa-lg fa-angle-right"></i>'
                    },
                    buttons: {
                        copyTitle: 'Data copied',
                        copyKeys: 'Use your keyboard or menu to select the copy command'
                    }
                },
                autoWidth: false,  
                rowId: 'quotation_uid',
                deferRender: true,
                initComplete: function () {
                    quotationTable = $('#dt-responsive-quotation').dataTable();
                    $('#dt-responsive-quotation').on('click', 'a', function () {
                        buttonQuotationClick(this);
                    });

                    $('#dt-responsive-quotation').on('click', 'button', function () {
                        buttonQuotationClick(this);
                    });


                },
                order: [[0, 'desc']],
                info: true,
                search: "搜尋:",
                searching: true,
                columns: [
                    { data: 'quotation_name', className: 'align-top text-left', orderable: true, searchable: true },
                    { data: 'quotation_date', className: 'align-top text-left', orderable: false, searchable: true },
                    { data: 'contactPerson_name', className: 'align-top text-left', orderable: false, searchable: true },
                    { data: 'quotation_uid', className: 'align-top text-center', orderable: false, searchable: false }
                ],
                columnDefs: [
                    {
                        targets: 0,
                        className: 'align-middle text-left',
                        orderable: false,
                        searchable: true,
                        render: function render(data, type, row, meta) {


                            return '<a href="javascript: void(0);" data-uid="' + row.quotation_uid + '" data-version="' + row.quotation_version + '" data-method="preview" >' + row.quotation_name + '</a>';

                        }
                    },
                    {
                        targets: 3,
                        orderable: false,
                        searchable: false,
                        render: function render(data, type, row, meta) {
                            var ret = '';

                            ret += '<button type="button" data-uid="' + row.quotation_uid + '" data-version="' + row.quotation_version + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
                            ret += '<button type="button" data-uid="' + row.quotation_uid + '" data-version="' + row.quotation_version + '" data-method="del" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
                            return ret;
                        }
                    }

                ],
                responsive: {
                    details: {
                        display: $.fn.dataTable.Responsive.display.childRowImmediate,
                        type: ''
                    }
                }
            });
        },
        handleSearchRecords: function handleSearchRecords() {
            var self = this;

            $('#table-search, #filterBy').on('keyup change focus', function (e) {
                var filterBy = $('#filterBy').val();
                var hasFilter = filterBy !== '';
                var value = $('#table-search').val();

                self.table.search('').columns().search('').draw();

                if (hasFilter) {
                    self.table.columns(filterBy).search(value).draw();
                } else {
                    self.table.search(value).draw();
                }

            });
        }
    }

    dataTables.init();
}
function loadDataTable() {
    var dataTables = {
        init: function init() {

            this.bindUIActions();
        },
        bindUIActions: function bindUIActions() {

            // event handlers
            this.table = this.handleDataTables();

            // add buttons
            //this.table.buttons().container().appendTo('#dt-buttons').unwrap();
        },
        handleDataTables: function handleDataTables() {
            //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
            return $('#dt-responsive').DataTable({
                dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                lengthChange: true,
                lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
                pageLength: 50,
                buttons: [
                    //{
                    //    text: '休假設定',
                    //    action: function (e, dt, node, config) {
                    //        vacationBtnFun();

                    //    }
                    //},
                    //'excelHtml5'
                ],
                language: {
                    paginate: {
                        previous: '<i class="fa fa-lg fa-angle-left"></i>',
                        next: '<i class="fa fa-lg fa-angle-right"></i>'
                    },
                    buttons: {
                        copyTitle: 'Data copied',
                        copyKeys: 'Use your keyboard or menu to select the copy command'
                    }
                },
                autoWidth: false,
                ajax: {
                    url: '/Api/projectViewList',
                    type: 'POST',
                    data: function (d) {
                        Object.assign(d, {
                            dept_uid: $('#dept_select').val(),
                            start_txt: $('#dateStart').val(),
                            end_txt: $('#dateEnd').val()
                        });

                        return d;
                    },
                    dataSrc: 'projectViews'
                },
                rowId: 'project_uid',
                deferRender: true,
                initComplete: function () {
                    projectTable = $('#dt-responsive').dataTable();
                    $('#dt-responsive').on('click', 'a', function () {
                        buttonClick(this);
                    });

                    $('#dt-responsive').on('click', 'button', function () {
                        buttonClick(this);
                    });


                },
                order: [[0, 'desc']],
                info: true,
                search: "搜尋:",
                searching: true,
                columns: [
                    { data: 'project_datetime', className: 'align-top text-left', orderable: true, searchable: true },
                    { data: 'project_name', className: 'align-top text-left', orderable: false, searchable: true },
                    { data: 'company_name', className: 'align-top text-left', orderable: false, searchable: true },
                    { data: 'project_ps', className: 'align-top text-left', orderable: false, searchable: false },
                    { data: 'project_uid', className: 'align-top text-center', orderable: false, searchable: false }
                ],
                columnDefs: [
                    {
                        targets: 1,
                        className: 'align-middle text-left',
                        orderable: false,
                        searchable: true,
                        render: function render(data, type, row, meta) {


                            return '<a href="javascript: void(0);" data-uid="' + row.project_uid + '" data-method="preview" >' + row.project_name + '</a>';

                        }
                    },
                    {
                        targets: 4,
                        orderable: false,
                        searchable: false,
                        render: function render(data, type, row, meta) {
                            var ret = '';

                            ret += '<button type="button" data-uid="' + row.project_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
                            ret += '<button type="button" data-uid="' + row.project_uid + '" data-method="del" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
                            return ret;
                        }
                    }

                ],
                responsive: {
                    details: {
                        display: $.fn.dataTable.Responsive.display.childRowImmediate,
                        type: ''
                    }
                }
            });
        },
        handleSearchRecords: function handleSearchRecords() {
            var self = this;

            $('#table-search, #filterBy').on('keyup change focus', function (e) {
                var filterBy = $('#filterBy').val();
                var hasFilter = filterBy !== '';
                var value = $('#table-search').val();

                self.table.search('').columns().search('').draw();

                if (hasFilter) {
                    self.table.columns(filterBy).search(value).draw();
                } else {
                    self.table.search(value).draw();
                }

            });
        }
    }

    dataTables.init();
}

function companyList() {
    $.ajax({
        url: "/Api/companyList",
        type: "post",
        data: null,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.companys;
                var items = "";

                $("#company_select").append($("<option>", {
                    value: '',
                    text: '請選擇客戶公司'
                }));
                $.each(obj, function (i, item) {


                    $("#company_select").append($("<option>", {
                        value: item.company_uid,
                        text: item.company_name
                    }));


                });
             

            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function deptList() {
    $.ajax({
        url: "/Api/deptList",
        type: "post",
        data: null,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.depts;
                var items = "";
                $.each(obj, function (i, item) {


                    $("#dept_select").append($("<option>", {
                        value: item.dept_uid,
                        text: item.dept_name
                    }));


                });
                loadDataTable();
                loadQuotation_custom();
            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function mainItemHtml(obj) {
    var ac_string = '';

    if (obj.modelMainItem_ac == 0) {
        ac_string = '無';
    } else {
        ac_string = obj.modelMainItem_ac + '%'
    }

    var mainItem_total = 0;
    var mainItem_ac = 0.0;

    $.each(obj.modelSubItems, function (i, subitem) {
        var subitem_val = subitem.modelSubItem_subTotal;
        mainItem_total += subitem_val;
        if (subitem.modelSubItem_hasAC == 'Y') {
            
            mainItem_ac += (subitem_val * (obj.modelMainItem_ac / 100));
        }
    });

    var mainItem_totalac = Math.round(mainItem_total + mainItem_ac);

    quotation_total += mainItem_totalac;

    var htmlCode = '';
    htmlCode += '<!-- .card -->';
    htmlCode += '<div class="card card-fluid" data-uid="' + obj.modelMainItem_uid + '"  data-main-uid="' + obj.mainItem_uid + '" data-type="add">';
    htmlCode += '    <div class="card-header border-bottom-0 btn-group">';
    htmlCode += '    <input type="hidden" data-name="quotationMainItem_name" value="' + obj.modelMainItem_name + '" />';
    htmlCode += '    <input type="hidden" data-name="quotationMainItem_ac" value="' + obj.modelMainItem_ac + '" />';
    htmlCode += '    <input type="hidden" data-name="quotationMainItem_name_old" value="" />';
    htmlCode += '    <input type="hidden" data-name="quotationMainItem_ac_old" value="" />';
    htmlCode += '        <span data-span="quotationMainItem_name" style="width: 60%;">' + obj.modelMainItem_name + '&nbsp;</span>';
    htmlCode += '        <span data-span="quotationMainItem_name" style="width: 10%;">AC:&nbsp;' + ac_string + '&nbsp;</span>';
    htmlCode += '        <span data-span="quotationMainItem_subTotal" style="text-align: right;">項目合計:&nbsp;' + AppendComma(mainItem_totalac) + '</span>';
    htmlCode += '        <div class="dd-nodrag btn-group ml-auto">';
    htmlCode += '            <button type="button" class="btn btn-sm btn-secondary" onclick="editQuotationMainItem(this);">Edit</button> <button type="button" onclick="delQuotationMainItem(this);" class="btn btn-sm btn-secondary"><i class="far fa-trash-alt"></i></button>';
    htmlCode += '        </div>';
    htmlCode += '        ';
    htmlCode += '    </div>';
    htmlCode += '        <!-- .dd-list -->';
    htmlCode += '        <ol class="dd-list">';

    $.each(obj.modelSubItems, function (i, subitem) {
        htmlCode += subItemHtml(subitem);
    });

    htmlCode += '       ';
    htmlCode += '        </ol><!-- /.dd-list -->';
    htmlCode += ' ';
    htmlCode += '    <!-- .card-footer -->';
    htmlCode += '    <div class="card-footer">';
    htmlCode += '        <a href="javascript: void(0);" onclick="addQuotationSubItem(this);" class="card-footer-item justify-content-start"><span><i class="fa fa-plus-circle mr-1"></i> 添加子項目</span></a>';
    htmlCode += '    </div><!-- /.card-footer -->';
    htmlCode += '</div><!-- /.card -->';

    return htmlCode;
}

function subItemHtml(obj) {
    var htmlCode = '';

    htmlCode += '   <li class="dd-item dd-nodrag" data-model-subitem-uid="' + obj.modelSubItem_uid + '" data-method="edit">';
    htmlCode += '       <textarea style="display:none;" data-name="subItem_uid">' + obj.subItem_uid + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_uid">' + obj.modelSubItem_uid + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_name">' + obj.modelSubItem_name + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_price">' + obj.modelSubItem_price + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_unitType">' + obj.modelSubItem_unitType + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_number">' + obj.modelSubItem_number + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_hasAC">' + obj.modelSubItem_hasAC + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_subTotal">' + obj.modelSubItem_subTotal + '</textarea>';
    htmlCode += '       <textarea data-name="quotationSubItem_descript" style="display:none;">' + obj.modelSubItem_descript + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="subItem_uid_old">' + obj.subItem_uid + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_uid_old">' + obj.modelSubItem_uid + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_name_old">' + obj.modelSubItem_name + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_price_old">' + obj.modelSubItem_price + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_unitType_old">' + obj.modelSubItem_unitType + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_number_old">' + obj.modelSubItem_number + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_hasAC_old">' + obj.modelSubItem_hasAC + '</textarea>';
    htmlCode += '       <textarea style="display:none;" data-name="quotationSubItem_subTotal_old">' + obj.modelSubItem_subTotal + '</textarea>';
    htmlCode += '       <textarea data-name="quotationSubItem_descript_old" style="display:none;">' + obj.modelSubItem_descript + '</textarea>';
    htmlCode += '       <div class="dd-handle">';
    htmlCode += '           <div class="list-group-item">';
    htmlCode += '               <div class="list-group-item-figure">';
    htmlCode += '                   <span class="drag-indicator"></span>';
    htmlCode += '               </div>';
    htmlCode += '               <div class="list-group-item-body">';
    htmlCode += '                   <div class="team">';
    htmlCode += '                       <h4 data-name="subname" class="list-group-item-title">';
    htmlCode += '                           ' + obj.modelSubItem_name;
    htmlCode += '                       </h4><br/>';
    htmlCode += '                    <p class="list-group-item-text" data-name="subdesc" style="white-space: pre-line;font-size: 13px;">';
    htmlCode += '                           ' + obj.modelSubItem_descript;
    htmlCode += '                    </p><br/>';
    htmlCode += '                    <p class="list-group-item-text" data-name="subsummy" style="white-space: pre-line;font-size: 11px;">';
    htmlCode += '                           單價 NT$' + AppendComma(obj.modelSubItem_price) + ', 數量 ' + obj.modelSubItem_number + ', 單位 ' + obj.modelSubItem_unitType + '\r\n';
    htmlCode += '                           小計 NT$' + AppendComma(obj.modelSubItem_subTotal) + '\r\n';
    htmlCode += '                           AC(' + obj.modelSubItem_hasAC + ')';
    htmlCode += '                    </p>';
    htmlCode += '                   </div>';
    htmlCode += '               </div>';
    htmlCode += '           </div>';
    htmlCode += '           <div class="dd-nodrag btn-group ml-auto">';
    htmlCode += '            <button type="button" onclick="editQuotationSubItemButton(this);" class="btn btn-sm btn-secondary">Edit</button> <button type="button" onclick="delQuotationSubItemButton(this);" class="btn btn-sm btn-secondary"><i class="far fa-trash-alt"></i></button>';
    htmlCode += '           </div>';
    htmlCode += '       </div>         ';
    htmlCode += '   </li>';

    return htmlCode;
}