{% extends 'base.html.twig' %}
{% block stylesheets %}
    <style>

    </style>
{% endblock %}
{% block body %}
    <div class="container-fluid">
        <div class="row" style="height: 150px;">
            <div class="col-md-12 text-center" style="padding:10px;">
                <img src="{{ asset('images/MyLoanlogo.png') }}" height="125px;">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 text-center">
                <h2>Please see your service advisor for the total amount of your repair order:</h2>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-xs-12">
                <input  class="form-control" type="text" id="amount" placeholder="$">
                <br />
                <button class="btn btn-block btn-success" id="apply">Apply</button>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
    function logClientInteraction(type) {
        $.post('{{ member_url }}api/client-interaction/new', {
            repair_order_id: {{ repair_order.id }},
            type           : type
        }, function (resp) {
            console.log(resp);
        }).error(function (e) {
            console.log(e);
        });

        event.preventDefault();
    }

    $('body').on('click', '#apply', function () {
        var amountRequested = $('#amount').val();
        var valid = /^\d{0,4}(\.\d{0,2})?$/.test(amountRequested),
            val = amountRequested;

        if(!valid){
            alert("Incorrect Value Entered");
        }
        else{
            $.post('{{ member_url }}api/myloan/create-application', {
                repair_order_id: {{ repair_order.id }},
                amount           : val
            }, function (resp) {
                console.log(resp);
                logClientInteraction('MYLOAN_SENT_TO_APPLICATION');
                window.location.href = resp;
            }).error(function (e) {
                console.log(e);
            });

            event.preventDefault();

        }
    });
</script>
{% endblock %}