@using Aberwyn.Models 
@model Aberwyn.Models.BudgetModel 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <title>Your Page Title</title>
</head>
<header class="header">
    <div class="header-container">
        <h1 class="family-header">
            <span class="initial L">L</span><span class="name">ouise</span>
            <span class="initial E">E</span><span class="name">lias</span>
            <span class="initial W">W</span><span class="name">illiam</span>
            <span class="initial E2">E</span><span class="name">lin</span>
            <span class="initial L2">L</span><span class="name">udwig</span>
        </h1>
    </div>
</header>
<body>

<div class="grid-container">
    <aside class="left-sidebar"> <!-- Left sidebar -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">
                    <i class="fas fa-home"></i> Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Budget">
                    <i class="fas fa-wallet"></i> Budget
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="RealEstate">
                    <i class="fas fa-building"></i> RealEstate
                </a>
            </li>
        </ul>
    </aside>
    <main role="main" class="main-content"> <!-- Main content area -->
        @RenderBody() <!-- This is where the content of each page will be rendered -->
    </main>
    <aside class="right-sidebar"> <!-- Updated Right Sidebar -->
        @if (Model != null && Model.BudgetItems != null)
        {
            <h3 class="sidebar-budget-header">Budget this month: <span class="total-budget-amount">@Model.BudgetItems.Sum(item => item.Amount)</span></h3>
            <div class="sidebar-budget-container"> <!-- New Container -->
                @if (Model.BudgetItems.Any())
                {
                    foreach (var categoryGroup in Model.BudgetItems.GroupBy(item => item.Category))
                    {
                        <div class="sidebar-budget-item">
                            <span class="budget-item-name">@categoryGroup.Key</span>
                            <span class="budget-item-amount">@categoryGroup.Sum(item => item.Amount)</span>
                        </div>
                    }
                }
                else
                {
                    <p>No categories available.</p>
                }
            </div>
        }
        else
        {
            <h3>No budget data available.</h3>
        }
    </aside>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const budgetHeader = document.querySelector('.sidebar-budget-header');
        const budgetContainer = document.querySelector('.sidebar-budget-container');
        
        budgetHeader.addEventListener('click', function () {
            budgetContainer.style.display = budgetContainer.style.display === 'none' ? 'block' : 'none';
        });
        
        // Initially hide the budget items container
        budgetContainer.style.display = 'none';
    });
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
