{% extends 'base.html.twig' %}

{% block title %}Pool Financing | {{ parent() }}{% endblock %}

{% block body %}
    <h1>Financing your swimming pool</h1>
    <p>Did you know that a pool will not only add beauty to your home, it can also add value to it as well? Banks and other financial lenders will often look favorably upon swimming pool financing because they see it as "home improvement", which will increase the value of the home and eventually the re-sale value.</p>
    <p>Pools are typically financed through a long-term mortgage similar to the one used to purchase your home. Since you can spread out the payments on your pool over a longer amount of time than, for example, a home entertainment system, your monthly payments are often small enough to make your dream pool affordable.</p>
    <p>Don't let sticker shock keep you from getting the pool of your dreams. Financing a pool is just like financing a house, car or any other major purchase. A seemingly overwhelming sum can be easily broken down into manageable monthly payments.</p>
    <form>
        <div class="row">
            <div class="col-12 col-sm-2">
                # of payments
                <input type="text" name="payments" value="120" onChange='computeField(this)' class="form-control">
            </div>
            <div class="col-12 col-sm-2">
                Interest Rate
                <input type="text" name="interest" value=".052" onChange='computeField(this)' class="form-control">
            </div>
            <div class="col-12 col-sm-2">
                Principal
                <input type="text" name="principal" value="50000" onChange='computeField(this)' class="form-control">
            </div>
            <div class="col-12 col-sm-3">
                Monthly Payment
                <input type="text" name="payment" onChange='computeField(this)' class="form-control">
            </div>
            <div class="col-12 col-sm-2">
                <button type="button" class="btn btn-success btn-sm" value="Compute" onClick="computeForm(this.form)">Calculate</button>
                <button type="reset" class="btn btn-info btn-sm" value="Reset" onClick="computeForm(this.form)">Reset</button>
            </div>
        </div>
    </form>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function checkNumber(input, min, max, msg) {
            msg = msg + " field has invalid data: " + input.value;
            var str = input.value;
            for (var i = 0; i < str.length; i++) {
                var ch = str.substring(i, i + 1)
                if ((ch < "0" || "9" < ch) && ch != '.') {
                    alert(msg);
                    return false;
                }
            }
            var num = parseFloat(str)
            if (num < min || max < num) {
                alert(msg + " not in range [" + min + ".." + max + "]");
                return false;
            }
            input.value = str;
            return true;
        }

        function computeField(input) {
            if (input.value != null && input.value.length != 0)
                input.value = "" + eval(input.value);
            computeForm(input.form);
        }

        function computeForm(form) {
            if ((form.payments.value == null || form.payments.value.length == 0) ||
                (form.interest.value == null || form.interest.value.length == 0) ||
                (form.principal.value == null || form.principal.value.length == 0)) {
                return;
            }
            if (!checkNumber(form.payments, 1, 480, "# of payments") ||
                !checkNumber(form.interest, .001, 99, "Interest") ||
                !checkNumber(form.principal, 100, 10000000, "Principal")) {
                form.payment.value = "Invalid";
                return;
            }
            var i = form.interest.value;
            if (i > 1.0) {
                i = i / 100.0;
                form.interest.value = i;
            }
            i /= 12;
            var pow = 1;
            for (var j = 0; j < form.payments.value; j++)
                pow = pow * (1 + i);
            money = "" + .01 * Math.round(100 * (form.principal.value * pow * i) / (pow - 1));
            dec = money.indexOf(".");
            dollars = money.substring(0, dec);
            cents = money.substring(dec + 1, dec + 3);
            cents = (cents.length < 2) ? cents + "0" : cents;
            money = dollars + "." + cents;
            form.payment.value = money;
        }

        function clearForm(form) {
            form.payments.value = "";
            form.interest.value = "";
            form.principal.value = "";
        }
    </script>
{% endblock %}