@if ($paymentResult['success'])
    <style>
        /* Reset e box-sizing apenas para elementos da página finish */
        *:not(#main-nav-search *):not(.search-desktop *):not(.search_box):not(.search_submit)
        :not(.newsletter-sub *):not(.form-boxmodal *):not(.btn) {
            box-sizing: border-box;
        }

        /* Forms da página finish (somente) */
        form:not(.search):not(#search):not(.search-desktop):not(#main-nav-search form):not(.form-boxmodal) {
            width: 30vw;
            min-width: 100%;
            align-self: center;
            box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
                        0px 2px 5px 0px rgba(50, 50, 93, 0.1),
                        0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
            border-radius: 7px;
            padding: 40px;
        }

        /* Inputs da página finish (exclui header e newsletter) */
        input:not([type="checkbox"]):not(.search_box):not(.form-control):not(#main-nav-search input) {
            border-radius: 6px;
            margin-bottom: 6px;
            padding: 12px;
            border: 1px solid rgba(50, 50, 93, 0.1);
            height: 44px;
            font-size: 16px;
            width: 100%;
            background: white;
        }

        /* Botões da página finish (exclui header e newsletter) */
        button:not(.search_submit):not(.btn):not(#main-nav-search button) {
            background: #5469d4;
            color: #ffffff;
            font-family: Arial, sans-serif;
            border-radius: 0 0 4px 4px;
            border: 0;
            padding: 12px 16px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: block;
            transition: all 0.2s ease;
            box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
            width: 100%;
        }

        button:not(.search_submit):not(.btn):not(#main-nav-search button):hover {
            filter: contrast(115%);
        }

        button:not(.search_submit):not(.btn):not(#main-nav-search button):disabled {
            opacity: 0.5;
            cursor: default;
        }

        /* Mensagens e resultados do pagamento */
        .result-message {
            line-height: 22px;
            font-size: 16px;
        }

        .result-message a {
            color: rgb(89, 111, 214);
            font-weight: 600;
            text-decoration: none;
        }

        .hidden {
            display: none;
        }

        #card-error {
            color: rgb(105, 115, 134);
            text-align: left;
            font-size: 13px;
            line-height: 17px;
            margin-top: 12px;
        }

        #card-element {
            border-radius: 4px 4px 0 0;
            padding: 12px;
            border: 1px solid rgba(50, 50, 93, 0.1);
            height: 44px;
            width: 100%;
            background: white;
        }

        #payment-request-button {
            margin-bottom: 32px;
        }

        /* Spinner */
        .spinner,
        .spinner:before,
        .spinner:after {
            border-radius: 50%;
        }

        .spinner {
            color: #ffffff;
            font-size: 22px;
            text-indent: -99999px;
            margin: 0px auto;
            position: relative;
            width: 20px;
            height: 20px;
            box-shadow: inset 0 0 0 2px;
            transform: translateZ(0);
        }

        .spinner:before,
        .spinner:after {
            position: absolute;
            content: "";
        }

        .spinner:before {
            width: 10.4px;
            height: 20.4px;
            background: #5469d4;
            border-radius: 20.4px 0 0 20.4px;
            top: -0.2px;
            left: -0.2px;
            transform-origin: 10.4px 10.2px;
            animation: loading 2s infinite ease 1.5s;
        }

        .spinner:after {
            width: 10.4px;
            height: 10.2px;
            background: #5469d4;
            border-radius: 0 10.2px 10.2px 0;
            top: -0.1px;
            left: 10.2px;
            transform-origin: 0px 10.2px;
            animation: loading 2s infinite ease;
        }

        @keyframes loading {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsivo */
        @media only screen and (max-width: 600px) {
            form:not(.search-desktop):not(#main-nav-search form):not(.form-boxmodal) {
                width: 80vw;
            }
        }
    </style>

    <div class="row">
        <div class="col-12 col-lg-8 form-entrega">
            <form id="payment-form" class="mb-5">
                <div class="alert alert-warning">
                    <h4>{{ $paymentResult['message'] }}</h4>
                </div>

                <div id="card-element"><!--Stripe.js injects the Card Element--></div>

                <button id="submit">
                    <div class="spinner hidden" id="spinner"></div>
                    <span id="button-text">@lang('messages.PAY_NOW')</span>
                </button>

                <div id="card-error" role="alert"></div>

                <div id="message-success" class="hidden">
                    <div class="alert alert-success">
                        <h2>
                            <i class="fa fa-check-circle" aria-hidden="true"></i>
                            @lang('messages.MUITO_OBRIGADA_CONFIANCA')
                            <br>
                            @lang('messages.A_SUA_ENCOMENDA') ({{ $order->nid }}) @lang('messages.ESTA_A_SER_PROCESSADA')
                        </h2>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-12 col-lg-4">
            <div class="position-sticky">
                @include('payments.summary-finish-order')
            </div>
        </div>
    </div>

    <br><br>

    <script>
        var ajax;
        var alertHtml;
        var parseLaravelError;
        var floatingMessage;
        var __;


        function payWithCard(stripe, card, clientSecret) {
            loading(true);
            stripe
                .confirmCardPayment(clientSecret, {
                    payment_method: {
                        card: card
                    }
                })
                .then(function (result) {
                    if (result.error) {
                        // Show error to your customer
                        showError(result.error.message);
                    } else {
                        // The payment succeeded!
                        orderComplete(result.paymentIntent.id);
                    }
                });
        }

        /* ------- UI helpers ------- */
        // Shows a success message when the payment is complete
        var orderComplete = function (paymentIntentId) {
            let data = {
                'id': paymentIntentId,
            };

            ajax('checkout/stripe', data)
                .done(r => {
                    if (r.success) {
                        loading(false);

                        let messageSuccess = document.querySelector("#message-success");
                        let button = document.querySelector("button");

                        if (messageSuccess) messageSuccess.classList.remove("hidden");
                        if (button) button.disabled = true;

                        /**
                         * Google ads and analytics
                         */

                        /* <!---------------------------> */
                        // Analytics Ecommerce
                        /* <!---------------------------> */
                        window.__GA3Purchase({!! json_encode($orderGA3) !!});

                        if (typeof gtag != "undefined") {
                            gtag('event', 'conversion', {
                                'send_to': 'AW-308692000/qXIyCOflg7wZEKCImZMB'
                            });

                            /* <!---------------------------> */
                            // Facebook Pixel
                            /* <!---------------------------> */
                            window.invokeFacebookPixel('Purchase', {
                                value: parseFloat('{{ $order->total_final }}'),
                                currency: 'EUR'
                            });
                        }
                    } else {
                        showError('An error has occurred while trying to process your payment.');
                    }
                })
                .fail((x, r, t) => {
                    console.log(x, r, t);
                    showError('An error has occurred while trying to process your payment.');
                });


        };

        // Show the customer the error from Stripe if their card fails to charge
        var showError = function (errorMsgText) {
            loading(false);
            var errorMsg = document.querySelector("#card-error");
            errorMsg.textContent = errorMsgText;
            setTimeout(function () {
                errorMsg.textContent = "";
            }, 4000);
        };

        // Show a spinner on payment submission
        var loading = function (isLoading) {
            let button = document.querySelector("button");
            let spinner = document.querySelector("#spinner");
            let buttonText = document.querySelector("#button-text");

            if (isLoading) {
                // Disable the button and show a spinner
                if (button) button.disabled = true;
                if (spinner) spinner.classList.remove("hidden");
                if (buttonText) buttonText.classList.add("hidden");
            } else {
                if (button) button.disabled = false;
                if (spinner) spinner.classList.add("hidden");
                if (buttonText) buttonText.classList.remove("hidden");
            }
        }


        document.addEventListener("DOMContentLoaded", function() {
            // Global functions
            ajax = window._ajax;
            alertHtml = window.alertHtml;
            parseLaravelError = window.parseLaravelError;
            floatingMessage = window.floatingMessage;
            __ = window.__;

            var stripe = Stripe('{{ config("app.STRIPE_KEY") }}', {'locale': '{{ app()->getLocale() }}'});
            var elements = stripe.elements();
            var style = {
                base: {
                    color: "#32325d",
                    fontFamily: '"Open Sans", sans-serif',
                    fontSmoothing: "antialiased",
                    fontSize: "16px",
                    "::placeholder": {
                    color: "#32325d"
                    }
                },
                invalid: {
                    fontFamily: '"Open Sans", sans-serif',
                    color: "#fa755a",
                    iconColor: "#fa755a"
                }
            };

            var card = elements.create("card", {
                style: style
            });

            // Stripe injects an iframe into the DOM
            card.mount("#card-element");

            card.on("change", function (event) {
                // Disable the Pay button if there are no card details in the Element
                document.querySelector("button").disabled = event.empty;
                document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
            });

            var form = document.getElementById("payment-form");
            form.addEventListener("submit", function (event) {
                event.preventDefault();

                // Complete payment when the submit button is clicked
                payWithCard(stripe, card, '{{ $paymentResult["client_secret"] }}');
            });
        }, false);
    </script>

@else

    <div class="alert alert-warning">
        <h4 class="text-center m-0">
            @lang('messages.NAO_FOI_POSSIVEL_PROCESSAR_PAGAMENTO')
        </h4>
    </div>

@endif