diff --git a/Views/Home/ModalList.cshtml b/Views/Home/ModalList.cshtml
index a2d41333..91714695 100644
--- a/Views/Home/ModalList.cshtml
+++ b/Views/Home/ModalList.cshtml
@@ -377,6 +377,8 @@
         </div><!-- /.modal-dialog -->
     </div>
 </form><!-- /.modal -->
+
+
 <!-- .modal -->
 <form id="clientModelMainItemForm" name="clientModelMainItemForm">
     <div class="modal fade" id="modelMainItemModal" tabindex="-1" role="dialog" aria-labelledby="modelMainItemModalLabel" data-backdrop="static"
@@ -411,4 +413,63 @@
             </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div>
+</form><!-- /.modal -->
+
+<!-- .modal -->
+<form id="clientModelSubItemForm" name="clientModelSubItemForm">
+    <div class="modal fade" id="modelSubItemModal" tabindex="-1" role="dialog" aria-labelledby="modelSubItemModalLabel" data-backdrop="static"
+         data-keyboard="false" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="modelSubItemModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">次項目</span> <input id="group_Subitem" type="text" class="form-control form-control-lg" value="" placeholder="次項目" readonly="readonly" required="">
+                    </h6>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="modelSubItem_method" />
+                    <input type="hidden" id="modelSubItem_uid" />
+                    <input type="hidden" id="parent_Item_uid" />
+                    <input type="hidden" id="model_parent_data_uid" />
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <label class="control-label" for="modelSubItem_name">次項目名稱</label> <input id="modelSubItem_name" maxlength="32" type="text" class="form-control" />
+                    </div><!-- /.form-group -->
+                    <div class="form-group">
+                        <label for="tf6">製作說明</label>
+                        <textarea class="form-control" id="modelSubItem_descript" rows="5"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="modal_subItem_price">單價</label> <!-- .input-group -->
+                        <div class="input-group">
+                            <label class="input-group-prepend" for="modelSubItem_price"><span class="badge">$</span></label> <input type="text" class="form-control" maxlength="8" id="modelSubItem_price">
+                        </div><!-- /.input-group -->
+                    </div>
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="modelSubItem_unitType" class="form-control" value="" placeholder="單位" maxlength="6" required=""> <label for="modelSubItem_unitType">單位</label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="modelSubItem_number" class="form-control" value="" placeholder="數量" maxlength="5" required=""> <label for="modelSubItem_number">數量</label>
+                        </div>
+                    </div>
+                    <!-- .list-group-item -->
+                    <div class="list-group-item d-flex justify-content-between align-items-center">
+                        <span>是否加上AC</span> <!-- .switcher-control -->
+                        <label class="switcher-control switcher-control-lg"><input type="checkbox" id="modelSubItem_hasAC" class="switcher-input"> <span class="switcher-indicator"></span> <span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label> <!-- /.switcher-control -->
+                    </div><!-- /.list-group-item -->
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="modelSubItemDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal" data-target="#modelSubItemModal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
 </form><!-- /.modal -->
\ No newline at end of file
diff --git a/wwwroot/assets/javascript/custom/modallist.js b/wwwroot/assets/javascript/custom/modallist.js
index 1c4dc5ca..c145b715 100644
--- a/wwwroot/assets/javascript/custom/modallist.js
+++ b/wwwroot/assets/javascript/custom/modallist.js
@@ -8,6 +8,15 @@ var modelQuotationRowID;
 
 var mainItem_items = [];
 var mainItem_map = {};
+
+var subItem_items = [];
+var subItem_map = {};
+
+var deledMainItems = [];
+var deledSubItems = [];
+
+var preSubItem_name = '';
+
 $(document).ready(function () {
     deptList();
     loadModelQuotationDataTable();
@@ -16,13 +25,160 @@ $(document).ready(function () {
         $('#dt-responsive').DataTable().ajax.reload();
     });
 
+    //新增次項目對話框儲存鈕
+    $('#modelSubItemDialogSaveBtn').on('click', function () {
+        var method = $('#modelSubItem_method').val();
+        var subItem_uid = $('#modelSubItem_uid').val();
+        var modelSubItem_uid = $('#parent_Item_uid').val();
+        var modelSubItem_name = $('#modelSubItem_name').val();
+        var modelSubItem_descript = $('#modelSubItem_descript').val();
+        var modelSubItem_price = $('#modelSubItem_price').val();
+        var modelSubItem_unitType = $('#modelSubItem_unitType').val();
+        var modelSubItem_number = $('#modelSubItem_number').val();
+        var modelSubItem_hasAC = 'N';
+        var parent_data_uid = $('#model_parent_data_uid').val();
+
+        if ($('#modelSubItem_hasAC').prop("checked")) {
+            modelSubItem_hasAC = 'Y';
+        } else {
+            modelSubItem_hasAC = 'N';
+        }
+
+        var msg = '';
+
+        if (modelSubItem_price == '') {
+            msg += '請輸入單價!\n';
+        } else {
+            if (modelSubItem_price.isNumber() == false) {
+                msg += '單價必須為數字!\n';
+            }
+        }
+
+        if (modelSubItem_number == '') {
+            msg += '請輸入數量!\n';
+        } else {
+            if (modelSubItem_number.isNumber() == false) {
+                msg += '數量必須為數字!\n';
+            }
+        }
+
+        if (msg != '') {
+            alert(msg);
+            return;
+        }
+
+        var modelSubItem_subTotal = modelSubItem_price * modelSubItem_number;
+
+        
+
+        if (method == 'add') {
+            var datauid = Math.floor(Math.random() * 999999999);
+            var htmlCode = '';
+
+            htmlCode += '   <li class="dd-item dd-nodrag" data-model-subitem-uid="' + datauid + '" data-method="add">';
+            htmlCode += '       <input type="hidden" data-name="subItem_uid" value="' + subItem_uid + '"/>';
+            htmlCode += '       <input type="hidden" data-name="model-subitem-name" value="' + modelSubItem_name + '"/>';
+            htmlCode += '       <input type="hidden" data-name="model-subitem-price" value="' + modelSubItem_price + '"/>';
+            htmlCode += '       <input type="hidden" data-name="model-subitem-unitType" value="' + modelSubItem_unitType + '"/>';
+            htmlCode += '       <input type="hidden" data-name="model-subitem-number" value="' + modelSubItem_number + '"/>';
+            htmlCode += '       <input type="hidden" data-name="model-subitem-hasAC" value="' + modelSubItem_hasAC + '"/>';
+            htmlCode += '       <input type="hidden" data-name="model-subitem-subTotal" value="' + modelSubItem_subTotal + '"/>';
+            htmlCode += '       <textarea ndata-name="model-subitem-descript" style="display:none;">' + 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 += '                           ' + modelSubItem_name + '\r\n';
+            htmlCode += '                       </h4><br/>';
+            htmlCode += '                    <p class="list-group-item-text" data-name="subdesc" style="white-space: pre-line;font-size: 13px;">';
+            htmlCode += '                           ' + modelSubItem_descript + '\r\n';
+            htmlCode += '                    </p><br/>';
+            htmlCode += '                    <p class="list-group-item-text" data-name="subsummy" style="white-space: pre-line;font-size: 12px;">';
+            htmlCode += '                           單價 NT$' + AppendComma(modelSubItem_price) + ', 數量 ' + modelSubItem_number + ', 單位 ' + modelSubItem_unitType + '\r\n';
+            htmlCode += '                           小計 NT$' + AppendComma(modelSubItem_subTotal) + '\r\n';
+            htmlCode += '                           AC(' + modelSubItem_hasAC + ')';
+            htmlCode += '                    </p>';
+            htmlCode += '                   </div>';
+            htmlCode += '               </div>';
+            htmlCode += '           </div>';
+            htmlCode += '           <div class="dd-nodrag btn-group ml-auto">';
+            htmlCode += '            <button type="button" onclick="editSubItemButton(this);" class="btn btn-sm btn-secondary">Edit</button> <button type="button" onclick="delSubItemButton(this);" class="btn btn-sm btn-secondary"><i class="far fa-trash-alt"></i></button>';
+            htmlCode += '           </div>';
+            htmlCode += '       </div>         ';
+            htmlCode += '   </li>';
+
+            var htmlObj = $('#modelItem_div').find('[data-uid="' + parent_data_uid + '"]').find('ol');
+
+            //var htmlObj = $('#' + parent_data_uid).find('ol');
+            htmlObj.append(htmlCode);
+
+            $('#modelSubItemModal').modal('toggle');
+        }
+
+    });
+
     //新增主項目對話框儲存鈕
     $('#modelMainItemDialogSaveBtn').on('click', function () {
+        var modelMainItem_uid = $('#modelMainItem_uid').val();
+        var mainItem_uid = $('#parent_mainItem_uid').val();
+        var method = $('#modelMainItem_method').val();
+        var modelMainItem_name = $('#modelMainItem_name').val();
 
+        if (modelMainItem_name == "") {
+            alert('主項目名稱不得為空白!');
+            return;
+        }
+
+        if (method == 'edit') {
+            var obj = $('#modelItem_div').find("[data-uid='" + modelMainItem_uid + "']");
+            $(obj).prop('data-main-uid', mainItem_uid);
+            $(obj).find("[data-name='mainItem_name']").val(modelMainItem_name);
+            $(obj).find("[data-span='mainItem_name']").text(modelMainItem_name);
+
+            $('#modelMainItemModal').modal('toggle');
+        }
+
+        if (method == 'add') {
+            var datauid = Math.floor(Math.random() * 99999999);
+
+            var htmlCode = '';
+            htmlCode += '<!-- .card -->';
+            htmlCode += '<div class="card card-fluid" data-uid="' + datauid + '"  data-main-uid="' + mainItem_uid + '" data-type="add">';
+            htmlCode += '    <div class="card-header border-bottom-0 btn-group">';
+            htmlCode += '    <input type="hidden" data-name="mainItem_name" value="' + modelMainItem_name + '" />';
+            htmlCode += '        <span data-span="mainItem_name">' + modelMainItem_name + '</span>';
+            htmlCode += '        <div class="dd-nodrag btn-group ml-auto">';
+            htmlCode += '            <button type="button" class="btn btn-sm btn-secondary" onclick="editModelMainItem(this);">Edit</button> <button type="button" onclick="delModelMainItem(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">';
+            htmlCode += '       ';
+            htmlCode += '        </ol><!-- /.dd-list -->';
+            htmlCode += ' ';
+            htmlCode += '    <!-- .card-footer -->';
+            htmlCode += '    <div class="card-footer">';
+            htmlCode += '        <a href="javascript: void(0);" onclick="addSubItem(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 -->';
+
+            $('#modelItem_div').append(htmlCode);
+
+            $('#modelMainItemModal').modal('toggle');
+        }
+
+        
     });
 
     //新增主項目鈕
     $('#addModelMainItemBtn').on('click', function () {
+        
+
         $('#modelMainItem_name').typeahead('destroy');
 
         loadMainItemTypeahead();
@@ -32,6 +188,9 @@ $(document).ready(function () {
 
     //新增報價單範本視窗
     $('#modelQuotationListNewBtn').on('click', function () {
+        deledMainItems = [];
+        deledSubItems = [];
+
         $('#clientModelQuotationPreviewModal').modal('toggle');
     });
 
@@ -101,6 +260,167 @@ $(document).ready(function () {
     });
 });
 
+function addSubItem(obj) {
+    var modelMainItem_uid = $(obj).parent().parent().attr("data-uid");
+    var modelMainItem_name = $(obj).parent().parent().find("[data-name='mainItem_name']").val();
+    var parent_mainItem_uid = $(obj).parent().parent().attr("data-main-uid");
+
+    $('#modelSubItem_name').typeahead('destroy');
+
+    loadSubItemTypeahead(parent_mainItem_uid);
+
+    
+    $('#modelSubItem_method').val('add');
+    $('#modelSubItem_uid').val('');
+    $('#parent_Item_uid').val('');
+    $('#model_parent_data_uid').val(modelMainItem_uid);
+
+    $('#modelSubItem_hasAC').prop("checked", "checked").trigger("change");
+
+    $('#modelSubItemModal').modal('toggle');
+}
+
+function delModelMainItem(obj) {
+    if (confirm('確定刪除此主項目資料? 所有子項目也會一併刪除~')) {
+        if (confirm('再次確認是否刪除所有此項目與子項目?')) {
+            var modelMainItem_uid = $(obj).parent().parent().parent().attr("data-uid");
+
+            var delItem = {
+                modelMainItem_uid: modelMainItem_uid
+            }
+
+            deledMainItems.push(delItem);
+
+            $(obj).parent().parent().parent().remove();
+
+            alert('預定刪除完成! 記得按下下方儲存鈕才是真的刪除喔~');
+        }
+    }
+}
+
+function editModelMainItem(obj) {
+    var modelMainItem_name = $(obj).parent().parent().find("[data-name='mainItem_name']").val();
+    var parent_mainItem_uid = $(obj).parent().parent().parent().attr("data-main-uid");
+    var modelMainItem_uid = $(obj).parent().parent().parent().attr("data-uid");
+    $('#modelMainItem_name').typeahead('destroy');
+
+    loadMainItemTypeahead();
+    $('#modelMainItem_method').val('edit');
+    $('#modelMainItem_uid').val(modelMainItem_uid); 
+    $('#modelMainItem_name').val(modelMainItem_name);
+    $('#parent_mainItem_uid').val(parent_mainItem_uid);
+    $('#modelMainItemModal').modal('toggle');
+}
+
+function loadSubItemTypeahead(mainItem_uid) {
+    var formData = {
+        dept_uid: $('#dept_select').val(),
+        mainItem_uid: mainItem_uid
+    }
+
+    $.ajax({
+        url: "/AuthApi/authSubItemList",
+        type: "post",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.subItems;
+
+                subItem_items = [];
+                subItem_map = {};
+
+                $.each(obj, function (i, item) {
+                    var id = item.subItem_uid;
+                    var name = item.subItem_name;
+                    var descript = item.subItem_descript;
+                    var price = item.subItem_price;
+                    var unitType = item.subItem_unitType;
+
+                    subItem_map[name] = { id: id, name: name, descript: descript, price: price, unitType: unitType };
+                    subItem_items.push(name);
+                });
+
+                var bh = new Bloodhound({
+                    local: subItem_items,
+                    queryTokenizer: Bloodhound.tokenizers.whitespace,
+                    datumTokenizer: Bloodhound.tokenizers.whitespace
+                });
+
+                var nflTeamsWithDefaults = function nflTeamsWithDefaults(q, sync) {
+                    if (q === '') {
+                        sync(bh.index.all());
+                    } else {
+                        bh.search(q, sync);
+                    }
+                };
+
+                $('#modelSubItem_name').typeahead(
+                    {
+                        minLength: 0,
+                        highlight: false
+                    },
+                    {
+                        source: nflTeamsWithDefaults
+                    }
+
+                );
+
+                preSubItem_name = '';
+                $('#modelSubItem_name').bind('typeahead:select', function (ev, suggestion) {
+                    var modelSubItem_descript = $('#modelSubItem_descript').val();
+
+                    if (preSubItem_name != '') {
+                        if (suggestion != preSubItem_name) {
+                            if (confirm('確定要用新項目覆蓋目前資料?')) {
+                                $('#parent_Item_uid').val(subItem_map[suggestion].id);
+                                preSubItem_name = suggestion;
+
+                                $('#modelSubItem_price').val(subItem_map[suggestion].price).trigger('change');
+                                $('#modelSubItem_unitType').val(subItem_map[suggestion].unitType).trigger('change');
+                                $('#modelSubItem_descript').val(subItem_map[suggestion].descript).trigger('change');
+                            } else {
+                                $('#modelSubItem_name').typeahead('val', preSubItem_name);
+                                //suggestion = preSubItem_name;
+                                //$('#modelSubItem_name').val(preSubItem_name).trigger('change');;
+                            }
+                        }
+                    } else { 
+                        $('#parent_Item_uid').val(subItem_map[suggestion].id);
+                        preSubItem_name = suggestion;
+
+                        $('#modelSubItem_price').val(subItem_map[suggestion].price).trigger('change');
+                        $('#modelSubItem_unitType').val(subItem_map[suggestion].unitType).trigger('change');
+                        $('#modelSubItem_descript').val(subItem_map[suggestion].descript).trigger('change');
+
+                    }
+
+                   
+                    
+                    console.log('Selection: ' + suggestion);
+                    console.log('Selection key: ' + subItem_map[suggestion].id);
+                    
+                });
+
+                //$('#modelMainItem_name').bind('typeahead:autocomplete', function (ev, suggestion) {
+                //    console.log('Selection: ' + suggestion);
+                //    console.log('Selection key: ' + mainItem_map[suggestion].id);
+                //    $('#parent_mainItem_uid').val(mainItem_map[suggestion].id);
+                //});
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
+
 function loadMainItemTypeahead() {
     var formData = {
         dept_uid: $('#dept_select').val()
@@ -152,6 +472,13 @@ function loadMainItemTypeahead() {
                 $('#modelMainItem_name').bind('typeahead:select', function (ev, suggestion) {
                     console.log('Selection: ' + suggestion);
                     console.log('Selection key: ' + mainItem_map[suggestion].id);
+                    $('#parent_mainItem_uid').val(mainItem_map[suggestion].id);
+                });
+
+                $('#modelMainItem_name').bind('typeahead:autocomplete', function (ev, suggestion) {
+                    console.log('Selection: ' + suggestion);
+                    console.log('Selection key: ' + mainItem_map[suggestion].id);
+                    $('#parent_mainItem_uid').val(mainItem_map[suggestion].id);
                 });
               
             } else {