{% extends "base.html" %}
{% block title %}Plaid Update - BiweeklyBudget{% endblock %}
{% block body %}
{% include 'notifications.html' %}
            <div class="row" id="content-row">
                <div class="col-lg-12">
                    <div class="panel panel-default" id="panel-plaid-update">
                        <div class="panel-heading">Plaid Update Transactions</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <form method="post">
                            <p><a href="javascript:plaidSetAllItems(true);" id="plaid_check_all">Check All</a> | <a href="javascript:plaidSetAllItems(false);" id="plaid_uncheck_all">Uncheck All</a></p>
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped" id="table-update-plaid">
                                    <thead>
                                        <tr>
                                            <th>Update Transactions?</th>
                                            <th>Accounts</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for i in plaid_items %}
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <label for="item_{{ i.item_id }}" class="checkbox-inline control-label">
                                                    <input type="checkbox" id="item_{{ i.item_id }}" name="item_{{ i.item_id }}" value="1" class="account-checkbox" checked>
                                                    {{ i.institution_name }} ({{ i.item_id }})
                                                </label>
                                            </div>
                                        </td>
                                        <td>{{ accounts[i.item_id] }}</td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                            <div><p><button type="submit" class="btn btn-primary" id="btn_plaid_txns" onclick="getPlaidTransactions()">Update Transactions</button></p></div>
                            </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                    <div class="panel panel-default" id="panel-plaid-items">
                        <div class="panel-heading">Plaid Items</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped" id="table-items-plaid">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Institution Accounts</th>
                                            <th>Last Polled</th>
                                            <th>Last Successful Update</th>
                                            <th>Update</th>
                                            <th>Refresh Accounts</th>
                                            <th>Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for i in plaid_items %}
                                        <tr>
                                            <td>{{ i.item_id }}</td>
                                            <td>{{ i.institution_name }} ({{ i.institution_id }})</td>
                                            <td>{{ plaid_accounts[i.item_id] }}</td>
                                            <td>{{ i.last_updated|ago }}</td>
                                            <td>{% if i.last_successful_update %}{{ i.last_successful_update|ago }}{% else %}unknown{% endif %}</td>
                                            <td><a onclick="plaidUpdate('{{ i.item_id }}')">Update / Fix Item</a></td>
                                            <td><a onclick="plaidRefresh('{{ i.item_id }}')">Refresh</a></td>
                                            <td><a id="plaid_delete_{{ i.item_id }}" onclick='plaidDeleteConfirm({{ i.item_id|tojson }}, {{ i.institution_name|tojson }}, {{ accounts[i.item_id]|tojson }})'>Delete</a></td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                            <div><p><button type="button" class="btn btn-primary" id="btn_link_plaid" onclick="addPlaidItem()">Link (Add Plaid Item)</button>&nbsp;<button type="button" class="btn btn-secondary" id="btn_import_plaid" onclick="importPlaidItems()">Update Item Information from Plaid</button></p></div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
{% include 'modal.html' %}
{% endblock %}
{% block extra_foot_script %}
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script src="/plaid.js"></script>
<script>

/**
 * Handle click of the "Link (Add Plaid Item)" button.
 */
function addPlaidItem() {
    plaidLink();
}

/**
 * Handle click of the "Check All" or "Uncheck All" link: check or uncheck
 * every Plaid Item checkbox in the "Plaid Update Transactions" table.
 *
 * Must not return a value; it is called from a ``javascript:`` URL, and a
 * returned value would replace the page.
 *
 * @param {boolean} checked - true to check every Item, false to uncheck them.
 */
function plaidSetAllItems(checked) {
    $('#table-update-plaid input.account-checkbox').prop('checked', checked);
}

/**
 * Handle click of the "Import Existing Plaid Items" button.
 */
function importPlaidItems() {
    console.log("called importPlaidItems()");
    $.ajax({
        url: '/ajax/plaid/update_item_info',
        type: 'POST',
        success: function(data) {
            location.reload();
        },
        error: function() {
            alert("ERROR: /ajax/plaid/update_item_info callback failed; see server log for details.");
        }
    });
}
</script>
{% endblock %}