@{
    Layout = string.Empty;
}

<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="row">
    <input id="cardholder-name" placeholder="Ditt navn" class="my-input" type="text">
</div>

<div class="row">
    <!-- placeholder for Elements -->
    <div class="card-input" style="margin-top: 10px;">
        <div id="card-element"/>
    </div>
</div>

<div class="row">
    <!-- Used to display form errors. -->
    <div id="card-errors" role="alert"></div>
    <button id="card-button"
            data-secret='@ViewData["ClientSecret"]'>
        Legg til
    </button>
</div>


<script type="text/javascript">
    var stripePublishableKey = '@Html.Raw(ViewData["publishableKey"] as string)';
    var accessToken = '@Html.Raw(ViewData["AccessToken"] as string)';

    var stripe = Stripe(stripePublishableKey);

    var style = {
        base: {
            color: '#fff',
            fontSize: '20px',
            '::placeholder': {
                color: '#fff'
            },
            cardNumber: {
                textAlign: 'middle'
            }
        },
        invalid: {
            iconColor: '#f44336',
            color: '#f44336'
        }
    };

    // Create an instance of Elements.
    var elements = stripe.elements();
    var cardElement = elements.create('card', { style: style });
    cardElement.mount('#card-element');

    var cardholderName = document.getElementById('cardholder-name');
    var cardButton = document.getElementById('card-button');
    var clientSecret = cardButton.dataset.secret;

    // Handle real-time validation errors from the card Element.
    cardElement.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });

    cardButton.addEventListener('click', function (ev) {
        stripe.handleCardSetup(
            clientSecret, cardElement, {
                payment_method_data: {
                    billing_details: {
                        name: cardholderName.value
                    }
                }
            }
        ).then(function(result) {
            if (result.error) {
                // Display error.message in your UI.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
                // The setup has succeeded. Display a success message.
                console.log(result);
                saveCard(result, accessToken);
            }
        });
    });

    function saveCard(jsonData, accessToken) {
        $.ajax({
            type: 'POST',
            headers: {
                "Authorization": accessToken
                // Includes Bearer
            },
            // Note the difference in url (this works if you're actually in Index page)
            url: '/api/v2.1/user/save-card',
            data: JSON.stringify(jsonData.setupIntent),
            contentType: 'application/json',
            success: function(data) {
                window.location.href = "https://www.example.com/success";
            },
            error: function (error) {
                window.location.href = "https://www.example.com/failure";
            }
        });
    }
</script>