@model AMESCoreStudio.WebApi.Models.AMES.LabelTemplateMaster


@{
    ViewData["Title"] = "Label料號參數修改";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}
<style>
    /*    .control-label {
                                                            justify-content: flex-end !important;
                                                        }
                                                    */



    .layui-table-cell {
        height: auto;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal
    }
</style>
<form enctype="multipart/form-data" method="post" id="modelform">
    <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">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <input type="hidden" asp-for="TEMPLATE_ID" />
                    <input type="hidden" asp-for="CREATE_USERID" />
                    <input type="hidden" asp-for="UPDATE_USERID" value="@ViewBag.UserID" />
                    <input type="hidden" asp-for="CREATE_DATE" />
                    <input type="hidden" asp-for="UPDATE_DATE" value="@System.DateTime.Now" />

                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label asp-for="LABEL_MATNR" class="layui-form-label"></label>
                            <input asp-for="LABEL_MATNR" type="text" style="width: 450px;" class="layui-input" readonly />
                            <span asp-validation-for="LABEL_MATNR" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px; display: inline-block;">
                        <div class="layui-inline" style="display: inline-block;">
                            <label asp-for="LABEL_FILE" class="layui-form-label"></label>
                            <input id="LF1" type="text" style="width: 270px; display: inline-block;" class="layui-input" placeholder="請輸入檔案路徑"/>
                            <input id="LF2" type="text" style="width: 170px; display: inline-block; margin-left: 10px;" class="layui-input" placeholder="請輸入檔案名稱"/>
                            <input asp-for="LABEL_FILE" type="hidden" />
                            <span asp-validation-for="LABEL_FILE" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>
                    @*<div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <input type="file" id="fileInput" onchange="validateFileExtensionbtw()">
                <div id="errorContainer1" style="color: red;"></div>
            </div>
        </div>*@
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label asp-for="REMARK" class="layui-form-label"></label>
                            <textarea asp-for="REMARK" style="width: 450px;" class="layui-textarea"></textarea>
                            <span asp-validation-for="REMARK" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px; display: inline-block;">
                        <div class="layui-inline" style="display: inline-block;">
                            <label asp-for="IMAGE_NAME" class="layui-form-label"></label>
                            <input id="IMAGE1" type="text" style="width: 270px; display: inline-block;" class="layui-input" placeholder="請輸入檔案路徑"/>
                            <input id="IMAGE2" type="text" style="width: 170px; display: inline-block; margin-left: 10px;" class="layui-input" placeholder="請輸入檔案名稱" />
                            <input asp-for="IMAGE_NAME" type="hidden" />
                            <span asp-validation-for="IMAGE_NAME" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>
                    @*<div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <input type="file" id="fileInputimage" name="formFile" onchange="validateFileExtensionPIC()">
                <div id="errorContainer" style="color: red;"></div>
            </div>

        </div>*@
                    <div class="layui-inline">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline" style="width:auto">
                            <input type="radio" asp-for="STATUS_NO" value="Y" title="上架中" checked>
                            <input type="radio" asp-for="STATUS_NO" value="N" title="未上架">
                        </div>
                        <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div id="errorMSG" style="color: red;"></div>
                                </div>

                            </div>
                        </div>

                        <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <span style="color: firebrick;word-break: break-all;" class="text-danger offset-sm-3">@Html.ValidationMessage("error")</span>
                                    <button type="button" id="querysubmit1" class="layui-btn tt">儲存</button>
                                </div>

                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>

    </div>
</form>
<form id="modeltable" method="post">
    <table class="layui-hide" id="test" lay-filter="test" lay-data="{id:'test'}"></table>
</form>

@*備註*@
<script type="text/html" id="inputTest">
    <input type="text" name="inputTest1" lay-filter="inputTest1" id="inputTest1" data-value="{{d.labeL_FIELD_ID1}}" class="layui-input" style="margin-top: -10px; margin-left: -10px; margin-right: -10px; border: none;">
    <input type="text" name="inputTest2" lay-filter="inputTest2" id="inputTest2" data-value="{{d.labeL_FIELD_ID2}}" class="layui-input" style="margin-top: -10px; margin-left: -10px; margin-right: -10px; border: none;">
    <input type="text" name="inputTest3" lay-filter="inputTest3" id="inputTest3" data-value="{{d.labeL_FIELD_ID3}}" class="layui-input" style="margin-top: -10px; margin-left: -10px; margin-right: -10px; border: none;">
</script>
@section Scripts{
    <script type="text/javascript">

        var imageName = document.getElementById('IMAGE_NAME').value;
        var lastSlashIndex = imageName.lastIndexOf('\\') !== -1 ? imageName.lastIndexOf('\\') : imageName.lastIndexOf('\\');

        if (lastSlashIndex != -1 && imageName.length > 1) {
            var path = imageName.substring(0, lastSlashIndex);
            var filename = imageName.substring(lastSlashIndex + 1, imageName.length);
            document.getElementById('IMAGE1').value = path;
            document.getElementById('IMAGE2').value = filename;
        }
        else if (imageName.length > 1) {
            document.getElementById('IMAGE2').value = imageName;
        }

        var labelFile = document.getElementById('LABEL_FILE').value;
        var lastSlashIndex = labelFile.lastIndexOf('\\') !== -1 ? labelFile.lastIndexOf('\\') : labelFile.lastIndexOf('\\');
        if (lastSlashIndex != -1 && labelFile.length >1) {
            var path = labelFile.substring(0, lastSlashIndex);
            var filename = labelFile.substring(lastSlashIndex + 1, labelFile.length);
            document.getElementById('LF1').value = path;
            document.getElementById('LF2').value = filename;
        }
        else if (labelFile.length > 1) {
            document.getElementById('LF2').value = labelFile;
        }

        $('#querysubmit1').click(function () {
          //  insertMaster2("T");
           // insertList1();
            var Finish = CheckListCheck();
            if (Finish == 'N') {
                alert("至少需勾選一項欄位名稱!");
            }
            else {

                var PIC = CheckPICForamt();
                if (PIC != 'Y') {
                    alert(PIC);
                }
                else {
                    var BTW = CheckBTWForamt();
                    if (BTW != 'Y') {
                        alert(BTW);
                    }
                    else {
                        insertMaster2("T");
                    }
                }
            }
        });

        function CheckListCheck() {
            var tableData = layui.table.cache['test']; // 这里的 'test' 是表格的 id 属性值
            var Finish = 'N';
            for (var i = 0; i < tableData.length; i++) {
                var rowData = tableData[i];
                for (var field in rowData) {
                    if (rowData.hasOwnProperty(field)) {
                        var value = rowData[field];

                        if (field.includes('datA_V')) {
                            var isChecked = $("input[name='templateCheckbox" + field[field.length - 1])[i].checked;
                            if (isChecked) {
                                Finish = 'Y';
                                return Finish;
                            }
                        }


                    }
                }

            }
            return Finish;


        };
        function insertMaster2(status) {
            if ($("#IMAGE1").val().trim != "" && $("#IMAGE2").val().trim() != "") {
                FullFile = $("#IMAGE1").val() + "\\" + $("#IMAGE2").val();
                $("#IMAGE_NAME").val(FullFile);
            }
            if ($("#LF1").val().trim != "" && $("#LF2").val().trim() != "") {
                FullFile = $("#LF1").val() + "\\" + $("#LF2").val();
                $("#LABEL_FILE").val(FullFile);
            }

            var labelFile = $("#LABEL_FILE").val();
           
            if (labelFile) {
                var formData = new FormData($("#modelform")[0]);
                var templateID = $("#TEMPLATE_ID").val();
                $.ajax({
                    url: "/LAB/LAB002USave",
                    type: "POST",
                    data: formData,
                    processData: false,  // 不要处理数据
                    contentType: false,  // 不设置内容类型
                    success: function (response) {
                        // 处理成功响应
                        DeleteList(templateID);
                    },
                    error: function (response) {
                        // 处理错误
                        var errorMSG = document.getElementById('errorMSG');
                        errorMSG.innerHTML = response.msg;
                    }
                });

            }
            else {

                alert("請選擇標籤檔案!");
            }

        }
        function insertMaster3(status) {
            var data = $("#LABEL_MATNR").val();
            if (data) {

                var labelFile = $("#LABEL_FILE").val();
                var remark = $("#REMARK").val();
                var imageName = $("#IMAGE_NAME").val();
                var statusNo = $("input[name='STATUS_NO']:checked").val();
                var templateID = $("#TEMPLATE_ID").val();
                var CreateUserID = $("#CREATE_USERID").val();
                var UpdateUserID = $("#UPDATE_USERID").val();
                var CreateDate = $("#CREATE_DATE").val();
                var UpdateDate = $("#UPDATE_DATE").val();

                $.post("/LAB/LAB002USave",
                    {
                        TEMPLATE_ID: templateID,
                        LABEL_MATNR: data,
                        LABEL_FILE: labelFile,
                        STATUS_NO: statusNo,
                        IMAGE_NAME: imageName,
                        REMARK: remark,
                        CREATE_USERID: CreateUserID,
                        UPDATE_USERID: UpdateUserID,
                        CREATE_DATE: CreateDate,
                        UPDATE_DATE: UpdateDate
                    },
                    function (data) {
                        if (data.success) {
                            console.log("master:data.success");
                            DeleteList(templateID);
                        }
                    }).success(function () { //alert("second success");
                    })
                    .error(function () { //alert("error");
                    })
                    .complete(function () { //alert("complete");
                    });


            }

        }
        function DeleteList(id) {

            $.ajax({
                url: '/LAB/DeleteLabelTemplateDetail?id=' + id,
                dataType: 'json',
                contentType: "application/json",
                type: 'get',
                success: function (result) {
                    if (!result.data) {
                        insertList1(id);
                    }
                    else {

                        alert(result.msg);

                    }


                }
            });

        }
        function insertList(id) {


            var tableDas = layui.table.cache["test"];
            var modeltable = $("#modeltable").serializeArray();

            if (modeltable.length > 0) {
                var Template;
                var LabelFileID;
                var CreateUserID = $("#UPDATE_USERID").val();//因為是全部刪除再新增所以建立與更新會相同 $("#CREATE_USERID").val();
                var UpdateUserID = $("#UPDATE_USERID").val();
                var CreateDate = $("#UPDATE_DATE").val();// $("#CREATE_DATE").val();
                var UpdateDate = $("#UPDATE_DATE").val();
                var Finish = 'N';
                for (var i = 0; i < modeltable.length - 1; i++) {
                    if (modeltable[i].value == 0 || modeltable[i].value == 1) {
                        Finish = 'Y';
                        Template = id;
                        LabelFileID = modeltable[i - 1].value;
                        $.post("/LAB/LAB002UListSave",
                            {
                                TEMPLATE_ID: Template,
                                LABEL_FIELD_ID: LabelFileID,
                                CREATE_USERID: CreateUserID,
                                UPDATE_USERID: UpdateUserID,
                                CREATE_DATE: CreateDate,
                                UPDATE_DATE: UpdateDate
                            },
                            function (data) {
                                if (i = modeltable.length - 2) {
                                    parent.hg.msg("修改成功！");
                                    window.parent.location.reload();
                                    //parent.layer.table.render();
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                }
                            });

                    }
                }
                if (Finish == 'N') {
                    alert("至少需勾選一項欄位名稱!");

                }
            }
        }
        function insertList1(id) {

            var tableData = layui.table.cache['test']; // 这里的 'test' 是表格的 id 属性值
            var FieldID = '0';
            var Template =id;
            var LabelFileID;
            var CreateUserID = $("#UPDATE_USERID").val();//因為是全部刪除再新增所以建立與更新會相同 $("#CREATE_USERID").val();
            var UpdateUserID = $("#UPDATE_USERID").val();
            var CreateDate = $("#UPDATE_DATE").val();// $("#CREATE_DATE").val();
            var UpdateDate = $("#UPDATE_DATE").val();
            var Finish = 'N';
            for (var i = 0; i < tableData.length; i++) {
                var rowData = tableData[i];
                for (var field in rowData) {
                    if (rowData.hasOwnProperty(field)) {
                        var value = rowData[field];
                        
                        if (field.includes('datA_V')) {
                            var isChecked = $("input[name='templateCheckbox" + field[field.length - 1])[i].checked;
                            if (isChecked) {
                                Finish = 'Y';
                            }
                            else {
                                LabelFileID = '0';
                            }
                        }
                        else if (field.includes('labeL_FIELD_ID')) {
                            LabelFileID = value;
                        }
                        if (field.includes('datA_V') && LabelFileID != '0') {
                            $.post("/LAB/LAB002UListSave",
                                {
                                    TEMPLATE_ID: Template,
                                    LABEL_FIELD_ID: LabelFileID,
                                    CREATE_USERID: CreateUserID,
                                    UPDATE_USERID: UpdateUserID,
                                    CREATE_DATE: CreateDate,
                                    UPDATE_DATE: UpdateDate
                                },
                                function (data) {
                                    if (i = modeltable.length - 2) {
                                        parent.hg.msg("修改成功！");
                                        window.parent.location.reload();
                                        //parent.layer.table.render();
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    }
                                });


                        }

                    }
                }

            }
            if (Finish == 'N') {
                alert("至少需勾選一項欄位名稱!");

            }
        }
        function validateFileExtensionbtw() {
            var fileInput = document.getElementById('fileInput');
            var errorContainer = document.getElementById('errorContainer1');

            // 允许的文件后缀名
            var allowedExtensions = ['.btw'];

            // 获取文件名
            var fileName = fileInput.value.split('\\').pop();

            // 获取文件后缀名
            var fileExtension = '.' + fileName.split('.').pop();

            // 检查文件后缀名是否在允许的列表中
            if (!allowedExtensions.includes(fileExtension.toLowerCase())) {
                errorContainer.innerHTML = '只允許上傳 ' + allowedExtensions.join(', ') + ' 格式的文件。';
                // 清空文件选择框的值
                fileInput.value = '';
            } else {
                $("#LABEL_FILE").val(fileName);
                errorContainer.innerHTML = '';
            }
        }

        function validateFileExtensionPIC() {
            var fileInput = document.getElementById('fileInputimage');
            var errorContainer = document.getElementById('errorContainer');

            // 允许的文件后缀名
            var allowedExtensions = ['.jpg', '.jpeg', '.png', '.bmp'];

            // 获取文件名
            var fileName = fileInput.value.split('\\').pop();

            // 获取文件后缀名
            var fileExtension = '.' + fileName.split('.').pop();

            // 检查文件后缀名是否在允许的列表中
            if (!allowedExtensions.includes(fileExtension.toLowerCase())) {
                errorContainer.innerHTML = '只允許上傳 ' + allowedExtensions.join(', ') + ' 格式的文件。';
                // 清空文件选择框的值
                fileInput.value = '';
            } else {
                $("#IMAGE_NAME").val(fileName);
                errorContainer.innerHTML = '';
            }
        }

        function CheckPICForamt() {
            var image1Value = $("#IMAGE1").val().trim().toLowerCase();
            var image2Value = $("#IMAGE2").val().trim().toLowerCase();

            // 檢查如果其中一個不為空白，另一個也不可為空白
            if ((image1Value !== "" && image2Value === "") || (image1Value === "" && image2Value !== "")) {
                return "圖檔的路徑與檔案名稱請輸入完整";
            }
            else {
                if (image2Value != "") {
                    var allowedExtensions = [".jpg", ".jpeg", ".png", ".bmp"];
                    var fileExtension = '.' + image2Value.split('.').pop();
                    // 檢查檔案名稱是否以圖片擴展名結尾
                    if (allowedExtensions.includes(fileExtension.toLowerCase())) {
                        return "Y";
                    } else {
                        return "圖檔的檔案名稱請為 .jpg, .jpeg, .png, .bmp 結尾";
                    }
                }
                return "Y";
            }
        }

        function CheckBTWForamt() {
            var image1Value = $("#LF1").val().trim().toLowerCase();
            var image2Value = $("#LF2").val().trim().toLowerCase();

            // 檢查如果其中一個不為空白，另一個也不可為空白
            if ((image1Value !== "" && image2Value === "") || (image1Value === "" && image2Value !== "")) {
                return "標籤檔名的路徑與檔案名稱請輸入完整";
            }
            else {

                if (image2Value != "") {
                   

                    // 檢查檔案名稱是否以圖片擴展名結尾
                   
                    if (image2Value.endsWith(".btw")) {
                        return "Y";
                    } else {
                        return "標籤檔名的檔案名稱請為 .btw結尾";
                    }
                }
                else
                    return "Y";
            }
        }

        layui.use(['form', 'layer', 'table', 'laytpl', 'laydate'], function () {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                laytpl = layui.laytpl,
                laydate = layui.laydate;

            itemslist();
            function itemslist() {
                var formID = $("#TEMPLATE_ID").val();
                table.render({
                    elem: '#test',
                    url: '/LAB/GetLabelTemplatebyMatnr?id=' + formID,
                    id: 'test',
                    //  toolbar: '#toolBar',
                    height: 720,
                    //defaultToolbar: ['filter', 'print', 'exports'],
                    //title: 'test',
                    //where: where,
                    page: false,
                    cols: [[
                        { field: 'labeL_FIELD_ID1', title: '#', width: 50, align: "left", templet: '#inputTest1' },
                        {
                            field: 'labeL_FIELD_NAME1',
                            sort: true,
                            title: '欄位名稱',
                            width: 100,
                        },
                        {
                            field: 'datA_V1',
                            width: 60,
                            title: '勾選',
                            templet: function (d) {
                                return '<input type="checkbox" name="templateCheckbox1" lay-skin="primary" lay-filter="templateCheckbox1" value="' + d.datA_V1 + '" title="" ' + (d.datA_V1 === '1' ? 'checked' : '') + '>';
                                }
                        },
                        { field: 'labeL_FIELD_ID2', title: '#', width: 50, align: "left", templet: '#inputTest2' },
                        {
                            field: 'labeL_FIELD_NAME2',
                            sort: true,
                            title: '欄位名稱',
                            width: 100,
                        },
                        {
                            field: 'datA_V2',
                            width: 60,
                            title: '勾選',
                            templet: function (d) {
                                return '<input type="checkbox" name="templateCheckbox2" lay-skin="primary" lay-filter="templateCheckbox2" value="' + d.datA_V2 + '" title="" ' + (d.datA_V2 === '1' ? 'checked' : '') + '>';
                            }
                        },
                        { field: 'labeL_FIELD_ID3', title: '#', width: 50, align: "left", templet: '#inputTest3' },
                        {
                            field: 'labeL_FIELD_NAME3',
                            sort: true,
                            title: '欄位名稱',
                            width: 100,
                        },
                        {
                            field: 'datA_V3',
                            width: 60,
                            title: '勾選',
                            templet: function (d) {
                                return '<input type="checkbox" name="templateCheckbox3" lay-skin="primary" lay-filter="templateCheckbox3" value="' + d.datA_V3 + '" title="" ' + (d.datA_V3 === '1' ? 'checked' : '') + '>';
                            }
                        },


                    ]],
                    done: function (res, curr, count) {
                        $(".layui-table-main  tr").each(function (index, val) {
                            $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                        });
                        layui.each($('input[name="inputTest"]'), function (index, item) {
                            var elem = $(item);
                            elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                        });
                        layui.each($('select'), function (index, item) {
                            var elem = $(item);
                            elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                        });
                        form.render();
                    }
                });
            }
            /*表格列表操作*/
            table.on('tool(test)', function (obj) {
                var data = obj.data, layEvent = obj.event;
                if (layEvent === 'inputTest') {
                    layui.$(this).on('input porpertychange', function (e) {
                        var val = layui.$(this).val();
                        var name = layui.$(this).attr('name');
                        data[name] = val
                        obj.update(data);//更新行对象数据
                        //console.log(data);
                    })
                }
                else if (layEvent === 'edit') {
                    var id = $("#InspectionID").val();
                    if (obj.data.inspectionItemID) {
                        layer.open({
                            type: 2 //此處以iframe舉例
                            , title: '上傳文件'
                            , area: ['480px', '400px']
                            , shade: 0
                            , maxmin: true
                            , offset: 'auto'//顯示座標-auto居中
                            , content: "/SPC/SPC005R?id=" + id + "&itemID=" + obj.data.inspectionItemID
                            //, btn: ['關閉']
                            , yes: function () {
                                //layer.close();
                                if (layer.confirm('確定要關閉麼')) {
                                    layer.close(index);
                                }
                                // $(that).click();
                            }
                            , zIndex: 19891014 //layer.zIndex //重點1
                            , success: function (layero) {
                                layer.setTop(layero); //重點2
                            }
                        });

                    }
                }
            });

          
        });

    </script>
}