Axel
/
RecepieWebApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							@model Recepie.ViewModels.DayPlanConfigViewModel

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Configure Day - Recipe Manager</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" href="/">
                    <i class="fas fa-utensils"></i> Recipe Manager
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link" href="/">
                                <i class="fas fa-home"></i> All Recipes
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/WeekPlanner">
                                <i class="fas fa-calendar-week"></i> Week Planner
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/Recipe/Create">
                                <i class="fas fa-plus"></i> Add Recipe
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container-fluid">
        <main role="main" class="pb-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/Recipe">All Recipes</a></li>
                    <li class="breadcrumb-item"><a href="/WeekPlanner">Week Planner</a></li>
                    <li class="breadcrumb-item active">Configure Day</li>
                </ol>
            </nav>

            <h1 class="mb-4">🍽️ Configure Day Plan</h1>

            <div class="row">
                <div class="col-lg-8">
                    <form action="/WeekPlanner/UpdateDayPlan" method="post">
                        <input type="hidden" name="DayPlanId" value="@Model.DayPlanId" />

                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">🥘 Meal Preferences for @Model.DayOfWeek</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="SelectedMainIngredient" class="form-label">Main Ingredient</label>
                                    <select name="SelectedMainIngredient" class="form-select">
                                        <option value="">No preference</option>
                                        @foreach (var ingredient in Model.AvailableMainIngredients)
                                        {
                                            <option value="@ingredient"
                                                selected="@(ingredient == Model.SelectedMainIngredient)">@ingredient
                                            </option>
                                        }
                                    </select>
                                    <div class="form-text">Choose a main ingredient to focus the meal around</div>
                                </div>

                                <div class="mb-3">
                                    <label for="RequiredIngredients" class="form-label">Required Ingredients</label>
                                    <input name="RequiredIngredients" class="form-control"
                                        placeholder="e.g., tomatoes, cheese, basil" value="@Model.RequiredIngredients">
                                    <div class="form-text">Comma-separated list of ingredients that must be included
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="BannedIngredients" class="form-label">Avoid Ingredients</label>
                                    <input name="BannedIngredients" class="form-control"
                                        placeholder="e.g., nuts, dairy, shellfish" value="@Model.BannedIngredients">
                                    <div class="form-text">Comma-separated list of ingredients to avoid</div>
                                </div>

                                @if (Model.SuggestedRecipes != null && Model.SuggestedRecipes.Any())
                                {
                                    <div class="mb-3">
                                        <label for="SelectedRecipeId" class="form-label">Suggested Recipes</label>
                                        <select name="SelectedRecipeId" class="form-select">
                                            <option value="">No recipe selected</option>
                                            @foreach (var recipe in Model.SuggestedRecipes)
                                            {
                                                <option value="@recipe.Id" selected="@(recipe.Id == Model.SelectedRecipeId)">
                                                    @recipe.Title</option>
                                            }
                                        </select>
                                        <div class="form-text">Choose from recipes that match your preferences</div>
                                    </div>
                                }
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">💾 Save Configuration</button>
                            <a href="/WeekPlanner" class="btn btn-outline-secondary">↩️ Back to Week Plan</a>
                        </div>
                    </form>
                </div>

                <div class="col-lg-4">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0">📊 Week Overview</h6>
                        </div>
                        <div class="card-body">
                            <p class="small mb-2"><strong>Day:</strong> @Model.DayOfWeek</p>
                            <p class="small mb-2"><strong>Date:</strong> @Model.Date.ToString("MMM dd, yyyy")</p>
                            @if (!string.IsNullOrEmpty(Model.SelectedMainIngredient))
                            {
                                <p class="small mb-2"><strong>Main Ingredient:</strong> @Model.SelectedMainIngredient</p>
                            }
                            @if (Model.SuggestedRecipes != null && Model.SuggestedRecipes.Any())
                            {
                                <p class="small mb-0"><strong>Available Recipes:</strong> @Model.SuggestedRecipes.Count</p>
                            }
                        </div>
                    </div>

                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0">💡 Tips</h6>
                        </div>
                        <div class="card-body">
                            <ul class="small mb-0 ps-3">
                                <li>Choose a main ingredient to see relevant recipes</li>
                                <li>Add ingredients to avoid (allergies, dislikes)</li>
                                <li>Specify required ingredients for specific dishes</li>
                                <li>Use "Random Recipe" for variety in your week</li>
                            </ul>
                        </div>
                    </div>

                    @if (Model.SuggestedRecipes != null && Model.SuggestedRecipes.Any())
                    {
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">🍽️ Recipe Suggestions</h6>
                            </div>
                            <div class="card-body">
                                @foreach (var recipe in Model.SuggestedRecipes.Take(5))
                                {
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="small">@recipe.Title</span>
                                        @if (!string.IsNullOrEmpty(recipe.Time))
                                        {
                                            <span class="badge bg-info">@recipe.Time min</span>
                                        }
                                    </div>
                                }
                                @if (Model.SuggestedRecipes.Count > 5)
                                {
                                    <small class="text-muted">... and @(Model.SuggestedRecipes.Count - 5) more</small>
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>
        </main>
    </div>

    <footer class="border-top footer text-muted mt-5">
        <div class="container">
            &copy; @DateTime.Now.Year - Recipe Manager - Your Personal Recipe Collection
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js"></script>
</body>

</html>