{% extends "base.html" %}
{% block title %}Accounts - BiweeklyBudget{% endblock %}
{% block extra_head_css %}
    <script>
        var interest_class_names = {};
        {% for name in interest_class_names|sort %}
        interest_class_names["{{ name }}"] = "{{ name }}";
        {% endfor %}
        var min_pay_class_names = {};
        {% for name in min_pay_class_names|sort %}
        min_pay_class_names["{{ name }}"] = "{{ name }}";
        {% endfor %}
        var active_acct_names_to_id = {};
        {% for name in active_accts.keys()|sort %}
        active_acct_names_to_id["{{ name }}"] = "{{ active_accts[name] }}";
        {% endfor %}
        var budget_names_to_id = {};
        {% for id in budgets.keys()|sort %}
        budget_names_to_id["{{ budgets[id] }}"] = "{{ id }}";
        {% endfor %}
        var active_budget_names_to_id = {};
        {% for id in active_budgets.keys()|sort %}
        active_budget_names_to_id["{{ active_budgets[id] }}"] = "{{ id }}";
        {% endfor %}
        var plaid_accounts = {};
        plaid_accounts["none"] = "null,null";
        {% for id in plaid_accounts.keys()|sort %}
        plaid_accounts["{{ id }}"] = "{{ plaid_accounts[id] }}";
        {% endfor %}
    </script>
{% endblock %}
{% block body %}
{% include 'notifications.html' %}
            <div class="row" id="content-row">
                <div class="col-lg-12">
                    <div class="panel panel-default" id="panel-bank-accounts">
                        <div class="panel-heading">
                            <i class="fa fa-bank fa-fw"></i> Bank Accounts
                            <button type="button" class="btn btn-primary btn-xs btn_add_account" id="btn_add_acct_bank">Add Account</button>
                            <button type="button" class="btn btn-primary btn-xs btn_acct_txfr" id="btn_acct_txfr_bank">Transfer</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped" id="table-accounts-bank">
                                    <thead>
                                        <tr>
                                            <th>Active?</th>
                                            <th>Account</th>
                                            <th>Balance</th>
                                            <th>Unreconciled</th>
                                            <th>Difference</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for acct in bank_accounts|sort(attribute='name') %}
                                        {% if acct.is_active %}<tr>{% else %}<tr class="inactive">{% endif %}
                                            {% if acct.is_active %}<td>yes</td>{% else %}<td style="color: #a94442;">NO</td>{% endif %}
                                            <td><a href="javascript:accountModal({{ acct.id }}, null)">{{ acct.name }}</a></td>
                                            {% set ledger = acct.balance.ledger if acct.balance else None %}
                                            <td>
                                                <span>{{ ledger|dollars }}</span>
                                                {% if acct.ofx_statement %}
                                                <span class="data_age{% if acct.is_active and acct.is_stale %} text-danger{% endif %}">({{ acct.ofx_statement.as_of|ago }})</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ acct.unreconciled_sum|dollars }}</td>
                                            <td>{% if ledger is not none %}{{ (ledger - acct.unreconciled_sum)|reddollars|safe }}{% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                    <div class="panel panel-default" id="panel-credit-cards">
                        <div class="panel-heading">
                            <i class="fa fa-credit-card fa-fw"></i> Credit Cards
                            <button type="button" class="btn btn-primary btn-xs btn_add_account" id="btn_add_acct_credit">Add Account</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th>Active?</th>
                                            <th>Account</th>
                                            <th>Balance</th>
                                            <th>Credit Limit</th>
                                            <th>Available</th>
                                            <th>Unreconciled</th>
                                            <th>Difference</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for acct in credit_accounts|sort(attribute='name') %}
                                        {% if acct.is_active %}<tr>{% else %}<tr class="inactive">{% endif %}
                                            {% if acct.is_active %}<td>yes</td>{% else %}<td style="color: #a94442;">NO</td>{% endif %}
                                            <td><a href="javascript:accountModal({{ acct.id }}, null)">{{ acct.name }}</a></td>
                                            {% set ledger = acct.balance.ledger if acct.balance else None %}
                                            <td>
                                                <span>{{ ledger|dollars }}</span>
                                                {% if acct.ofx_statement %}
                                                <span class="data_age{% if acct.is_active and acct.is_stale %} text-danger{% endif %}">({{ acct.ofx_statement.as_of|ago }})</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ acct.credit_limit|dollars }}</td>
                                            <td>{% if ledger is not none and acct.credit_limit is not none %}{{ (acct.credit_limit + ledger)|reddollars|safe }}{% endif %}</td>
                                            <td>{{ acct.unreconciled_sum|dollars }}</td>
                                            <td>{% if ledger is not none and acct.credit_limit is not none %}{{ (acct.credit_limit + ledger - acct.unreconciled_sum)|reddollars|safe }}{% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                    <div class="panel panel-default" id="panel-investment">
                        <div class="panel-heading">
                            <i class="glyphicon glyphicon-piggy-bank"></i> Investment Accounts
                            <button type="button" class="btn btn-primary btn-xs btn_add_account" id="btn_add_acct_invest">Add Account</button>
                            <button type="button" class="btn btn-primary btn-xs btn_acct_txfr" id="btn_acct_txfr_invest">Transfer</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped" id="table-accounts-investment">
                                    <thead>
                                        <tr>
                                            <th>Active?</th>
                                            <th>Account</th>
                                            <th>Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for acct in investment_accounts|sort(attribute='name') %}
                                        {% if acct.is_active %}<tr>{% else %}<tr class="inactive">{% endif %}
                                            {% if acct.is_active %}<td>yes</td>{% else %}<td style="color: #a94442;">NO</td>{% endif %}
                                            <td><a href="javascript:accountModal({{ acct.id }}, null)">{{ acct.name }}</a></td>
                                            {% set ledger = acct.balance.ledger if acct.balance else None %}
                                            <td>
                                                <span>{{ ledger|dollars }}</span>
                                                {% if acct.ofx_statement %}
                                                <span class="data_age{% if acct.is_active and acct.is_stale %} text-danger{% endif %}">({{ acct.ofx_statement.as_of|ago }})</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
{% include 'modal.html' %}
{% endblock %}
{% block extra_foot_script %}
<!-- BootStrap DatePicker JS -->
<script src="/utils/datetest.js"></script>
<script src="/static/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/static/js/forms.js"></script>
<script src="/static/js/formBuilder.js"></script>

<script src="/static/js/accounts_modal.js"></script>

<script src="/static/js/account_transfer_modal.js"></script>
<script>
$(document).ready(function() {
    $('.btn_add_account').click(function() {
        accountModal(null, null);
    });
    $('.btn_acct_txfr').click(function() {
        accountTransferModal();
    });
});
/* BEGIN conditional default modal for /budgets/<id> */
{% if account_id is defined and account_id is not none %}
accountModal({{ account_id }}, null);
{% endif %}
/* END conditional default modal for /accounts/<id> */
</script>
{% endblock %}