{% extends "base.html" %}
{% block title %}Credit Card Payoffs - BiweeklyBudget{% endblock %}
{% block extra_head_css %}
    <!-- Bootstrap Datepicker CSS -->
    <link href="/static/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">

    <script type="application/json" id="pymt_settings_json">
        {{ pymt_settings_json|safe }}
    </script>
{% endblock %}
{% block body %}
{% macro payoffresult(res) -%}
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default" id="result_panel_{{ res['name'] }}">
                        <div class="panel-heading">
                            <strong>{{ res['name'] }}</strong> <em>- {{ res['description'] }}</em><br /><em>{{ res['doc'] }}</em>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            {% if res.error %}
                            <div class="error">{{ res['error'] }}</div>
                            {% else %}
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="table_{{ res['name'] }}">
                                    <thead>
                                        <tr>
                                            <th>Account</th>
                                            <th>Next Payment</th>
                                            <th>Time To Pay Off</th>
                                            <th>Total Payments</th>
                                            <th>Total Interest</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for row in res['results'] %}
                                        <tr>
                                            <td>{{ row['name'] }}</td>
                                            <td>{{ row['next_payment']|dollars }}</td>
                                            <td>{{ row['payoff_months']|monthsyears }}</td>
                                            <td>{{ row['total_payments']|dollars }}</td>
                                            <td>{{ row['total_interest']|dollars }}</td>
                                        </tr>
                                    {% endfor %}
                                        <tr>
                                            <th>Totals</th>
                                            <th>{{ res['total']['next_payment']|dollars }}</th>
                                            <th>{{ res['total']['payoff_months']|monthsyears }}</th>
                                            <th>{{ res['total']['total_payments']|dollars }}</th>
                                            <th>{{ res['total']['total_interest']|dollars }}</th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> <!-- /.table-responsive -->
                            {% endif %}
                        </div> <!-- /.panel-body -->
                    </div> <!-- /.panel -->
                </div> <!-- /.col-lg-12 -->
            </div> <!-- /.row -->
{%- endmacro %}
{% include 'notifications.html' %}
            <div class="row">
                <div class="col-lg-12">
                    <div class="alert alert-warning">
                        <p><strong>Notice - these calculations are rough estimates only. Do not rely on them.</strong></p>
                        <ul>
                            <li>These are based on the interest rate you entered in the Account settings. Interest rates will change over time.</li>
                            <li>I've found these to be within 3% of my own statements for certain credit cards, but there is no guarantee that the exact formulae used will match those used by your credit card company.</li>
                            <li>These assume no fees or purchases against any of the accounts; i.e. the only balance changes will be one payment per billing period and interest for that period.</li>
                            <li>The interest calculation method may not exactly match your financial institution.</li>
                            <li>Dates are fudged so we can calculate multiple payoffs together; we use the last balance for each account as if it were the beginning of a new billing cycle, and assume that all billing cycles are based on calendar months. All payments are made half way through the month.</li>
                            <li>Some values are rounded.</li>
                        </ul>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <div class="row" id="form-row">
                <div class="col-lg-12">
                    <div class="panel panel-default" id="panel-settings">
                        <div class="panel-heading">
                            <i class="fa fa-gear fa-fw"></i> Settings
                        </div> <!-- /.panel-heading -->
                        <div class="panel-body" id="settings-panel-body">
                            <form id="min_payment_frm" class="form-inline" style="padding-bottom: 2em;">
                                <fieldset disabled>
                                    <div class="form-group">
                                        <label for="payoff_frm_min_pymt" class="control-label">Sum Of Minimum Monthly Payment(s)</label>
                                        <div class="input-group">
                                            <span class="input-group-addon">{{ CURRENCY_SYM }}</span><input class="form-control" id="payoff_frm_min_pymt" name="payoff_frm_min_pymt" type="text" size="8" style="width: auto;" value="{{ monthly_pymt_sum }}">
                                        </div> <!-- /.input-group -->
                                    </div> <!-- /.form-group -->
                                </fieldset>
                            </form> <!-- /#min_payment_frm -->
                            <div id="payoff_increase_forms"></div>
                            <div style="padding-top: 1em; padding-bottom: 1em;"><em><a href="#" onclick="addIncrease()">(add another increase)</a></em></div>
                            <div id="payoff_onetime_forms"></div>
                            <div style="padding-top: 1em; padding-bottom: 1em;"><em><a href="#" onclick="addOnetime()">(add another one-time additional payment)</a></em></div>
                        </div> <!-- /.panel-body -->
                        <div class="panel-footer">
                            <button type="button" class="btn btn-sm btn-default disabled" id="btn_recalc_payoffs" onclick="recalcPayoffs()">Save & Recalculate</button>
                        </div> <!-- /.panel-footer -->
                    </div> <!-- /panel -->
                </div> <!-- /.col-lg-12 -->
            </div> <!-- /.row -->
{% for calc in payoffs %}
{{ payoffresult(calc) }}
{% endfor %}
{% 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/custom.js"></script>
    <script src="/static/js/credit_payoffs.js"></script>
{% endblock %}
