<script lang="ts">
	import { onMount } from 'svelte';
	import { enhance } from '$app/forms';
	import type { PageProps } from './$types';
	import { telFormatter } from '$lib/shared.svelte';

	onMount(() => {
		if (document.cookie.includes('jwt=')) {
			window.location.href = '/account';
		}
		document.getElementById('phone')?.addEventListener('input', function (this: HTMLInputElement) {
			this.value = telFormatter(this.value);
		});
	});

	// receive form data from server
	let { data, form }: PageProps = $props();
</script>

<div class="signin-container place-items-center pt-8">
	<div class="elevated separator-borders bg content rounded-md p-8">
		<h1 class="text-weight-semibold mb-4 text-center">Register</h1>
		<p>Create your account. Its free and only takes a minute!</p>
		<form method="POST" class="arrange-vertically" use:enhance>
			<div class="mt-4 text-sm font-semibold">
				Username <span class="text-red-500">*</span>
				<input
					type="text"
					name="username"
					id="username"
					placeholder="Username"
					class="input-field w-full font-normal"
					required
				/>
			</div>
			<div class="relative mt-4 text-sm font-semibold">
				Password <span class="text-red-500">*</span>
				<input
					type="password"
					class="input-field w-full font-normal"
					placeholder="Password"
					name="password"
					required
				/>
			</div>
			<div class="relative mt-4 text-sm font-semibold">
				Confirm password <span class="text-red-500">*</span>
				<input
					type="password"
					class="input-field w-full font-normal"
					placeholder="Password"
					name="confirmPassword"
					required
				/>
			</div>
			<div class="mt-4 text-sm font-semibold">
				Full name <span class="text-red-500">*</span>
				<input
					type="text"
					name="fullName"
					id="fullName"
					placeholder="Full name"
					class="input-field w-full font-normal"
					required
				/>
			</div>
			<div class="mt-4 text-sm font-semibold">
				Email <span class="text-red-500">*</span>
				<input
					type="text"
					name="email"
					id="email"
					placeholder="Email"
					class="input-field w-full font-normal"
					required
				/>
			</div>
			<div class="mt-4 text-sm font-semibold">
				Phone (optional)
				<input
					type="tel"
					name="phone"
					id="phone"
					placeholder="Phone"
					class="w-full rounded font-normal"
					pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
				/>
			</div>
			<div class="relative mt-4 text-sm font-semibold">
				<label for="companyCode"> Company code (optional) </label>
				<div class="relative">
					<input
						type="text"
						name="companyCode"
						id="companyCode"
						placeholder="Company code"
						class="input-field w-full pr-10 font-normal"
					/>
					<a
						type="button"
						href="/info#company-codes"
						class="hyperlink-color tooltip absolute inset-y-0 right-2 flex items-center"
					>
						<span class="material-symbols-outlined">info</span><span
							class="tooltip-text font-sans text-sm font-normal">About company codes</span
						>
					</a>
				</div>
			</div>

			{#if form?.errorMessage}
				<div class="my-2 text-red-500">{form.errorMessage}</div>
			{/if}

			<button
				class="primary-bg-color mt-8 w-full rounded px-2 py-2"
				type="submit"
				formaction="?/register">Create account</button
			>
			<a href="/signin" class="low-emphasis-text-button mt-2">I already have an account.</a>
		</form>
	</div>
</div>
