@{
    ViewData["Title"] = "Budgetrapport";
}

<div ng-app="reportApp" ng-controller="ReportController" class="report-page" ng-init="init()">
    <h1>Budgetrapport</h1>

    <div class="report-controls">
        <div class="date-select">
            <label>Från:</label>
            <select ng-model="startYear" ng-options="y for y in years"></select>
            <select ng-model="startMonth" ng-options="m.value as m.label for m in months"></select>
            <label>till:</label>
            <select ng-model="endYear" ng-options="y for y in years"></select>
            <select ng-model="endMonth" ng-options="m.value as m.label for m in months"></select>
        </div>

        <div class="definition-select">
            <label>Välj poster att inkludera:</label>
            <div class="checkbox-grid">
                <label ng-repeat="def in definitions">
                    <input type="checkbox" ng-model="def.Selected" /> {{ def.Name }}
                </label>
            </div>
        </div>

        <button class="btn-generate" ng-click="loadReport()">Generera rapport</button>
    </div>

    <div class="report-results" ng-if="results.length > 0">
        <h2>Resultat</h2>

        <canvas id="reportChart" width="100%" height="50"></canvas>

        <table class="report-table">
            <thead>
                <tr>
                    <th>År</th>
                    <th>Månad</th>
                    <th ng-repeat="def in activeDefinitions">{{ def.Name }}</th>
                    <th>Totalt</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in results">
                    <td>{{ row.Year }}</td>
                    <td>{{ monthName(row.Month) }}</td>
                    <td ng-repeat="def in activeDefinitions">
                        {{ getAmount(row, def.Id) | number:0 }}
                    </td>
                    <td>{{ getRowTotal(row) | number:0 }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<link rel="stylesheet" href="~/css/report.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="~/js/report.js"></script>
