@{
	ViewData["Title"] = "UpdateComponent";
}
<div class="text-center">
	<h2 class="display-4 mb-5">Изменить комплектующее</h2>
</div>
<form method="post">
	<div class="row  mb-3">
		<div class="col-4">комплектующее:</div>
		<div class="col-8">
			<select id="component" name="component" class="form-control" asp-items="@(new SelectList(@ViewBag.Components,"Id", "ComponentName"))"></select>
		</div>
	</div>
	<div class="row  mb-3">
		<div class="col-4">Название:</div>
		<div class="col-8"><input type="text" id="componentName" name="componentName" /></div>
	</div>
	<div class="row  mb-3">
		<div class="col-4">Цена:</div>
		<div class="col-8"><input type="number" id="componentPrice" name="componentPrice" /></div>
	</div>

	<div class="text-center ">
		<input type="submit" value="Обновить" class="btn btn-success ps-5 pe-5" />
	</div>
</form>
<<script>
	 $('#component').on('change', function () {
		 getData();
	 });

	 function getData() {
		 var componentId = $('#component').val();
		 var componentData = @Html.Raw(Json.Serialize(ViewBag.Components));
		 var selectedComponent = componentData.find(function (component) {
			 return component.id == componentId;
		 });

		 if (selectedComponent) {
			 $("#componentName").val(selectedComponent.componentName);
			 $("#omponentPrice").val(selectedComponent.componentPrice);
			 fillTableBuilds(selectedComponent.buildsAndCounts);
		 }
		  function fillTableBuilds(componentBuilds) {
		 $("#componentTableBuilds").empty();

		 for (var build in componentBuilds)
			 $("#componentTableBuilds").append('<tr><td>' + componentBuilds[build].item1 + '</td><td>' + componentBuilds[build].item2 + '</td></tr>');
	 }
	 }

</script>