Francescos.Recipes.World/Francesco.Recipes.World/Views/Recipe/Create.cshtml

@model Francesco.Recipes.World.Models.CreateRecipeViewModel
@using Francesco.Recipes.World.Models.BackendModels.Recipe
@using Francesco.Recipes.World.Models
@{
	ViewData["Title"] = "Erstelle Rezept";
}

<h1 class="mb-4">Erstelle Rezept</h1>

<form method="post" enctype="multipart/form-data" asp-controller="Recipe" asp-action="Create" asp-route-categoryId="@Model.CategoryId">
	<div class="mb-4">
		<h2>Allgemein</h2>
		<div class="form-group">
			<label asp-for="Name">Name</label>
			<input asp-for="Name" class="form-control" required />
			<span asp-validation-for="Name" class="text-danger"></span>
		</div>
		<div class="form-group">
			<label asp-for="Description">Beschreibung</label>
			<textarea asp-for="Description" class="form-control"></textarea>
			<span asp-validation-for="Description" class="text-danger"></span>
		</div>
		<div class="form-group">
			<label asp-for="Difficulty">Schwierigkeit</label>
			<select asp-for="Difficulty" class="form-control" required>
				<option value="">Schwierigkeit wählen</option>
				@foreach (var difficulty in Enum.GetValues(typeof(Difficulty)))
				{
					<option value="@difficulty">@difficulty</option>
				}
			</select>
			<span asp-validation-for="Difficulty" class="text-danger"></span>
		</div>
		<div class="form-row">
			<div class="col-sm-4">
				<label asp-for="Servings">Portion (pro Person)</label>
				<input asp-for="Servings" type="number" min="1" class="form-control" required />
				<span asp-validation-for="Servings" class="text-danger"></span>
			</div>
			<div class="col-sm-4">
				<label>Vorbereitungszeit</label>
				<div class="d-flex">
					<div class="input-group mr-2">
						<input asp-for="PrepHours" type="number" class="form-control" min="0" value="0" />
						<div class="input-group-append">
							<span class="input-group-text">h</span>
						</div>
					</div>
					<div class="input-group">
						<input asp-for="PrepMinutes" type="number" class="form-control" min="0" max="59" value="0" />
						<div class="input-group-append">
							<span class="input-group-text">min</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<label>Kochzeit</label>
				<div class="d-flex">
					<div class="input-group mr-2">
						<input asp-for="CookHours" type="number" class="form-control" min="0" value="0" />
						<div class="input-group-append">
							<span class="input-group-text">h</span>
						</div>
					</div>
					<div class="input-group">
						<input asp-for="CookMinutes" type="number" class="form-control" min="0" max="59" value="0" />
						<div class="input-group-append">
							<span class="input-group-text">min</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="mb-4">
		<h2>Zutaten</h2>
		@await Html.PartialAsync("_IngredientsPartial", Model.IngredientViewModel ?? new IngredientViewModel
{
	RecipeId = Model.CategoryId, // Setzt die richtige ID für das globale Script
	Ingredients = new List<Francesco.Recipes.World.Models.BackendModels.Ingredient.Ingredient>(),
	Units = ViewBag.Units ?? new List<Francesco.Recipes.World.Models.BackendModels.Unit.Unit>()
})
	</div>

	<div class="mb-4">
		<h2>Anweisungen</h2>
		@await Html.PartialAsync("_GetInstructions", Model.InstructionViewModel ?? new InstructionViewModel
{
	RecipeId = Model.CategoryId, 
	Instructions = new List<Francesco.Recipes.World.Models.BackendModels.Instruction.Instruction>()
})
	</div>

	<div class="mb-4">
		<h2>Bild/Video</h2>
		<div class="form-group">
			<label asp-for="Photo">Foto</label>
			<input asp-for="Photo" class="form-control-file" accept="image/*" />
		</div>
		<div class="form-group">
			<label asp-for="Video">Video</label>
			<input asp-for="Video" class="form-control-file" accept="video/*" />
		</div>
	</div>

	<div class="text-center mt-4">
		<button type="submit" class="btn btn-success btn-lg">Rezept speichern</button>
		<a asp-action="Index" asp-controller="Category" class="btn btn-secondary btn-lg ml-2">Abbrechen</a>
	</div>
</form>

<style>
	.instruction-item, .ingredient-item {
		background-color: #f8f9fa;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 4px;
	}

	.instruction-controls, .ingredient-controls {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.instruction-media {
		width: 80px;
		height: 80px;
		overflow: hidden;
		margin-right: 10px;
	}

		.instruction-media img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	.instruction-file {
		max-width: 200px;
	}

	textarea.form-control {
		min-height: 80px;
	}

	.btn-delete, .btn-move-up, .btn-move-down, .btn-save {
		background: none;
		border: none;
		font-size: 1.2rem;
		cursor: pointer;
	}

	.btn-delete {
		color: #dc3545;
	}

	.btn-save {
		color: #28a745;
	}

	.instruction-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;
	}

	.btn-add {
		background-color: #007bff;
		color: white;
		border: none;
		padding: 5px 10px;
		border-radius: 4px;
		cursor: pointer;
		margin-top: 10px;
	}
</style>

@section Scripts {
	<script>
		window.recipeId = '@Model.CategoryId';
	</script>
	<script src="~/js/site.js"></script>
	@await Html.PartialAsync("_ValidationScriptsPartial")

}