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

{% block breadcrumbs %}
    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, categoryIds, 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;">{{ 'earned'|_ }}</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].earned }}"
                                        style="text-align: right;">{{ accountSummary[account.id].earned|formatAmount }}</td>
                                {% else %}
                                    <td data-value="0" style="text-align: right;">{{ 0|formatAmount }}</td>
                                {% endif %}
                                {% if accountSummary[account.id] %}
                                    <td data-value="{{ accountSummary[account.id].spent }}"
                                        style="text-align: right;">{{ accountSummary[account.id].spent|formatAmount }}</td>
                                {% else %}
                                    <td data-value="0" style="text-align: right;">{{ 0|formatAmount }}</td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>
                            <td>{{ 'sum'|_ }}</td>
                            <td style="text-align: right;">{{ accountSummary.sum.earned|formatAmount }}</td>
                            <td style="text-align: right;">{{ accountSummary.sum.spent|formatAmount }}</td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'categories'|_ }}</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;">{{ 'earned'|_ }}</th>
                            <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for category in categories %}
                            <tr>
                                <td data-value="{{ category.name }}">
                                    <a href="{{ route('categories.show', category.id) }}" title="{{ category.name }}">{{ category.name }}</a>
                                </td>
                                {% if categorySummary[category.id] %}
                                    <td data-value="{{ categorySummary[category.id].earned }}"
                                        style="text-align: right;">{{ categorySummary[category.id].earned|formatAmount }}</td>
                                {% else %}
                                    <td data-value="0" style="text-align: right;">{{ 0|formatAmount }}</td>
                                {% endif %}
                                {% if categorySummary[category.id] %}
                                    <td data-value="{{ categorySummary[category.id].spent }}"
                                        style="text-align: right;">{{ categorySummary[category.id].spent|formatAmount }}</td>
                                {% else %}
                                    <td data-value="0" style="text-align: right;">{{ 0|formatAmount }}</td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>
                            <td>{{ 'sum'|_ }}</td>
                            <td style="text-align: right;">{{ categorySummary.sum.earned|formatAmount }}</td>
                            <td style="text-align: right;">{{ categorySummary.sum.spent|formatAmount }}</td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        {% if categories.count > 1 %}
            <div class="col-lg-2 col-md-3">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'income_per_category'|_ }}</h3>
                    </div>
                    <div class="box-body">
                        <canvas id="categories-in-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
                        <label style="font-weight:normal;">
                            <input type="checkbox" id="categories-in-pie-chart-checked">
                            <small>{{ 'include_income_not_in_category'|_ }}</small>
                        </label>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'expense_per_category'|_ }}</h3>
                    </div>
                    <div class="box-body">
                        <canvas id="categories-out-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
                        <label style="font-weight:normal;">
                            <input type="checkbox" id="categories-out-pie-chart-checked">
                            <small>{{ 'include_expense_not_in_category'|_ }}</small>
                        </label>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="col-lg-2 col-md-3" id="pieCharts">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'income_per_account'|_ }}</h3>
                </div>
                <div class="box-body">
                    <canvas id="accounts-in-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
                    <label style="font-weight:normal;">
                        <input type="checkbox" id="accounts-in-pie-chart-checked">
                        <small>{{ 'include_income_not_in_account'|_ }}</small>
                    </label>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-3">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'expense_per_account'|_ }}</h3>
                </div>
                <div class="box-body">
                    <canvas id="accounts-out-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
                    <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" id="incomeAndExpensesChart">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                </div>
                <div class="box-body">
                    <canvas id="in-out-chart" style="width:100%;height:400px;" height="400" width="100%"></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>
                            {% set totalCount = 0 %}
                            {% set totalSum = 0 %}
                            {% for row in averageExpenses %}
                                {% set totalCount = totalCount+ row.count %}
                                {% set totalSum = totalSum + row.sum %}
                                {% 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>
                                {% set totalCount = totalCount+ row.count %}
                                {% set totalSum = totalSum + row.sum %}
                            {% 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 %}
                            <tr>
                                <td colspan="2">
                                    {{ 'sum'|_ }}
                                </td>
                                <td style="text-align:right">{{ totalSum|formatAmount }}</td>
                                <td>{{ totalCount }}</td>
                            </tr>
                            </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>
                            {% set totalSum = 0 %}
                            {% for row in topExpenses %}
                                {% set totalSum = totalSum + row.sum %}
                                {% 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="3" class="active">
                                        <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
                                    </td>
                                </tr>
                            {% endif %}
                            <tr>
                                <td colspan="3">
                                    {{ 'sum'|_ }}
                                </td>
                                <td style="text-align:right">{{ totalSum|formatAmount }}</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
    <div class="row">
        {% if averageIncome|length > 0 %}
            <div class="col-lg-6">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'average_income_per_account'|_ }}</h3>
                    </div>
                    <div class="box-body">
                        <table class="table table-hover sortable">
                            <thead>
                            <tr>
                                <th data-defaultsign="az">{{ 'account'|_ }}</th>
                                <th data-defaultsign="_19" style="text-align:right;">{{ 'income_average'|_ }}</th>
                                <th data-defaultsign="_19" style="text-align:right;">{{ 'total'|_ }}</th>
                                <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% set totalCount = 0 %}
                            {% set totalSum = 0 %}
                            {% for row in averageIncome %}
                                {% set totalCount = totalCount+ row.count %}
                                {% set totalSum = totalSum + row.sum %}
                                <tr>
                                    <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 %}
                            <tr>
                                <td colspan="2">
                                    {{ 'sum'|_ }}
                                </td>
                                <td style="text-align:right">{{ totalSum|formatAmount }}</td>
                                <td>{{ totalCount }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="col-lg-6">
            {% if topIncome.count > 0 %}
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'income'|_ }} ({{ 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>
                            {% set totalSum = 0 %}
                            {% for row in topIncome %}
                                {% set totalSum = totalSum + row.transaction_amount %}
                                {% if loop.index > listLength %}
                                    <tr class="overListLength">
                                {% else %}
                                    <tr>
                                {% endif %}
                                <td>
                                    <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 H-i-s') }}">
                                    {{ 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 topIncome.count > listLength %}
                                <tr>
                                    <td colspan="3" class="active">
                                        <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
                                    </td>
                                </tr>
                            {% endif %}
                            <tr>
                                <td colspan="3">
                                    {{ 'sum'|_ }}
                                </td>
                                <td style="text-align:right">{{ totalSum|formatAmount }}</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

{% endblock %}

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

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

        // chart uri's
        var categoryIncomeUri = '{{ route('chart.category.category-income', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd'),'OTHERS']) }}';
        var categoryExpenseUri = '{{ route('chart.category.category-expense', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd'),'OTHERS']) }}';
        var accountIncomeUri = '{{ route('chart.category.account-income', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd'),'OTHERS']) }}';
        var accountExpenseUri = '{{ route('chart.category.account-expense', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd'),'OTHERS']) }}';
        var mainUri = '{{ route('chart.category.main', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
    </script>


    <script type="text/javascript" src="js/ff/reports/all.js?v={{ FF_VERSION }}"></script>
    <script type="text/javascript" src="js/ff/reports/category/month.js?v={{ FF_VERSION }}"></script>

{% endblock %}

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