Rogashova_E.A._CourseWork_Hospital/Hospital/HospitalClientApp/Views/Home/CreateRecipe.cshtml

@using HospitalContracts.ViewModels;
@{
	ViewData["Title"] = "CreateRecipe";
}

<div class="text-center">
	<h2 class="display-4">Создание рецепта</h2>
</div>
<form method="post">
	<div class="row">
		<div class="col-4">Доза:</div>
		<div class="col-8"><input type="text" name="dose" id="dose" /></div>
	</div>
	<div class="row">
		<div class="col-4">Способ применения:</div>
		<div class="col-8"><input type="text" id="modeofapplication" name="modeofapplication"/></div>
	</div>
	<div class="row">
		<div class="row mb-3">
			<div class="col-4">Привязка симптома:</div>
			<div class="col-8">	
				<select id="symptoms" name="symptoms" class="form-control" asp-items="@(new SelectList(@ViewBag.Symptomses,"Id", "SymptomName"))"></select>
			</div>
		</div>
		</div>
	<div class="row">
		<div class="col-4">Добавление процедур</div>
		<div class="col-8">
			<div class="row">
				<div class="col-6">
					<select id="procedures" name="procedures" class="form-control" asp-items="@(new SelectList(@ViewBag.Procedures,"Id", "ProceduresName"))"></select>
				</div>
				<div class="col-6">
					<button type="button" class="btn btn-success" onclick="addProcedures()">Добавить</button>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<p class="text-center"><strong>Процедуры</strong></p>
		<table id="procedureTable" class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>Название</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				@foreach (var procedure in Model.RecipeProcedures)
				{
					<tr>
						<td>@procedure.Value.ProceduresName</td>
						<td>
							<button type="button" class="btn btn-danger" data-id="@procedure.Key" onclick="removeProcedure('@procedure.Key')">Удалить</button>
						</td>
					</tr>
				}
			</tbody>
		</table>
	</div>
	<div class="row">
		<div class="col-8"></div>
		<div class="col-4"><input type="submit" value="Создать" class="btn btn-primary" /></div>
	</div>
</form>

@section scripts {
	<script>
		var recipeProcedures = @Json.Serialize(Model.RecipeProcedures);
		function addProcedures() {
			var procedureId = $('#procedures').val();
			var procedureName = $('#procedures option:selected').text();
			if (recipeProcedures.hasOwnProperty(procedureId)) {
				alert('This procedure is already added.');
				return;
			}
			recipeProcedures[procedureId] = { Id: procedureId, ProceduresName: procedureName };
			var row = $('<tr>').append($('<td>').text(procedureName));
			var removeButton = $('<button>').text('Удалить').attr('data-id', procedureId).attr('class', 'btn btn-danger').click((function (id) {
				return function () {
					removeProcedure(id);
				};
			})(procedureId));
			row.append($('<td>').append(removeButton));

			$('#procedureTable tbody').append(row);
			var input = $('<input>').attr('type', 'hidden').attr('name', 'RecipeProcedures[' + procedureId + ']').val(procedureId);
			$('#recipe-form').append(input);
		}
		function removeProcedure(procedureId) {
			delete recipeProcedures[procedureId];
			$('#procedureTable button[data-id="' + procedureId + '"]').closest('tr').remove();
			$('#recipe-form input[name="RecipeProcedures[' + procedureId + ']"]').remove();
		}
	</script>
	}