PowderCoatingLogix/src/PowderCoating.Web/Views/Budgets/Create.cshtml

@using PowderCoating.Web.Controllers
@model BudgetCreateVm

@{
    ViewData["Title"] = "New Budget";
    ViewData["PageIcon"] = "bi-plus-circle";
    var months = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
}

<div class="mb-4">
    <a asp-action="Index" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back to Budgets
    </a>
</div>

<form asp-action="Create" method="post" id="budgetForm">
    @Html.AntiForgeryToken()

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-0 py-3">
            <h5 class="mb-0 fw-semibold"><i class="bi bi-pie-chart me-2 text-primary"></i>Budget Details</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-5">
                    <label class="form-label">Budget Name <span class="text-danger">*</span></label>
                    <input asp-for="Name" class="form-control" required placeholder="e.g., FY2026 Operating Budget" />
                </div>
                <div class="col-md-2">
                    <label class="form-label">Fiscal Year <span class="text-danger">*</span></label>
                    <input asp-for="FiscalYear" type="number" class="form-control" min="2000" max="2099" required />
                </div>
                <div class="col-md-4">
                    <label class="form-label">Notes</label>
                    <input asp-for="Notes" class="form-control" placeholder="Optional description" />
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <div class="form-check form-switch mb-2">
                        <input asp-for="IsDefault" class="form-check-input" type="checkbox" />
                        <label asp-for="IsDefault" class="form-check-label small">Default</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-semibold"><i class="bi bi-table me-2 text-primary"></i>Monthly Amounts by Account</h5>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="fillEvenlyBtn">
                    <i class="bi bi-distribute-horizontal me-1"></i>Spread Annual Evenly
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle mb-0" id="budgetTable">
                    <thead class="table-light">
                        <tr>
                            <th style="min-width:180px">Account</th>
                            <th class="text-end" style="min-width:70px">Annual</th>
                            @foreach (var m in months)
                            {
                                <th class="text-end" style="min-width:75px">@m</th>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.Lines.Count; i++)
                        {
                            var line = Model.Lines[i];
                            <tr data-account-id="@line.AccountId">
                                <td>
                                    <input type="hidden" name="Lines[@i].AccountId" value="@line.AccountId" />
                                    <input type="hidden" name="Lines[@i].AccountNumber" value="@line.AccountNumber" />
                                    <input type="hidden" name="Lines[@i].AccountName" value="@line.AccountName" />
                                    <input type="hidden" name="Lines[@i].AccountType" value="@((int)line.AccountType)" />
                                    <span class="fw-semibold text-nowrap">@line.AccountNumber</span>
                                    <span class="text-muted ms-1">@line.AccountName</span>
                                </td>
                                <td class="text-end">
                                    <span class="annual-total fw-semibold" data-row="@i">0.00</span>
                                </td>
                                @{
                                    var fieldNames = new[] { "Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" };
                                    var values = new decimal[] { line.Jan, line.Feb, line.Mar, line.Apr, line.May, line.Jun, line.Jul, line.Aug, line.Sep, line.Oct, line.Nov, line.Dec };
                                }
                                @for (int m = 0; m < 12; m++)
                                {
                                    <td class="text-end p-0">
                                        <input type="number" name="Lines[@i].@fieldNames[m]"
                                               value="@values[m].ToString("F2", System.Globalization.CultureInfo.InvariantCulture)"
                                               class="form-control form-control-sm text-end border-0 budget-cell"
                                               step="0.01" min="0"
                                               data-row="@i"
                                               style="min-width:70px" />
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-lg me-2"></i>Create Budget
        </button>
        <a asp-action="Index" class="btn btn-outline-secondary">Cancel</a>
    </div>
</form>

@section Scripts {
    <script src="~/js/budget-edit.js" asp-append-version="true"></script>
}