- content_for :head do
	== assets [:css, :loader]
	== assets [:css, :tom_select]
	== assets [:js, :tom_select]
	== assets [:js, :htmx]
	script src="https://js.braintreegateway.com/web/dropin/1.42.0/js/dropin.js"
	javascript:
		window.addEventListener("load", function() {
			const country = new TomSelect("select[name=country-name]", {
				plugins: [
					"change_listener",
					"no_backspace_delete",
					"dropdown_input"
				],
				highlight: false,
				maxOptions: 500,
				onChange: (value) => {
					document.querySelector("input[name=postal-code]").previousSibling.textContent = value === "US" ? "Zip Code" : "Postal Code";
					document.querySelector("select[name=currency]").value = value === "CA" ? "CAD" : "USD";
					document.querySelector("select[name=currency]").dispatchEvent(new Event("change"));
				}
			});

			document.querySelector("select[name=currency]").addEventListener("change", (e) => {
				if (e.target.value === "CAD") {
					document.querySelector("input[name=esim_adapter_quantity]").previousSibling.textContent = "eSIM Adapters ($54.99 each)"
					document.querySelector("input[name=pcsc_quantity]").previousSibling.textContent = "USB PCSC Readers ($13.50 each)"
				} else {
					document.querySelector("input[name=esim_adapter_quantity]").previousSibling.textContent = "eSIM Adapters ($39.99 each)"
					document.querySelector("input[name=pcsc_quantity]").previousSibling.textContent = "USB PCSC Readers ($10.00 each)"
				}
			});

			document.querySelector("input[name=pcsc_quantity]").addEventListener("change", (e) => {
				document.querySelector("#compatible").style.display = e.target.value < 1 ? "flex" : "none";
				document.querySelector("#compatible input").required = e.target.value < 1;
			});

			country.trigger("change", document.querySelector("select[name=country-name]").value);
		});

scss:
	body {
		font-family: sans-serif;
	}
	h1 {
		text-align: center;
	}
	form {
		display: block;
		max-width: 40em;
		margin: auto;
		* { box-sizing: border-box; }
		label {
			display: block;
			margin-top: 1em;
		}
		.half {
			margin-top: 1em;
			display: flex;
			& > * {
				flex: 1;
			}
			& > span {
				padding: 8px 0;
			}
		}
		button {
			display: block;
			margin: 1em auto;
			padding: 0.5em;
			font-size: 1.2em;
		}
		#compatible input {
			flex: 0 0 2em;
		}
	}
	.htmx-indicator {
		margin-top: 1em;
		text-align: center;
		float: right;
	}

section data-hx-get="/esim-adapter/total" data-hx-trigger="input delay:1s,change" data-hx-include="form" data-hx-target="#total"
	h1 Order an eSIM Adapter

	form method="post" action=""
		label
			div Country for Shipping Address
			select name="country-name" required=true
				- ISO3166::Country.all.each do |country|
					option selected=(country.alpha2 == "US") value=country.alpha2 = "#{country.emoji_flag} #{country.translation('en')}"

		label
			div Currency
			select.ts-control name="currency" data-hx-get="/esim-adapter/braintree" data-hx-trigger="change" data-hx-target="#braintree-js"
				option value="USD" US Dollars
				option value="CAD" Canadian Dollars

		label.half
			span eSIM Adapters ($39.99 each)
			input.ts-control name="esim_adapter_quantity" type="number" step="1" min="0" required=true value=1

		label.half
			span USB PCSC Readers ($10 each)
			input.ts-control name="pcsc_quantity" type="number" step="1" min="0" required=true value=0

		label
			div Zip Code
			input.ts-control type="text" name="postal-code" required=true

		label
			div Street Address
			input.ts-control type="text" name="street-address" required=true

		label
			div Email Address
			input.ts-control type="email" name="email" required=true

		label.half
			div Cardholder Given Name
			input.ts-control type="text" name="given-name" required=true

		label.half
			div Cardholder Surname
			input.ts-control type="text" name="family-name" required=true

		.htmx-indicator
			.lds-ring <div></div><div></div><div></div><div></div></div>
		#total

		#braintree
		input type="hidden" name="atfd" value=antifraud
		input type="hidden" name="braintree_nonce"

		small
			| Charges will come from MBOA or Soprani.ca Telecom

		label.half#compatible
			span I have verified that my Android device is compatible with <a target="_blank" href="https://jmp.chat/esim-adapter">the app</a>
			input type="checkbox" required=true

		button Place Order

javascript:
	if(window.localStorage) {
		var atfd = localStorage.getItem("atfd");
		if(!atfd) {
			atfd = #{{antifraud.to_json}};
			localStorage.setItem("atfd", atfd);
		}
		document.querySelector("input[name=atfd]").value = atfd;
	}

	window.braintreeInstance = null;
	document.querySelector("form").addEventListener("submit", function(e) {
		e.preventDefault();
		if (!braintreeInstance || !document.querySelector("input[name=amount]")) {
			return;
		}
		document.querySelector("form button").disabled = true;
		document.querySelector("form button").style.display = "none";

		braintreeInstance.requestPaymentMethod({
			threeDSecure: {
				amount: document.querySelector("*[name=amount]").value,
				requireChallenge: true,
				challengeRequested: true,
				collectDeviceData: true,
				email: document.querySelector("*[name=email]").value,
				billingAddress: {
					givenName: document.querySelector("*[name=given-name]").value,
					surname: document.querySelector("*[name=family-name]").value,
					postalCode: document.querySelector("*[name=postal-code]").value,
					streetAddress: document.querySelector("*[name=street-address]").value,
					countryCodeAlpha2: document.querySelector("*[name=country-name]").value
				},
				additionalInformation: {
					ipAddress: #{{ip.to_json}}
				}
			}
		}, function(err, payload) {
			if(err) {
				console.log(err);
				document.querySelector("form button").disabled = false;
				document.querySelector("form button").style.display = "block";
			} else {
				e.target.braintree_nonce.value = payload.nonce;
				e.target.submit();
			}
		});
	});

#braintree-js