@using System.Globalization
@model Aberwyn.Models.WeeklyMenuViewModel
@{
    ViewData["Title"] = "Veckomeny";
    var days = new[] { "Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag" };
    var allMeals = ViewBag.AvailableMeals as List<Aberwyn.Models.Meal>;
}

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>


<style>
[x-cloak] { display: none !important; }
[x-show] {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}
.rotate-chevron {
    transition: transform 0.3s ease;
}
.rotate-chevron.open {
    transform: rotate(90deg);
}
.meal-input {
    padding: 4px 6px;
    font-size: 0.85rem;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #546E7A;
    background: #445A6E;
    color: #ECEFF1;
}
.meal-input.new-entry {
    border-color: #FFC107; /* Orange */
    background: inherit;   /* Lägg till detta om nödvändigt */
}

.meal-input.existing-entry {
    border-color: #4CAF50; /* Grön */
    background: inherit;   /* Lägg till detta också */
}


.add-meal-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
}
.add-meal-wrapper input[type=text] {
    width: 160px;
    padding: 4px 6px;
    font-size: 0.85rem;
}
.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  padding: 0;
}
.delete-btn i {
  margin-left: 6px;
  color: #FF8A65;
}
.week-nav a {
    color: #FFEB3B;
    text-decoration: none;
    font-weight: bold;
}
.week-nav a:hover {
    text-decoration: underline;
}
</style>
<script>
    window.knownMeals = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(
        (ViewBag.AvailableMeals as List<Aberwyn.Models.Meal>)?.Select(m => m.Name.Trim()).ToList() ?? new List<string>()));
</script>

<div class="weekly-menu-wrapper"
     style="display:grid; grid-template-columns:1fr; gap:16px; padding:16px; background:#263238;"
    x-data="{
        highlightNew(event) {
            const input = event.target;
            const val = input.value?.trim().toLowerCase();
            input.classList.remove('new-entry', 'existing-entry');

            if (!val) return;

            const isKnown = window.knownMeals.some(name => name.toLowerCase() === val);
            input.classList.add(isKnown ? 'existing-entry' : 'new-entry');
        }
    }"




<!-- Rest of the content remains unchanged -->




<section class="weekly-editor">
    <h1 style="color:#ECEFF1; margin-bottom:12px;">Veckomeny - Vecka @Model.WeekNumber</h1>
    <div class="week-nav" style="margin-bottom:12px; display:flex; align-items:center; color:#B0BEC5; font-size:0.9rem;">
        <a asp-action="Veckomeny" asp-route-week="@(Model.WeekNumber - 1)" asp-route-year="@Model.Year" style="margin-right:8px;">&larr; Föregående vecka</a>
        <span style="font-weight:bold; color:#ECEFF1;">Vecka @Model.WeekNumber</span>
        <a asp-action="Veckomeny" asp-route-week="@(Model.WeekNumber + 1)" asp-route-year="@Model.Year" style="margin-left:8px;">Nästa vecka &rarr;</a>
    </div>

    <form method="post" asp-action="SaveVeckomeny">
        <input type="hidden" name="week" value="@Model.WeekNumber" />
        <input type="hidden" name="year" value="@Model.Year" />
        <table style="width:100%; border-collapse:separate; border-spacing:0 4px; font-size:0.9rem;">
            <thead>
                <tr style="background:#37474F; color:#ECEFF1;">
                    <th style="padding:8px 12px; text-align:left; border-radius:4px 0 0 4px;">Dag</th>
                    <th style="padding:8px 12px; text-align:left;">Middag</th>
                    <th style="padding:8px 12px; text-align:left;">Kock</th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < 7; i++) {
                    var dinnerEntry = Model.GetMealEntry(i, "Middag");
                    var lunchEntry = Model.GetMealEntry(i, "Lunch");
                    var breakfastEntry = Model.GetMealEntry(i, "Frukost");
                <tbody x-data="{ showExtra: false }">
                    <tr style="background:#2A3A48; color:#ECEFF1;">
                        <td style="padding:8px 12px; font-weight:bold; vertical-align:top; width:12%;">
                            <button type="button" x-on:click="showExtra = !showExtra" style="margin-right:6px; background:none; border:none; color:#ECEFF1; font-size:1rem; cursor:pointer;">
                                <i :class="showExtra ? 'fa-solid fa-chevron-right rotate-chevron open' : 'fa-solid fa-chevron-right rotate-chevron'"></i>
                            </button>
                            @days[i]
                        </td>
                        <td style="padding:8px 12px; vertical-align:top;">
                            <div style="display:flex; align-items:center; gap:4px;">
                                <input type="text" name="Meal[@i][Middag]" value="@dinnerEntry?.DinnerMealName" placeholder="Lägg till middag..." list="meals-list" class="meal-input" :tabindex="showExtra ? 0 : -1" x-on:input="highlightNew($event)" />
                                <button type="button" class="delete-btn" title="Rensa middag" onclick="this.previousElementSibling.value='';">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                        </td>
                        <td style="padding:8px 12px; vertical-align:top; width:14%;">
                            <select name="Cook[@i]" :tabindex="showExtra ? 0 : -1" style="width:100%; padding:6px; border-radius:8px; border:1px solid #546E7A; background:#445A6E; color:#ECEFF1; font-size:0.9rem;">
                                <option value="">Välj kock</option>
                                @foreach(var user in Model.AvailableCooks) {
                                    var selected = Model.WeeklyMenus.FirstOrDefault(m => m.DayOfWeek == i+1)?.Cook == user.Username;
                                    <option value="@user.Username" selected="@selected">@user.Name</option>
                                }
                            </select>
                        </td>
                    </tr>
                    <tr x-show="showExtra" x-transition x-cloak style="background:#2A3A48; color:#ECEFF1;">
                        <td></td>
                        <td colspan="2">
                            <div style="display:flex; flex-direction:column; gap:8px;">
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <label style="font-size:0.85rem; color:#B0BEC5; min-width:60px;">Frukost:</label>
                                    <input type="text" name="Meal[@i][Frukost]" value="@breakfastEntry?.BreakfastMealName" placeholder="Lägg till frukost..." list="meals-list" class="meal-input" :tabindex="showExtra ? 0 : -1" x-on:input="highlightNew($event)" />
                                    <button type="button" class="delete-btn" title="Rensa frukost" onclick="this.previousElementSibling.value='';">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </div>
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <label style="font-size:0.85rem; color:#B0BEC5; min-width:60px;">Lunch:</label>
                                    <input type="text" name="Meal[@i][Lunch]" value="@lunchEntry?.LunchMealName" placeholder="Lägg till lunch..." list="meals-list" class="meal-input" :tabindex="showExtra ? 0 : -1" x-on:input="highlightNew($event)" />
                                    <button type="button" class="delete-btn" title="Rensa lunch" onclick="this.previousElementSibling.value='';">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
                }
            </tbody>
        </table>

<!-- Save button och övrigt -->
<div class="add-meal-wrapper">
    <button type="submit" style="padding:8px 16px; border:none; border-radius:8px; background:#FFEB3B; font-weight:bold; font-size:0.9rem;">Spara veckomeny</button>
</div>
        <aside class="recent-history" style="background:#37474F; border-radius:8px; color:#ECEFF1; padding:16px; margin-top:24px;">
            <h2 style="margin:0 0 8px; font-size:1rem;">Översikt senaste 4 veckor</h2>
            @{
                var lastWeeks = Enumerable.Range(1, 4)
                    .Select(i => DateTime.Now.AddDays(-7 * i))
                    .Select(dt => new { Year = dt.Year, Week = ISOWeek.GetWeekOfYear(dt) })
                    .Distinct().ToList();
            }
            <table style="width:100%; border-collapse:collapse; font-size:0.85rem;">
                <thead>
                    <tr style="background:#546E7A; color:#ECEFF1;">
                        <th style="padding:4px 8px;">Vecka</th>
                        @foreach (var d in days)
                        {
                            <th style="padding:4px 8px;">@d</th>
                        }
                    </tr>
                </thead>
                <tbody>
                    @foreach (var w in lastWeeks)
                    {
                        <tr style="background:#2A3A48; color:#ECEFF1;">
                            <td style="padding:4px 8px; font-weight:bold;">@w.Week</td>
                            @for (int idx = 1; idx <= 7; idx++)
                            {
                                var entry = Model.RecentEntries?.FirstOrDefault(e =>
                                    e.Date.Year == w.Year &&
                                    ISOWeek.GetWeekOfYear(e.Date) == w.Week &&
                                    ((int)e.Date.DayOfWeek == (idx % 7))
                                );
                                <td style="padding:4px 8px; white-space:nowrap;">@(entry?.DinnerMealName ?? "—")</td>
                            }
                        </tr>
                    }
                </tbody>
            </table>
        </aside>
            <datalist id="meals-list">
        @foreach(var m in ViewBag.AvailableMeals as List<Aberwyn.Models.Meal>) {
            <option value="@m.Name" id="@m.Name"></option>
        }
</datalist>
</form>
</div>



