{% extends 'shop/_layouts/checkout' %}

{% block content %}

    <div class="flex -mx-8">
        <div class="w-2/3 px-8">
            <h1>Payment</h1>

{#
            ╔══════════════════════════════════════════════════╗
            ║  ┌───────────────────────────────────────────┐   ║
            ║  │ Set up variables and check if we have any │   ║
            ║  │             gateways set up.              │   ║
            ║  └───────────────────────────────────────────┘   ║
            ╚══════════════════════════════════════════════════╝
#}

            {# Get the available payment sources the user has to be used later in this page. #}
            {% set storedCards = craft.commerce.paymentSources.allPaymentSourcesByUserId(currentUser.id ?? null) %}

            {# Get the available gateways to be used later in this page #}
            {% set availableGateways = craft.commerce.gateways.allCustomerEnabledGateways %}

            {# If there are no gateway then payment sources wont work either, so lets #}
            {% if availableGateways is empty %}
                <p>No payment methods available.</p>
            {% endif %}

{#
            ╔══════════════════════════════════════════════════╗
            ║  ┌───────────────────────────────────────────┐   ║
            ║  │   This form updates the order with the    │   ║
            ║  │  preferred payment source or gateway, as  │   ║
            ║  │well as allowing the selection of a payment│   ║
            ║  │   currency if more than one is set up.    │   ║
            ║  └───────────────────────────────────────────┘   ║
            ╚══════════════════════════════════════════════════╝
#}
            <h3 class="font-semibold">Update Cart</h3>
            {% if availableGateways|length %}


                <form method="post" id="paymentPreferenceForm" class="relative border-b-1 mb-4">
                    <input type="hidden" name="action" value="commerce/cart/update-cart">
                    {{ redirectInput('shop/checkout/payment') }}
                    {{ csrfInput() }}



                    <label for="paymentMethod">Choose cart gateway or payment source:</label>
                    <select id="paymentMethod" class="form-control">

                        {% if storedCards|length %}
                            <optgroup label="Existing Payment Source">
                        {% endif %}

                        {% for storedCard in storedCards %}
                            {# The option below prepends the `card:` to the front of the value, so that javascript below can submit the right formparam#}
                            <option value="paymentSourceId:{{ storedCard.id }}" {% if storedCard.id == cart.paymentSourceId %}selected{% endif %}>Pay with: {{ storedCard.description }}</option>
                        {% endfor %}
                            </optgroup>

                        <optgroup label="New Payment with Gateway">
                        {% for id,name in craft.commerce.gateways.allCustomerEnabledGateways %}
                            <option value="gatewayId:{{ id }}" {% if id == cart.gatewayId %}selected{% endif %}> Pay with: {{ name }}</option>
                        {% endfor %}
                        </optgroup>
                    </select>

                    {% set currencies = craft.commerce.paymentCurrencies.allPaymentCurrencies %}
                    {% if currencies|length > 1 %}
                        <label for="paymentMethod">Choose payment currency:</label>
                        <select id="paymentCurrency" name="paymentCurrency"
                                class="form-control">
                            {% for currency in currencies %}
                                <option value="{{ currency.iso }}" {% if currency.iso == cart.paymentCurrency %}selected{% endif %}>{{ currency.name }} {{  currency.iso }} - {{ cart.totalPrice|commerceCurrency(currency.iso,convert=true) }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}
                    <div id="cart-update-spinner" class="absolute hidden" style="top:0;right:0">{% include 'shop/_images/spinner.svg' %}</div>
                </form>
            {% endif %}

            {% js %}
                // If the payment currency changes, submit the form immediately
                $('#paymentCurrency').change(function(){
                    $('form#paymentPreferenceForm').submit();
                });

                $('#paymentMethod').change(function(ev){
                    $select = $(ev.currentTarget);
                    $("#cart-update-spinner").toggleClass('hidden');

                    if ($select.val().length === 0) {
                        return;
                    }
                    var parts = $select.val().split(':');
                    var name = parts[0]; // get the form param NAME from the select value. Format: 'gatewayId:2' or 'paymentSourceId:1'
                    var value = parts[1]; // // get the form param VALUE from the select value. Format: 'gatewayId:2' or 'paymentSourceId:1'
                    $select.prop('disabled', 'disabled');
                    $('form#paymentPreferenceForm').append('<input type="hidden" name="' + name + '" value="' + value + '" />').submit();
                    $('form#paymentPreferenceForm').append('<input type="hidden" name="cartUpdatedNotice" value="Updated the cart’s ' + name + '" />').submit();
                });
            {% endjs %}

{#
          ╔══════════════════════════════════════════════════╗
          ║  ┌───────────────────────────────────────────┐   ║
          ║  │   This makes payment using the            │   ║
          ║  │   payment form.                           │   ║
          ║  └───────────────────────────────────────────┘   ║
          ╚══════════════════════════════════════════════════╝
#}

            {% if cart.gatewayId or cart.paymentSourceId %}

            <h3 class="font-semibold">Payment Form</h3>

                {% if paymentForm is defined %}
                  {% for key, errors in paymentForm.getErrors() %}
                    {% for error in errors %}
                      {% if loop.first %}<ul>{% endif %}
                        <li class="text-red-600"><strong>{{ key }}</strong> {{ error }}</li>
                      {% if loop.last %}</ul>{% endif %}
                    {% endfor %}
                  {% endfor %}
                {% endif %}

                <form method="post" class="js-paymentSource-form max-w-md bg-gray-200 p-3" id="paymentForm">
                    <input type="hidden" name="action" value="commerce/payments/pay"/>
                    {{ redirectInput('/shop/customer/order?number='~cart.number~'&success=true') }}
                    <input type="hidden" name="cancelUrl" value="{{ '/shop/checkout/payment'|hash }}"/>
                    <input type="hidden" name="orderEmail" value="{{ cart.email }}"/>

                    {{ csrfInput() }}
                    {% if cart.gatewayId %}

                        <input type="hidden" name="gatewayId" value="{{ cart.gatewayId }}"/>

                        {% set params = {} %}

                        {# Set gateway specific parameters #}
                        {% if className(cart.gateway) == 'craft\\commerce\\paypalcheckout\\gateways\\Gateway' %}
                            {% set params = { currency: cart.paymentCurrency } %}
                        {% endif %}

                        {{ cart.gateway.getPaymentFormHtml(params)|raw }}

                        {% if cart.gateway.supportsPaymentSources() and currentUser %}
                            <div class="checkbox">
                                <label><input type="checkbox" name="savePaymentSource" value="1" /> {{ "Save card for future purchases"|t }}</label>
                            </div><br />
                        {% endif %}

                    {% else %}
                        {{ cart.gateway.getPaymentConfirmationFormHtml({})|raw }}
                    {% endif %}

                    {% set user = craft.users.email(cart.email).one() %}
                    {% if not user %}
                    <label for="registerUserOnOrderComplete">
                        <input type="hidden" name="registerUserOnOrderComplete" value="false"/>
                        <input type="checkbox" id="registerUserOnOrderComplete" name="registerUserOnOrderComplete" value="1" /> {{ "Register me for a user account"|t }}
                    </label>
                    {% endif %}

                    <button class="button button-primary" type="submit">Pay {{ cart.totalPrice|commerceCurrency(cart.paymentCurrency,convert=true) }}</button>

                </form>
            {% endif %}
        </div>

        <div class="w-1/3 px-8 border-l border-grey-lighter">
            {% include "shop/_includes/order-review" with { showShippingAddress: true, showShippingMethod: true } %}
        </div>
    </div>



    {% js %}
        $('#paymentForm').on('submit', function (ev) {
            $form = $(this);

            if ($form.data('processing')) {
                ev.preventDefault();

                return false;
            }

            $form.data('processing', true);
        });
    {% endjs %}
{% endblock %}