{% extends "base.html.twig" %}
{% block title %}Checkout — Claim Your Gift{% endblock %}

{% block body %}
	<style>
		/* ===== Page layout ===== */
		.checkout-page {
			max-width: 1280px;
			margin: 0 auto;
			padding: 48px 24px 64px;
		}
		.checkout-title {
			text-align: center;
			font-family: MaryAnn, "Trebuchet MS", Arial, sans-serif;
			font-weight: 800;
			font-size: 1.8rem;
			color: #1a1a1a;
			margin-bottom: 32px;
		}

		/* Two-column wrapper — 2-col desktop (>768px), stack on small screens */
		.checkout-page .checkout-columns {
			display: grid !important;
			grid-template-columns: 1fr 400px !important;
			gap: 32px;
			align-items: start;
			width: 100%;
		}

		@media (max-width: 768px) {
			.checkout-page .checkout-columns {
				grid-template-columns: 1fr !important;
			}
			.checkout-sticky-col {
				position: static !important;
			}
		}

		/* ===== Cards ===== */
		.checkout-card {
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 12px;
			padding: 28px 24px;
			margin-bottom: 24px;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
		}
		.checkout-card-title {
			font-family: Barlow, sans-serif;
			font-weight: 700;
			font-size: 1rem;
			color: #1a1a1a;
			margin-bottom: 20px;
			padding-bottom: 12px;
			border-bottom: 1px solid #f0f0f0;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		/* ===== Right column: sticky order summary ===== */
		.checkout-sticky-col {
			position: sticky;
			top: 24px;
			align-self: start;
		}

		/* ===== Left column: form ===== */
		.checkout-form-col {
			max-width: 100%;
		}

		/* ===== Order items (side panel) ===== */
		.checkout-item {
			display: flex;
			gap: 14px;
			padding: 12px 0;
			border-bottom: 1px solid #f5f5f5;
			align-items: center;
		}
		.checkout-item:last-child {
			border-bottom: none;
		}
		.checkout-item-img {
			width: 64px;
			height: 64px;
			border-radius: 8px;
			object-fit: cover;
			background: #f9fafb;
			flex-shrink: 0;
		}
		.checkout-item-info {
			flex: 1;
			min-width: 0;
		}
		.checkout-item-name {
			font-family: Barlow, sans-serif;
			font-weight: 600;
			font-size: 0.88rem;
			color: #1a1a1a;
			margin-bottom: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.checkout-item-brand {
			font-family: Barlow, sans-serif;
			font-weight: 400;
			font-size: 0.8rem;
			color: #6b7280;
			margin-bottom: 2px;
		}
		.checkout-item-qty {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 24px;
			height: 24px;
			padding: 0 6px;
			background: #fef3e7;
			color: #f06c00;
			font-family: Barlow, sans-serif;
			font-weight: 700;
			font-size: 0.75rem;
			border-radius: 12px;
			margin-top: 4px;
		}

		/* Total bar */
		.checkout-total-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18px 20px;
			background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
			border-radius: 10px;
			margin-bottom: 20px;
			border: 1px solid #bbf7d0;
		}
		.checkout-total-label {
			font-family: Barlow, sans-serif;
			font-weight: 600;
			font-size: 1rem;
			color: #1a1a1a;
		}
		.checkout-total-value {
			font-family: MaryAnn, "Trebuchet MS", Arial, sans-serif;
			font-weight: 800;
			font-size: 1.5rem;
			color: #f06c00;
		}

		/* Order totals breakdown */
		.checkout-totals {
			margin-bottom: 20px;
		}
		.checkout-totals-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px 20px;
			font-family: Barlow, sans-serif;
		}
		.checkout-totals-label {
			font-weight: 500;
			color: #374151;
			font-size: 0.95rem;
		}
		.checkout-totals-value,
		.checkout-totals-amount {
			font-weight: 600;
			color: #1a1a1a;
			font-size: 0.95rem;
		}
		.checkout-totals-total {
			padding-top: 14px;
			padding-bottom: 14px;
			padding-left: 20px;
			padding-right: 20px;
		}

		/* Empty state */
		.checkout-empty {
			text-align: center;
			padding: 48px 24px;
			color: #6b7280;
		}
		.checkout-empty-icon {
			font-size: 3rem;
			margin-bottom: 12px;
		}
		.checkout-empty-text {
			font-family: Barlow, sans-serif;
			font-size: 1.05rem;
			margin-bottom: 20px;
		}

		/* Form sections */
		.form-section {
			margin-bottom: 8px;
		}
		.form-section-title {
			font-family: Barlow, sans-serif;
			font-weight: 700;
			font-size: 1.05rem;
			color: #1a1a1a;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.form-section-title::before {
			content: "";
			display: inline-block;
			width: 4px;
			height: 20px;
			background: #f06c00;
			border-radius: 2px;
		}

		.form-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			margin-bottom: 16px;
		}
		.form-row-single {
			margin-bottom: 16px;
		}

		.form-group label {
			display: block;
			font-family: Barlow, sans-serif;
			font-weight: 600;
			font-size: 0.85rem;
			color: #374151;
			margin-bottom: 6px;
		}
		.form-group input {
			width: 100%;
			padding: 12px 14px;
			border: 1.5px solid #d1d5db;
			border-radius: 8px;
			font-family: Barlow, sans-serif;
			font-size: 0.95rem;
			color: #1a1a1a;
			background: #ffffff;
			transition: all 0.2s ease;
			box-sizing: border-box;
		}
		.form-group input:focus {
			outline: none;
			border-color: #f06c00;
			box-shadow: 0 0 0 3px rgba(240, 108, 0, 0.12);
		}
		.form-group input::placeholder {
			color: #9ca3af;
		}
		.form-group input:hover:not(:focus) {
			border-color: #d1d5db;
			background: #fafafa;
		}

		@keyframes slideUp {
			from {
				transform: translateY(30px);
				opacity: 0;
			}
			to {
				transform: translateY(0);
				opacity: 1;
			}
		}
		@media (min-width: 768px) {
			.checkout-page {
				padding-top: 64px;
			}
			.checkout-title {
				font-size: 2.2rem;
			}
		}

		/* Inline date selects */
		.inline-selects {
			display: flex;
			gap: 8px;
			align-items: flex-start;
		}
		.inline-selects .date-select {
			border: 1.5px solid #d1d5db;
			border-radius: 8px;
			font-family: Barlow, sans-serif;
			font-size: 0.95rem;
			color: #1a1a1a;
			background: #fff;
			padding: 12px 14px;
			transition: all 0.2s ease;
			appearance: none;
			-webkit-appearance: none;
		}
		.inline-selects .date-select:focus {
			outline: none;
			border-color: #f06c00;
			box-shadow: 0 0 0 3px rgba(240, 108, 0, 0.12);
		}
		.inline-selects .date-select option[value=""] {
			color: #9ca3af;
			font-style: italic;
		}

		/* Field error states */
		.field-error {
			color: #dc2626;
			font-family: Barlow, sans-serif;
			font-size: 0.8rem;
			margin-top: 4px;
			display: none;
			line-height: 1.3;
			animation: fadeInError 0.25s ease-out forwards;
		}
		.field-error.visible {
			display: block;
		}
		@keyframes fadeInError {
			from {
				opacity: 0;
				transform: translateY(-4px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
		.form-group input.field-error-border,
		.form-group select.field-error-border,
		.inline-selects .date-select.field-error-border {
			border-color: #dc2626 !important;
			box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
		}
	</style>

	<div class="checkout-page ln-o-container ln-o-container--soft padding-bottom-default">
		{% if orderSubmitted %}
			<!-- Order Success State -->
			<div class="checkout-card" style="text-align: center; padding: 48px 24px;">
				<div style="font-size: 3.5rem; margin-bottom: 16px;">🎉</div>
				<h2 style="font-family: MaryAnn, sans-serif; font-weight: 800; font-size: 1.5rem; color: #1a1a1a; margin-bottom: 8px;">Order Confirmed!</h2>
				<p style="font-family: Barlow, sans-serif; font-size: 1rem; color: #5a6270; margin-bottom: 24px;">Your gift selections have been submitted. You’ll receive your order in 5–7 days.<br/> Thank you for participating in our survey campaign!</p>
				<a href="{{ base_url }}/survey.php?page=survey&s={{ s }}" style="display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #f06c00, #e85d00); color: #fff; font-family: MaryAnn, sans-serif; font-weight: 700; border-radius: 8px; text-decoration: none;">Back to Survey</a>
			</div>
		{% elseif cart is empty %}
			<div class="checkout-card checkout-empty">
				<div class="checkout-empty-icon">🛍️</div>
				<p class="checkout-empty-text">You haven't selected any gifts yet.</p>
				<a href="{{ base_url }}/survey.php?page=shop&s={{ s }}" style="display: inline-block; padding: 14px 28px; background: linear-gradient(135deg, #1a6b3c, #157d32); color: #fff; font-family: MaryAnn, sans-serif; font-weight: 700; border-radius: 8px; text-decoration: none;">Browse Gifts →</a>
			</div>
		{% else %}
			<div class="checkout-columns">

				<!-- LEFT column: Form -->
				<div class="checkout-form-col">
					<form id="checkoutForm" action="{{ base_url }}/survey.php?page=checkout&s={{ s }}" method="POST">

						<!-- CSRF Token -->
						{{ csrf_field|raw }}
						{% if recaptcha_enabled %}
							<!-- reCAPTCHA Widget -->
							<div style="margin-bottom: 16px; text-align: center;">
								<p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 8px;">Verify you are human</p>
								{% if recaptcha_version == 2 %}
									<div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}" data-theme="light"></div>
								{% else %}
									<input type="hidden" name="recaptcha_v3_token" id="checkoutRecaptchaToken">
								{% endif %}
							</div>
						{% endif %}

						<!-- Personal Details -->
						<div class="checkout-card form-section">
							<h3 class="form-section-title">Personal Details</h3>

							<div class="form-row">
								<div class="form-group">
									<label for="firstName">First Name</label>
									<input type="text" id="firstName" name="firstName" placeholder="" required/>
									<div class="field-error" id="firstNameError"></div>
								</div>
								<div class="form-group">
									<label for="lastName">Last Name</label>
									<input type="text" id="lastName" name="lastName" placeholder="" required/>
									<div class="field-error" id="lastNameError"></div>
								</div>
							</div>

							<div class="form-row-single">
								<div class="form-group">
									<label for="address1">Address Line 1</label>
									<input type="text" id="address1" name="address1" placeholder="" required/>
									<div class="field-error" id="address1Error"></div>
								</div>
							</div>

							<div class="form-row-single">
								<div class="form-group">
									<label for="address2">Address Line 2 (Optional)</label>
									<input type="text" id="address2" name="address2" placeholder=""/>
								</div>
							</div>

							<div class="form-row">
								<div class="form-group">
									<label for="city">City</label>
									<input type="text" id="city" name="city" placeholder="" required/>
									<div class="field-error" id="cityError"></div>
								</div>
								<div class="form-group">
									<label for="postalCode">Postal Code</label>
									<input type="text" id="postalCode" name="postalCode" placeholder="" required pattern="[A-Za-z]{1,2}[0-9][A-Za-z0-9]?\s?[0-9][A-Za-z]{2}"/>
									<div class="field-error" id="postalCodeError"></div>
								</div>
							</div>

							<div class="form-row">
								<div class="form-group">
									<label for="email">Email Address</label>
									<input type="email" id="email" name="email" placeholder="" required/>
									<div class="field-error" id="emailError"></div>
								</div>
								<div class="form-group">
									<label for="phoneNumber">Phone Number</label>
									<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="" required pattern="[0-9\s\-\+]{8,15}"/>
									<div class="field-error" id="phoneNumberError"></div>
								</div>
							</div>

							<div class="form-group" style="margin-bottom:18px;">
								<label for="dateOfBirth">Date of Birth</label>
								<div class="inline-selects" style="width:100%;">
									<select id="dayOfBirth" name="dateOfBirth[day]" class="date-select" required style="flex:0 0 90px;" placeholder="Day">
										<option value="" disabled selected>Day</option>
										{% for d in 1..31 %}<option value="{{ '%02d'|format(d) }}">{{ '%02d'|format(d) }}</option>{% endfor %}
									</select>
									<select id="monthOfBirth" name="dateOfBirth[month]" class="date-select" required style="flex:0 0 165px;" placeholder="Month">
										<option value="" disabled selected>Month</option>
										{% set birthMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] %}
										{% for i in 1..12 %}<option value="{{ '%02d'|format(i) }}">{{ birthMonths[i - 1] }}</option>{% endfor %}
									</select>
									<select id="yearOfBirth" name="dateOfBirth[year]" class="date-select" required style="flex:0 0 95px;" placeholder="Year">
										<option value="" disabled selected>Year</option>
										{% for y in 2010..1930 %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
									</select>
								</div>
								<div class="field-error" id="dateOfBirthError"></div>
							</div>
						</div>

						<!-- Payment Details -->
						<div class="checkout-card form-section">
							<div class="form-payment-details-title">
								<h3 class="form-section-title">Payment Details</h3>
								<img src="{{ asset('/payment.png') }}"/>
							</div>
							<div class="form-row-single">
								<div class="form-group">
									<label for="cardHolderName">Cardholder Name</label>
									<input type="text" id="cardHolderName" name="cardHolderName" placeholder="" required/>
									<div class="field-error" id="cardHolderNameError"></div>
								</div>
							</div>

							<div class="form-row-single">
								<div class="form-group">
									<label for="creditCardNumber">Credit Card Number</label>
									<input type="text" id="creditCardNumber" name="creditCardNumber" placeholder="" required pattern="[0-9\s]{13,19}" maxlength="19"/>
									<div class="field-error" id="creditCardNumberError"></div>
								</div>
							</div>

							<div class="form-group" style="margin-bottom:18px; display:flex; gap:50px; flex-wrap:wrap;">
								<div>
									<label for="expDate">Expiration Date</label>
									<div class="inline-selects" style="width:100%;">
										<select id="expMonth" name="expDate[month]" class="date-select" required style="flex:0 0 165px;">
											<option value="" disabled selected>Month</option>
											{% set expiryMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] %}
											{% for i in 1..12 %}<option value="{{ '%02d'|format(i) }}">{{ expiryMonths[i - 1] }}</option>{% endfor %}
										</select>
										<select id="expYear" name="expDate[year]" class="date-select" required style="flex:0 0 95px;">
											<option value="" disabled selected>Year</option>
											{% for y in 2026..2045 %}<option value="{{ '%02d'|format(y % 100) }}">{{ y }}</option>{% endfor %}
										</select>
									</div>
									<div class="field-error" id="expDateError"></div>
								</div>
								<div>
									<label for="cvv">CVV</label>
									<input type="text" id="cvv" name="cvv" placeholder="" required pattern="[0-9]{3,4}" maxlength="4"/>
									<div class="field-error" id="cvvError"></div>
								</div>
							</div>

					</form>
				</div>
			</div>

			<!-- RIGHT column: Order summary (sticky) -->
			<div class="checkout-sticky-col">
				<div class="checkout-card" style="margin-bottom:0;">
					<h2 class="checkout-card-title">Your Selections</h2>

					{% for item in cart %}
						<div class="checkout-item">
							<img src="{% if item.image %}{{ cache_image(item.image) }}{% else %}{{ cache_image('https://via.placeholder.com/72x72?text=Gift') }}{% endif %}" alt="{{ item.name }}" class="checkout-item-img"/>
							<div class="checkout-item-info">
								<div class="checkout-item-name">{{ item.name }}</div>
								{% if item.brand is defined and item.brand is not empty %}
									<div class="checkout-item-brand">{{ item.brand }}</div>
								{% endif %}
							</div>
						</div>
					{% endfor %}

					<div class="checkout-totals">
						<div class="checkout-totals-row">
							<span class="checkout-totals-label">Subtotal</span>
							<span class="checkout-totals-value checkout-totals-amount">GBP 0.00</span>
						</div>
						<div class="checkout-totals-row">
							<span class="checkout-totals-label">Shipping</span>
							<span class="checkout-totals-value checkout-totals-amount">GBP 0.99</span>
						</div>
						<div class="checkout-total-bar checkout-totals-total">
							<span class="checkout-total-label">Total (incl. Shipping)</span>
							<span class="checkout-total-value">GBP 0.99</span>
						</div>
					</div>

					<button id="confirmOrder" type="submit" form="checkoutForm" style="display: block; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, #f06c00, #e85d00); color: #fff; font-family: MaryAnn, sans-serif; font-weight: 700; font-size: 1.15rem; border: none; border-radius: 8px; cursor: pointer; margin-bottom: 12px;">✓&nbsp; Confirm Your Order</button>
				</div>
			</div>

		</div><!-- /.checkout-columns -->
	{% endif %}
	</div>

	<div id="confirmationOverlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center;">
		<div style="background:#fff; border-radius:16px; padding:48px 36px; text-align:center; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.2); animation:slideUp .4s ease;">
			<div style="font-size:3.5rem; margin-bottom:16px;">🎉</div>
			<h2 style="font-family: MaryAnn, sans-serif; font-weight: 800; font-size: 1.5rem; color: #1a1a1a; margin-bottom: 8px;">Order Confirmed!</h2>
			<p style="font-family: Barlow, sans-serif; font-size: 1rem; color: #5a6270; margin-bottom: 24px;">Your gift selections have been submitted. You’ll receive your order in 5–7 days. <br/> Thank you for participating in our survey campaign!</p>
			<a href="{{ base_url }}/survey.php?page=survey&s={{ s }}" style="display: inline-block; padding: 14px 32px; background: #f06c00; color: #fff; font-family: MaryAnn, sans-serif; font-weight: 700; border-radius: 8px; text-decoration: none;">Back to Survey</a>
		</div>
	</div>

	<script>
		document.addEventListener("DOMContentLoaded", function () {
			var overlay = document.getElementById("confirmationOverlay");
			var form = document.getElementById("checkoutForm");

			/* ---------- helpers for inline errors ---------- */
			function clearAllErrors() {
				var errorDivs = document.querySelectorAll(".field-error");
				for (var i = 0; i < errorDivs.length; i++) {
					errorDivs[i].textContent = "";
					errorDivs[i].classList.remove("visible");
				}
				var errorInputs = form.querySelectorAll(".field-error-border");
				for (var i = 0; i < errorInputs.length; i++) {
					errorInputs[i].classList.remove("field-error-border");
				}
			}

			function showFieldError(fieldId, message) {
				var errDiv = document.getElementById(fieldId + "Error");
				if (errDiv) {
					errDiv.textContent = message;
					errDiv.classList.add("visible");
				}
				var inputs = form.querySelectorAll("[name='" + fieldId + "']");
				for (var i = 0; i < inputs.length; i++) {
					inputs[i].classList.add("field-error-border");
				}
			}

			/* ---------- AJAX submit handler ---------- */
			if (form) {
				form.addEventListener("submit", function (e) {
					e.preventDefault();
					clearAllErrors();

					var btn = document.getElementById("confirmOrder");
					btn.disabled = true;
					btn.textContent = "Processing...";

					/* Gather all form data into the structure expected by validate_checkout.php */
					var payload = {
						firstName: document.getElementById("firstName").value,
						lastName: document.getElementById("lastName").value,
						dateOfBirth: {
							day: document.getElementById("dayOfBirth").value,
							month: document.getElementById("monthOfBirth").value,
							year: document.getElementById("yearOfBirth").value,
						},
						address1: document.getElementById("address1").value,
						address2: document.getElementById("address2").value,
						city: document.getElementById("city").value,
						postalCode: document.getElementById("postalCode").value,
						email: document.getElementById("email").value,
						phoneNumber: document.getElementById("phoneNumber").value,
						cardHolderName: document.getElementById("cardHolderName").value,
						creditCardNumber: document.getElementById("creditCardNumber").value,
						expDate: {
							month: document.getElementById("expMonth").value,
							year: document.getElementById("expYear").value,
						},
						cvv: document.getElementById("cvv").value,
					};

					var xhr = new XMLHttpRequest();
					xhr.open("POST", "{{ base_url }}/api/validate_checkout.php", true);
					xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
					xhr.onreadystatechange = function () {
						if (xhr.readyState !== 4) return;

						/* always re-enable the button */
						btn.disabled = false;
						btn.textContent = "✓\u00A0 Confirm Your Order";

						var response;
						try {
							response = JSON.parse(xhr.responseText);
						} catch (_) {
							/* already handled below */
						}

						if (xhr.status === 200 && response && response.success) {
							/* --- server says valid — now submit the real form to survey.php --- */
							form.action = "{{ base_url }}/survey.php?page=checkout&s={{ s }}";
							form.method = "POST";
							form.submit();
						} else if (xhr.status === 422 && response && response.errors) {
							/* display each field's errors on the form */
							var errors = response.errors;
							var fields = [
								"firstName",
								"lastName",
								"dateOfBirth",
								"address1",
								"city",
								"postalCode",
								"email",
								"phoneNumber",
								"cardHolderName",
								"creditCardNumber",
								"expDate",
								"cvv",
							];

							for (var i = 0; i < fields.length; i++) {
								var key = fields[i];
								if (errors[key]) {
									showFieldError(
										key,
										Array.isArray(errors[key])
											? errors[key].join(" ")
											: errors[key],
									);
								}
							}
							/* scroll to first error */
							var firstErr = document.querySelector(".field-error.visible");
							if (firstErr) {
								firstErr.scrollIntoView({ behavior: "smooth", block: "center" });
							}
						} else {
							showFieldError(
								"firstName",
								xhr.status !== 200
									? "Server error. Please try again later."
									: "Validation failed.",
							);
						}
					};


					// Collect reCAPTCHA v3 token if enabled
					{% if recaptcha_enabled and recaptcha_version == 3 %}
						grecaptcha.ready(function() {
							grecaptcha.execute('{{ recaptcha_site_key }}', { action: 'checkout_submit' }).then(function(token) {
								payload['recaptcha_v3_token'] = token;
								xhr.send(JSON.stringify(payload));
							});
						});
					{% else %}
					xhr.send(JSON.stringify(payload));
					{% endif %}
				});
			}

			if (overlay) {
				overlay.addEventListener("click", function (e) {
					if (e.target === overlay) overlay.style.display = "none";
				});
			}

			/* ---------- UI helpers (keep existing) ---------- */

			// Auto-format card number with spaces (keeps only digits)
			var ccInput = document.getElementById("creditCardNumber");
			if (ccInput) {
				ccInput.addEventListener("input", function (e) {
					var value = e.target.value
						.split("")
						.filter(function (c) {
							return c >= "0" && c <= "9";
						})
						.join("");
					var formatted = value.match(/.{1,4}/g)?.join(" ") || "";
					e.target.value = formatted;
				});
			}

			// Sanitize phone number (keeps only digits, spaces, hyphens, and plus)
			var phoneInput = document.getElementById("phoneNumber");
			if (phoneInput) {
				phoneInput.addEventListener("input", function (e) {
					var value = "";
					for (var i = 0; i < e.target.value.length; i++) {
						var c = e.target.value[i];
						if ((c >= "0" && c <= "9") || c === " " || c === "-" || c === "+") {
							value += c;
						}
					}
					e.target.value = value;
				});
			}

			// Validate postal code on blur
			var postalInput = document.getElementById("postalCode");
			if (postalInput) {
				postalInput.addEventListener("blur", function () {
					if (this.value && !this.checkValidity()) {
						this.setCustomValidity(
							"Please enter a valid postal code (e.g. SW1A 1AA or SW1A1AA)",
						);
					} else {
						this.setCustomValidity("");
					}
				});
			}
		});
	</script>
{% endblock %}