{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-8">
					<h3>{% Kontaktné ú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>
					</form>
				</div>
				<div class="col-lg-4">
					<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>
			</div>
		</div>
	</div>
</section>

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