@model Aberwyn.Models.WeeklyMenu
@{
    var showDate = (DateTime)ViewBag.ShowDate;
    var day = showDate.ToString("dddd", new System.Globalization.CultureInfo("sv-SE"));
}
<link rel="stylesheet" href="~/css/Welcome.css" />

<section class="welcome-section light-mode">
    <div class="welcome-content">
        <h1 class="welcome-title">Välkommen till
                <span class="initial L">L</span>
                <span class="initial E">E</span>
                <span class="initial W">W</span>
                <span class="initial E2">E</span>
                <span class="initial L2">L</span></h1>
        <p class="welcome-subtitle">Meny för <strong>@day</strong> är:</p>

        @if (Model != null)
        {
            <div class="meal-lines">

@if (!string.IsNullOrWhiteSpace(Model.BreakfastMealName)) {
    <div class="meal-line">
        <p><strong>Frukost:</strong>
            <a href="/meal/view/@Model.BreakfastMealId">@Model.BreakfastMealName</a>
        </p>
        @if (Model.BreakfastThumbnail != null)
        {
            var b64 = Convert.ToBase64String(Model.BreakfastThumbnail);
            <div class="meal-large-thumb-container">
                <img class="meal-large-thumb" src="data:image/jpeg;base64,@b64" alt="@Model.BreakfastMealName" />
            </div>
        }
    </div>
}

@if (!string.IsNullOrWhiteSpace(Model.LunchMealName)) {
    <div class="meal-line">
        <p><strong>Lunch:</strong>
            <a href="/meal/view/@Model.LunchMealId">@Model.LunchMealName</a>
        </p>
        @if (Model.LunchThumbnail != null)
        {
            var b64 = Convert.ToBase64String(Model.LunchThumbnail);
            <div class="meal-large-thumb-container">
                <img class="meal-large-thumb" src="data:image/jpeg;base64,@b64" alt="@Model.LunchMealName" />
            </div>
        }
    </div>
}

@if (!string.IsNullOrWhiteSpace(Model.DinnerMealName)) {
    <div class="meal-line">
        <p><strong>Middag:</strong>
            <a href="/meal/view/@Model.DinnerMealId">@Model.DinnerMealName</a>
        </p>
        @if (Model.DinnerThumbnail != null)
        {
            var b64 = Convert.ToBase64String(Model.DinnerThumbnail);
            <div class="meal-large-thumb-container">
                <img class="meal-large-thumb" src="data:image/jpeg;base64,@b64" alt="@Model.DinnerMealName" />
            </div>
        }
    </div>
}


                @if (ViewBag.RestaurantIsOpen as bool? == true)
                {
                    <p><strong>Pizzerian är öppen!</strong></p>
                    <a asp-controller="FoodMenu" asp-action="PizzaOrder">Klicka här för att Beställa pizza</a>
                }

            </div>


        }
        else
        {
            <p class="no-menu">Ingen meny är inlagd för denna dag.</p>
        }
        <a class="nav-button" href="/Home/Menu">Visa hela veckomenyn</a>
    </div>
</section>
<div id="lightboxOverlay" class="lightbox-overlay" onclick="hideLargeImage()" style="display:none;">
    <div class="lightbox-content" onclick="event.stopPropagation()">
        <button class="close-lightbox" onclick="hideLargeImage()">×</button>
        <img id="lightboxImage" class="lightbox-image" src="" alt="Meal image" />
        <p id="lightboxCaption" class="lightbox-caption"></p>
    </div>
</div>
<script>
    function showLargeImage(base64Data, caption) {
        const overlay = document.getElementById("lightboxOverlay");
        const image = document.getElementById("lightboxImage");
        const text = document.getElementById("lightboxCaption");
        image.src = `data:image/jpeg;base64,${base64Data}`;
        text.textContent = caption || '';
        overlay.style.display = "flex";
        document.body.classList.add("no-scroll");
    }

    function hideLargeImage() {
        document.getElementById("lightboxOverlay").style.display = "none";
        document.body.classList.remove("no-scroll");
    }

    document.addEventListener('keydown', function (e) {
        if (e.key === "Escape") hideLargeImage();
    });
</script>
