{% extends 'App::layout_setting.html.twig' %}

{% block title %}Pay{% endblock %}

{% block stylesheets %}
	<style>

	</style>
{% endblock %}

{% block body %}

	<form id='payment-form'>
		<label>
			Card details
			<!-- placeholder for Elements -->
			
		</label>
		<div id="card-element"></div>
		<button type="submit">Submit Payment</button>
	</form>

{% endblock body %}

{% block javascripts %}
<script src="https://js.stripe.com/v3/"></script>
<script>
    var stripe = Stripe('{{ stripe_public_key }}');

    var elements = stripe.elements();

    // Set up Stripe.js and Elements to use in checkout form
    var style = {
        base: {
            color: "#32325d",
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: "antialiased",
            fontSize: "16px",
            "::placeholder": {
                color: "#aab7c4"
            }
        },
        invalid: {
            color: "#fa755a",
            iconColor: "#fa755a"
        },
    };

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


    cardElement.mount('#card-element');

    var form = document.getElementById('payment-form');


    form.addEventListener('submit', function(event) {
        // We don't want to let default form submission happen here,
        // which would refresh the page.
        event.preventDefault();

        stripe.createPaymentMethod({
            type: 'card',
            card: cardElement,
            billing_details: {
                // Include any additional collected billing details.
                name: 'Jenny Rosen',
            },
        }).then(stripePaymentMethodHandler);
    });

    function stripePaymentMethodHandler(result) {
        console.log(result.paymentMethod.id)
        if (result.error) {
            // Show error in payment form
        } else {
            // Otherwise send paymentMethod.id to your server (see Step 4)
            fetch('{{ path('app_pay_create', {'formule':formule}) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    payment_method_id: result.paymentMethod.id,
                })
            }).then(function(result) {
                // Handle server response (see Step 4)
                result.json().then(function(json) {
                    console.log(json);
                    handleServerResponse(json);
                })
            });
        }
    }

    function handleServerResponse(response) {

        console.log("handleServerResponse");

        /*
        stripe.confirmPayment({
            elements,
            confirmParams: {
            // Make sure to change this to your payment completion page
            return_url: "http://localhost:8888/setting/success/",
            },
        }).then(stripePaymentMethodHandler);
        */


        /*
        if (response.error) 
        {
            console.log("error");
            console.log(response.error);
            // Show error from server on payment form
        } 
        else if (response.requires_action) 
        {
            console.log("requires_action");
            // Use Stripe.js to handle required card action
            stripe.handleCardAction(
                response.payment_intent_client_secret
            ).then(handleStripeJsResult);
        } 
        else 
        {
            console.log("success");
            // Show success message
            console.log(response);
        }
        */
    }

    function handleStripeJsResult(result) 
	{
        console.log("handleStripeJsResult");
        
        if (result.type === "card_error" || result.type === "validation_error") 
        {
            console.log("Card error");
            console.log(result.message);
        } 
        else 
        {
            console.log("An unexpected error occured.");
        }

        
        console.log(result);
    }


</script>
{% endblock %}