@{
    ViewData["Title"] = "一段式入出庫作業";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}


<style type="text/css">
    .layui-table-main .layui-table-cell {
        /*height: auto !important;*/
        white-space: normal;
    }

    .layui-table img {
        max-width: 60px;
        max-height: 28px;
    }

    .layui-tree-main {
        cursor: pointer;
        padding-right: 10px;
        float: left;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        margin: 10px 0;
    }

    .green-background {
        background-color: lightgreen;
    }
</style>


<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> @ViewBag.Title</div>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <input type="hidden" id="loginNo" name="loginNo" value="@ViewBag.loginNo" />
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-md10">
                        <label class="layui-form-label">Record Type:</label>
                        <div class="layui-input-inline" style="width:150px">
                            <select id="recordType" lay-event="RecordType" lay-filter="RecordType" name="recordType" lay-submit asp-items="@ViewBag.RecordType" lay-search>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:100px">
                            <input id="WorkCenter" name="WorkCenter" autocomplete="off" class="layui-input green-background" value="@ViewBag.WorkCenter">
                        </div>
                        <div class="layui-input-inline" style="width:100px">
                            <input id="RBU" name="RBU" autocomplete="off" class="layui-input green-background" value="@ViewBag.RBU">
                        </div>
                        <label class="layui-form-label">RMA NO:</label>
                        <div class="layui-input-inline" style="width:150px">
                            <input id="RMANo" name="RMANo" autocomplete="off" class="layui-input" value="@ViewBag.RMANo">
                        </div>
                        <label class="layui-form-label">Record Date:</label>
                        <div class="layui-input-inline" style="width:150px">
                            <input id="recordDate" name="RecordDate" autocomplete="off" class="layui-input" value="@ViewBag.RecordDate">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-md10">
                        <div class="layui-inline">
                            <label class="layui-form-label">RecordNumber:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="recordNumber" name="RecordNumber" autocomplete="off" class="layui-input" value="@ViewBag.RecordNumber">
                            </div>
                            <label class="layui-form-label">Line NO:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="lineNo" name="LineNo" maxlength="6" autocomplete="off" class="layui-input" value="@ViewBag.LineNo">
                            </div>
                            <label class="layui-form-label">Location:</label>
                            <div class="layui-input-inline" style="width:120px">
                                <input id="Location" name="Location" autocomplete="off" class="layui-input" value="@ViewBag.Location">
                            </div>
                            <label class="layui-form-label">Customer:</label>
                            <div class="layui-input-inline" style="width:120px">
                                <input id="Customer" name="Customer" autocomplete="off" class="layui-input green-background" value="@ViewBag.Customer">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">料號:</label>
                        <div class="layui-input-inline" style="width:150px">
                            <input id="PartNumber" name="PartNumber" autocomplete="off" class="layui-input" value="@ViewBag.PartNumber">
                        </div>
                        <div class="layui-input-inline" style="width:500px">
                            <input id="PartDesc" name="PartDesc" autocomplete="off" class="layui-input green-background" placeholder="料號說明" value="@ViewBag.PartDesc">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-inline" style="margin-right: 100px;">
                        <label class="layui-form-label">資料群組:</label>
                        <input type="radio" name="StockUnit" value="1" title="Box No(安勤或昶亨生產)" lay-filter="radio-filter" checked />
                        <input type="radio" name="StockUnit" value="0" title="PCS" lay-filter="radio-filter" />
                    </div>

                    <div class="layui-inline" style="margin-right: 150px;">
                        <div class="layui-input-inline" style="width:100px">
                            <input type="checkbox" id="PCSUnit" lay-skin="primary" title="單筆輸入" lay-filter="check-filter" disabled />
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">條碼輸入:</label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="margin-left: 0;">
                            <input class="layui-input" id="frontSN" autocomplete="off" />
                        </div>
                        <div class="layui-form-mid">～</div>
                        <div class="layui-input-inline">
                            <input class="layui-input" id="endSN" autocomplete="off" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">備貨量:</label>
                        <div class="layui-input-inline" style="width:70px">
                            <input id="StockQty" name="StockQty" type="number" autocomplete="off" class="layui-input" value="@ViewBag.StockQty">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">流水碼:</label>
                        <div class="layui-input-inline" style="width:70px">
                            <input id="sequential" type="number" name="sequential" autocomplete="off" class="layui-input" value="5">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">Excel匯入:</label>
                        <div class="layui-input-inline">
                            <textarea class="layui-textarea" id="SNData"></textarea>
                        </div>
                        <input type="file" id="excelFileInput" style="display: none;" />
                        <button class="layui-btn" onclick="importExcel()">匯入</button>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">作業備註</label>
                        <div class="layui-input-block">
                            <textarea id="ExtNotes" placeholder="作業人員輸入備註" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <span style="color:red">條碼輸入與Excel匯入，只能選一種執行</span>
                </div>

            </div>
        </div>
        <div class="layui-inline" style="margin-right:0px;">
            <label id="rowCount" class="layui-inline layui-form-label" style="width:130px; color:red;">刷入數量 : 0 pcs</label>
        </div>
        <table class="layui-hide" id="query" lay-filter="query"></table>
        <div class="layui-form-item" style="text-align: right;">
            <div class="layui-input-block">
                <input type="submit" id="commit" value="確認扣帳" class="layui-btn" />
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
    <script type="text/javascript">
        layui.use(['form', 'layer', 'laydate', 'table'], function () {
            laydate = layui.laydate;
            laydate.render({
                elem: '#recordDate'
                , trigger: 'click'
                , format: 'yyyy/MM/dd'
                , theme: 'grid'
            });

            form.on('radio(radio-filter)', function (data) {
                var elem = data.elem; // 获得 radio 原始 DOM 对象
                var checked = elem.checked; // 获得 radio 选中状态
                var value = elem.value; // 获得 radio 值
                var checkboxElem = layui.$('input[lay-filter="check-filter"]');
                if (value == 0 && checked) {
                    checkboxElem.prop('disabled', false);
                    checkboxElem.prop('checked', true);
                    // 重新渲染表单元素
                    layui.form.render('checkbox');
                } else {
                    // 如果radio按钮未选中
                    checkboxElem.prop('disabled', true);
                    checkboxElem.prop('checked', false);
                    // 重新渲染表单元素
                    layui.form.render('checkbox');
                }
            });

        });
    </script>
    <script type="text/javascript">
        //控項event
        $('#recordNumber').on('keypress', function (event) {
            if (event.keyCode == 13) {
                var recordNumber = document.getElementById('recordNumber').value;
                var recordType = document.getElementById('recordType').value;
                var recordTypeInfo = @Html.Raw(Json.Serialize(ViewBag.RecordTypeInfo));
                var lineNo = document.getElementById('lineNo').value;
                var filteredInfo = recordTypeInfo.find(function (info) {
                    return info.id === recordType;
                });
                console.log(filteredInfo);
                //check recordNumber
                if (recordNumber.length !== filteredInfo.length) {
                    layer.msg('請確認recordNumber碼長!', { icon: 2 });
                    $("#recordNumber").val('');
                    return;
                }
                // Check if recordNumber starts with prefixCode
                var prefixCode = filteredInfo.prefixCode;
                if (!recordNumber.startsWith(prefixCode)) {
                    layer.msg('recordNumber開頭必須是:' + prefixCode, { icon: 2 });
                    $("#recordNumber").val('');
                    return;
                }

                if (lineNo.length === 0) {
                    document.getElementById('lineNo').focus();
                }
                else {
                    $.ajax({
                        url: '@Url.Action("CheckRecordNoIsRecord", "PTD")',
                        type: 'POST',
                        data: { dnNo: recordNumber, dnlineNo: lineNo },
                        success: function (result) {
                            // 处理成功的情况
                            if (!result.success) {
                                hg.msg(`RecordNumber【${recordNumber}】 LineNo【${lineNo}】 已備貨完成`);
                                $("#recordNumber").val('');
                                $("#lineNo").val('');
                                $("#Customer").val('');
                                $('#PartNumber').val('');
                                $("#PartDesc").val('');
                            }
                        },
                        error: function (error) {
                            hg.msg('錯誤：' + error);
                            console.log(error);
                        }
                    });
                }
            }
        });

        $('#lineNo').on('keypress', function (event) {
            if (event.keyCode == 13) {
                // 获取 recordNumber 和 lineNo 的值
                var recordNumber = document.getElementById('recordNumber').value;
                var lineNo = document.getElementById('lineNo').value;

                // 发送 AJAX 请求到 Controller
                $.ajax({
                    url: '@Url.Action("GetZDNDetailJson", "PTD")',
                    type: 'POST',
                    data: { recordNumber: recordNumber, lineNo: lineNo },
                    success: function (result) {
                        // 处理成功的情况
                        if (result.data.data.length > 0) {
                            $.each(result.data.data, function (index, item) {
                                $("#Customer").val(item.soldCustomerID);
                                $('#PartNumber').val(item.productID);
                                getItemDesc(document.getElementById('PartNumber').value);
                            });
                        }
                        else {
                            $("#Customer").val('');
                            $('#PartNumber').val('');
                            $("#PartDesc").val('');
                        }
                    },
                    error: function (error) {
                        // 处理错误的情况
                        console.log(error);
                    }
                });

                $.ajax({
                    url: '@Url.Action("CheckRecordNoIsRecord", "PTD")',
                    type: 'POST',
                    data: { dnNo: recordNumber, dnlineNo: lineNo },
                    success: function (result) {
                        // 处理成功的情况
                        if (!result.success) {
                            hg.msg(`RecordNumber【${recordNumber}】 LineNo【${lineNo}】 已備貨完成`);
                            $("#recordNumber").val('');
                            $("#lineNo").val('');
                            $("#Customer").val('');
                            $('#PartNumber').val('');
                            $("#PartDesc").val('');
                        }
                    },
                    error: function (error) {
                        hg.msg('錯誤：' + error);
                        console.log(error);
                    }
                });
            }
        });

        $('#PartNumber').on('keypress', function (event) {
            if (event.keyCode == 13) {
                getItemDesc(document.getElementById('PartNumber').value);
            }
        });

        $('#frontSN').on('keypress', function (event) {
            if (event.keyCode == 13) {
                checkInputData();
            }
        });

        $('#endSN').on('keypress', function (event) {
            if (event.keyCode == 13) {
                checkInputData();
                frontSN.focus();
                frontSN.select();
            }
        });

        $('#SNData').on('keypress', function (event) {
            if (event.keyCode == 13) {
                checkInputData();
                SNData.select();
                event.preventDefault();
            }
        });

        $('#StockQty').on('keypress', function (event) {
            if (event.keyCode == 13) {
                checkInputData();
                frontSN.focus();
                frontSN.select();
            }
        });

        $('#sequential').on('keypress', function (event) {
            if (event.keyCode == 13) {
                checkInputData();
                frontSN.focus();
                frontSN.select();
            }
        });

        function checkInputData() {
            var recordType = document.getElementById('recordType').value;
            var frontSN = document.getElementById('frontSN').value;
            var endSN = document.getElementById('endSN').value;
            var dnNo = document.getElementById('recordNumber').value;
            var lineNo = document.getElementById('lineNo').value;
            var location = document.getElementById('Location').value;
            var material = document.getElementById('PartNumber').value;
            var sequential = document.getElementById('sequential').value;
            var rMANo = document.getElementById('RMANo').value;
            var stockUnit = document.querySelector('input[name="StockUnit"]:checked').value;
            var pcsUnit = document.getElementById('PCSUnit').checked ? 'Y' : 'N';
            var workCenter = document.getElementById('WorkCenter').value;
            var rbu = document.getElementById('RBU').value;
            var stockQty = document.getElementById('StockQty').value;
            var sNData = document.getElementById('SNData').value;
            var note = document.getElementById('ExtNotes').value;

            var postData = {
                RecordType: recordType,
                WorkCenter: workCenter,
                Rbu: rbu,
                RmaNo: rMANo,
                RecordNumber: dnNo,
                LineNo: lineNo,
                Location: location,
                ProductId: material,
                StockUnit: stockUnit,
                PcsUnit: pcsUnit,
                FrontSN: frontSN,
                EndSN: endSN,
                StockQty: stockQty,
                Sequential: sequential,
                SNData: sNData,
                Notes: note
            };

            var serializedData = new URLSearchParams(postData).toString();
            var index = layer.load(1, {
                shade: [0.4, '#000'],
                content: '儲存中......',
                success: function (layero) {
                    layero.find('.layui-layer-content').css({
                        'padding-top': '60px',
                        'width': '200px'
                    })
                }
            });

            $.ajax({
                url: '@Url.Action("PTD002_CheckInputData", "PTD")',
                type: 'POST',
                data: serializedData,
                success: function (res) {
                    if (res.success) {
                        if (res.msg) {
                            hg.msg(res.msg);
                        }
                        // 用来统计重复的SN
                        var duplicateSNs = [];
                        // 检查表格是否为空
                        var isTableEmpty = layui.table.cache['query'].length === 0; // 判断表格是否为空

                        res.data.forEach(function (item) {
                            if (isSNAlreadyExist('query', item.sn)) {
                                // 将重复的SN加入到duplicateSNs数组中
                                duplicateSNs.push(item.sn);
                            } else {
                                if (isTableEmpty) {
                                    // 如果表格为空，则累加数据（这里假设累加的意思是将数据一起添加到表格中）
                                    hg.table.addRow('query', item);
                                    isTableEmpty = false; // 表格不再为空
                                } else {
                                    // 如果表格已有数据，则直接添加新的行
                                    hg.table.addRow('query', item);
                                }
                            }
                        });

                        if (duplicateSNs.length > 0) {
                            // 将所有重复的SN一次性显示
                            var duplicateSNsMessage = duplicateSNs.join(', ');
                            hg.msg(`以下SN已存在: ${duplicateSNsMessage}`);
                        }
                    } else {
                        hg.msg('加入失敗：' + res.msg);
                    }
                },
                complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                    layer.close(index);
                },
                error: function (error) {
                    hg.msg('加入失敗：' + error.msg);
                    return;
                }
            });

        };

        $('#commit').on('click', function () {
            var recordType = document.getElementById('recordType').value;
            var workCenter = document.getElementById('WorkCenter').value;
            var rbu = document.getElementById('RBU').value;
            var rmaNo = document.getElementById('RMANo').value;
            var recordDate = document.getElementById('recordDate').value;
            var location = document.getElementById('Location').value;
            var customer = document.getElementById('Customer').value;
            var material = document.getElementById('PartNumber').value;
            var loginNo = document.getElementById('loginNo').value;

            var tableData = layui.table.cache['query'];

            if (material === "") {
                hg.msg('料號不得為空!');
                return; // Do not add the row
            }

            var postData = {
                recordType: recordType,
                workCenter: workCenter,
                rbu: rbu,
                rmaNo: rmaNo,
                recordDate: recordDate,
                location: location,
                customer: customer,
                loginNo: loginNo,
                tableData: tableData
            };

            $.ajax({
                url: '@Url.Action("PTD002_Commit", "PTD")',
                dataType: 'json',
                data: { data: JSON.stringify(postData) },
                type: 'POST',
                success: function (result) {
                    console.log("扣帳結果:");
                    console.log(result);
                    if (result.data.success) {
                        $.each(result.data.data, function (index, value) {
                            // 找到要删除的行的索引
                            var rowIndex = tableData.findIndex(function (row) {
                                return row.sn === value;
                            });

                            // 从表格数据中删除该行
                            if (rowIndex !== -1) {
                                tableData.splice(rowIndex, 1);

                                // 重新加载表格数据
                                layui.table.reload('query', {
                                    data: tableData,
                                    page: false,
                                    limit: 2000
                                });

                                calculateRowCount(tableData);
                            } else {
                                layer.msg('未找到要刪除的數據', { icon: 2 });
                            }
                        });
                        layer.msg('扣帳成功!', { icon: 1 });

                        //清空SN資訊
                        $("#endSN").val('');
                        $("#frontSN").val('');
                        $("#SNData").val('');

                    } else {
                        layer.msg('扣帳失敗，原因:' + result.data.msg, { icon: 2 });
                    }
                },
                error: function (error) {
                    layer.msg('扣帳失敗!原因:' + error.msg, { icon: 2 });
                }
            });
        });

        // 取料號DESC
        function getItemDesc(itemNo) {
            $.ajax({
                url: "/BAS/GetMaterialItemByItemNO",
                data: { id: itemNo },
                dataType: 'json',
                contentType: "application/json",
                type: 'get',
                success: function (result) {
                    if (result.data) {
                        $("#PartDesc").val(result.data.itemDesc);
                    }
                    else {
                        $("#PartDesc").val('');
                    }
                }
            });
        };

        // 判斷Table SN是否有重複
        function isSNAlreadyExist(tableId, sn) {
            var table = layui.table;
            var currentData = table.cache[tableId];

            // Check if SN already exists in the table
            var isExist = currentData.some(function (row) {
                return row.sn === sn;
            });

            return isExist;
        }

        // 刷入數量
        function calculateRowCount(table) {
            var RowCount = table.length;
            $("#rowCount").html("刷入數量: " + RowCount + " pcs");
        }

        hg.table.addRow = function (tableId, rowData) {
            // Get the table instance
            var table = layui.table;

            if (isSNAlreadyExist(tableId, rowData.sn)) {
                // 如果SN已经存在，返回，不添加该行
                return;
            }

            // Add the new row data to the table
            table.reload(tableId, {
                data: [rowData].concat(table.cache[tableId]),
                page: false,
                limit: 2000
            });

            calculateRowCount(table.cache[tableId]);

        };

        function del(obj) {
            if (obj.data.sn) {
                hg.confirm("SN：" + obj.data.sn + "，確定要刪除嗎？", function () {
                    // 获取表格数据
                    var tableData = layui.table.cache['query'];

                    // 找到要删除的行的索引
                    var rowIndex = tableData.findIndex(function (row) {
                        return row.sn === obj.data.sn;
                    });

                    // 从表格数据中删除该行
                    if (rowIndex !== -1) {
                        tableData.splice(rowIndex, 1);

                        // 重新加载表格数据
                        layui.table.reload('query', {
                            data: tableData,
                            page: false,
                            limit: 2000
                        });

                        layer.msg('刪除成功', { icon: 1 });
                        calculateRowCount(tableData);
                    } else {
                        layer.msg('未找到要刪除的數據', { icon: 2 });
                    }
                });
            }
        }


        //Excel匯入
        function importExcel() {
            // Trigger click on the hidden file input
            document.getElementById('excelFileInput').click();
        }
        document.getElementById('excelFileInput').addEventListener('change', handleFileSelect);

        function handleFileSelect(event) {
            var file = event.target.files[0];

            if (file) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var data = new Uint8Array(e.target.result);
                    var workbook = XLSX.read(data, { type: 'array' });

                    // Assuming the SNs are in the first sheet of the workbook
                    var sheet = workbook.Sheets[workbook.SheetNames[0]];
                    var snData = XLSX.utils.sheet_to_json(sheet);
                    console.log(snData);
                    // Process SN data and update textarea
                    updateTextareaWithExcel(snData);
                };

                reader.readAsArrayBuffer(file);
            }
        }
        function updateTextareaWithExcel(snData) {
            var textarea = document.getElementById('SNData'); // Replace with your actual textarea id
            var snValues = snData.map(function (obj) {
                return obj.SN;
            });
            // Combine existing data and imported SNs
            textarea.value = snValues.join('\n');
        }

        function getCookie(cookieName) {
            var name = cookieName + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var cookieArray = decodedCookie.split(';');

            for (var i = 0; i < cookieArray.length; i++) {
                var cookie = cookieArray[i].trim();
                if (cookie.indexOf(name) === 0) {
                    return cookie.substring(name.length, cookie.length);
                }
            }
            return null
        }

        var tableCols = [[
            {
                field: 'sn',
                title: 'SN',
                width: 150
            },
            {
                field: 'dnNo',
                minWidth: 150,
                title: 'DN單號'
            },
            {
                field: 'lineNo',
                title: 'LineNo',
                width: 100
            },
            {
                field: 'material',
                title: 'Material(料號)',
                width: 150
            },
            {
                field: 'delete',
                width: 100,
                title: '刪除',
                templet: function (item) {
                    var btn = ' <a class="layui-btn layui-btn-normal layui-btn-xs layui-icon layui-icon-edit" lay-event="del">刪除</a>';
                    return btn
                }
            }
        ]];
        //基本数据表格
        var table = hg.table.datatable('query', '扣帳資訊', '', {}, tableCols, toolbar, true, 'full-100', ['exports']);

    </script>
}