{extends Layout}

{block content}
<!-- Start Banner Area -->
<section class="banner-area organic-breadcrumb">
	<div class="container">
		<div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
			<div class="col-first">
				<h1>{% Objednávka}</h1>
			</div>
		</div>
	</div>
</section>
<!-- End Banner Area -->

{include Flash}

<section class="checkout_area section_gap">
	<div class="container">
		<div class="billing_details">
			<div class="row">
				<div class="col-lg-6">
					<form class="contact_form" action="{url eshopOrderStep3send}" method="post" id="order-form">
						<h3>{% Spôsob doručenia}</h3>
						<div class="col-md-12 form-group">
							{loop $deliveryMethods as $deliveryMethod}
							<div class="form-check">
								<input class="form-check-input" type="radio" name="delivery_method" id="delivery-{$deliveryMethod['id']}" value="{$deliveryMethod['id']}" required>
								<label class="form-check-label" for="delivery-{$deliveryMethod['id']}">
									{$deliveryMethod['name']} <strong>+{$deliveryMethod['price']|price}</strong>

									{if $deliveryMethod["id"] == 1}
									<a href="#" class="packeta-selector-open btn btn-sm btn-info" style="padding: 0 4px; margin-left: 1em" onclick="Packeta.Widget.pick(packetaApiKey, showSelectedPickupPoint, packetaOptions)">{% Vyberte odberné miesto}</a>
									{/if}
								</label>

								{if $deliveryMethod["id"] == 1}
								<div class="packeta-selector-value">{!$selectedPickupLabel}</div>
								{/if}
							</div>
							{/loop}
						</div>

						<h3 class="mt-5">{% Spôsob úhrady}</h3>
						<div class="col-md-12 form-group">
							{loop $paymentMethods as $paymentMethod}
							<div class="form-check">
								<input class="form-check-input" type="radio" name="payment_method" id="payment-{$paymentMethod['id']}" value="{$paymentMethod['id']}" required>
								<label class="form-check-label" for="payment-{$paymentMethod['id']}">
									{$paymentMethod['name']} <strong>+{$paymentMethod['price']|price}</strong>
								</label>
							</div>
							{/loop}
						</div>

						<input type="hidden" name="pickup" value="{$selectedPickup}">

						<div class="col-md-12">
							<button type="submit" class="btn primary-btn" form="order-form">{% Pokračovať}</button>
						</div>
					</form>
				</div>

				<div class="col-lg-6">
					<div class="order_box">
						<h2>{% Fakturačné údaje}</h2>

						<table>
							<tbody>
								<tr>
									<th>{% Meno}:</th>
									<td>{$customer["first_name"]} {$customer["last_name"]}</td>
								</tr>
								<tr>
									<th>{% Ulica&#44; číslo domu/vchodu}:</th>
									<td>{$customer["street"]}</td>
								</tr>
								<tr>
									<th>{% Mesto}:</th>
									<td>{$customer["city"]}</td>
								</tr>
								<tr>
									<th>{% PSČ}:</th>
									<td>{$customer["postal_code"]}</td>
								</tr>
								<tr>
									<th>{% Krajina}:</th>
									<td>{$customer["country_name"]}</td>
								</tr>
								<tr>
									<th>{% Telefónne číslo}:</th>
									<td>{$customer["phone"]}</td>
								</tr>
								<tr>
									<th>E-mail:</th>
									<td>{$customer["email"]}</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="order_box">
						<h2>{% Dodacia adresa}</h2>

						{if $deliveryAddress === $customer}
						<p>Rovnaká ako fakturačné údaje</p>
						{else}
						<table>
							<tbody>
								<tr>
									<th>{% Meno}:</th>
									<td>{$deliveryAddress["first_name"]} {$deliveryAddress["last_name"]}</td>
								</tr>
								<tr>
									<th>{% Ulica&#44; číslo domu/vchodu}:</th>
									<td>{$deliveryAddress["street"]}</td>
								</tr>
								<tr>
									<th>{% Mesto}:</th>
									<td>{$deliveryAddress["city"]}</td>
								</tr>
								<tr>
									<th>{% PSČ}:</th>
									<td>{$deliveryAddress["postal_code"]}</td>
								</tr>
								<tr>
									<th>{% Krajina}:</th>
									<td>{$deliveryAddress["country_name"]}</td>
								</tr>
								<tr>
									<th>{% Telefónne číslo}:</th>
									<td>{$deliveryAddress["phone"]}</td>
								</tr>
								<tr>
									<th>E-mail:</th>
									<td>{$deliveryAddress["email"]}</td>
								</tr>
							</tbody>
						</table>
						{/if}
					</div>

					<div class="order_box">
						<h2>{% Vaša objednávka}</h2>
						<ul class="list">
							<li>
								<div>{% Produkt} <span>{% Spolu}</span></div>
							</li>
							{loop $cart->products as $cartProduct}
							<li>
								<div>
									{$cartProduct['name']}
									<span class="middle">{$cartProduct['amount']} ks</span>
									<span class="last">{$cartProduct['model']->getPrice($withVat, $cartProduct['amount'], $wholesale, true) * $cartProduct['amount']|price}</span>
								</div>
							</li>
							{/loop}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="https://widget.packeta.com/v6/www/js/library.js"></script>

	<script>
		const deliveryMethodsPaymentMethods = {!$deliveryMethodsPaymentMethods};

		document.addEventListener('DOMContentLoaded', function () {
			const deliveryRadios = document.querySelectorAll('input[name="delivery_method"]');
			const paymentRadios = document.querySelectorAll('input[name="payment_method"]');

			function updatePaymentMethods(deliveryValue) {
				const allowedPayments = deliveryMethodsPaymentMethods[deliveryValue];

				paymentRadios.forEach(paymentRadio => {
					const paymentValue = parseInt(paymentRadio.value);
					const paymentLabel = paymentRadio.parentElement;

					if (allowedPayments.includes(paymentValue)) {
						paymentLabel.style.display = 'block';
					} else {
						paymentLabel.style.display = 'none';
					}
				});

				// Select the first visible payment method
				let firstVisiblePayment = null;
				paymentRadios.forEach(paymentRadio => {
					const paymentLabel = paymentRadio.parentElement;
					if (paymentLabel.style.display !== 'none' && firstVisiblePayment === null) {
						firstVisiblePayment = paymentRadio;
					}
				});
				if (firstVisiblePayment) {
					firstVisiblePayment.checked = true;
				}
			}

			// Initial setup: select the first delivery method and update payments
			/*
			if (deliveryRadios.length > 0) {
				deliveryRadios[0].checked = true;
				updatePaymentMethods({$selectedDeliveryMethod});
			}
			*/

			// Event listener for delivery method changes
			deliveryRadios.forEach(deliveryRadio => {
				deliveryRadio.addEventListener('change', function () {
					updatePaymentMethods(this.value);
				});
			});

			const deliveryInput = document.getElementById('delivery-{$selectedDeliveryMethod}');
			if (deliveryInput && deliveryInput.type === 'checkbox' || deliveryInput.type === 'radio') {
				deliveryInput.checked = true;

				const changeEvent = new Event('change', {
					bubbles: true,
					cancelable: true
				});
				deliveryInput.dispatchEvent(changeEvent);
			}

			const paymentInput = document.getElementById('payment-{$selectedPaymentMethod}');
			console.log(paymentInput);
			if (paymentInput && paymentInput.type === 'checkbox' || paymentInput.type === 'radio') {
				paymentInput.checked = true;

				const changeEvent = new Event('change', {
					bubbles: true,
					cancelable: true
				});
				paymentInput.dispatchEvent(changeEvent);
			}
		});

		// Paketa
		const packetaApiKey = '1cb8aec9ffb02cce';

		const packetaOptions = {
			language: "sk",
			valueFormat: "\"Packeta\",id,carrierId,carrierPickupPointId,name,city,street",
			view: "modal",
		};

		function showSelectedPickupPoint(point) {
			const saveElement = document.querySelector(".packeta-selector-value");
			// Add here an action on pickup point selection
			saveElement.innerText = '';
			if (point) {
				console.log("Selected point", point);

				let html = `<strong>${point.place}</strong>, ${point.nameStreet}`;

				//saveElement.innerText = point.formatedValue;
				saveElement.innerHTML = html;

				let pickup = {
					place: point.place,
					nameStreet: point.nameStreet,
					id: point.id,
					carrierId: point.carrierId,
					carrierPickupPointId: point.carrierPickupPointId,
				};

				const pickupEl = document.querySelector('[name="pickup"]');
				pickupEl.value = JSON.stringify(pickup);
			}
		}
	</script>
</section>
{/block}