<div class="mollie-wrapper wrapper">
        <div class="form-fields">
            <div class="row">
                <div class="form-group form-group--card-holder">
                    <label class="label" for="card-holder">Name</label>
                    <div id="card-holder"></div>
                    <div
                            id="card-holder-error"
                            class="field-error"
                            role="alert"
                    ></div>
                </div>
            </div>

            <div class="row">
                <div class="form-group form-group--card-number">
                    <label class="label" for="card-number">Card number</label>
                    <div id="card-number"></div>
                    <div
                            id="card-number-error"
                            class="field-error"
                            role="alert"
                    ></div>
                </div>
            </div>

            <div class="row">
                <div class="form-group form-group--expiry-date">
                    <label class="label" for="expiry-date">Expiry date</label>
                    <div id="expiry-date"></div>
                    <div
                            id="expiry-date-error"
                            class="field-error"
                            role="alert"
                    ></div>
                </div>

                <div class="form-group form-group--verification-code">
                    <label class="label" for="verification-code">CVC</label>
                    <div id="verification-code"></div>
                    <div
                            id="verification-code-error"
                            class="field-error"
                            role="alert"
                    ></div>
                </div>
            </div>
        </div>

{{--        <button id="submit-button" class="submit-button" type="submit">--}}
{{--            Pay €239.00--}}
{{--        </button>--}}

        <div id="form-error" class="field-error" role="alert"></div>
</div>

<!-- we need to polyfill Promise, so we have Promise functionality available in IE11 -->
<script
        src="https://cdnjs.cloudflare.com/ajax/libs/promise-polyfill/8.2.0/polyfill.min.js"
        integrity="sha512-YK+bAjUuYdjPksbGQIIIsUn5hgYFsc+nXgx21Wwby9Mv+rJd8WZH2FRe1RdlTjFu1vxlGia9/RqmUMcZtX+BrA=="
        crossorigin="anonymous"
></script>
<script src="https://js.mollie.com/v1/mollie.js"></script>
<style>

    .mollie-wrapper.wrapper form {
        width: 100%;
    }

    .mollie-wrapper.wrapper{
        background-color: rgba(15, 11, 12, 0.05); padding: 20px 40px 0px 40px; width: 100%; margin-top:-20px; margin-bottom:20px;
    }

    .mollie-wrapper .row {
        display: flex;
        width: 100%;
    }

    .mollie-wrapper label {
        opacity: 0.6;
        padding-bottom: 7px;
        padding-top: 13px;
        font-weight: 500;
        display: block;
    }

    .mollie-wrapper .mollie-component {
        background: #fff;
        /*box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);*/
        /*border-radius: 2px;*/
        padding: 10px 15px;
        border: 1px solid transparent;
        transition: 0.15s border-color cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 12px;
    }

    .mollie-wrapper .mollie-component.has-focus {
        border-color: #000;
        transition: 0.3s border-color cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mollie-wrapper .mollie-component.is-invalid {
        border-bottom-color: #ff1717;
        transition: 0.3s border-color cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mollie-wrapper .field-error {
        font-size: 12px;
        margin-top: 0px;  padding: 5px;
        color: #ff1717;
        font-weight: 400;
    }

    .mollie-wrapper button.submit-button {
        width: 100%;
        border: 0;
        background: #0077ff;
        box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1),
        0px 4px 8px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        padding: 14px;
        color: #ffffff;
        font-weight: 600;
        font-size: 18px;
        opacity: 0.9;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        outline: 0;
        transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mollie-wrapper button.submit-button:hover {
        opacity: 1;
    }

    .mollie-wrapper .form-fields {
        margin-bottom: 24px;
    }

    .mollie-wrapper .form-group {
        width: 100%;
    }

    .mollie-wrapper .form-group--expiry-date {
        margin-right: 8px;
    }

    .mollie-wrapper .form-group--verification-code {
        margin-left: 8px;
    }
</style>

<script>
    /**
     * Initialize Mollie Components instance
     */
    var mollie = Mollie(
        "{{ $provider['data']['PROFILE_ID'] }}", // You can find your Profile ID in the Dashboard (https://www.mollie.com/dashboard/developers/api-keys)
        {
            locale: "en_US", // Optional. If not provided, we will determine the users' language by looking at the document and/or userAgent.
            testmode: false // Set to true to enable test mode.
        }
    );

    var options = {
        styles: {
            base: {
                color: 'rgba(0, 0, 0, 0.8)',
            }
        }
    }

    /**
     * Get elements
     */
    var form = document.getElementById("mainform");
    var formError = document.getElementById("form-error");
    var submitButton = document.getElementById("main-submit");

    /**
     * Create card holder input
     */
    var cardHolder = mollie.createComponent("cardHolder", options);
    cardHolder.mount("#card-holder");

    var cardHolderError = document.getElementById("card-holder-error");

    cardHolder.addEventListener("change", function (event) {
        if (event.error && event.touched) {
            cardHolderError.textContent = event.error;
        } else {
            cardHolderError.textContent = "";
        }
    });

    /**
     * Create card number input
     */
    var cardNumber = mollie.createComponent("cardNumber", options);
    cardNumber.mount("#card-number");

    var cardNumberError = document.getElementById("card-number-error");

    cardNumber.addEventListener("change", function (event) {
        if (event.error && event.touched) {
            cardNumberError.textContent = event.error;
        } else {
            cardNumberError.textContent = "";
        }
    });

    /**
     * Create expiry date input
     */
    var expiryDate = mollie.createComponent("expiryDate", options);
    expiryDate.mount("#expiry-date");

    var expiryDateError = document.getElementById("expiry-date-error");

    expiryDate.addEventListener("change", function (event) {
        if (event.error && event.touched) {
            expiryDateError.textContent = event.error;
        } else {
            expiryDateError.textContent = "";
        }
    });

    /**
     * Create verification code input
     */
    var verificationCode = mollie.createComponent("verificationCode", options);
    verificationCode.mount("#verification-code");

    var verificationCodeError = document.getElementById(
        "verification-code-error"
    );

    verificationCode.addEventListener("change", function (event) {
        if (event.error && event.touched) {
            verificationCodeError.textContent = event.error;
        } else {
            verificationCodeError.textContent = "";
        }
    });

    /**
     * Disables the form inputs and submit button
     */
    function disableForm() {
        // submitButton.disabled = true;
    }

    /**
     * Enables the form inputs and submit button
     */
    function enableForm() {
        // submitButton.disabled = false;
    }

    /**
     * Submit handler
     */
    form.addEventListener("submit", function (event) {
        // event.preventDefault();
        disableForm();

        // Reset possible form error
        formError.textContent = "";

        // Get a payment token

        mollie.createToken().then(function (result) {
            var token = result.token;
            var error = result.error;
            if (error) {
                enableForm();
                formError.textContent = error.message;
                return;
            }

            var data = [];

            // Add token to the form
            var tokenInput = document.createElement("input");
            tokenInput.setAttribute("name", "inpage_checkout_data");
            tokenInput.setAttribute("type", "hidden");
            tokenInput.setAttribute("value", JSON.stringify({token:token}));

            form.appendChild(tokenInput);

            // Re-submit form to the server
            form.submit();
        });
    });
</script>
