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

    </style>
{% endblock %}
{% block body %}
    <div class="container-fluid">
        <div class="row" style="background-color:#0d47a1;height: 70px;">
            <div class="col-md-12 text-center" style="padding:10px;">
                <img src="http://member.iserviceauto.com/iServiceLogo.png" height="50px;">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <img src="{{ logo }}" style="width: 100%;"/>
            </div>
        </div>
        <div class="row" id="payment_form" style="background-color: #0d47a1; text-align: center; color: #fff;">
            <div class="col-xs-12">
                <h3>Click below to pay for your car services.</h3>
                <h2>
                    Amount: ${{ payment.amount|number_format(2) }}
                </h2>
                <button id="pay_button" class="btn btn-success btn-lg"
                        style="width: 100%; border: 2px solid white; font-size: 2em;">
                    Pay Now
                </button>
                <br/><br/>
                <div class="row">
                    <div class="col-xs-3" style="padding:0px;">
                        <img src="{{ asset('secure.png') }}" class="img-responsive" style="height:85px;">
                    </div>
                    <div class="col-xs-6">
                        <br /><img src="{{ asset('cc-options.png') }}" style="" alt="Credit Card Options"/><br /><br />
                        <u><a href="http://iserviceauto.com/agreement/" target="_blank" style="color:#ffffff !important;">Privacy, Security, Refund, Cancellation</a></u>
                    </div>
                    <div class="col-xs-3" style="padding:0px;">
                        <img src="{{ asset('ssl-secure.png') }}" class="img-responsive" style="float:right;height:85px;">
                    </div>
                </div>
                <br /><br />
                <div class="row">
                    <div class="col-md-12">

                    </div>
                </div>
                <br /><br />
                <input type="hidden" id="payment_id" value="{{ payment.id }}"/>
                <input type="hidden" id="amount" value="{{ payment.amount }}"/>
            </div>
        </div>
        <div class="row" id="receipt_form" style="display: none;">
            <div class="col-xs-12">
                <p>
                <center>Enter your email address to receive a receipt of this transaction.</center>
                </p>
                <label class="receipt_email">Email:</label>
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="email" id="receipt_email" name="receipt_email" class="form-control"/>
                </div>
                <br/><br/>
                <button id="send_receipt" class="btn btn-primary" style="width: 100%;">Send Receipt</button>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        var paymentId     = {{ payment.id }};
        var amount        = {{ payment.amount }};

        $('body').on('click', '#pay_button', function () {
            nmi.callCcpopup(amount, paymentId);
        });

        var nmi = {};

        /**
         * Opens the popup from Collect.js
         *
         * @param amount
         * @param paymentId
         */
        nmi.callCcpopup = function (amount, paymentId) {
            // Configure w/ passed payment ID
            CollectJS.configure({
                                    'primaryColor'  : '#0d47a1',
                                    'secondaryColor': '#0d47a1',
                                    'buttonText'    : 'SUBMIT PAYMENT',
                                    'paymentType'   : 'cc',
                                    'fields'        : {
                                        'cvv': 'required'
                                    },
                                    'callback'      : function (response) {
                                        nmi.submitPaymentsForm(amount, response.token, paymentId);
                                    }
                                });

            // Show the form
            CollectJS.startPaymentRequest();
        };

        /**
         * Submits the payment to the backend, doesn't need to be called explicitly
         *
         * @param amount
         * @param paymentToken
         * @param paymentId
         */
        nmi.submitPaymentsForm = function (amount, paymentToken, paymentId) {
            $.post('{{ member_url }}api/nmi/process-parts-transaction', {
                amount         : amount,
                payment_token  : paymentToken,
                payment_id     : paymentId
            }, function (resp) {
                console.log(resp);
                alert('Payment Successful');
                $('#receipt_form').show();
                $('#payment_form').hide();
            }).error(function (e) {
                console.log(e);
                alert(JSON.parse(e.responseText));
            });
        };

        // Send a receipt
        $('body').on('click', '#send_receipt', function () {
            var paymentId = $('#payment_id').val();
            var email     = $('#receipt_email').val();

            $.post('{{ member_url }}api/nmi/send-parts-receipt', {
                payment_id: paymentId,
                email     : email
            }, function (resp) {
                alert('Receipt Sent!');
            }).fail(function (e) {
                console.log(e);
            });
        });

    </script>
{% endblock %}