{label} {#if required} * {/if} {#if key === 'FormulaCode' && formState.form.FormulaInput?.length} {@const inputStatus = onGetErrorStatus?.()}

Must included :

{#each inputStatus as item (item.value)} {item.value} {/each}

{/if}

{#if type === 'text'} { if (validateOn?.includes('input')) { formState.validateField(key, formState.form[key], false); } }} onblur={() => { if (validateOn?.includes('blur')) { validateFieldAsync(key, mode, originalData?.[key]); } }} readonly={key === 'NumRefType' || key === 'TxtRefType' || key === 'Level'} disabled={key === 'Flag' && disabledFlag} /> {:else if type === 'email'} { if (validateOn?.includes('input')) { formState.validateField(key, formState.form[key], false); } }} onblur={() => { if (validateOn?.includes('blur')) { formState.validateField(key, formState.form[key], false); } }} /> {:else if type === 'number'} { if (validateOn?.includes('input')) { formState.validateField(key, formState.form[key], false); } }} onblur={() => { if (validateOn?.includes('blur')) { formState.validateField(key, formState.form[key], false); } }} onkeydown={(e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault()} /> {:else if type === 'textarea'}

{
						if (validateOn?.includes('input')) {
							formState.validateField(key, formState.form[key], false);
						}
					}}
					onblur={() => {
						if (validateOn?.includes('blur')) {
							formState.validateField(key, formState.form[key], false);
						}
					}}
					bind:value={formState.form[key]}
				/>
			{:else if type === 'select'}
				{@const selectedLabel =
					formState.selectOptions?.[key]?.find((opt) => opt.value === formState.form[key])?.label ||
					'Choose'}
				{@const filteredOptions = getFilteredOptions(key)}
				<Select.Root
					type="single"
					bind:value={formState.form[key]}
					onValueChange={(val) => {
						formState.form[key] = val;
						if (validateOn?.includes('input')) {
							formState.validateField?.(key, formState.form[key], false);
						}
						if (key === 'TestType') {
							handleTestTypeChange(val);
						}
						if (key === 'Province') {
							formState.form.City = '';
							if (formState.selectOptions) {
								formState.selectOptions.City = [];
							}
							if (formState.lastFetched) {
								formState.lastFetched.City = null;
							}
						}
						if (key === 'ResultType') {
							handleResultTypeChange(val);
						}
						if (key === 'RefType') {
							handleRefTypeChange(val);
						}
						if (key === 'HostType') {
							formState.form.HostID = '';
							formState.form.HostTestCode = '';
							formState.form.HostTestName = '';
							formState.selectOptions.HostTestCode = [];
							formState.selectOptions.HostTestName = [];
						}
						if (key === 'HostID') {
							formState.form.HostTestCode = '';
							formState.form.HostTestName = '';
							formState.selectOptions.HostTestCode = [];
							formState.selectOptions.HostTestName = [];
						}
						if (key === 'ClientType') {
							formState.form.ClientID = '';
							formState.form.ClientTestCode = '';
							formState.form.ClientTestName = '';
							formState.selectOptions.ClientTestCode = [];
							formState.selectOptions.ClientTestName = [];
						}
						if (key === 'ClientID') {
							formState.form.ClientTestCode = '';
							formState.form.ClientTestName = '';
							formState.selectOptions.ClientTestCode = [];
							formState.selectOptions.ClientTestName = [];
						}
					}}
					onOpenChange={(open) => {
						if (open) {
							if (options && options.length > 0) {
								if (formState.selectOptions) {
									formState.selectOptions[key] = options;
								}
							} else if (optionsEndpoint) {
								formState.fetchOptions?.(
									{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
									formState.form
								);
							}
						}
					}}
				>
					<Select.Trigger class="w-full truncate">
						{selectedLabel}
					</Select.Trigger>
					<Select.Content>
						<div class="p-2">
							<input
								type="text"
								placeholder="Search..."
								class="w-full border rounded px-2 py-1 text-sm"
								bind:value={searchQuery[key]}
							/>
						</div>
						{#if formState.loadingOptions?.[key]}
							<Select.Item disabled value="loading">Loading...</Select.Item>
						{:else}
							{#if !required}
								<Select.Item value="">- None -</Select.Item>
							{/if}
							{#each filteredOptions as option}
								<Select.Item
									value={option.value}
									disabled={(key === 'ResultType' && disabledResultTypes.includes(option.value)) ||
										(key === 'RefType' && disabledReferenceTypes.includes(option.value))}
								>
									{option.label}
								</Select.Item>
							{/each}
						{/if}
					</Select.Content>
				</Select.Root>
			{:else if type === 'selectmultiple'}
				{@const filteredOptions = getFilteredOptions(key)}
				{@const currentValues = Array.isArray(formState.form[key]) ? formState.form[key] : []}
				<Select.Root
					type="multiple"
					value={currentValues.map((item) => item.value)}
					onValueChange={(val) => {
						const selectedObjects = (formState.selectOptions?.[key] ?? []).filter((opt) =>
							val.includes(opt.value)
						);
						formState.form[key] = selectedObjects;
						if (validateOn?.includes('input')) {
							formState.validateField?.(key, selectedObjects, false);
							formState.validateField?.('FormulaCode', formState.form.FormulaCode ?? '', false);
						}
					}}
					onOpenChange={(open) => {
						if (open && optionsEndpoint) {
							formState.fetchOptions?.(
								{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
								formState.form
							);
						}
					}}
				>
					<Select.Trigger class="w-full">
						{currentValues.length
							? (formState.selectOptions?.[key] ?? [])
									.filter((o) => currentValues.some((f) => f.value === o.value))
									.map((o) => o.label)
									.join(', ')
							: 'Choose'}
					</Select.Trigger>
					<Select.Content>
						<div class="p-2">
							<input
								type="text"
								placeholder="Search..."
								class="w-full border rounded px-2 py-1 text-sm"
								bind:value={searchQuery[key]}
							/>
						</div>
						<Select.Group>
							{#if formState.loadingOptions?.[key]}
								<div class="p-2 text-sm text-muted-foreground">Loading...</div>
							{:else}
								{#if currentValues.length > 0}
									<Select.Separator />
									<button
										class="w-full px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground"
										onclick={() => onUnselectAll?.(key)}
									>
										Unselect All
									</button>
								{/if}
								{#each filteredOptions as opt (opt.value)}
									<Select.Item value={opt.value} label={opt.label}>
										{opt.label}
									</Select.Item>
								{/each}
							{/if}
						</Select.Group>
					</Select.Content>
				</Select.Root>
			{:else if type === 'date'}
				<ReusableCalendar
					bind:value={formState.form[key]}
					parentFunction={(dateStr) => {
						formState.form[key] = dateStr;
						if (validateOn?.includes('input')) {
							formState.validateField(key, dateStr, false);
						}
					}}
				/>
			{:else if type === 'signvalue'}
				<InputGroup.Root>
					<InputGroup.Input
						placeholder="Type here"
						bind:value={formState.form[txtKey]}
						oninput={() => {
							if (validateOn?.includes('input')) {
								formState.validateField('Low', formState.form[txtKey]);
								formState.validateField('LowSign');
								formState.validateField('High', formState.form[txtKey]);
								formState.validateField('HighSign');
							}
						}}
					/>
					<InputGroup.Addon align="inline-start">
						<DropdownMenu.Root
							onOpenChange={(open) => {
								dropdownOpen[key] = open;
								if (open && optionsEndpoint) {
									formState.fetchOptions?.(
										{ key, optionsEndpoint, valueKey, labelKey },
										formState.form
									);
								}
							}}
						>
							<DropdownMenu.Trigger>
								{#snippet child({ props })}
									<InputGroup.Button {...props} variant="ghost" disabled={disabledSign}>
										{formState.selectOptions?.[key]?.find(
											(opt) => opt.value === formState.form[key]
										)?.label || 'Choose'}
										<ChevronDownIcon />
									</InputGroup.Button>
								{/snippet}
							</DropdownMenu.Trigger>
							<DropdownMenu.Content align="start">
								{#if formState.loadingOptions?.[key]}
									<DropdownMenu.Item disabled>Loading...</DropdownMenu.Item>
								{:else}
									<DropdownMenu.Item
										onSelect={() => {
											formState.form[key] = '';
											dropdownOpen[key] = false;
											formState.validateField('LowSign');
											formState.validateField('HighSign');
										}}
									>
										- None -
									</DropdownMenu.Item>
									{#each formState.selectOptions?.[key] || [] as option}
										<DropdownMenu.Item
											onclick={() => {
												formState.form[key] = option.value;
												dropdownOpen[key] = false;
											}}
											onSelect={() => {
												formState.form[key] = option.value;
												formState.validateField('LowSign');
												formState.validateField('HighSign');
											}}
										>
											{option.label}
										</DropdownMenu.Item>
									{/each}
								{/if}
							</DropdownMenu.Content>
						</DropdownMenu.Root>
					</InputGroup.Addon>
				</InputGroup.Root>
			{:else if type === 'agejoin'}
				<div class="flex items-center gap-2 w-full">
					<InputGroup.Root>
						<InputGroup.Input
							type="number"
							bind:value={joinFields[key].YY}
							oninput={() => {
								if (validateOn?.includes('input')) {
									formState.validateField('AgeStart');
									formState.validateField('AgeEnd');
								}
							}}
						/>
						<InputGroup.Addon align="inline-end">
							<InputGroup.Text>Year</InputGroup.Text>
						</InputGroup.Addon>
					</InputGroup.Root>
					<InputGroup.Root>
						<InputGroup.Input
							type="number"
							bind:value={joinFields[key].MM}
							oninput={() => {
								if (validateOn?.includes('input')) {
									formState.validateField('AgeStart');
									formState.validateField('AgeEnd');
								}
							}}
						/>
						<InputGroup.Addon align="inline-end">
							<InputGroup.Text>Month</InputGroup.Text>
						</InputGroup.Addon>
					</InputGroup.Root>
					<InputGroup.Root>
						<InputGroup.Input
							type="number"
							bind:value={joinFields[key].DD}
							oninput={() => {
								if (validateOn?.includes('input')) {
									formState.validateField('AgeStart');
									formState.validateField('AgeEnd');
								}
							}}
						/>
						<InputGroup.Addon align="inline-end">
							<InputGroup.Text>Day</InputGroup.Text>
						</InputGroup.Addon>
					</InputGroup.Root>
				</div>
			{:else if type === 'formulabuilder'}
				<div class="flex flex-col gap-8 w-full">
					<div class="flex gap-1 w-full">
						<Button type="button" variant="outline" size="icon" onclick={onMoveCursorLeft}>
							<MoveLeftIcon class="w-4 h-4" />
						</Button>
						<div
							class="relative flex-1 min-h-[2rem] rounded-md border bg-background px-3 py-2 font-mono text-sm cursor-text focus-within:ring-1 focus-within:ring-ring"
							role="textbox"
							tabindex="0"
							onkeydown={(e) => {
								if (e.key === 'Backspace') { e.preventDefault(); onDeleteChar(); }
								if (e.key === 'ArrowLeft') onMoveCursorLeft();
								if (e.key === 'ArrowRight') onMoveCursorRight();
							}}
						>
							{#if tokens.length === 0}
								<span class="text-muted-foreground text-xs italic">Select test then click buttons below to build formula</span>
							{:else}
								{@const lines = (() => {
									const result = [[]];
									tokens.forEach((tok, idx) => {
										if (tok.type === 'newline') result.push([]);
										else result[result.length - 1].push({ tok, idx });
									});
									return result;
								})()}
								{#each lines as line, lineIdx}
									<div class="flex flex-wrap items-center gap-1 min-h-[28px] {lineIdx > 0 ? 'mt-1 pt-1 border-t border-dashed border-border' : ''}">
										{#each line as { tok, idx }}
											{#if cursorIndex === idx}
												<span class="animate-cursor inline-block h-5 w-0.5 bg-primary rounded"></span>
											{/if}
											<button
												type="button"
												class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border transition-colors"
												onclick={() => onSetCursor(idx + 1)}
											>
												{tok.value}
											</button>
										{/each}
										{#if line.length > 0 && cursorIndex === line[line.length - 1].idx + 1}
											<span class="animate-cursor inline-block h-5 w-0.5 bg-primary rounded"></span>
										{:else if line.length === 0 && lineIdx === lines.length - 1}
											<span class="animate-cursor inline-block h-5 w-0.5 bg-primary rounded"></span>
										{/if}
									</div>
								{/each}
							{/if}
						</div>
						<Button type="button" variant="outline" size="icon" onclick={onMoveCursorRight}>
							<MoveRightIcon class="w-4 h-4" />
						</Button>
						<Button type="button" variant="outline" size="icon" onclick={onDeleteChar}>
							<DeleteIcon class="w-4 h-4" />
						</Button>
						<Button type="button" variant="outline" size="icon" onclick={onClearExpression}>
							<BrushCleaningIcon class="w-4 h-4" />
						</Button>
						<Button type="button" variant="outline" size="icon" onclick={onAddNewline} title="New line">
							<CornerDownLeftIcon class="w-4 h-4" />
						</Button>
					</div>
					<div class="flex flex-col gap-4">
						{#if formState.form.FormulaInput?.length > 0}
							<div class="flex flex-col gap-4">
								<div class="flex flex-col gap-2">
									<Label class="uppercase tracking-wide">Selected Tests</Label>
									<div class="flex flex-wrap gap-2">
										{#each formState.form.FormulaInput as item (item)}
											<Button
												type="button"
												variant="outline"
												class="h-auto w-auto p-2"
												onclick={() => onAddValue?.(item.value)}
											>
												{item.value}
											</Button>
										{/each}
									</div>
								</div>
							</div>
						{/if}
						<div class="flex flex-col gap-4">
							<div class="flex flex-col gap-2">
								<Label class="uppercase tracking-wide">Custom Values</Label>
								<div class="flex flex-wrap gap-2">
									<Popover.Root bind:open={stringPopoverOpen}>
										<Popover.Trigger>
											{#snippet child({ props: triggerProps })}
											<Button
												{...triggerProps}
												type="button"
												variant="outline"
												class="h-auto w-auto p-2"
											>
												"abc"
											</Button>
											{/snippet}
										</Popover.Trigger>
										<Popover.Content class="w-64" side="bottom" align="start">
											<div>
												<div class="flex flex-col gap-3">
												<p class="text-sm font-semibold">Enter Text Value</p>
												<Input
													type="text"
													placeholder='e.g. F, POS, NEG'
													bind:value={stringLiteralInput}
													onkeydown={(e) => {
													if (e.key === 'Enter' && stringLiteralInput.trim()) {
														onAddLiteral(`"${stringLiteralInput.trim()}"`);
														stringLiteralInput = '';
													}
													}}
												/>
												<div class="flex justify-end gap-2">
													<Button
													type="button"
													size="sm"
													disabled={!stringLiteralInput.trim()}
													onclick={() => {
														onAddLiteral(`"${stringLiteralInput.trim()}"`);
														stringLiteralInput = '';
													}}
													>
													Add
													</Button>
												</div>
												</div>
											</div>
										</Popover.Content>
									</Popover.Root>
		
									<Popover.Root bind:open={numberPopoverOpen}>
										<Popover.Trigger>
											{#snippet child({ props: triggerProps })}
											<Button
												{...triggerProps}
												type="button"
												variant="outline"
												class="h-auto w-auto p-2"
											>
												123
											</Button>
											{/snippet}
										</Popover.Trigger>
										<Popover.Content class="w-64" side="bottom" align="start">
											<div>
												<div class="flex flex-col gap-3">
												<p class="text-sm font-semibold">Enter Number Value</p>
												<Input
												type="number"
												placeholder='e.g. 142'
												bind:value={numberLiteralInput}
												onkeydown={(e) => {
													if (e.key === 'Enter' && numberLiteralInput != null && !isNaN(numberLiteralInput)) {
													onAddLiteral(String(numberLiteralInput));
													numberLiteralInput = null;
													}
												}}
												/>
												<div class="flex justify-end gap-2">
													<Button
													type="button"
													size="sm"
													disabled={numberLiteralInput == null || isNaN(numberLiteralInput)}
													onclick={() => {
														onAddLiteral(String(numberLiteralInput));
														numberLiteralInput = null;
														numberPopoverOpen = false;
													}}
													>
													Add
													</Button>
												</div>
												</div>
											</div>
										</Popover.Content>
									</Popover.Root>
								</div>
							</div>
							<div class="flex flex-col gap-2">
								<Label class="uppercase tracking-wide">Logical Operators</Label>
								<div class="flex flex-wrap gap-2">
									{#each logicalop as op}
										<Button
											type="button"
											variant="outline"
											class="h-auto w-auto p-2"
											onclick={() => onAddOperator?.(op)}
										>
											{op}
										</Button>
									{/each}
								</div>
							</div>
							<div class="flex flex-col gap-2">
								<Label class="uppercase tracking-wide">Comparison Operators</Label>
								<div class="flex flex-wrap gap-2">
									{#each comparisonop as op}
										<Button
											type="button"
											variant="outline"
											size="icon"
											onclick={() => onAddOperator?.(op)}
										>
											{op}
										</Button>
									{/each}
								</div>
							</div>
							<div class="flex flex-col gap-2">
								<Label class="uppercase tracking-wide">Math Operators</Label>
								<div class="flex flex-wrap gap-2">
									{#each operators as op}
										<Button
											type="button"
											variant="outline"
											size="icon"
											onclick={() => onAddOperator?.(op)}
										>
											{op}
										</Button>
									{/each}
								</div>
							</div>
						</div>
					</div>

{#if tokens.length > 0}
						<div class="flex flex-col gap-2">
							<Label class="uppercase tracking-wide">Preview</Label>
							<div class="border-2 border-dashed border-muted-foreground/30 rounded-lg">
								<pre class="font-mono text-sm bg-muted/50 p-2 rounded">{expressionString}</pre>
							</div>
						</div>
					{/if}
				</div>
			{:else if type === 'members'}
				{@const filteredOptions = getFilteredOptions(key)}
				<div class="flex flex-col gap-2 w-full">
					{#each formState.form.Members as member, index (member.id)}
						{@const selectedLabel =
							formState.selectOptions?.[key]?.find((opt) => opt.value === member.value)?.label ||
							'Choose'}
						<div class="flex gap-1 w-full">
							<Button type="button" variant="outline" size="icon" disabled>
								{index + 1}
							</Button>

<div class="flex-1">
								<Select.Root
									type="single"
									bind:value={member.value}
									onOpenChange={(open) => {
										if (open && optionsEndpoint) {
											formState.fetchOptions?.(
												{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
												formState.form
											);
										}
									}}
									onValueChange={() => {
										if (validateOn?.includes('input')) {
											formState.validateField?.(key, formState.form[key], false);
										}
									}}
								>
									<Select.Trigger class="w-full">
										{selectedLabel}
									</Select.Trigger>
									<Select.Content>
										<div class="p-2">
											<input
												type="text"
												placeholder="Search..."
												class="w-full border rounded px-2 py-1 text-sm"
												bind:value={searchQuery[key]}
											/>
										</div>
										{#if formState.loadingOptions?.[key]}
											<Select.Item disabled value="loading">Loading...</Select.Item>
										{:else}
											{#if !required}
												<Select.Item value="">- None -</Select.Item>
											{/if}
											{#each filteredOptions as option}
												<Select.Item value={option.value}>
													{option.label}
												</Select.Item>
											{/each}
										{/if}
									</Select.Content>
								</Select.Root>
							</div>
							<Button
								type="button"
								variant="outline"
								size="icon"
								onclick={() => onRemoveMember(member.id)}
							>
								<Trash2Icon class="size-4" />
							</Button>
						</div>
					{/each}
					<Button variant="outline" onclick={onAddMember}>
						<PlusIcon class="size-4" />
						Add Test
					</Button>
				</div>
			{:else if type === "toggle"}
				{@const toggleOff = optionsToggle?.[0] ?? { value: false, label: 'Off' }}
				{@const toggleOn  = optionsToggle?.[1] ?? { value: true,  label: 'On'  }}
				{@const isOn = String(formState.form[key]) === String(toggleOn.value)}
				<div class="flex items-center w-full">
					<Toggle  
						aria-label="Toggle"  
						variant="outline"  
						class="w-full transition-all data-[state=on]:text-primary"
						pressed={isOn}
						onPressedChange={(pressed) => {
							formState.form[key] = pressed ? toggleOn.value : toggleOff.value;
						}}
					>
						{#if isOn}
							<CheckIcon class="mr-2 h-4 w-4" />
						{:else}
							<XIcon class="mr-2 h-4 w-4" />
						{/if}
						{isOn ? toggleOn.label : toggleOff.label}
					</Toggle>
				</div>
			{:else}
				<Input
					type="text"
					bind:value={formState.form[key]}
					placeholder="Custom field type: {type}"
				/>
			{/if}
			<div class={`absolute min-h-[1rem] w-full ${key === 'Members' ? 'right-0 -top-5 text-right' : 'top-10'}`}>
				{#if key !== 'FormulaCode' && (formState.errors[key] || formState.errors[txtKey])}
					{@const errorMessage = formState.errors[key] ?? formState.errors[txtKey]}

<div class="text-sm text-destructive">
						{errorMessage}
					</div>
				{/if}
			</div>
		</div>
	</div>
{/snippet}

<div class="p-2 space-y-6">
	{#each formFields as group}
		<div class="space-y-6">
			{#if group.title}
				<div class="text-md 2xl:text-lg font-semibold italic">
					<span class="border-b-2 border-primary">{group.title}</span>
				</div>
			{/if}

{#each group.rows as row}
				{@const visibleColumns = row.columns.filter((col) => !hiddenFields?.includes(col.key))}

{#if visibleColumns.length > 0}
					<div
						class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
						class:md:grid-cols-1={visibleColumns.length === 1 &&
							visibleColumns[0].fullWidth !== false}
						class:md:grid-cols-2={visibleColumns.length === 2 ||
							(visibleColumns.length === 1 && visibleColumns[0].fullWidth === false)}
						class:md:grid-cols-3={visibleColumns.length === 3}
					>
						{#each visibleColumns as col}
							{#if col.type === 'group'}
								{@const visibleChildColumns = col.columns.filter(
									(child) => !hiddenFields?.includes(child.key)
								)}

{#if visibleChildColumns.length > 0}
									<div
										class="grid grid-cols-1 gap-6 md:gap-2"
										class:md:grid-cols-1={visibleChildColumns.length === 1 &&
											visibleChildColumns[0].fullWidth !== false}
										class:md:grid-cols-2={visibleChildColumns.length === 2 ||
											(visibleChildColumns.length === 1 &&
												visibleChildColumns[0].fullWidth === false)}
										class:md:grid-cols-3={visibleChildColumns.length === 3}
									>
										{#each visibleChildColumns as child}
											{@render Fieldset(child)}
										{/each}
									</div>
								{/if}
							{:else}
								{@render Fieldset(col)}
							{/if}
						{/each}
					</div>
				{/if}
			{/each}
		</div>
	{/each}
</div>