----------------
##    HTML    ##
----------------
<link rel="stylesheet" href="css/levelOne.css"/>
<div>
    <ol class="breadcrumb">
        <li>You are here: </li>
        <li>first level</li>
    </ol>
</div>
<div id="report" ng-controller="levelOneController">
	<table class="table">
		<thead>
            <tr>
                <th colspan="1"></th>
                <th>Total closing balance</th>
                <th>Currency</th>
                <th colspan="2">Total closing balance in local currency</th>
            </tr>
        </thead>
        <tbody ng-repeat="sum in summary.banks">
            <tr>
                <td class="BankName" colspan="5">{{ sum.BankName }}</td>
            </tr>
            <tr>

                <td><div id="chartLevel1" kendo-chart k-options="bar" k-data-source="chartData" />
                </td>
                <td colspan="4">
                    
                    <table class="table table-striped table-hover">
                        <tbody class="table-striped">
                            <tr ng-repeat="s in sum.curr" ng-click="goto2(sum.BankName, s.Currency)">
                                <td class="amount">{{ s.Amount | formatCurrency }}</td>
                                <td>{{ s.Currency }}</td>
                                <td></td>
                                <td class="amount">{{ s.AmountUSD | formatCurrency }}</td>
                            </tr>

                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2"></td>
                                <td class="totalBank">Total for this bank:</td>
                                <td class="totalBank amount">{{ sum.totalBank | formatCurrency }}</td>
                            </tr>
                        </tfoot>
                    </table>

                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3"></td>
                <td class="total">Total for all banks:</td>
                <td class="total amount">{{ summary.total | formatCurrency }}</td>
            </tr> 
        </tfoot> 
	</table>
</div>

----------------------
##    CONTROLLER    ##
----------------------
/* Controllers */
var counter = 0;
angular.module('myApp.controllers', ['ui.bootstrap', 'kendo.directives','ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'])
.controller("levelOneController", function (dashboardAPIService, $scope, $http, $filter, $location)
{
    $scope.goto2 = function(bankName, currency){
        $location.path('level2/' + bankName + "/" + currency);
    }
    dashboardAPIService.getBankSummary().success(function (response) {
        $scope.summary = response;
        $scope.chartData = new kendo.data.DataSource({
            data: response.banks[counter].curr
        })
    });

    $scope.bar = {
        series: [{
            type: "column",
            field: "Amount",
            categoryField: "Currency"
        }],
        valueAxis: {
            labels: {
                format: "0"
            },
            line: {
                visible: false
            },
            axisCrossingValue: 0
        },
        tooltip: {
            visible: true,
            template: "#= kendo.format('{0:n2}', value)# #= series.name #"
        },
        
    };
    
})