<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="Danny Giebe">

	<meta name="viewport" content="width=device-width,initial-scale=1">

	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
	<script src='https://cdn.firebase.com/v0/firebase.js'></script>
	<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
	<script src="script.js"></script>


	
</head>
<body>

<div ng-app="balance">
	<header class="navbar" style="background: lightslategrey; border-radius: 0">
		<h1 style="font-size: 2em; color: #fff; font-weight: normal; margin: 10px 0 0 30px">Balance</h1>
	</header>
	<div class="col-lg-12" ng-controller="BalanceCtrl">
		<div class="row">
			<div class="col-lg-12">
				<h3>Profit: {{totalBalance}}</h3>
			</div>
		</div>
		<div class="row">
		<div class="col-lg-6">
			<h2>Earnings</h2>
			<form for="Einnahmen" class="form-inline" style="margin-bottom: 20px" ng-submit="addEarning()">
				<div class="form-group">
					<div class="col-sm-3">
						<input type="date" name="idate" ng-model="FormEarningDate" class="form-control" id="idate" placeholder="Date">
					</div>
					<div class="col-sm-5">
						<input type="text" name="idesc" ng-model="FormEarningDescription" required class="form-control" id="idesc" placeholder="Description">
					</div>
					<div class="col-sm-2">
						<input type="text" name="iprice" ng-model="FormEarningPrice" required class="form-control" id="iprice" placeholder="Amount">
					</div>
					<input type="submit" class="btn btn-success" value="Add">
				</div>
			</form>
			<table class="table table-striped">
				<tr>
					<th>Date</th>
					<th>Description</th>
					<th>Amount</th>
					<th width="50">&nbsp;</th>
				</tr>
				
				<tr ng-repeat="earning in earnings | orderByPriority | orderBy : 'date'">
					<td>{{earning.date}}</td>
					<td>{{earning.description}}</td>
					<td>{{earning.price}} €</td>
					<td><button class="btn btn-danger" ng-click="earnings.$remove(earning.$id)">Delete</button></td>
				</tr>
				<tr>
					<td colspan="2"></td>
					<td><strong>Gesamt:</strong> {{totalEarning}} €</td>
					<td></td>
				</tr>
			</table>
		</div>
		
		</div>
	</div>	
</div> <!--! end of #container -->


</body>
</html>
// Code goes here

var app = angular.module('balance', ['Ctrl', 'firebase']);

app.run(function($log) {
  $log.log('Balance started');

});

var Ctrl = angular.module('Ctrl', [])


  function BalanceCtrl($scope, $log, $http, $firebase) {

    var dbEarnings = new Firebase('https://dgdemo.firebaseio.com/Earnings');
    $scope.earnings = $firebase(dbEarnings);


    $scope.totalBalance = 'Nothing yet.';
    $scope.totalEarning = 0;
    $scope.totalCost = 0;



    $scope.addEarning = function() {
      $scope.earnings.$add({
        date: $scope.FormEarningDate,
        description: $scope.FormEarningDescription,
        price: $scope.FormEarningPrice
      });
      $scope.FormEarningDate = '';
      $scope.FormEarningDescription = '';
      $scope.FormEarningPrice = '';
      $scope.updateEarning();
    }


    $scope.updateEarning = function() {
      $scope.totalEarning = 0;
      angular.forEach($scope.earnings.$getIndex(), function (id) {
        var earning = $scope.earnings[id];
        $scope.totalEarning += parseFloat(earning.price);
      });
      $scope.totalBalance = $scope.totalEarning - $scope.totalCost;
    }

  }
/* Styles go here */