@model AMESCoreStudio.WebApi.Models.AMES.WorkingStandardWorkTime

@{ ViewData["Title"] = "WHS025U";
    Layout = "~/Views/Shared/_FormLayout.cshtml"; }


<style>
    .control-label {
        justify-content: flex-end !important;
    }
</style>

<div class="row">
    <div class="col-sm-12">
        <form enctype="multipart/form-data" method="post" asp-action="WHS025USave">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="WorkingStandardID" value="0" />
            <input type="hidden" asp-for="CreateUserID" />
            <input type="hidden" asp-for="UpdateUserID" value="0" />
            <input type="hidden" asp-for="CreateDate" />
            <input type="hidden" asp-for="UpdateDate" value="@System.DateTime.Now" />

            <div class="form-group form-inline my-sm-1">
                <label asp-for="ItemNo" class="control-label col-sm-3"></label>
                <input asp-for="ItemNo" class="form-control col-sm-7" readonly/>
                <span asp-validation-for="ItemNo" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="WorkingUnitNo" class="control-label col-sm-3"></label>
                <select id="WorkingUnitNo" asp-for="WorkingUnitNo" asp-items="@ViewBag.WorkingUnitNo" class="custom-select col-sm-7">
                </select>
                <span asp-validation-for="UnitNo" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="UnitNo" class="control-label col-sm-3"></label>
                <select id="UnitNo" asp-for="UnitNo" asp-items="@ViewBag.FactoryUnit" class="custom-select col-sm-7">
                </select>
                <span asp-validation-for="UnitNo" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="WorkingLineID" class="control-label col-sm-3"></label>
                <select id="WorkingLineID" asp-for="WorkingLineID" asp-items="@ViewBag.FactoryUnit" class="custom-select col-sm-7">
                </select>
                <span asp-validation-for="WorkingLineID" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="WorkingStationID" class="control-label col-sm-3"></label>
                <select id="WorkingStationID" asp-for="WorkingStationID" asp-items="@ViewBag.StationList" class="custom-select col-sm-7">
                    <option value="">請選擇</option>
                    <option value="-1">N/A</option>
                </select>
                <span asp-validation-for="WorkingStationID" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="Side" class="control-label col-sm-3"></label>
                <select asp-for="Side" asp-items="@ViewBag.SideList" class="custom-select col-sm-7"></select>
                <span asp-validation-for="Side" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="OpCnt" class="control-label col-sm-3"></label>
                <input asp-for="OpCnt" class="form-control col-sm-7" placeholder="請輸入作業人數" />
                <span asp-validation-for="OpCnt" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>

            <div class="form-group form-inline my-sm-1">
                <label asp-for="Ct" class="control-label col-sm-3"></label>
                <input asp-for="Ct" class="form-control col-sm-7" placeholder="請輸入CT" />
                <span asp-validation-for="Ct" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>

            <div class="form-group form-inline my-sm-1">
                <label asp-for="StationID" class="control-label col-sm-3"></label>
                <input asp-for="StationID" class="form-control col-sm-7" />
                <span asp-validation-for="StationID" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="MachineCnt" class="control-label col-sm-3"></label>
                <input asp-for="MachineCnt" class="form-control col-sm-7" value="1" />
                <span asp-validation-for="MachineCnt" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <div class="form-group form-inline my-sm-1">
                <label asp-for="Remark" class="control-label col-sm-3"></label>
                <textarea asp-for="Remark" style="min-height:100px;" class="layui-textarea col-sm-7"></textarea>
                <span asp-validation-for="Remark" class="text-danger offset-sm-3 my-sm-1"></span>
            </div>
            <span style="color: firebrick;word-break: break-all;" class="text-danger offset-sm-3">@Html.ValidationMessage("error")</span>
            <div class="form-group">
                <input type="submit" value="儲存" class="btn btn-primary offset-sm-3" />
            </div>

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

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");
        await Html.RenderPartialAsync("_FileinputScriptsPartial"); }

    <script type="text/javascript">
    $(document).ready(function () {
        var error = '@Html.ValidationMessage("error")';
        if ($(error).text() != '') {
            parent.hg.msg(error);
        }
    });

    $("#WorkingUnitNo").change(function () {
        var data = $("#WorkingUnitNo").val();

        getLineInfoes_checkBox(data);
        getLineInfoes(data);

    });

    function getLineInfoes_checkBox(unitNo) {
        $.ajax({
            url: "/WHS/GetWorkingLinesbyUnit",
            dataType: 'json',
            data: { id: unitNo },
            type: 'get',
            success: function (result) {
                const $container = $("#lineCheckboxGroup");
                $container.empty();
                if (result.data && result.data.length > 0) {
                    let rowHtml = '<div class="form-row">';
                    $.each(result.data, function (index, item) {
                        if (item.statusNo == "A") {
                            const checkboxId = `line_${item.workingLineID}`;
                            const checkboxHtml = `
                                <div class="form-check col-sm-4">
                                    <input type="checkbox" class="form-check-input"
                                           id="${checkboxId}" name="WorkingLineIDs"
                                           value="${item.workingLineID}" />
                                    <label class="form-check-label" for="${checkboxId}">
                                        ${item.workingLineName}
                                    </label>
                                </div>
                            `;
                            rowHtml += checkboxHtml;

                            // 每滿3個，結束當前row並開始新row（但不要立即 append）
                            if ((index + 1) % 3 === 0 && index !== result.data.length - 1) {
                                rowHtml += '</div><div class="form-row">';
                            }
                        }
                    });

                    rowHtml += '</div>'; // 收尾最後一個row
                    $container.append(rowHtml); // 一次性 append 整段 HTML
                } else {
                    $container.append('<p>無可用線別</p>');
                }
            },
            error: function (xhr, status, error) {
                console.error("載入線別失敗：", error);
            }
        });
    }

    function getLineInfoes(data) {
        $.ajax({
            url: "/WHS/GetWorkingLinesbyUnit",
            dataType: 'json',
            data: { id: data },
            contentType: "application/json",
            type: 'get',
            success: function (result) {
                if (result.data) {
                    $("#WorkingLineID").empty();//清空下拉框的值
                    $('#WorkingLineID').append(new Option("請選擇", ""));// 下拉選單裡新增元素
                    $.each(result.data, function (index, item) {
                        console.log(result);
                        if (item.statusNo == "A") { //狀態為啟用才顯示資料
                            $('#WorkingLineID').append(new Option(item.workingLineName, item.workingLineID));// 下拉選單裡新增元素
                        }
                    });
                }
                else {
                    $("#WorkingLineID").empty();//清空下拉框的值
                    $('#WorkingLineID').append(new Option("無選項", "-99"));// 下拉選單裡新增元素
                }
              //  layui.form.render("select");//重新渲染 固定寫法
            }
        });
    };


    function getWorkingStations(data) {
        $.ajax({
            url: "/WHS/GetWorkingStationsbyUnit",
            dataType: 'json',
            data: { id: data },
            contentType: "application/json",
            type: 'get',
            success: function (result) {
                if (result.data) {
                    $("#WorkingStationID").empty();
                    $('#WorkingStationID').append(new Option("請選擇", ""));
                    var count = 0;
                    $.each(result.data, function (index, item) {
                        console.log(result);
                        if (item.statusNo == "A") { //狀態為啟用才顯示資料
                            $('#WorkingStationID').append(new Option(item.workingStationName, item.workingStationID));
                            count = count + 1;
                        }
                    });
                    if (count == 0) {
                        $("#WorkingStationID").empty();
                        $('#WorkingStationID').append(new Option("無選項", ""));
                    }
                }
                else {
                    $("#WorkingStationID").empty();
                    $('#WorkingStationID').append(new Option("無選項", ""));
                }
               // layui.form.render("select");
            }
        });
    };


    </script>


}