@php
    $cIdUser = $order->cliente;
    $nIdEncomenda = $order->nid;
    $aProdutos = $cart;
    $shippingValue = $order->expedicao_valor;
    $ddpPercentage = $order->ddp_percentage ?? 0;
    $ddpFee = $order->ddp_fixed_fee ?? 0;
    $ddpPercentValue = ($cart->total + $shippingValue) * ($ddpPercentage / 100);
    $ddpTotal = $ddpPercentValue + $ddpFee;
    $nQtdItens = count($cart->items);
    $nValTotal = $cart->total + $ddpTotal + $shippingValue;
    $nValSemDesconto = $cart->totalWithoutDiscounts + $ddpTotal;
    $nDescontos = $cart->discounts;

    if (App::getLocale() == 'pt') {
        $locale = 'pt_PT';
    } else if (App::getLocale() == 'es') {
        $locale = 'es_ES';
    } else if (App::getLocale() == 'fr') {
        $locale = 'fr_FR';
    } else if (App::getLocale() == 'de') {
        $locale = 'de_DE';
    } else {
        $locale = 'en_US';
    }
@endphp

<div class="row mb-3">
    <!-- PAGAMENTO (ESQUERDA) -->
    <div class="col-12 col-lg-6">
        <!-- Google Pay -->
        <div id="googlepay-button"></div>

        <!-- PayPal / Apple Pay / Card -->
        <div id="paypal-buttons"></div>

        <div id="result-paypal"></div>
    </div>

    <!-- RESUMO (DIREITA) -->
    <div class="col-12 col-lg-6">
        <div class="position-sticky" style="top: 20px;">
            @include('payments.summary-finish-order')
        </div>
    </div>
</div>

<style>
	@supports (-webkit-appearance: -apple-pay-button) {
		.apple-pay-button {
			-webkit-appearance: -apple-pay-button;
			-apple-pay-button-type: plain;
			-apple-pay-button-style: black;
			width: 100%;
			height: 100%;
			display: block;
			cursor: pointer;
			border: none;
			padding: 0;
		}
	}
</style>

<!-- Load PayPal JS SDK -->
<script src="https://www.paypal.com/sdk/js?client-id={{ config('app.PAYPAL_SANDBOX_CLIENT_ID') }}&currency={{ config('app.APP_CURRENCY') }}&merchant-id={{ config('app.PAYPAL_SANDBOX_MERCHANT_ID') }}&intent=capture&components=buttons,googlepay,applepay&enable-funding=card,paylater,applepay&locale={{ $locale }}"></script>

<!-- Load Google Pay JS SDK -->
<script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>

<script>
	// Optional: log what PayPal decided to show
	console.log('PayPal SDK loaded:', typeof paypal !== 'undefined');

	// ==================== GOOGLE PAY SETUP ====================

	// Passo 5 - Variáveis (mantidas para compatibilidade)
	var isReadyToPayRequest = {};
	var baseCardPaymentMethod = {};
	var baseRequest = {};

	// Passo 6 - Variáveis globais conforme documentação PayPal
	let paymentsClient = null,
		allowedPaymentMethods = null,
		merchantInfo = null;

	async function getGooglePayConfig() {
		if (allowedPaymentMethods == null || merchantInfo == null) {
			console.log('Fetching Google Pay config from PayPal SDK...');
			const googlePayConfig = await paypal.Googlepay().config();
			allowedPaymentMethods = googlePayConfig.allowedPaymentMethods;
			merchantInfo = googlePayConfig.merchantInfo;
			console.log('Google Pay config cached');
		} else {
			console.log('Using cached Google Pay config');
		}
		return {
			allowedPaymentMethods,
			merchantInfo,
		};
	}

	function getGoogleIsReadyToPayRequest(allowedPaymentMethods) {
		return Object.assign({}, baseRequest, {
			allowedPaymentMethods: allowedPaymentMethods,
		});
	}

	function getGooglePaymentsClient() {
		if (paymentsClient === null) {
			paymentsClient = new google.payments.api.PaymentsClient({
				environment: 'TEST',
				paymentDataCallbacks: {
					onPaymentAuthorized: onPaymentAuthorized,
				},
			});
		}
		return paymentsClient;
	}

	function getGoogleTransactionInfo() {
		return {
			currencyCode: {{ config('app.APP_CURRENCY') }},
			totalPriceStatus: 'FINAL',
			totalPrice: '{{ Helper::formatAsCurrencyWithoutSymbol($nValTotal) }}'
		};
	}

	async function getGooglePaymentDataRequest() {
		const googlePayConfig = await paypal.Googlepay().config();
		const paymentDataRequest = Object.assign({}, baseRequest);
		paymentDataRequest.allowedPaymentMethods = googlePayConfig.allowedPaymentMethods;
		paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
		paymentDataRequest.merchantInfo = googlePayConfig.merchantInfo;
		paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
		return paymentDataRequest;
	}

	function onPaymentAuthorized(paymentData) {
		return new Promise(function(resolve, reject) {
			processPayment(paymentData)
				.then(function(data) {
					resolve({
						transactionState: "SUCCESS"
					});
				})
				.catch(function(errDetails) {
					resolve({
						transactionState: "ERROR"
					});
				});
		});
	}

	async function processPayment(paymentData) {
		console.log('processPayment called with:', paymentData);
		return new Promise(async function(resolve, reject) {
			try {
				const {
					id
				} = await fetch(`/api/paypal/create-order`, {
					method: "POST",
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						order_reference: '{{ $nIdEncomenda }}',
						invoice_id: '{{ $nIdEncomenda }}'
					})
				}).then(res => res.json());

				console.log('Order created:', id);

				const confirmOrderResponse = await paypal.Googlepay().confirmOrder({
					orderId: id,
					paymentMethodData: paymentData.paymentMethodData
				});

				if (confirmOrderResponse.status === "APPROVED") {
					const response = await fetch(`/api/paypal/capture-order`, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json'
						},
						body: JSON.stringify({
							orderID: id
						})
					}).then(res => res.json());

					console.log('Capture response:', response);

					if (response.status === "COMPLETED") {
						const transactionId = response.raw?.purchase_units?.[0]?.payments?.captures?.[0]?.id ?? '';
						finalizarPagamento(transactionId, function() {
							resolve({
								transactionState: 'SUCCESS'
							});
						});
					} else {
						resolve({
							transactionState: 'ERROR',
							error: {
								intent: 'PAYMENT_AUTHORIZATION',
								message: 'TRANSACTION FAILED',
							}
						});
					}
				} else if (confirmOrderResponse.status === "PAYER_ACTION_REQUIRED") {
					paypal.Googlepay().initiatePayerAction({
						orderId: id
					}).then(async function() {
						const orderResponse = await fetch(`/api/paypal/get-order`, {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify({
								orderID: id
							})
						}).then(res => res.json());

						console.log('authentication_result:', orderResponse?.payment_source?.google_pay?.card?.authentication_result);

						const response = await fetch(`/api/paypal/capture-order`, {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify({
								orderID: id
							})
						}).then(res => res.json());

						console.log('Capture response (after SCA):', response);

						if (response.status === "COMPLETED") {
							const transactionId = response.raw?.purchase_units?.[0]?.payments?.captures?.[0]?.id ?? '';
							finalizarPagamento(transactionId, function() {
								resolve({
									transactionState: 'SUCCESS'
								});
							});
						} else {
							resolve({
								transactionState: 'ERROR',
								error: {
									intent: 'PAYMENT_AUTHORIZATION',
									message: 'TRANSACTION FAILED',
								}
							});
						}
					});
				} else {
					resolve({
						transactionState: 'ERROR',
						error: {
							intent: 'PAYMENT_AUTHORIZATION',
							message: 'TRANSACTION FAILED',
						}
					});
				}
			} catch (err) {
				console.error('processPayment error:', err);
				resolve({
					transactionState: 'ERROR',
					error: {
						intent: 'PAYMENT_AUTHORIZATION',
						message: err.message,
					}
				});
			}
		});
	}

	function onGooglePayLoaded() {
		if (typeof paypal.Googlepay === 'function') {
			paypal.Googlepay().config().then(function(googlePayConfig) {
				console.log('Google Pay config:', googlePayConfig);

				if (googlePayConfig.allowedPaymentMethods && googlePayConfig.allowedPaymentMethods.length > 0) {
					isReadyToPayRequest = {
						apiVersion: 2,
						apiVersionMinor: 0,
						allowedPaymentMethods: googlePayConfig.allowedPaymentMethods
					};
					baseCardPaymentMethod = googlePayConfig.allowedPaymentMethods[0];

					// Passo 5: Set baseRequest for PaymentDataRequest
					baseRequest = {
						apiVersion: 2,
						apiVersionMinor: 0,
						allowedPaymentMethods: googlePayConfig.allowedPaymentMethods,
						merchantInfo: googlePayConfig.merchantInfo
					};

					const paymentsClient = getGooglePaymentsClient();
					paymentsClient.isReadyToPay(isReadyToPayRequest)
						.then(function(response) {
							if (response.result) {
								console.log('Device ready for Google Pay - rendering button');
								addGooglePayButton();
							}
						})
						.catch(function(err) {
							console.error(err);
						});
				}
			}).catch(function(err) {
				console.error('Error getting Google Pay config:', err);
			});
		}
	}

	function addGooglePayButton() {
		const paymentsClient = getGooglePaymentsClient();
		const button = paymentsClient.createButton({
			onClick: onGooglePaymentButtonClicked,
			allowedPaymentMethods: [baseCardPaymentMethod],
			buttonSizeMode: 'fill',
			buttonColor: 'black',
			buttonType: 'pay'
		});

		// Wrapper com largura/altura definidas para o buttonSizeMode 'fill' preencher e igualar os botões PayPal
		const wrapper = document.createElement('div');
		wrapper.style.width = '100%';
		wrapper.style.height = '45px';
		wrapper.style.marginBottom = '10px';
		wrapper.appendChild(button);

		document.getElementById('googlepay-button').appendChild(wrapper);
	}

	async function onGooglePaymentButtonClicked(event) {
		console.log('Google Pay button clicked');
		try {
			const paymentDataRequest = await getGooglePaymentDataRequest();
			const paymentsClient = getGooglePaymentsClient();
			paymentsClient.loadPaymentData(paymentDataRequest);
		} catch (err) {
			console.error('Error in onGooglePaymentButtonClicked:', err);
		}
	}

	// ==================== HELPER: FINALIZAR PAGAMENTO ====================
	function finalizarPagamento(transactionId, onDone = null) {
        fetch('/api/paypal/update-payment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                transaction_id: transactionId
            })
        })
        .then(async (response) => {
            const data = await response.json();

            if (!response.ok) {
                throw data;
            }

            return data;
        })
        .then(response => {

            if (response.success) {

                $('#result-paypal').html(`
                    <div class='alert alert-success'>
                        <h3>
                            <i class='fa fa-check-circle' aria-hidden='true'></i>
                            Muito obrigada pela sua confiança.<br>
                            O seu pagamento foi realizado com sucesso.
                        </h3>
                    </div>
                `);

            } else {

                let messageString = response.message || 'Não foi possível processar o seu pagamento. Tente novamente.';

                $('#result-paypal').html(`
                    <div class='alert alert-danger'>
                        <h3>
                            <i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
                            ${messageString}
                        </h3>
                    </div>
                `);
            }

            if (typeof onDone === 'function') onDone();
        })
        .catch(error => {

            console.error('ERROR ON TRY TO UPDATE PAYPAL', error);

            let messageString = error.message || error.mensagem || 'Não foi possível processar o seu pagamento. Tente novamente.';

            $('#result-paypal').html(`
                <div class='alert alert-danger'>
                    <h3>
                        <i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
                        ${messageString}
                    </h3>
                </div>
            `);

            // Mesmo com erro, o pagamento já foi capturado no PayPal
            if (typeof onDone === 'function') onDone();
        });
    }

	// ==================== APPLE PAY SETUP ====================

	let applePayConfig = null;

	async function initApplePay() {
		if (typeof paypal.Applepay !== 'function') {
			return;
		}

		if (!window.ApplePaySession || !ApplePaySession.supportsVersion(4)) {
			return;
		}

		try {
			applePayConfig = await paypal.Applepay().config();
			console.log('Apple Pay config:', applePayConfig);

			if (!applePayConfig.isEligible) {
				return;
			}

			// canMakePaymentsWithActiveCard is the accurate check — returns true only when
			// the device has at least one card configured in Wallet.
			// canMakePayments() is true even with no cards, which causes session.begin()
			// to fire oncancel immediately.
			const merchantId = applePayConfig.merchantInfo?.merchantIdentifier;
			let hasActiveCard = false;
			if (merchantId && typeof ApplePaySession.canMakePaymentsWithActiveCard === 'function') {
				try {
					hasActiveCard = await ApplePaySession.canMakePaymentsWithActiveCard(merchantId);
				} catch (e) {
					// Fallback if the method is unavailable or throws (e.g. non-HTTPS iframe)
					hasActiveCard = ApplePaySession.canMakePayments();
				}
			} else {
				hasActiveCard = ApplePaySession.canMakePayments();
			}

			if (!hasActiveCard) {
				console.log('Apple Pay: no active card found, button not rendered');
				return;
			}

			addApplePayButton();
		} catch (err) {
			console.error('Apple Pay init error:', err);
		}
	}

	function addApplePayButton() {
		const button = document.createElement('button');
		button.className = 'apple-pay-button';
		button.setAttribute('aria-label', 'Pagar com Apple Pay');
		button.addEventListener('click', onApplePayButtonClicked);

		const wrapper = document.createElement('div');
		wrapper.style.width = '100%';
		wrapper.style.height = '45px';
		wrapper.style.marginBottom = '10px';
		wrapper.appendChild(button);

		document.getElementById('applepay-button').appendChild(wrapper);
	}

	function onApplePayButtonClicked() {
		if (!applePayConfig) {
			return;
		}

		const paymentRequest = {
			countryCode: '{{ $order->pais }}',
			currencyCode: '{{ config("app.APP_CURRENCY") }}',
			merchantCapabilities: applePayConfig.merchantCapabilities,
			supportedNetworks: applePayConfig.supportedNetworks,
			requiredBillingContactFields: ['postalAddress', 'name'],
			total: {
				label: '{{ config("app.name") }}',
				type: 'final',
				amount: '{{ Helper::formatAsCurrencyWithoutSymbol($nValTotal) }}'
			}
		};

		console.log('Apple Pay: creating session with request:', paymentRequest);
		const session = new ApplePaySession(4, paymentRequest);

		session.onvalidatemerchant = async function(event) {
			console.log('Apple Pay: onvalidatemerchant fired, validationURL:', event.validationURL);
			try {
				const result = await paypal.Applepay().validateMerchant({
					validationUrl: event.validationURL,
					displayName: '{{ config("app.name") }}'
				});
				console.log('Apple Pay: validateMerchant raw result:', JSON.stringify(result));
				// PayPal SDK may return { merchantSession: {...} } or the session object directly
				const appleSession = result?.merchantSession ?? result;
				session.completeMerchantValidation(appleSession);
			} catch (err) {
				console.error('Apple Pay merchant validation error:', err);
				$('#result-paypal').html(`
					<div class='alert alert-danger'>
						<h3>
							<i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
							Não foi possível validar o método de pagamento. Tente novamente.
						</h3>
					</div>
				`);
				session.abort();
			}
		};

		session.onpaymentauthorized = async function(event) {
			console.log('Apple Pay: onpaymentauthorized fired');
			try {
				const {
					id
				} = await fetch('/api/paypal/create-order', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						order_reference: '{{ $nIdEncomenda }}',
						invoice_id: '{{ $nIdEncomenda }}',
						payment_method: 'apple_pay'
					})
				}).then(res => res.json());

				console.log('Apple Pay: createPayPalOrder id:', id);

				const confirmResponse = await paypal.Applepay().confirmOrder({
					orderId: id,
					token: event.payment.token,
					billingContact: event.payment.billingContact
				});

				console.log('Apple Pay: confirmOrder response:', JSON.stringify(confirmResponse));

				const approvedStatus = confirmResponse.approveApplePayPayment?.status ?? confirmResponse.status;
				if (approvedStatus !== 'APPROVED') {
					console.warn('Apple Pay: confirmOrder status not APPROVED:', approvedStatus);
					session.completePayment(ApplePaySession.STATUS_FAILURE);
					$('#result-paypal').html(`
						<div class='alert alert-danger'>
							<h3>
								<i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
								Não foi possível processar o seu pagamento. Tente novamente.
							</h3>
						</div>
					`);
					return;
				}

				const captureResponse = await fetch('/api/paypal/capture-order', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						orderID: id
					})
				}).then(res => res.json());

				console.log('Apple Pay: captureOrder response status:', captureResponse.status);

				if (captureResponse.status === 'COMPLETED') {
					const transactionId = captureResponse.raw?.purchase_units?.[0]?.payments?.captures?.[0]?.id ?? '';
					finalizarPagamento(transactionId, function() {
						session.completePayment(ApplePaySession.STATUS_SUCCESS);
					});
				} else {
					console.warn('Apple Pay: capture not COMPLETED:', captureResponse.status);
					session.completePayment(ApplePaySession.STATUS_FAILURE);
					$('#result-paypal').html(`
						<div class='alert alert-danger'>
							<h3>
								<i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
								Não foi possível processar o seu pagamento. Tente novamente.
							</h3>
						</div>
					`);
				}
			} catch (err) {
				console.error('Apple Pay onpaymentauthorized error:', err);
				session.completePayment(ApplePaySession.STATUS_FAILURE);
				$('#result-paypal').html(`
					<div class='alert alert-danger'>
						<h3>
							<i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
							Não foi possível processar o seu pagamento. Tente novamente.
						</h3>
					</div>
				`);
			}
		};

		session.oncancel = function() {
			console.log('Apple Pay session cancelled (oncancel fired [new2])');
		};

		session.begin();
	}

	initApplePay();

	// ==================== PAYPAL BUTTONS SETUP ====================
	paypal.Buttons({
		// Style is optional; note: some alternative methods require vertical layout.[web:20]
		style: {
			layout: 'vertical',
			color: 'gold',
			shape: 'rect',
			label: 'paypal'
		},

		// Called when the buyer clicks any of the funding buttons
		createOrder: function(data, actions) {
			return fetch('/api/paypal/create-order', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
                        currency: '{{ config("app.APP_CURRENCY") }}',
						order_reference: '{{ $nIdEncomenda }}',
						invoice_id: '{{ $nIdEncomenda }}'
					})
				})
				.then(function(res) {
					if (!res.ok) {
						throw new Error('Network response was not ok');
					}
					return res.json();
				})
				.then(function(data) {
					if (!data.id) {
						throw new Error('Missing order id in response');
					}
					return data.id; // PayPal order ID
				})
				.catch(function(err) {
					console.error('createPayPalOrder error', err);
				});
		},

		// Called after the buyer approves the payment (any funding source)
		onApprove: function(data, actions) {
			const buttonsDiv = $('#paypal-buttons');
			const resultDiv = $('#result-paypal');
			console.log('onApprove called', data);

			resultDiv.html('');

			return fetch('/api/paypal/capture-order', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						orderID: data.orderID
					})
				})
				.then(function(res) {
					if (!res.ok) {
						throw new Error('Network response was not ok');
					}
					return res.json();
				})
				.then(function(details) {
					console.log('onApprove called response', details);

                    if (details.status === 'COMPLETED') {
                        const captures = details.raw?.purchase_units?.[0]?.payments?.captures;
                        const transactionId = captures?.[0]?.id ?? '';

                        buttonsDiv.fadeOut('fast');

                        fetch('/api/paypal/update-payment', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                transaction_id: transactionId
                            })
                        })
                        .then(response => response.json())
                        .then(response => {
                            console.log('updatePayPal response', response);

                            if (response.success) {
                                resultDiv.html(`
                                    <div class='alert alert-success'>
                                        <h3>
                                            <i class='fa fa-check-circle' aria-hidden='true'></i>
                                            Muito obrigada pela Sua confiança.<br>
                                            O seu pagamento foi realizado com sucesso.
                                        </h3>
                                    </div>
                                `);
                            } else {
                                const messageString = response.message || response.mensagem || 'Não foi possível processar o seu pagamento. Tente novamente.';

                                resultDiv.html(`
                                    <div class='alert alert-danger'>
                                        <h3>
                                            <i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
                                            ${messageString}
                                        </h3>
                                    </div>
                                `);
                            }
                        })
                        .catch(error => {
                            console.error('ERROR ON TRY TO UPDATE PAYPAL', error);

                            resultDiv.html(`
                                <div class='alert alert-danger'>
                                    <h3>
                                        <i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
                                        Não foi possível processar o seu pagamento. Tente novamente.
                                    </h3>
                                </div>
                            `);
                        });
                    } else {
						resultDiv.html(`
							<div class='alert alert-danger'>
								<h3>
									<i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
									Não foi possível processar o seu pagamento. Tente novamente.
								</h3>
							</div>
						`);
					}
				})
				.catch(function(err) {
					console.error('capturePayPalOrder error', err);

					$('#result-paypal').html(`
						<div class='alert alert-danger'>
							<h3>
								<i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
								Não foi possível processar o seu pagamento. Tente novamente.
							</h3>
						</div>
					`);
				});
		},

		// Optional: handle cancellations
		onCancel: function(data) {
			console.log('Payment cancelled', data);
			// Optionally, redirect or show message
		},

		// Optional: handle errors
		onError: function(err) {
			console.error('PayPal Buttons error', err);

			$('#result-paypal').html(`
				<div class='alert alert-danger'>
					<h3>
						<i class='fa fa-exclamation-triangle' aria-hidden='true'></i>
						Não foi possível processar o seu pagamento. Tente novamente.
					</h3>
				</div>
			`);
		}
	}).render('#paypal-buttons'); // Render into container
</script>