{% extends "./layout/default" %}

{% block breadcrumbs %}
    {{ Breadcrumbs.renderIfExists(Route.getCurrentRoute.getName, accountIds, budgetIds, start, end) }}
{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'accounts'|_ }}</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover sortable">
                        <thead>
                        <tr>
                            <th data-defaultsign="az">{{ 'name'|_ }}</th>
                            <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for account in accounts %}
                            <tr>
                                <td data-value="{{ account.name }}">
                                    <a href="{{ route('accounts.show', account.id) }}" title="{{ account.name }}">{{ account.name }}</a>
                                </td>
                                {% if accountSummary[account.id] %}
                                    <td data-value="{{ accountSummary[account.id] }}" style="text-align: right;">{{ accountSummary[account.id]|formatAmount }}</td>
                                {% else %}
                                    <td data-value="0" style="text-align: right;">{{ 0|formatAmount }}</td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'budgets'|_ }}</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover sortable">
                        <thead>
                        <tr>
                            <th data-defaultsign="az">{{ 'name'|_ }}</th>
                            <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for budget in budgets %}
                            <tr>
                                <td data-value="{{ budget.name }}">
                                    <a href="{{ route('budgets.show', budget.id) }}" title="{{ budget.name }}">{{ budget.name }}</a>
                                </td>
                                {% if budgetSummary[budget.id] %}
                                    <td data-value="{{ budgetSummary[budget.id] }}" style="text-align: right;">{{ budgetSummary[budget.id]|formatAmount }}</td>
                                {% else %}
                                    <td data-value="0" style="text-align: right;">{{ 0|formatAmount }}</td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% if budgets.count > 1 %}
            <div class="col-lg-4 col-md-6">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'expense_per_budget'|_ }}</h3>
                    </div>
                    <div class="box-body">
                        <div style="width:75%;margin:0 auto;">
                            <canvas id="budgets-out-pie-chart" style="margin:0 auto;"></canvas>
                        </div>
                        <label style="font-weight:normal;">
                            <input type="checkbox" id="budgets-out-pie-chart-checked">
                            <small>{{ 'include_expense_not_in_budget'|_ }}</small>
                        </label>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="col-lg-4 col-md-6">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'expense_per_account'|_ }}</h3>
                </div>
                <div class="box-body">
                    <div style="width:75%;margin:0 auto;">
                    <canvas id="accounts-out-pie-chart" style="margin:0 auto;"></canvas>
                    </div>
                    <label style="font-weight:normal;">
                        <input type="checkbox" id="accounts-out-pie-chart-checked">
                        <small>{{ 'include_expense_not_in_account'|_ }}</small>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                </div>
                <div class="box-body">
                    {#
                    Here be a chart with the budget limits as well if relevant.<br>
                    amount spent vs budget limit reps<br>
                    over the entire period the amount spent would rise and the budget limit rep would be like a heart beat jumping up and down<br>
                    needs to be two axes to work<br>#}
                    <canvas id="in-out-chart" style="margin:0 auto;" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        {% if averageExpenses|length > 0 %}
            <div class="col-lg-6">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'average_spending_per_account'|_ }}</h3>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover sortable">
                            <thead>
                            <tr>
                                <th data-defaultsign="az">{{ 'account'|_ }}</th>
                                <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
                                <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
                                <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for row in averageExpenses %}
                                {% if loop.index > listLength %}
                                    <tr class="overListLength">
                                {% else %}
                                    <tr>
                                {% endif %}
                                <td data-value="{{ row.name }}">
                                    <a href="{{ route('accounts.show', row.id) }}">{{ row.name }}</a>
                                </td>
                                <td data-value="{{ row.average }}" style="text-align: right;">
                                    {{ row.average|formatAmount }}
                                </td>
                                <td data-value="{{ row.sum }}" style="text-align: right;">
                                    {{ row.sum|formatAmount }}
                                </td>
                                <td data-value="{{ row.count }}">
                                    {{ row.count }}
                                </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            {% if averageExpenses|length > listLength %}
                                <tr>
                                    <td colspan="4" class="active">
                                        <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
                                    </td>
                                </tr>
                            {% endif %}
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}
        {% if topExpenses.count > 0 %}
            <div class="col-lg-6">

                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'expenses'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
                    </div>
                    <div class="box-body">
                        <table class="table table-hover sortable">
                            <thead>
                            <tr>
                                <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
                                <th data-defaultsign="month">{{ 'date'|_ }}</th>
                                <th data-defaultsign="az">{{ 'account'|_ }}</th>
                                <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for row in topExpenses %}
                                {% if loop.index > listLength %}
                                    <tr class="overListLength">
                                {% else %}
                                    <tr>
                                {% endif %}
                                <td data-sortable="false">
                                    <a href="{{ route('transactions.show', row.journal_id) }}">
                                        {% if row.transaction_description|length > 0 %}
                                            {{ row.transaction_description }} ({{ row.description }})
                                        {% else %}
                                            {{ row.description }}
                                        {% endif %}
                                    </a>
                                </td>
                                <td data-value="{{ row.date.format('Y-m-d') }}">
                                    {{ row.date.formatLocalized(monthAndDayFormat) }}
                                </td>
                                <td data-value="{{ row.opposing_account_name }}">
                                    <a href="{{ route('accounts.show', row.opposing_account_id) }}">
                                        {{ row.opposing_account_name }}
                                    </a>
                                </td>
                                <td data-value="{{ row.transaction_amount }}" style="text-align: right;">
                                    {{ row.transaction_amount|formatAmount }}
                                </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            {% if topExpenses|length > listLength %}
                                <tr>
                                    <td colspan="4" class="active">
                                        <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
                                    </td>
                                </tr>
                            {% endif %}
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
    <script type="text/javascript" src="js/ff/charts.js"></script>
    <script type="text/javascript" src="js/lib/bootstrap-sortable.js"></script>

    <script type="text/javascript">
        // to report another URL:
        var startDate = '{{ start.format('Ymd') }}';
        var endDate = '{{ end.format('Ymd') }}';
        var accountIds = '{{ accountIds }}';
        var budgetIds = '{{ budgetIds }}';

        // chart uri's
        var budgetExpenseUri = '{{ route('chart.budget.budget-expense', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd'),'OTHERS']) }}';
        var accountExpenseUri = '{{ route('chart.budget.account-expense', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd'),'OTHERS']) }}';
        var mainUri = '{{ route('chart.budget.main', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
    </script>


    <script type="text/javascript" src="js/ff/reports/budget/all.js"></script>
    <script type="text/javascript" src="js/ff/reports/budget/month.js"></script>

{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="css/bootstrap-sortable.css" type="text/css" media="all"/>
{% endblock %}