{% extends 'shop/_layouts/checkout' %}
{% set number = craft.app.request.getParam('orderNumber') %}
{% set email = craft.app.request.getParam('email') %}
{% set paymentMethod = craft.app.request.getParam('paymentMethod') %}
{% set paymentCurrency = craft.app.request.getParam('paymentCurrency') %}
{% set url = 'shop/checkout/pay-static' %}

{% block content %}

{% set cart = null %}
{% if number and email %}
    {% set cart = craft.orders.number(number).email(email).one() ?? null %}
{% endif %}

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

            {#
                Show form to be filled out allowing access to the payment form.
            #}
            {% if (not number or not email) or (number and email and (not cart or (cart and not cart.hasOutstandingBalance))) %}
                {#
                    Display errors if cart cannot be retrieved or if there is no
                    outstanding balance to be paid.
                #}
                {% if number and email and (not cart or (cart and not cart.hasOutstandingBalance)) %}
                    <div class="bg-red-500 text-white mb-4">
                        <div class="flash container mx-auto px-6 py-4">
                            {% if cart and not cart.hasOutstandingBalance %}
                                No outstanding balance on this order.
                            {% else %}
                                Unable to retrieve order.
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

                <p>Enter cart/order number and corresponding email address to be able to pay.</p>

                <form action="{{ siteUrl(url) }}" method="get">
                    <div>
                        <label for="orderNumber">Cart/Order Number</label>
                        <input type="text" id="orderNumber" class="w-full" name="orderNumber" value="{{ number }}">
                    </div>
                    <div>
                        <label for="email">Email Address</label>
                        <input type="text" id="email" name="email" value="{{ email }}">
                    </div>
                    <div class="mt-4">
                        <input class="button button-primary" type="submit">
                    </div>
                </form>
            {% else %}
                {% set customer = cart.customer ?? null %}
                {#
                    Display payment form.
                #}
                {% if not paymentMethod %}
                    {# Get the available payment sources the user has to be used later in this page. #}
                    {% set storedCards = null %}
                    {% if customer and customer.userId and currentUser and currentUser.id == customer.userId %}
                        {% set storedCards = craft.commerce.paymentSources.allPaymentSourcesByUserId(currentUser.id) %}
                    {% endif %}

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

                    {% if availableGateways|length %}
                        <form action="{{ siteUrl(url) }}" method="get" class="form-inline">
                            <input type="hidden" name="orderNumber" value="{{ number }}">
                            <input type="hidden" name="email" value="{{ email }}">

                            <p>Select a payment method:</p>
                            <label for="paymentMethod">Gateway</label>
                            <select id="paymentMethod" name="paymentMethod" class="form-control">
                                {% if not cart.gatewayId and not cart.paymentSourceId %}<option value="">---</option>{% endif %}

                                {% for storedCard in storedCards %}
                                    <option value="card:{{ storedCard.id }}" {% if storedCard.id == cart.paymentSourceId %}selected{% endif %}>{{ storedCard.description }}</option>
                                {% endfor %}
                                <option value="">---</option>
                                {% for id,name in craft.commerce.gateways.allCustomerEnabledGateways %}
                                    <option value="gateway:{{ id }}" {% if id == cart.gatewayId %}selected{% endif %}>{{ name }}</option>
                                {% endfor %}
                            </select>

                            {% set currencies = craft.commerce.paymentCurrencies.allPaymentCurrencies %}
                            {% if currencies|length > 1 %}
                                <select id="paymentCurrency" name="paymentCurrency"
                                        class="form-control">
                                    {% for currency in currencies %}
                                        <option value="{{ currency.iso }}" {% if (not paymentCurrency and currency.iso == cart.paymentCurrency) or (paymentCurrency and currency.iso == paymentCurrency) %}selected{% endif %}>{{ currency.name }} {{  currency.iso }} - {{ cart.outstandingBalance|commerceCurrency(currency.iso,convert=true) }}</option>
                                    {% endfor %}
                                </select>
                            {% endif %}

                            <div class="mt-4">
                                <div class="flex w-full">
                                    <div class="w-1/2">
                                        <a href="{{ siteUrl(url) }}" class="button">Back</a>
                                    </div>
                                    <div class="w-1/2 text-right">
                                        <input class="button button-primary" type="submit">
                                    </div>
                                </div>
                            </div>
                        </form>
                    {% endif %}
                {% else %}
                    {% do cart.setPaymentCurrency(paymentCurrency) %}
                    {% set canPay = true %}
                    <form id="paymentForm" method="POST" class="form-horizontal paymentSource-form max-w-md">
                        <input type="hidden" name="action" value="commerce/payments/pay"/>
                        {{ redirectInput('/shop/customer/order?number='~cart.number~'&success=true') }}
                        <input type="hidden" name="cancelUrl" value="{{ craft.app.request.getUrl()|hash }}"/>
                        <input type="hidden" name="email" value="{{ email }}"/>
                        <input type="hidden" name="orderNumber" value="{{ cart.number }}">
                        <input type="hidden" name="paymentCurrency" value="{{ paymentCurrency }}">

                        {{ csrfInput() }}

                        <fieldset>
                            {% set paymentMethodParts = paymentMethod|split(':') %}
                            {% if paymentMethodParts[0] == 'gateway' %}
                                {% set gateway = craft.commerce.gateways.getGatewayById(paymentMethodParts[1]) ?? null %}

                                {% if not gateway %}
                                    {% set canPay = false %}
                                    <div class="bg-red-500 text-white mb-4">
                                        <div class="flash container mx-auto px-6 py-4">
                                            Unable to retrieve gateway.
                                        </div>
                                    </div>
                                {% else %}
                                    <input type="hidden" name="gatewayId" value="{{ gateway.id }}"/>

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

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

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

                            {% elseif paymentMethodParts[0] == 'card' %}
                                {% set paymentSource = craft.commerce.paymentSources.getPaymentSourceById(paymentMethodParts[1]) ?? null %}
                                {% if not paymentSource or not currentUser or (currentUser and currentUser.id != customer.userId) %}
                                    {% set canPay = false %}
                                    <div class="bg-red-500 text-white mb-4">
                                        <div class="flash container mx-auto px-6 py-4">
                                            Payment source not applicable for current user.
                                        </div>
                                    </div>
                                {% else %}
                                    <p>Pay with: {{ paymentSource.description }}</p>
                                    <input type="hidden" name="paymentSourceId" value="{{ paymentMethodParts[1] }}">
                                {% endif %}
                            {% endif %}

                            <div class="mt-4">
                                <div class="flex w-full">
                                    <div class="w-1/2">
                                        <a href="{{ siteUrl(url, {
                                            orderNumber: number,
                                            email: email,
                                        }) }}" class="button">Back</a>
                                    </div>
                                    <div class="w-1/2 text-right">
                                        {% if canPay %}
                                            <button class="button button-primary" type="submit">Pay {{ cart.getOutstandingBalance()|commerceCurrency(paymentCurrency,convert=true) }}</button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

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

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



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

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

                return false;
            }

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