{% extends 'base.html.twig' %}
{% block body %}
    <fieldset>
        <legend>E-comm purchase</legend>
        <form action="{{ path('atos_gicc_ecomm_transaction_purchase_or_refund', { operation: 'purchase' }) }}" method="post" class="json">
            <div>
                <label>
                    PAN
                    <input type="text" name="pan">
                </label>
            </div>
            <div>
                <label>
                    Expiration (YYMM)
                    <input type="text" name="expiration_date">
                </label>
            </div>
            <div>
                <label>
                    CVV2
                    <input type="text" name="cvv2">
                </label>
            </div>
            <div>
                <label>
                    Amount
                    <input type="text" name="amount">
                </label>
            </div>
            <div>
                <label>
                    Currency
                    <input type="text" name="currency">
                </label>
            </div>
            <div>
                <label>
                    Date/time
                    <input type="text" name="local_transaction_date_time" value="{{ "now"|date('c', timezone="Europe/Sofia") }}">
                </label>
            </div>
            <div>Recurring</div>
            <div>
                <label>
                    <input type="radio" name="recurring_type" value="0" checked="checked"> No recurring
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="recurring_type" value="1"> Recurring
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="recurring_type" value="2"> CoF initial
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="recurring_type" value="3"> CoF recurring
                </label>
            </div>
            <div>
                <button type="submit">Pay now</button>
            </div>
        </form>
    </fieldset>
    <fieldset>
        <legend>POS purchase</legend>
        <form action="{{ path('atos_gicc_pos_transaction_purchase_or_refund', { operation: 'purchase' }) }}" method="post" class="pos">
            <div>
                <label>
                    Outcome
                    <textarea rows="20" cols="200" name="outcome"></textarea>
                </label>
            </div>
            <div>
                <button type="submit">Pay now</button>
            </div>
        </form>
    </fieldset>
    <fieldset>
        <legend>Diagnostics (check terminal)</legend>
        <form action="{{ path('atos_gicc_diagnostics') }}" method="post">
            <div>
                <button type="submit">Send message</button>
            </div>
        </form>
    </fieldset>
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script>
        jQuery(function($) {
            /* Function takes a jquery form
            and converts it to a JSON dictionary */
            function convertFormToJSON(form){
                var array = $(form).serializeArray();
                var json = {};

                $.each(array, function() {
                    json[this.name] = this.value || '';
                });

                return json;
            }

            /* Adds a new form to the body of a page with the JSON data encoded into it */
            function submitAsJSON(JSONString, action) {
                var HackyJSONString =  JSONString.slice(0, -1) + ', "trash": "';

                var hackyForm = "<form method='POST'  enctype='text/plain' action='" + action + "'>" +
                    "<input name='" + HackyJSONString + "' value='\"}'>" +
                    "</form>";
                $(hackyForm).appendTo('body').submit();
            }

            $("form.json").submit(function(event) {
                event.preventDefault();
                var $this = $(this);
                var JSONString = JSON.stringify(convertFormToJSON(this));
                submitAsJSON(JSONString, $this.attr('action'));
            });

            $("form.pos").submit(function(event) {
                event.preventDefault();
                var $this = $(this);
                var JSONString = $this.find('textarea').val();
                submitAsJSON(JSONString, $this.attr('action'));
            });
        });
    </script>
{% endblock %}