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

{% block content %}
	<div class="cart_page">
		<div class="cart_items">
			{% for product in products %}
				<div class="cart_item">
					{% if product.img %}
						<img class="img" src="{{ product.img }}" alt="{{ product.img }}">
					{% endif %}

					<h2>{{product.name}}</h2>
					<div style="width:100%;">
						<div class="vars">
							<div>
								<h3>${{product.price}}</h3>
							</div>
							<div>
								<h3>{{product.weight}} г.</h3>
							</div>
						</div>

					</div>
				</div>
			{% endfor %}
		</div>
		<div>
		<div class="wrapper">
			<div class="billing-address">
				<h1>Billing Address</h1>
			<div class="form-mini">
				<div>
					<label for="full_name">Full Name:</label>
					<input type="text" id="full_name" name="full_name" required>
				</div>
				
				<div>
					<label for="address_line1">Address Line 1:</label>
					<input type="text" id="address_line1" name="address_line1" required>
				</div>
				
				<div>
					<label for="address_line2">Address Line 2:</label>
					<input type="text" id="address_line2" name="address_line2">
				</div>
				
				<div>
					<label for="city">City:</label>
					<input type="text" id="city" name="city" required>
				</div>
				
				<div>
					<label for="state">State:</label>
					<input type="text" id="state" name="state" required>
				</div>
				
				<div>
					<label for="postcode">Postcode:</label>
					<input type="text" id="postcode" name="postcode" required>
				</div>
				
				<div>
					<label for="phone">Phone:</label>
					<input type="text" id="phone" name="phone" required>
				</div>
				<div>
					<label for="email">Email:</label>
					<input type="text" id="email" name="email" required>
				</div>
			</div>
			</div>
			<div class="checkout">
				<p>Сумма:{{price_sum}}</p>
				<div id="paypal-button-container"></div>
			</div>
		</div>
	</div>
<script src="https://www.paypal.com/sdk/js?client-id=AXnkrMXEIWVuJR_iDOH2Dq3chOz1CvjEPV3gpmTb4ZuOZ1558BuKmFVdNwzUQSd15NhLCbxwK3bKIWnl&locale=en_US"></script>	
<script type="text/javascript">
function randomInteger(min, max) {

  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}
				paypal.Buttons({
					// All your options here !
					createOrder: (data, actions) => {
							return actions.order.create({
									intent: 'capture',  // capture or authorize
									purchase_units: [{
													amount: {
															value: {{price_sum}}
													},
													description: 'Order',
													invoice_id: '1234567890',
													soft_descriptor: 'unicorn-2345678'
									}],
									application_context: {
													brand_name: 'ICE',
													shipping_preference: 'NO_SHIPPING'
									}
							});
					},
					// Finalizes the transaction after payer approval
					onApprove: (data) => {
						fetch('/createOrder', {
								method: 'POST',
								headers: {
									'Accept': 'application/json',
									'Content-Type': 'application/json'
								},
								body: JSON.stringify({
									'full_name': document.getElementById('full_name').value,
									'transaction_id': randomInteger(10000000, 100000000),
									'address_line1': document.getElementById('address_line1').value,
									'address_line2': document.getElementById('address_line2').value,
									'city': document.getElementById('city').value,
									'state': document.getElementById('state').value,
									'postcode': document.getElementById('postcode').value,
									'phone': document.getElementById('phone').value,
									'email': document.getElementById('email').value,
									'status': 'PAYMENT COMPLETED',
									'price': {{ price_sum }}
								})
						}).then(response => {
							alert("Заказ выполнен");
						})
					},
					// The user closed the window
					onCancel: () => {
						fetch('/createOrder', {
								method: 'POST',
								headers: {
									'Accept': 'application/json',
									'Content-Type': 'application/json'
								},
								body: JSON.stringify({
									'full_name': document.getElementById('full_name').value,
									'transaction_id': randomInteger(10000000, 100000000),
									'address_line1': document.getElementById('address_line1').value,
									'address_line2': document.getElementById('address_line2').value,
									'city': document.getElementById('city').value,
									'state': document.getElementById('state').value,
									'postcode': document.getElementById('postcode').value,
									'phone': document.getElementById('phone').value,
									'email': document.getElementById('email').value,
									'status': 'ORDER_CANCELED',
									'price': {{ price_sum }}
								})
						}).then(response => {
							alert("Заказ отменён");
						})
					},
					onError: (err) => {
									console.log('Something went wrong', err);
					}
				}).render('#paypal-button-container');
			</script>
	{% endblock %}
