<h1>
    <i class="fa fa-money"></i>
    <span localize="finance"></span>
    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<ul class="tab-list" style="width: 100%; display: inline-block;">
    <li ng-class="{ active: ctrl.tab == 'budget' }" ng-click="ctrl.tab = 'budget'" localize="budget"></li>
    <li ng-class="{ active: ctrl.tab == 'transactions' }" ng-click="ctrl.tab = 'transactions'"
        localize="transactions"></li>
    <li ng-class="{ active: ctrl.tab == 'loans' }" ng-click="ctrl.tab = 'loans'" id="step2" localize="loans"></li>
</ul>
<div class="tab-content">
    <!-- Budget -->
    <div ng-if="ctrl.tab == 'budget'">
        <div class="flex-row item-list">
            <!-- Expenses -->
            <div class="flex1 item bg-dimmed-red" style="height: 340px;">
                <h4 class="text-center" localize="next_30_days"></h4>
                <div class="scrollbox" style="height: 245px;">
                    <table class="small">
                        <tr ng-repeat="employee in ctrl.employees track by employee.id">
                            <td>{{ employee.name }}</td>
                            <td class="text-right">{{ employee.salary | currency }}</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <hr class="dark">
                            </td>
                        </tr>
                        <tr>
                            <td localize="office_rent"></td>
                            <td class="text-right">{{financeData.expenses.officeRent | currency}}</td>
                        </tr>
                        <tr ng-repeat="loan in ctrl.loans track by loan.provider">
                            <td localize="transaction_loan" localize-data-provider="loan.provider"></td>
                            <td class="text-right">{{ ctrl.calculateLoanText(loan) | currency}}</td>
                        </tr>
                        <tr ng-repeat="benefit in ctrl.activatedBenefits track by benefit.name">
                            <td localize="{{ benefit.name }}"></td>
                            <td class="text-right">{{ Helpers.CalculateBenefitCost(benefit).monthly | currency }}</td>
                        </tr>
                        <tr ng-if="ctrl.hostingExpenses.length > 0">
                            <td colspan="2">
                                <hr class="dark">
                            </td>
                        </tr>
                        <tr ng-repeat="expense in ctrl.hostingExpenses track by expense.product.id">
                            <td>
                                {{ expense.product.name }}: <span localize="hosting_expenses"></span>
                            </td>
                            <td class="text-right">{{ expense.amount | currency }}</td>
                        </tr>
                    </table>
                </div>

                <table>
                    <tr class="text-bold">
                        <td localize="total"></td>
                        <td class="text-right">-{{ financeData.expenses.total | currency }}</td>
                    </tr>
                </table>
            </div>

            <div class="flex1 item bg-dimmed-green" style="height: 340px;">
                <h4 class="text-center" localize="last_30_days"></h4>
                <div class="scrollbox" style="height: 245px;">
                    <table class="small">
                        <tr ng-repeat="productInfo in ctrl.incomeByProduct">
                            <td>{{ productInfo.name }}</td>
                            <td class="text-right">{{ productInfo.income | currency }}</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <hr class="dark">
                            </td>
                        </tr>
                        <tr ng-repeat="contract in ctrl.last30daysContracts track by contract.id">
                            <td localize="contract_number" localize-data-number="contract.number"></td>
                            <td class="text-right">{{ contract.price | currency }}</td>
                        </tr>
                    </table>
                </div>

                <table>
                    <tr class="text-bold">
                        <td localize="total"></td>
                        <td class="text-right">{{ financeData.income.totalIncome | currency }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="flex-row item-list">
            <div class="flex1 item" style="height: 130px; margin-top: 0;">
                <table class="medium">
                    <tr>
                        <td localize="bank_balance"></td>
                        <td class="text-right">{{ settings.balance | currency }}</td>
                    </tr>
                    <tr>
                        <td localize="per_day"></td>
                        <td class="text-right">{{financeData.profit.perDay | currency }}</td>
                    </tr>
                    <tr class="text-bold">
                        <td localize="per_month"></td>
                        <td class="text-right"
                            ng-class="{'color-red': financeData.profit.perMonth < 0, 'color-green': financeData.profit.perMonth > 0 }">
                            {{financeData.profit.perMonth | currency }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Transactions -->
    <div ng-if="ctrl.tab == 'transactions'" class="padding">
        <div class="flex-row item-list" style="min-height: 485px;">
            <div class="flex1 item" style="margin: 0;">
                <table class="medium" ng-if="ctrl.transactions.length != 0">
                    <thead>
                    <tr>
                        <th style="width: 90px;" localize="day"></th>
                        <th localize="label"></th>
                        <th style="width: 130px;" localize="amount"></th>
                        <th style="width: 130px;" class="text-right" localize="bank_balance"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="transaction in ctrl.transactions track by transaction.id">
                        <td localize="topbar_day" localize-data-day="{{transaction.day}}"></td>
                        <td>{{ transaction.label }}</td>
                        <td ng-class="{ 'color-red': transaction.amount < 0, 'color-green': transaction.amount >= 0 }">
                            {{ transaction.amount | currency }}
                        </td>
                        <td class="text-right">{{ transaction.balance | currency }}</td>
                    </tr>
                    </tbody>
                </table>


                <div class="text-center" style="position: absolute; width: 100%; bottom: 20px;">
                    <button type="button" class="cancel square" ng-disabled="ctrl.page == 1"
                            ng-click="ctrl.page = ctrl.page-1"><i class="fa fa-chevron-circle-left"></i> <span
                            localize="previous"></span></button>
                    <button type="button" class="cancel square" ng-disabled="ctrl.page == ctrl.maxPage"
                            ng-click="ctrl.page = ctrl.page+1"><span localize="next"></span> <i
                            class="fa fa-chevron-circle-right"></i>
                    </button>
                </div>

                <p ng-if="ctrl.transactions.length == 0" localize="no_transactions"
                   class="padding color-red text-center"></p>
            </div>
        </div>

    </div>

    <!-- Loans -->
    <div ng-if="ctrl.tab == 'loans'">
        <p class="dimmed padding" style="margin-bottom: 0; padding-bottom: 0;" localize="loans_description"></p>

        <div class="flex-row item-list" style="height: 456px;">
            <div class="flex1 item"
                 ng-class="{active: loan.active, 'disabled': loan.tier > companyTier }"
                 tooltip-enable="loan.tier> companyTier"
                 uib-tooltip="{{ GetLocalized('unlocked_at_tier', { tier: loan.tier}) }}"
                 ng-repeat="loan in settings.loans">
                <h3 class="text-center" style="margin: 10px 0;">{{ loan.provider }}</h3>
                <table class="medium">
                    <tr>
                        <td class="dimmed" localize="amount"></td>
                        <td class="text-right">{{ loan.amount | currency }}</td>
                    </tr>
                    <tr>
                        <td class="dimmed" localize="plan"></td>
                        <td class="text-right" localize="x_days" localize-data-days="{{ loan.days }}"></td>
                    </tr>
                    <tr>
                        <td class="dimmed" localize="interest"></td>
                        <td class="text-right">{{ loan.interest }}%</td>
                    </tr>
                    <tr>
                        <td class="dimmed" localize="daily_cost"></td>
                        <td class="text-right">{{ loan.dailyPayment | currency }}</td>
                    </tr>
                    <tr class="text-bold">
                        <td class="dimmed" localize="total"></td>
                        <td class="text-right">{{ loan.dailyPayment * loan.days | currency }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr style="margin: 10px 0;">
                        </td>
                    </tr>
                    <tr ng-if="loan.active">
                        <td class="dimmed" localize="time_left"></td>
                        <td class="text-right" localize="x_days" localize-data-days="{{ loan.daysLeft }}"></td>
                    </tr>
                    <tr ng-if="loan.active">
                        <td class="dimmed" localize="remaining"></td>
                        <td class="text-right">{{ loan.amountLeft | currency }}</td>
                    </tr>
                </table>
                <div class="text-center" style="margin: 10px 0;">
                    <button type="button" class="square" ng-if="!loan.active" style="margin: 30px 0"
                            ng-click="ctrl.takeLoan(loan)" id="loan-button-{{$index}}"
                            ng-disabled="loan.tier> companyTier" localize="take_loan"></button>
                    <button type="button" class="square blue" ng-if="loan.active" ng-click="ctrl.payNow(loan)"
                            localize="pay_now"></button>
                </div>
            </div>
        </div>
    </div>
</div>
