{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">
					<h3>{% Fakturačné údaje}</h3>
					<form class="row contact_form" action="{url eshopSendOrder}" method="post" id="order-form">
						<div class="col-md-6 form-group p_star">
							<input type="text" class="form-control" id="first_name" name="first_name" placeholder="{% Meno}" value="{$customer['first_name']}" required>
						</div>
						<div class="col-md-6 form-group p_star">
							<input type="text" class="form-control" id="last_name" name="last_name" placeholder="{% Priezvisko}" value="{$customer['last_name']}" required>
						</div>
						<div class="col-md-12 form-group p_star">
							<input type="text" class="form-control" id="add1" name="street" placeholder="{% Ulica&#44; číslo domu/vchodu}" value="{$customer['street']}" required>
						</div>
						<div class="col-md-6 form-group p_star">
							<input type="text" class="form-control" id="add2" name="city" placeholder="{% Mesto}" value="{$customer['city']}" required>
						</div>
						<div class="col-md-6 form-group p_star">
							<input type="text" class="form-control" id="postal-code" name="postal_code" placeholder="{%  PSČ}" value="{$customer['postal_code']}" required>
						</div>
						<div class="col-md-12 form-group p_star">
							<select class="form-control" name="country" id="country-select" required>
								<option value="">{% Krajina}</option>
								{loop $countries as $countryId => $countryName}
								<option value="{$countryId}" {if $countryId==$customer['country']}selected{/if}>{$countryName}</option>
								{/loop}
							</select>
						</div>
						<div class="col-md-6 form-group p_star">
							<input type="text" class="form-control" id="phone" name="phone" placeholder="{% Telefónne číslo}" value="{$customer['phone']}" required>
						</div>
						<div class="col-md-6 form-group p_star">
							<input type="email" class="form-control {if in_array('email', $errors)}is-invalid{/if}" id="email" name="email" placeholder="E-mail" value="{$customer['email']}" requ-ired>
						</div>
						<div class="col-md-12 form-group p_star">
							<textarea class="form-control" id="note" name="note" placeholder="{% Poznámka}">{$customer['note']}</textarea>
						</div>

						<input type="hidden" name="pickup" value="">
					</form>
				</div>

				<div class="col-lg-6">
					<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>
						<ul class="list list_2">
							<li>
								<div>{% Poštovné} <span id="delivery-price">4,00 €</span></div>
							</li>
							<li>
								<div>{% Spolu} <span id="total-price" data-totalprice="{$cart->getPrice($withVat)}">{$cart->getPrice($withVat)|price}</span></div>
							</li>
						</ul>
						<div class="creat_account">
							<input type="checkbox" id="f-option4" name="accept" form="order-form" required>
							<label for="f-option4">{% Súhlasím s} </label>
							<a href="#">{% obchodnými podmienkami}</a>
						</div>
						<button type="submit" class="btn primary-btn" form="order-form">{% Odoslať objednávku}</submit>
					</div>

					<div class="order_box mt-3">
						<h2>{% Spôsob doručenia}</h2>

						{loop $deliveryMethods as $deliveryMethod}
						<div class="radio delivery">
							<input type="radio" name="delivery_method" value="{$deliveryMethod['id']}" id="delivery-{$deliveryMethod['id']}">
							<label for="delivery-{$deliveryMethod['id']}" data-price="{$deliveryMethod['price']}">
								{$deliveryMethod['name']} <strong>{$deliveryMethod['price']|price}</strong>
							</label>
						</div>
						{/loop}
					</div>

					<div class="order_box mt-3">
						<h2>{% Spôsob úhrady}</h2>

						{loop $paymentMethods as $paymentMethod}
						<div class="radio delivery">
							<input type="radio" name="delivery_method" value="{$deliveryMethod['id']}" id="delivery-{$deliveryMethod['id']}">
							<label for="delivery-{$deliveryMethod['id']}" data-price="{$deliveryMethod['price']}">
								{$paymentMethod['name']} <strong>{$paymentMethod['price']|price}</strong>
							</label>
						</div>
						{/loop}
					</div>

					<div class="order_box mt-3">
						<h2>{% Odberné miesto}</h2>

						<p>
							{% Zvolené odberné miesto}: <span class="packeta-selector-value"></span>
						</p>
						<button class="packeta-selector-open btn primary-btn" onclick="Packeta.Widget.pick(packetaApiKey, showSelectedPickupPoint, packetaOptions)">{% Vyberte odberné miesto}</button>
					</div>
				</div>
			</div>
		</div>
	</div>

</section>

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

<script>
	let deliveryPrices = {!$deliveryPrices};
	let defaultDeliveryPrice = {$defaultDeliveryPrice};

	let countrySelect = document.getElementById('country-select');
	countrySelect.addEventListener('change', function () {
		let deliveryPrice = defaultDeliveryPrice;
		if (deliveryPrices.hasOwnProperty(this.value) === true) {
			deliveryPrice = deliveryPrices[this.value];
		}

		let deliveryPriceFormatted = deliveryPrice.toFixed(2);
		deliveryPriceFormatted = deliveryPriceFormatted.replace(".", ",") + " €";
		document.getElementById("delivery-price").textContent = deliveryPriceFormatted;

		let totalPriceElement = document.getElementById("total-price")
		let totalPrice = parseFloat(totalPriceElement.dataset.totalprice);
		totalPrice += deliveryPrice;
		let totalPriceFormatted = totalPrice.toFixed(2).replace(".", ",") + " €";

		totalPriceElement.textContent = totalPriceFormatted;
	});
	const event = new Event('change');
	countrySelect.dispatchEvent(event);

	// 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>
{/block}