{% extends '@App/base.html.twig' %}
{% block title %}
    Parts Payments
{% endblock %}
{% block buttonNew %}
    <div class="col-xs-6 col-lg-4">
        <a href="#"
           class="btn btn-warning btn-raised btn-lg"
           style="float: right; max-width: 250px;"
           data-toggle="modal" data-target="#modal-create-pmt">
            Create New Payment
            <div class="ripple-container"></div>
        </a>
    </div>
{% endblock %}
{% block modal %}
    <!--Payment Creation Modal -->
    <div class="modal modal-primary fade scale" id="modal-create-pmt" tabindex="-1" role="dialog"
         aria-labelledby="modal-create-quote" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="scrollable-modal modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="text-center modal-title" id="modal-default-primary-label">
                        COLLECT PAYMENT
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row ">
                        <div class="col-md-12">
                            <p>If creating multiple payments, don't make the amounts the same so the payment doesn't get
                                marked as a duplicate by the payment processor.</p>
                            <div class="row">
                                <div class="col-md-6">
                                    INVOICE NUMBER: <input class="form-control" type="text" name="invoiceNumber" id="invoiceNumber">
                                </div>
                                <div class="col-md-6">
                                    <div class="price-single">AMOUNT:
                                        <form autocomplete="off" onsubmit="return false;">
                                            <span>$</span>
                                            <input class="form-control input-pay-amount"
                                                   style="width:200px !important;"
                                                   type="number"
                                                   name="pmt_request_amount"
                                                   id="pmt_request_amount"
                                                   placeholder="0.00"/>
                                        </form>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    CUSTOMER NAME: <input class="form-control" type="text" name="customerName" id="customerName">
                                </div>
                                <div class="col-md-6">
                                    CUSTOMER PHONE: <input class="form-control" type="text" name="customerPhone" id="customerPhone">
                                </div>
                                <div class="col-md-12">
                                    MEMO: <textarea class="form-control" type="text" name="memo" id="memo"></textarea>
                                </div>
                                <div class="col-md-12">
                                    LINE ITEMS: <textarea class="form-control" type="text" name="lineItems" id="lineItems"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <button id="pmt_collect" class="form-control btn btn-lg btn-primary">COLLECT</button>
                                </div>
                                <div class="col-md-6">
                                    <button id="pmt_send_request" class="form-control btn btn-lg btn-success">SEND TO CUSTOMER</button>
                                </div>
                            </div>
                            <div class="center-block m-t-2" style="width: 250px">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">


        // On create a quote modal show, pre-populate w/ any saved data
        $('body').on('show.bs.modal', '#modal-create-pmt', function (e) {
            $('#pmt_request_amount').val('');
            $('#invoiceNumber').val('');
            $('#customerName').val('');
            $('#customerPhone').val('');
            $('#memo').val('');
            $('#lineItems').val('');
        });

        // Payment Initialization
        $('body').on('click', '#pmt_collect', function () {
            var amountInput              = $('#pmt_request_amount');
            var invoiceNumber              = $('#invoiceNumber');
            var customerName              = $('#customerName');
            var customerPhone              = $('#customerPhone');
            var memo                    = $('#memo');
            var lineItems               = $('#lineItems');
            if (!amountInput.val() > 0) {
                alert('Please enter an amount');
                return;
            }
            if (!invoiceNumber.val() > 0) {
                alert('Please enter a invoice number');
                return;
            }
            if (!customerName.val() > 0) {
                alert('Please enter a customer name');
                return;
            }
            if (!customerPhone.val() > 0) {
                alert('Please enter a customer phone number');
                return;
            }

            nmi.callCcpopupParts(invoiceNumber.val(), amountInput.val(), customerName.val(), customerPhone.val(), memo.val(), lineItems.val());
        });
        $('body').on('click', '#pmt_send_request', function () {
            var amountInput              = $('#pmt_request_amount');
            var invoiceNumber              = $('#invoiceNumber');
            var customerName              = $('#customerName');
            var customerPhone              = $('#customerPhone');
            var memo                    = $('#memo');
            var lineItems               = $('#lineItems');
            if (!amountInput.val() > 0) {
                alert('Please enter an amount');
                return;
            }
            if (!invoiceNumber.val() > 0) {
                alert('Please enter a invoice number');
                return;
            }
            if (!customerName.val() > 0) {
                alert('Please enter a customer name');
                return;
            }
            if (!customerPhone.val() > 0) {
                alert('Please enter a customer phone number');
                return;
            }

            $.post('/api/parts-payments/send-to-customer', {
                invoiceNumber: invoiceNumber.val(),
                amount         : amountInput.val(),
                customerName   : customerName.val(),
                customerPhone  : customerPhone.val(),
                memo           : memo.val(),
                lineItems      : lineItems.val()
            }, function (resp) {
                console.log(resp);
                alert('Payment Sent');
                window.location.reload();
            }).error(function (e) {
                console.log(e);
                alert(JSON.parse(e.responseText));
            });
        });
    </script>
    <!-- Payment Creation Modal -->
    <!--Payment Details Modal -->
    <div class="modal modal-primary fade scale" id="modal-pmt-details" tabindex="-1" role="dialog"
         aria-labelledby="modal-create-quote" aria-hidden="true">
        <div class="printable print-full modal-dialog modal-md" role="document">
            <div class="scrollable-modal modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="text-center modal-title" id="modal-default-primary-label">
                        PAYMENT DETAILS
                    </h4>
                    <div>
                        Invoice #<span id="paid_pmt_details_invoice_number"></span><br/>
                    </div>
                </div>
                <div class="modal-body">
                    <h3 style="text-align: center;">{{ settings.name }}</h3>
                    <div class="row ">
                        <div class="col-md-12 text-center" id="paid_pmt_details_content">
                        </div>
                    </div>
                    <div class="row hidden-print">
                        <div class="col-md-12">
                            <hr/>
                        </div>
                        <div class="col-md-12">
                            <div class="center-block m-t-2">
                                <button class="btn form-control btn-success m-b-2"
                                        onclick="window.print()">
                                    <i class=" fa fa-print"></i> Print
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        $('body').on('show.bs.modal', '#modal-pmt-details', function (e) {
            $('#paid_pmt_details_content').html(' ');
            $('#paid_pmt_details_invoice_number').html('');

            var invoiceNumber = $(e.relatedTarget).data('invoicenumber');
            var transactionId       = $(e.relatedTarget).data('transactionid');
            var amount              = $(e.relatedTarget).data('amount');
            var timestamp           = $(e.relatedTarget).data('time');
            var cardType           = $(e.relatedTarget).data('cardtype');
            var action           = $(e.relatedTarget).data('action');
            var cardNumber           = $(e.relatedTarget).data('cardnumber');
            var memo           = $(e.relatedTarget).data('memo');
            var lineItems           = $(e.relatedTarget).data('lineitems');


            $('#paid_pmt_details_invoice_number').html(invoiceNumber);

            var html = "<p class='text-bold'> Transaction ID: " + transactionId + "</p>\
                    <p class='text-bold'> Card Number: " + cardNumber + " </p>\
                    <p class='text-bold'> Card Type: " + cardType + "</p>\
                    <p class='text-bold'> Action: " + action + "</p>\
                    <p class='text-bold'> Paid: $" + amount + "</p>\
                    <p class='text-bold'> Date Paid: " + timestamp + " </p>\
                    <p class='text-bold'> Line Items: <pre>" + $.parseJSON(lineItems) + "</pre> </p>\
                    <p class='text-bold'> Memo: " + memo + " </p>";

            $('#paid_pmt_details_content').html(' ');
            $('#paid_pmt_details_content').append(html);

        });
    </script>
    <!-- Payment Details Modal -->
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12">
                        {% include 'AppBundle:iService//Reporting:dateForm.html.twig' %}
                        <table id="table_reporting" class="table table-hover table-striped table-bordered text-center">
                            <thead>
                            <tr>
                                <th>INVOICE #</th>
                                <th>CUSTOMER</th>
                                <th>AMOUNT</th>
                                <th>TRANSACTION ID</th>
                                <th>TIMESTAMP</th>
                                <th>CARD TYPE</th>
                                <th>TRANSACTION TYPE</th>
                                <th>CREATED BY</th>
                                <th>ACTION</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th></th>
                                <th></th>
                                <th>TOTAL PAYMENTS: ${{ payments }}</th>
                                <th>TRANSACTIONS: {{ transactions }}</th>
                                <th>NET: ${{ gross }}</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                            </tfoot>
                            <tbody id="paymentsTable">
                            {% for payment in results %}
                                <tr>
                                    <td>{{ payment.invoiceNumber }}</td>
                                    <td>{{ payment.customer }}</td>
                                    <td>${{ payment.amount }}</td>
                                    <td>{{ payment.transactionId }}</td>
                                    <td>{{ payment.time|date("m/d/Y g:ia") }}</td>
                                    <td>{{ payment.cardType }}</td>
                                    <td>{{ payment.action }}</td>

                                    <td>{{ payment.createdBy }}</td>
                                    <td>
                                        <a href="#"
                                           class="btn btn-primary btn-block"
                                           data-toggle="modal"
                                           data-target="#modal-pmt-details"
                                           data-invoicenumber="{{ payment.invoiceNumber }}"
                                           data-transactionid="{{ payment.transactionId }}"
                                           data-time="{{ payment.time|date("m/d/Y g:ia") }}"
                                           data-cardtype="{{ payment.cardType }}"
                                           data-action="{{ payment.action }}"
                                           data-amount="{{ payment.amount }}"
                                           data-cardnumber="{{ payment.cardNumber }}"
                                           data-memo="{{ payment.memo }}"
                                           data-lineitems="{{ payment.lineItems }}"
                                        >
                                            Details
                                            <div class="ripple-container"></div>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}