@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@{
	string apiKey = !string.IsNullOrEmpty(Pageview.AreaSettings.GetString("Google_APIKey")) ? Pageview.AreaSettings.GetString("Google_APIKey") : "";

	string userCheckoutPage = Pageview.CurrentParagraph.Item["CheckoutUserPageLink"] != null ? Pageview.CurrentParagraph.Item["CheckoutUserPageLink"]?.ToString()?.ToLower().Replace("default.aspx?id=", "") ?? "" : "";
	string signInPage = Pageview.CurrentParagraph.Item["SignInPageLink"] != null ? Pageview.CurrentParagraph.Item["SignInPageLink"].ToString() + "&GoBackToPage=" + userCheckoutPage : "";
	bool enableAdditionalAddress = Pageview.CurrentParagraph.Item["EnableAdditionalAddress"] != null ? (Boolean)Pageview.CurrentParagraph.Item["EnableAdditionalAddress"] : false;
	bool enableFindLocation = Pageview.CurrentParagraph.Item["EnableFindLocation"] != null ? (Boolean)Pageview.CurrentParagraph.Item["EnableFindLocation"] : false;

	string currentCountry = Pageview.Area?.EcomCountryCode != null ? Pageview.Area.EcomCountryCode : "dk";
	foreach (LoopItem country in GetLoop("Countries"))
	{
		if (country.GetString("Ecom:Country.IsCustomerCountryOrDefault") == "true")
		{
			currentCountry = country.GetString("Ecom:Country.Code2");
		}
	}

	string countrySelectorColumnSize = "g-col-6";
	string customerRegionLabel = "State";

	<input type="hidden" name="EcomUserCreateNew" id="EcomUserCreateNew" value="true" disabled>

	<div class="mb-0">

		<div class="d-flex">
			<div class="flex-grow-1">
				<h3 class="fs-6 fw-normal mb-3">@Translate("Contact information")</h3>
			</div>
			@if (Pageview.CurrentParagraph?.Item["SignInPageLink"]?.ToString() != string.Empty)
			{
				<div class="text-end d-none d-md-block">
					<a href="@signInPage" class="h6 fw-normal mb-3 d-block">@Translate("Already have account?") @Translate("Log in")</a>
				</div>
			}

		</div>

	</div>

	<div class="mb-4">
		<div class="grid">
			<div class="g-col-12">
				<div class="form-floating">
					<input type="email" class="form-control" name="EcomOrderCustomerEmail" id="EcomOrderCustomerEmail" value="@GetString("Ecom:Order.Customer.Email")" placeholder="@Translate("Email Address")">
					<label for="EcomOrderCustomerEmail">@Translate("Email Address")</label>
				</div>
			</div>
			@if (Pageview.CurrentParagraph?.Item["SignInPageLink"]?.ToString() != string.Empty)
			{
				<div class="g-col-12 d-md-none">
					<a href="@signInPage">@Translate("Already have account?") @Translate("Log in")</a>
				</div>
			}
			@* Use newsletter *@
			@if (GetString("Ecom:Cart.UseNewsletterSubscription") == "True")
			{
				bool? isChecked = null;
				if (GetString("Ecom:Order.Customer.NewsletterSubscribe") == "true")
				{
					isChecked = true;
				}

				<div class="g-col-12">
					<div class="form-check">
						<input class="form-check-input" type="checkbox" name="EcomOrderSubscribeToNewsletter" id="EcomOrderSubscribeToNewsletter" checked="@isChecked" onchange="toggleCreateUser(event);">
						<label class="form-check-label lh-1" for="EcomOrderSubscribeToNewsletter">
							<span>@Translate("Keep me updated with deals, news and offers")</span>
						</label>
					</div>
				</div>
			}
		</div>
	</div>

	<div class="mt-4">

		<h3 class="fs-6 fw-normal mb-3">@Translate("Billing information")</h3>

		<div class="grid gap-3">
			<div class="g-col-12">
				<div class="form-floating">
					<input type="text" class="form-control" name="EcomOrderCustomerCompany" id="EcomOrderCustomerCompany" value="@GetString("Ecom:Order.Customer.Company")" placeholder="@Translate("Company")">
					<label for="EcomOrderCustomerCompany">@Translate("Company (Optional)")</label>
				</div>
			</div>

			<div class="g-col-12">
				<div class="form-floating">
					<input type="text" class="form-control" name="EcomOrderCustomerName" id="EcomOrderCustomerName" value="@GetString("Ecom:Order.Customer.Name")" placeholder="@Translate("Name")">
					<label for="EcomOrderCustomerName">@Translate("Name")</label>
				</div>
			</div>

			<div class="g-col-12">
				<div class="form-floating">
					<input type="text" class="form-control" name="EcomOrderCustomerAddress" id="EcomOrderCustomerAddress" value="@GetString("Ecom:Order.Customer.Address")" placeholder="@Translate("Street & Number")">
					<label for="EcomOrderCustomerAddress">@Translate("Street & Number")</label>
				</div>
			</div>

			@if (enableAdditionalAddress)
			{
				<div class="g-col-12">
					<div class="form-floating">
						<input type="text" class="form-control" name="EcomOrderCustomerAddress2" id="EcomOrderCustomerAddress2" value="@GetString("Ecom:Order.Customer.Address2")" placeholder="@Translate("Additional address")">
						<label for="EcomOrderCustomerAddress">@Translate("Additional address")</label>
					</div>
				</div>
			}

			<div class="g-col-12">
				<div class="grid">

					<div class="g-col-6 g-col-md-3">
						<div class="form-floating">
							<input type="text" class="form-control" name="EcomOrderCustomerZip" id="EcomOrderCustomerZip" value="@GetString("Ecom:Order.Customer.Zip")" placeholder="@Translate("Zip code")">
							<label for="EcomOrderCustomerZip">@Translate("Zip code")</label>
						</div>
					</div>

					@if (GetLoop("CustomerRegions").Count > 0)
					{
						countrySelectorColumnSize = "g-col-3";
					}

					<div class="@countrySelectorColumnSize">
						<div class="form-floating">
							<input type="text" class="form-control" name="EcomOrderCustomerCity" id="EcomOrderCustomerCity" value="@GetString("Ecom:Order.Customer.City")" placeholder="@Translate("Town / City")">
							<label for="EcomOrderCustomerCity">@Translate("Town / City")</label>
						</div>
					</div>

					@if (GetLoop("CustomerRegions").Count > 0)
					{
						if (currentCountry == "CA")
						{
							customerRegionLabel = Translate("Province");
						}
						else if (currentCountry == "GB")
						{
							customerRegionLabel = Translate("Region");
						}
						else if (currentCountry == "US")
						{
							customerRegionLabel = Translate("State");
						}

						<div class="g-col-3">
							<div class="form-floating">
								<select class="form-select" name="EcomOrderCustomerRegion" id="EcomOrderCustomerRegion" onchange="submitForm()">
									@foreach (LoopItem region in GetLoop("CustomerRegions"))
									{
										if (region.GetString("Ecom:CustomerRegion.IsCustomerRegion") == "true")
										{
											<option value="@region.GetString("Ecom:CustomerRegion.RegionCode")" selected>@region.GetString("Ecom:CustomerRegion.Name")</option>
										}
										else
										{
											<option value="@region.GetString("Ecom:CustomerRegion.RegionCode")">@region.GetString("Ecom:CustomerRegion.Name")</option>
										}
									}
								</select>
								<label for="EcomOrderCustomerRegion">@customerRegionLabel</label>
							</div>
						</div>
					}

					<div class="g-col-12 g-col-md-3">
						<div class="form-floating">

							<select class="form-select" name="EcomOrderCustomerCountry" id="EcomOrderCustomerCountry" onchange="submitForm()">
								@foreach (LoopItem country in GetLoop("Countries"))
								{
									if (country.GetString("Ecom:Country.IsCustomerCountryOrDefault") == "true")
									{
										<option value="@country.GetString("Ecom:Country.Code2")" selected>@country.GetString("Ecom:Country.Name")</option>
									}
									else
									{
										<option value="@country.GetString("Ecom:Country.Code2")">@country.GetString("Ecom:Country.Name")</option>
									}
								}
							</select>
							<label for="EcomOrderCustomerCountry">@Translate("Country")</label>
						</div>
					</div>

				</div>
			</div>

			<div class="g-col-12">
				<div class="form-floating">
					<input type="tel" class="form-control" name="EcomOrderCustomerPhone" id="EcomOrderCustomerPhone" value="@GetString("Ecom:Order.Customer.Phone")" placeholder="@Translate("Phone number")">
					<label for="EcomOrderCustomerPhone">@Translate("Phone number")</label>
				</div>
			</div>

			@* Create user *@
			@if (GetBoolean("Ecom:Cart.CreateUserInCheckout"))
			{
				<div class="g-col-12">
					<div class="form-check">
						<input class="form-check-input" type="checkbox" id="EcomUserCreateNewToggle" value="true" onchange="toggleCreateUser(event);">
						<label class="form-check-label lh-1" for="EcomUserCreateNewToggle">
							<span>@Translate("Create an account for easier checkout next time")</span>
						</label>
					</div>
				</div>

				string passwordValidationPattern = null;
				string EcomUserCreatePasswordTitle = null;
				int minLength = Dynamicweb.Configuration.SystemConfiguration.Instance.GetInt32("/Globalsettings/Modules/Extranet/MinimumOfCharacters");
				if (Dynamicweb.Configuration.SystemConfiguration.Instance.GetValue("/Globalsettings/Modules/Extranet/PasswordSecurity") == "medium")
				{
					passwordValidationPattern = $"^(?=.*[A-z])(?=.*[0-9]).{{{minLength},32}}";
					EcomUserCreatePasswordTitle = Translate("Must contain letters and numbers");
				}
				if (Dynamicweb.Configuration.SystemConfiguration.Instance.GetValue("/Globalsettings/Modules/Extranet/PasswordSecurity") == "high")
				{
					passwordValidationPattern = $"^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z])(?=.*[@#$%^&+=.-_]).{{{minLength},32}}";
					EcomUserCreatePasswordTitle = Translate("Must contain letters, numbers and special characters (@#$%^&+=.-_)");
				}

				<div class="d-none g-col-12 grid" id="PasswordFields">
					<div class="g-col-12">
						<div class="form-floating">
							<input type="password" disabled required class="form-control" name="EcomUserCreatePassword" id="EcomUserCreatePassword" placeholder="@Translate("Password")" pattern="@passwordValidationPattern" onchange="setPasswordMustMatchValidation(event)" title="@EcomUserCreatePasswordTitle" minlength="@minLength">
							<label for="EcomUserCreatePassword">@Translate("Password")</label>
						</div>
					</div>

					<div class="g-col-12">
						<div class="form-floating">
							<input type="password" disabled required class="form-control" name="EcomUserCreateConfirmPassword" id="EcomUserCreateConfirmPassword" placeholder="@Translate("Confirm password")" pattern="@passwordValidationPattern" title="@Translate("Passwords must match")")" minlength="@minLength">
							<label for="EcomUserCreateConfirmPassword">@Translate("Confirm password")</label>
						</div>
					</div>
				</div>

				<script>
					toggleCreateUser = function (event) {
						var newsletterSubscribeCheckbox = document.querySelector("#EcomOrderSubscribeToNewsletter");
						var createUserToggleCheckbox = document.querySelector("#EcomUserCreateNewToggle");
						var createUserCheckbox = document.querySelector("#EcomUserCreateNew");

						if (newsletterSubscribeCheckbox.checked == true || createUserToggleCheckbox.checked == true) {
							createUserCheckbox.disabled = false;
						} else {
							createUserCheckbox.disabled = true;
						}

						if (createUserToggleCheckbox.checked == true) {
							document.querySelector("#EcomUserCreatePassword").disabled = false;
							document.querySelector("#EcomUserCreateConfirmPassword").disabled = false;
							document.querySelector('#PasswordFields').classList.remove('d-none');
						} else {
							document.querySelector("#EcomUserCreatePassword").disabled = true;
							document.querySelector("#EcomUserCreateConfirmPassword").disabled = true;
							document.querySelector('#PasswordFields').classList.add('d-none');
						}
					}

					setPasswordMustMatchValidation = function (event) {
						document.getElementById("EcomUserCreateConfirmPassword").setAttribute("pattern", document.getElementById("EcomUserCreatePassword").value);
					}
				</script>
			}
		</div>

	</div>

	if (enableFindLocation && !string.IsNullOrEmpty(apiKey))
	{
		<script type="module">
			const assetLink = 'https://maps.googleapis.com/maps/api/js?key=@(apiKey)&libraries=places';

			let assetFound = false;
			document.head.querySelectorAll('script').forEach(element => {
				if (assetLink == element.src) {
					assetFound = true;
				}
			});

			swift.AssetLoader.Load(assetLink, 'js');

			if (!assetFound) {
				document.addEventListener('load.swift.assetloader', function() {
					var mapSettings = { currentCountry: "@currentCountry" };
					swift.Places.init(mapSettings);
				});
			} else if (typeof google !== 'undefined') {
				var mapSettings = { currentCountry: "@currentCountry" };
				swift.Places.init(mapSettings);
			}
		</script>
	}
}
