<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <title>Budget Översikt</title>
    <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/budget-overview.css" />

</head>
<body ng-app="budgetApp" ng-controller="BudgetOverviewController" class="budget-report-overview-body" ng-cloak>

    <h2>Visa kolumner</h2>

    <div class="budget-column-selector-wrapper">
        <!-- Kategori-definitioner -->
        <div class="budget-column-selector">
            <span>Kategori-definitioner:</span>
            <input type="text" ng-model="searchCategoryDef" placeholder="Sök..."
                   ng-focus="openDropdown('catDef')" ng-click="$event.stopPropagation()" />
            <div class="budget-dropdown-menu" ng-show="dropdownOpenCatDef">
                <label ng-repeat="col in categoryDefColumns | filter:searchCategoryDef track by $index">
                    <input type="checkbox" ng-model="selectedCategoryDef[col]" /> {{ col }}
                </label>
            </div>
        </div>

        <!-- Kategori-namn -->
        <div class="budget-column-selector">
            <span>Kategori-namn:</span>
            <input type="text" ng-model="searchCategoryLabel" placeholder="Sök..."
                   ng-focus="openDropdown('catLabel')" ng-click="$event.stopPropagation()" />
            <div class="budget-dropdown-menu" ng-show="dropdownOpenCatLabel">
                <label ng-repeat="col in categoryLabelColumns | filter:searchCategoryLabel track by $index">
                    <input type="checkbox" ng-model="selectedCategoryLabel[col]" /> {{ col }}
                </label>
            </div>
        </div>

        <!-- Item-definitioner -->
        <div class="budget-column-selector">
            <span>Item-definitioner:</span>
            <input type="text" ng-model="searchItemDef" placeholder="Sök..."
                   ng-focus="openDropdown('itemDef')" ng-click="$event.stopPropagation()" />
            <div class="budget-dropdown-menu" ng-show="dropdownOpenItemDef">
                <label ng-repeat="col in itemDefColumns | filter:searchItemDef track by $index">
                    <input type="checkbox" ng-model="selectedItemDef[col]" /> {{ col }}
                </label>
            </div>
        </div>

        <!-- Item-namn -->
        <div class="budget-column-selector">
            <span>Item-namn:</span>
            <input type="text" ng-model="searchItemLabel" placeholder="Sök..."
                   ng-focus="openDropdown('itemLabel')" ng-click="$event.stopPropagation()" />
            <div class="budget-dropdown-menu" ng-show="dropdownOpenItemLabel">
                <label ng-repeat="col in itemLabelColumns | filter:searchItemLabel track by $index">
                    <input type="checkbox" ng-model="selectedItemLabel[col]" /> {{ col }}
                </label>
            </div>
        </div>

        <!-- Månadssökfält med checkboxar och popup -->
        <div class="budget-column-selector">
            <span>Visa månader:</span>
            <input type="text" ng-model="searchMonth" placeholder="Sök månad eller år..."
                   ng-focus="dropdownOpenMonth = true"
                   ng-click="$event.stopPropagation()" />
            <div class="budget-dropdown-menu" ng-show="dropdownOpenMonth">
                <label ng-repeat="month in allMonths | filter:searchMonth track by month.id">
                    <input type="checkbox" ng-model="selectedMonths[month.id]" /> {{ month.year }} - {{ month.name }}
                </label>
            </div>
        </div>
    </div>
    <div class="budget-column-selector">
        <label>
            <input type="checkbox" ng-model="splitByYear" /> Dela upp per år
        </label>
    </div>
    <div class="budget-column-selector">
        <label>
            <input type="checkbox" ng-model="showTotals" /> Visa Inkomst / Utgift / Netto
        </label>
    </div>


    <div ng-if="!years.length" class="budget-loading-indicator">Laddar data…</div>

    <!-- Budgetblad -->
    <div ng-repeat="yearData in (splitByYear ? years : flatYears) | orderBy:'-year' track by yearData.year">
        <div class="budget-year-header">{{ yearData.year }}</div>

        <!-- Header -->
        <div class="budget-sheet-header">
            <div class="budget-sheet-cell month">Månad</div>
            <div class="budget-sheet-cell income" ng-if="showTotals">Inkomst</div>
            <div class="budget-sheet-cell expense" ng-if="showTotals">Utgift</div>
            <div class="budget-sheet-cell net" ng-if="showTotals">Netto</div>

            <div class="budget-extra-columns">
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.categoryDef track by $index"
                     ng-if="selectedCategoryDef[colName]"
                     ng-style="{'background-color': categoryColors.catDef[colName]}">
                    {{ colName }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.categoryLabel track by $index"
                     ng-if="selectedCategoryLabel[colName]"
                     ng-style="{'background-color': categoryColors.catLabel[colName]}">
                    {{ colName }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.itemDef track by $index"
                     ng-if="selectedItemDef[colName]">
                    {{ colName }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.itemLabel track by $index"
                     ng-if="selectedItemLabel[colName]">
                    {{ colName }}
                </div>
            </div>
        </div>

        <!-- Rader -->
        <div class="budget-sheet-row" ng-repeat="month in yearData.months | filter:filterMonths track by month.id">

            <div class="budget-sheet-cell month">{{ month.year }} - {{ monthNames[month.month-1] }}</div>
            <div class="budget-sheet-cell income" ng-if="showTotals"
                 ng-class="{'budget-positive': month.income >=0, 'budget-negative': month.income <0}">
                {{ month.income | number:0 }}
            </div>
            <div class="budget-sheet-cell expense" ng-if="showTotals"
                 ng-class="{'budget-positive': month.expense >=0, 'budget-negative': month.expense <0}">
                {{ month.expense | number:0 }}
            </div>
            <div class="budget-sheet-cell net" ng-if="showTotals"
                 ng-class="{'budget-positive': month.net >=0, 'budget-negative': month.net <0}">
                {{ month.net | number:0 }}
            </div>

            <div class="budget-extra-columns">
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.categoryDef track by $index"
                     ng-if="selectedCategoryDef[colName]"
                     ng-class="{'budget-positive': month.categoryDefinitions[colName] >=0, 'budget-negative': month.categoryDefinitions[colName] <0}">
                    {{ month.categoryDefinitions[colName] || 0 | number:0 }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.categoryLabel track by $index"
                     ng-if="selectedCategoryLabel[colName]"
                     ng-class="{'budget-positive': month.categoryLabels[colName] >=0, 'budget-negative': month.categoryLabels[colName] <0}">
                    {{ month.categoryLabels[colName] || 0 | number:0 }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.itemDef track by $index"
                     ng-if="selectedItemDef[colName]"
                     ng-class="{'budget-positive': month.itemDefinitions[colName] >=0, 'budget-negative': month.itemDefinitions[colName] <0}">
                    {{ month.itemDefinitions[colName] || 0 | number:0 }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.itemLabel track by $index"
                     ng-if="selectedItemLabel[colName]"
                     ng-class="{'budget-positive': month.itemLabels[colName] >=0, 'budget-negative': month.itemLabels[colName] <0}">
                    {{ month.itemLabels[colName] || 0 | number:0 }}
                </div>
            </div>
        </div>

        <!-- Totalsumma -->
        <div class="budget-sheet-row budget-total-row" ng-if="yearData.months.length">
            <div class="budget-sheet-cell month">Total</div>
            <div class="budget-sheet-cell income" ng-if="showTotals">
                {{ getYearTotal(yearData.months, 'income') | number:0 }}
            </div>
            <div class="budget-sheet-cell expense" ng-if="showTotals">
                {{ getYearTotal(yearData.months, 'expense') | number:0 }}
            </div>
            <div class="budget-sheet-cell net" ng-if="showTotals">
                {{ getYearTotal(yearData.months, 'net') | number:0 }}
            </div>ö

            <div class="budget-extra-columns">
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.categoryDef track by $index"
                     ng-if="selectedCategoryDef[colName]">
                    {{ getYearTotal(yearData.months, 'categoryDefinitions', colName) | number:0 }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.categoryLabel track by $index"
                     ng-if="selectedCategoryLabel[colName]">
                    {{ getYearTotal(yearData.months, 'categoryLabels', colName) | number:0 }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.itemDef track by $index"
                     ng-if="selectedItemDef[colName]">
                    {{ getYearTotal(yearData.months, 'itemDefinitions', colName) | number:0 }}
                </div>
                <div class="budget-sheet-cell other"
                     ng-repeat="colName in columnOrder.itemLabel track by $index"
                     ng-if="selectedItemLabel[colName]">
                    {{ getYearTotal(yearData.months, 'itemLabels', colName) | number:0 }}
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="~/js/budget-overview.js"></script>

</body>
</html>
