@model AMESCoreStudio.Web.ViewModels.AUS.AUS002ViewModel
@{
	ViewData["Title"] = "AUS";
	Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<script src="~/js/sweetalert2.all.min.js">
	import e = require("../../wwwroot/Highcharts-7.1.2/modules/tilemap");
</script>
<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;
	}

	.layui-form > iframe {
		height: 100%;
		width: 100%;
		border: none;
	}

	.element {
		float: left;
	}

	.layui-field-title {
		margin: auto;
	}

	.layui-form-item {
		margin-bottom: auto;
	}

	.barcodeInput {
		border: 2px solid #090;
		color: blue;
	}

		.barcodeInput:focus {
			border: 3px solid #0026ff;
			color: blue;
		}

	.larger-font {
		font-size: 18px;
	}
	/* 增大表格中的字体大小 */
	#MydataTable {
		font-size: 18px;
	}

	.large-font-select {
		font-size: 18px !important;
	}

		/* 增大表格中表头的字体大小 */
		#MydataTable thead th {
			font-size: 18px;
		}

		/* 增大表格中单元格的字体大小 */
		#MydataTable tbody td {
			font-size: 18px;
		}

</style>


<div class="layui-card" style="height:auto;">
	<form id="AUS002Form" method="post" asp-action="AUS002" class="layui-form">
		<div asp-validation-summary="ModelOnly" class="text-danger"></div>
		<div class="layui-card-body">
			<div class="layui-row">
				<div class="layui-col-md5 element">
					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<div class="layui-col-md12">
									<div class="layui-form-item">
										<fieldset class="layui-elem-field layui-field-title">
											<legend style="color: #e18917">Basic Information</legend>
										</fieldset>
										<label class="layui-form-label  larger-font" style="width: 150px; text-align: left;">Station：</label>
										<div class="layui-inline">
											<div class="layui-input-inline" style="width: 350px">
												<select id="Station" asp-for="Station" asp-items="@ViewBag.StationList" class="custom-select col-sm-5 large-font-select" lay-filter="Station">
												</select>
												<input id="Station" asp-for="Station" class="form-control col-sm-9" hidden />
												<span asp-validation-for="Station" class="text-danger offset-sm-3 my-sm-1"></span>
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label  larger-font" style="width: 150px; text-align: left;">Scan data：</label>
											<div class="layui-input-inline" style="width:350px">
												<input type="text" onkeydown="SearchNo(event);" asp-for="Input" id="inputtxt" class="layui-input larger-font" autocomplete="off" />
												<div id="serialCount"></div>
												<input type="hidden" asp-for="WipID" value="@Model.WipID" />
												<input type="hidden" asp-for="WipNO" value="@Model.WipNO" />
												<input type="hidden" asp-for="ItemNO" value="@Model.ItemNO" />
												<input type="hidden" asp-for="ExtraBarcodeNo" value="@Model.ExtraBarcodeNo" />
												<input type="hidden" asp-for="PriorInput" value="@Model.PriorInput" />
												<input type="hidden" asp-for="Unit" value="@Model.Unit" />
												<input type="hidden" asp-for="Line" value="@Model.Line" />
												<input type="hidden" asp-for="InputQTY" value="@Model.InputQTY" />
												<input type="hidden" asp-for="AUSBarcodeNo" value="@Model.AUSBarcodeNo" />
												<input type="hidden" asp-for="AUSBarCodeID" value="@Model.AUSBarCodeID" />
												<input type="submit" id="GetWipData" asp-action="AUS002_GetWip" style="display:none;" />

											</div>
											<button class="layui-btn layui-btn-danger" onclick="ClearData()">Reset</button>
										</div>
										<label class="layui-form-label  larger-font" style="width: 150px; text-align: left;"></label>
										<span style="color:firebrick;word-break: break-all; font-size: 20px;">@Html.ValidationSummary()</span>
										
										<div class="layui-form-item">
											<label class="layui-form-label larger-font" style="width: 150px; text-align: left; font-weight: bold; color: #1874CD;">SN#：</label>
											<div class="layui-input-inline" style="width:150px">
												<label class="layui-form-label  larger-font" id="ExtraBarcodeNo1" style="width: 250px; text-align: left;">@Model.ExtraBarcodeNo</label>
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label larger-font" style="width: 150px; text-align: left; font-weight: bold; color: #1874CD;">WO：</label>
											<div class="layui-input-inline" style="width:150px">
												<label class="layui-form-label  larger-font" id="WipNo" style="width: 250px; text-align: left;">@Model.WipNO</label>
											</div>
										</div>
										@* <div class="layui-inline">
										<label class="layui-form-label larger-font" style="width: 200px; text-align: left; font-weight: bold; color: #1874CD;">Production quantity：</label>
										<label class="layui-form-label larger-font" style="width: 20px; text-align: center">@Model.InputQTY</label><label class="layui-form-label larger-font" style=" text-align: left">PCS</label>
										</div> *@
									</div>
								</div>

								<fieldset class="layui-elem-field layui-field-title">
									<legend style="color: #e18917">Scanned Data</legend>
								</fieldset>

								<div class="panel panel-default" id="TEST">
									<div class="layui-inline">
										<label class="layui-form-label  larger-font" style="width: 150px; text-align: left;">Error code：</label>
										<div class="layui-input-inline" style="width:350px">
											<input type="text" asp-for="ErrorCode" value="@Model.ErrorCode" id="ErrorCode" class="layui-input larger-font" autocomplete="off" />
										</div>
									</div>
									@* 增加兩個按鈕 其中一個按鈕為綠色 有PASS字樣，另一個為紅色有FAIL的字樣 兩個按鈕中間有一些距離 *@
									<div class="layui-col-sm5">
										<div class="layui-form-item">
											<div class="layui-inline">
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-inline">
											</div>
										</div>
									</div>
									<div class="layui-col-sm12">
										<div class="layui-form-item" style="text-align: right;">
											<div class="layui-input-inline">
												<button class="layui-btn layui-btn-normal" onclick="CheckPass()">PASS</button>
											</div>
											<div class="layui-input-inline">
												<button class="layui-btn layui-btn-danger" onclick="CheckFail()">FAIL</button>
											</div>

										</div>
									</div>

								</div>

								<div class="panel panel-default" id="ASSY">
									<div class="layui-col-md12">
										<div class="layui-form-item">
											<table id="MydataTable" class="layui-table">
												@{
													int j = 0;
												}
												<thead>
													<tr>
                                                        <th style="width:270px;">
                                                            ModuleName
                                                        </th>
                                                        <th style="width:270px;">
                                                            MappingSN
                                                        </th>
                                                        <th style="width:100px;">
                                                            Completed
                                                        </th>
													</tr>
												</thead>
												<tbody id="MydataTableBody">
													@foreach (var index in Model.Inputs)
													{
														<tr>
															<td>
																<input type="text" class="layui-input" asp-for="@index.ModuleName" name="Inputs[@j].ModuleName" style="width:270px" readonly="readonly" />
																<input type="hidden" name="Inputs[@j].ModuleName" value="@index.ModuleName" />
															</td>
															<td>
																<input type="text" class="layui-input" asp-for="@index.MappingSN" name="Inputs[@j].MappingSN" style="width:270px" readonly="readonly" />
																<input type="hidden" asp-for="@index.MappingSN" value="@index.MappingSN" name="Inputs[@j].MappingSN" />
															</td>
															<td>
																@* <input type="text" class="layui-input" asp-for="@index.Completed" name="Inputs[@j].Completed" style="width:250px" readonly="readonly" /> *@
																<input type="hidden" asp-for="@index.Completed" value="@index.Completed" name="Inputs[@j].Completed" />
																<input type="hidden" asp-for="@index.KPItemName" value="@index.KPItemName" name="Inputs[@j].KPItemName" />
																@* 如果index.Completed = Yes則將字變成綠色粗體 ，否則變成紅色粗體 *@
																@if (index.Completed == "Yes")
																{
																	<input type="text" class="layui-input" asp-for="@index.Completed" name="Inputs[@j].Completed" style="width:100px; color: green; font-weight: bold;" readonly="readonly" />
																}
																else
																{
																	<input type="text" class="layui-input" asp-for="@index.Completed" name="Inputs[@j].Completed" style="width:100px; color: red; font-weight: bold;" readonly="readonly" />
																}

														</tr>
														j++;
													}
												</tbody>
											</table>
										</div>
									</div>
									<table class="layui-hide" id="test" lay-filter="test"></table>
									@* 將PASS按鈕向MydataTableBody 對靠右對齊*@
									<div class="layui-col-sm4">
										<div class="layui-form-item">
											<div class="layui-inline">
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-inline">
											</div>
										</div>
									</div>
									<div class="layui-row" style="margin-top: 20px;">
										<div class="layui-col-sm12">
											<div class="layui-form-item" style="text-align: center;">
												<button class="layui-btn layui-btn-normal" onclick="CheckPass()">PASS</button>
											</div>
										</div>
									</div>

								</div>
							</div>

						</div>
					</div>

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

@section Scripts {
	@{
		await Html.RenderPartialAsync("_ValidationScriptsPartial");
		await Html.RenderPartialAsync("_FileinputScriptsPartial");
	}
	<script type="text/javascript" src="~/js/grids.min.js"></script>
	<script type="text/javascript">

		$(document).ready(function () {
			var error = '@Html.ValidationMessage("error")';
			if ($(error).text() != '') {
				ShowInputError(error);
			}

		});

		// Jquery 將兩邊DIV設定同高度
		jQuery(function ($) {
			$('.element').responsiveEqualHeightGrid();
		});

	
		var serialInputCounts = 0; // 用于存储不同序号和输入次数的对象

		$(document).ready(function () {
			// 假設您的後端在某些情況下會將錯誤訊息設置在 ViewBag.Error 中
		@if (!string.IsNullOrEmpty(Model.Error))
		{
			@:showError('@Model.Error');
		}
				function showError(errorMsg) {
				//	顯示錯誤訊息
					ShowInputError(errorMsg);
				}
			$('#inputtxt').val('');
		});

		document.addEventListener("DOMContentLoaded", function () {

			var itemNoValue = "@Model.ItemNO"; // 获取 ItemNO 的值
			var stationValue = "@Model.Station"; // 获取 ItemNO 的值
			if (itemNoValue != "" && stationValue == '30030') {

				var inputElement = document.getElementById('ErrorCode');
				if (inputElement) {
					// 將焦點設置到 inputtxt 上
					inputElement.focus();
				}
			}
			else {
				var inputElement = document.getElementById('inputtxt');
				if (inputElement) {
					// 將焦點設置到 inputtxt 上
					inputElement.focus();
				}

			}

		});


		$(document).ready(function () {
			var form = layui.form;
			var initialStationValue = '@Model.Station'; // 從後端模型獲取初始 Station 值
			// 根據初始值設定元素顯示/隱藏
			toggleElements(initialStationValue);

			function toggleElements(value) {
                if (value == "30030") {
                    $('#TEST').show();  // 如果選了30030，顯示 TEST 面板
					$('#ASSY').hide(); // 並隱藏 ASSY 面板
                } else if (value == "30027") {
                    $('#TEST').hide();  // 如果選了30027，隱藏 TEST 面板
					$('#ASSY').show(); // 並顯示 ASSY 面板
				} else {
					$('#TEST').hide();  // 其他情況，隱藏 TEST 面板
					$('#ASSY').hide(); // 並隱藏 ASSY 面板
				}
			}
		});
		function SearchNo(e) {
			if (e.keyCode == 13) {
				$("#GetWipData").click();


			}
			else {
				//$("#ItemNO").val("");
			}


		};



		layui.use(['form', 'layer'], function () {
			form = layui.form;

			// 監聽 select 下拉選擇事件, 以下事件更新後，為何在重新刷新頁面後設定又跑掉了

			form.on('select(Station)', function (data) {
				///layer.msg('The selected station is: ' + data.value);
				if (data.value == "30030") {
					$('#TEST').show();  // 如果選了1，顯示 TEST 面板
					$('#ASSY').hide(); // 並隱藏 ASSY 面板
                } else if (data.value == "30027") {
					$('#TEST').hide();  // 如果選了2，隱藏 TEST 面板
					$('#ASSY').show(); // 並顯示 ASSY 面板
				}
				else {
					$('#TEST').hide();  // 如果選了2，隱藏 TEST 面板
					$('#ASSY').hide(); // 並顯示 ASSY 面板
				}
				ClearData();

			});

		});


		// 新增trRow
		function TableAddRow(e) {
			var strAry = e.split('＠');
			var InputNo = strAry[1];
			if (InputNo == undefined)
				InputNo = '';

			//var rowCount = $('.data-contact-person').length + 0;
			var contactdiv = '<tr class="data-contact-person">' +
				'<td><input readonly="readonly"  onkeypress="if( event.keyCode == 13 ) { return false; }" type="text" name="f-name" class="form-control td-InputNo" value=' + InputNo + '></td>' +
				'<td><input readonly="readonly"  onkeypress="if( event.keyCode == 13 ) { return false; }" type="text" name="f-name" class="form-control td-Input" value=' + strAry[0] + ' /></td>' +
				'<td><a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" onclick="Remove(this);">del</a></td>' +
				'</tr>';
			$('#tblCustomers').append(contactdiv);
			AutoWindowSize();
		};



		function CheckPass() {
			//呼即
            if ($("#ErrorCode").val() != "") {
                ShowInputError("PASS cannot enter ErrorCode");
                event.preventDefault();
                return false;
            }

			var Inputs = GetAllEmpData();
			var data = $("#AUS002Form").serialize();

			var InputsTotal = Inputs.length;
			for (i = 0; i < InputsTotal; i++) {
				data += "&Inputs[" + i + "].Input=" + Inputs[i].Input;
				data += "&Inputs[" + i + "].InputNo=" + Inputs[i].InputNo;
			}


			$.ajax({
				url: "@Url.Action("AUS002_Input", "AUS")",
				type: "POST",
				data: data,
				success: function (result) {
					// 錯誤訊息
					if (!result.success) {
						ShowInputError(result.msg);
						
					}
					else {
                        ClearData();
						ShowInputOK(result.msg);
						
					}
				}
			});
			event.preventDefault();
			return false;

		}
		function CheckFail() {

			//檢查如果ErrorCode為空值或開頭不是$，則顯示錯誤訊息
			if ($("#ErrorCode").val().substring(0, 1) != "$" || $("#ErrorCode").val().length <= 1) {
				ShowInputError("ErrorCode is empty or does not start with $");
				event.preventDefault();
				return false;
			}

			var data = $("#AUS002Form").serialize();

			$.ajax({
				url: "@Url.Action("AUS002_Input", "AUS")",
				type: "POST",
				data: data,
				success: function (result) {

					// 錯誤訊息
					if (!result.success) {
					    ShowInputError(result.msg);
					}
					else {
                    //將model 的值都清空

                        ClearData();
						ShowInputOK(result.msg);
						
					}
				}
			});
			event.preventDefault();
			return false;

		}

		function ClearData() {
			//輸入欄位
			$('#inputtxt').val('');

			// 清空所有隱藏欄位
			$('input[type="hidden"]').each(function () {
				// 检查当前值是否为数字
				if ($.isNumeric($(this).val())) {
					$(this).val('0'); // 如果是数字，设置为0
				} else {
					$(this).val(''); // 如果是字符串，设置为空字符串
				}
			});

			// 清空 Error code 欄位
			$('#ErrorCode').val('');
			$('#ExtraBarcodeNo1').text('');
			$('#WipNo').text('');
			$('#MydataTableBody').empty();
			 $('#inputtxt').focus();
			// document.getElementById('inputtxt').value = 'reset';
			 // //自動將inputtxt enter
			 // var enterEvent = new Event('keydown');
			 // enterEvent.keyCode = 13;
			 // document.getElementById('inputtxt').dispatchEvent(enterEvent);
			 event.preventDefault();
			 return false;

		}

		// 紀錄表格欄位
		function GetAllEmpData() {
			// 單筆
			//var data = [];
			//$('tr.data-contact-person').each(function () {
			//    var firstName = $(this).find('.td-Input').val();
			//    data.push(firstName);
			//});
			//return data;

			var data = [];
			$('tr.data-contact-person').each(function () {
				var Input = $(this).find('.td-Input').val();
				var InputNo = $(this).find('.td-InputNo').val();
				data.push({ Input: Input, InputNo: InputNo });
			});
			return data;
		}

		function AutoWindowSize() {
			$(window).on('resize', function () {
				//AdminInit();
				//var $content = $('#nav_xbs_tab .layui-tab-content');
				//$content.height($(this).height() - 125);
				//$content.find('iframe').each(function () {
				//    $(this).height($content.height());
				//});
			}).resize();
		}

		function AdminInit() {

			var hgfull = function () {
				var layfull = $('[lay-height]');
				if (layfull.attr('lay-height')) {
					var arr = layfull.attr('lay-height').split('-');
					if (arr.length === 2) {
						var height = window.innerHeight - arr[1];
						layfull.css('height', height + 'px');
						layfull.css('overflow-y', 'auto');
					}
					else if (arr[0] === 'full') {
						layfull.css('height', window.innerHeight - 200 + 'px');
						layfull.css('overflow-y', 'auto');
					}
					else if (arr[0] === 'auto') {
						var next = layfull.next();
						if (next.length > 0) {
							setTimeout(function () {
								//console.log(next.height());
								if (next.height() === 99) {
									hgfull();
									return false;
								}
								layfull.children('.layui-card').css('height', next.height() + 'px');
								layfull.children('.layui-card').css('overflow-y', 'auto');
							}, 5);
						}
					}
				}
			}
			$(window).resize(function () {
				hgfull();
				if (!document.fullscreenElement) {
					$("body").find('.fa-compress').removeClass('fa-compress').addClass('fa-arrows-alt');
				}
			});
		}

		// Alert
		function ShowInputOK(Msg) {
			Swal.fire({
				icon: 'success',
				title: Msg,
				showConfirmButton: false,
				timer: 2000
			})
		}

		function ShowInputError(Msg) {
			// Swal.fire({
			// 	color: '#716add',
			// 	icon: 'warning',
			// 	title: "<h5 style='color:#FFFFFF'>" + Msg + "</h5>",
			// 	background: '#db4444',
			// })
			Swal.fire({
					color: '#716add',
					icon: 'warning',
					title: "<h5 style='color:#FFFFFF'>" + Msg + "</h5>",
					background: '#db4444',
			}).then((result) => {
				// 當彈出框關閉後，重新設置焦點到 inputtxt
				if (result.value) {
					document.getElementById('inputtxt').focus();
				}
				else
				{
					document.getElementById('inputtxt').focus();
				}
			});
		}
	</script>
}