{% extends 'base.html.twig' %}

{% block title %}Faire un don
{% endblock %}

{% block body %}
	<div class="form-card-bg donation">
		<div class="container">
			<div class="form-card donation-card donation-card-review">
				<div class="base-content">
					<h1>Confirmer <span>avec Paypal</span></h1>
                    <div class="flex">
                        <div class="donation_review">
                            <p><strong>Nom et prénom: </strong> {{donation.civilite}} {{donation.lastname}} {{donation.firstname}}</p>
                            <p><strong>Email: </strong> {{donation.email}}</p>
                            <p><strong>Téléphone: </strong> {{donation.phone}}</p>
                            {% if donation.birthday %}<p><strong>Date de naissance:</strong> {{ donation.birthday|format_date('none','d MMMM Y') }}<br />{% endif %}
                            {% if donation.memberNumber %}<p><strong>Numéro adhérent:</strong> {{ donation.memberNumber }}<br />{% endif %}
                            <p><strong>Adresse Postale: </strong> {{donation.address1}}<br />
                                {% if donation.address2 %}{{ donation.address2 }}<br />{% endif %}
                                {{ donation.zipcode }} {{ donation.city }}<br />
                                {{ donation.country }}
                            </p>
                            <p><strong>Montant: </strong> {{donation.realAmount}}EUR</p>
                        </div>
                    </div>
                    <div id="paypal-button-container"></div>
                    <script src="https://www.paypal.com/sdk/js?currency=EUR&client-id={{ paypal.id }}&intent=authorize"></script>
                    <script>
                    paypal.Buttons({
                        style: {
                        shape: "pill",
                        layout: "horizontal",
                        color: "gold",
                        label: "donate",
                        },
                        // Sets up the transaction when a payment button is clicked
                        createOrder: (data, actions) => {
                            return actions.order.create({{ order|raw }});
                        },
                        // Finalize the transaction after payer approval
                        onApprove: async (data, actions) => {
                            const authorization = await actions.order.authorize()
                            const authorizationId = authorization.purchase_units[0].payments.authorizations[0].id
                            let res = await fetch('{{ path("app_donation_paypal_confirm", {reference:donation.reference}) }}', {
                                method: 'post',
                                headers: {
                                'content-type': 'application/json'
                                },
                                body: JSON.stringify({authorizationId})
                            })
                            let json = await res.json()
                            if(json.success){
                                window.location.reload();
                            } else {
                                document.querySelector(".base-content").innerHtml = json.message
                            }
                        }
                    }).render('#paypal-button-container');
                    </script>
				</div>
			</div>
		</div>
	</div>
{% endblock %}