@extends('layouts.app')

@section('content')

<div class="content-header">
	<p class="title">Create New Setting</p>
	<ul>
		<li><a href="{{ route('settings.index') }}">{{ __('All Settings') }}</a></li>
	</ul>
</div>

<div class="content">
	<form method="POST" action="{{ route('settings.store') }}">
		@csrf
		<table class="table table-borderless">
			<tbody>
				<!-- Row 1: Key, Value, and Type/Input Type -->
				<tr>
					<th class="bg-light" width="25%"><label for="title">Title</label></th>
					<th class="bg-light" width="25%"><label for="key">Setting Key</label></th>
					<th class="bg-light" width="25%"><label for="value">Value</label></th>
				</tr>
				<tr>
					<td>
						<input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" required>
						@error('title')
						<span class="text-danger">{{ $message }}</span>
						@enderror
					</td>
					<td>
						<input type="text" class="form-control @error('key') is-invalid @enderror" id="key" name="key" value="{{ old('key') }}" required>
						@error('key')
						<span class="text-danger">{{ $message }}</span>
						@enderror
					</td>
					<td>
						<div id="value-container">
							{{-- Default to text input --}}
							<input type="text" class="form-control @error('value') is-invalid @enderror" id="value" name="value" value="{{ old('value') }}">
							@error('value')
							<span class="text-danger">{{ $message }}</span>
							@enderror
						</div>
					</td>

				</tr>

				<!-- Row 2: Title, Editable, and Params -->
				<tr>
					<th class="bg-light"><label for="type">Type / Input Type</label></th>
					<th class="bg-light"><label for="editable">Editable</label></th>
					<th class="bg-light"><label for="params">Params</label></th>
				</tr>
				<tr>
					<td>
						<select class="form-control @error('type') is-invalid @enderror" id="type" name="type" required>
							<option value="text" {{ old('type') == 'text' ? 'selected' : '' }}>Text</option>
							<option value="number" {{ old('type') == 'number' ? 'selected' : '' }}>Number</option>
							<option value="boolean" {{ old('type') == 'boolean' ? 'selected' : '' }}>Boolean</option>
							<option value="date" {{ old('type') == 'date' ? 'selected' : '' }}>Date</option>
							<option value="email" {{ old('type') == 'email' ? 'selected' : '' }}>Email</option>
							<option value="tel" {{ old('type') == 'tel' ? 'selected' : '' }}>Telephone</option>
							<option value="textarea" {{ old('type') == 'textarea' ? 'selected' : '' }}>Textarea</option>
							<option value="radio" {{ old('type') == 'radio' ? 'selected' : '' }}>Radio</option>
						</select>
						@error('type')
						<span class="text-danger">{{ $message }}</span>
						@enderror
					</td>

					<td>
						<select class="form-control @error('editable') is-invalid @enderror" id="editable" name="editable" required>
							<option value="1" {{ old('editable') == '1' ? 'selected' : '' }}>Yes</option>
							<option value="0" {{ old('editable') == '0' ? 'selected' : '' }}>No</option>
						</select>
						@error('editable')
						<span class="text-danger">{{ $message }}</span>
						@enderror
					</td>
					<td>
						<input type="text" class="form-control @error('params') is-invalid @enderror" id="params" name="params" value="{{ old('params') }}">
						@error('params')
						<span class="text-danger">{{ $message }}</span>
						@enderror
					</td>
				</tr>

				<!-- Row 3: Description -->
				<tr>
					<th class="bg-light"><label for="description">Description</label></th>
				</tr>
				<tr>
					<td colspan="3">
						<input type="text" class="form-control @error('description') is-invalid @enderror" id="description" name="description" value="{{ old('description') }}">
						@error('description')
						<span class="text-danger">{{ $message }}</span>
						@enderror
					</td>
				</tr>
			</tbody>
		</table>
		<button type="submit" class="btn btn-primary mt-2" style="float: right;">Save</button>

	</form>
</div>


<script>
	document.addEventListener('DOMContentLoaded', function() {
		const typeSelector = document.getElementById('type');
		const valueContainer = document.getElementById('value-container');

		function updateValueField() {
			const selectedType = typeSelector.value;
			valueContainer.innerHTML = ''; // Clear current value field

			let inputElement;

			switch (selectedType) {
				case 'text':
				case 'email':
				case 'tel':
				case 'date':
					inputElement = document.createElement('input');
					inputElement.type = selectedType;
					inputElement.className = 'form-control @error("value") is-invalid @enderror';
					inputElement.name = 'value';
					inputElement.id = 'value';
					inputElement.value = "{{ old('value') }}";
					break;

				case 'number':
					inputElement = document.createElement('input');
					inputElement.type = 'number';
					inputElement.className = 'form-control @error("value") is-invalid @enderror';
					inputElement.name = 'value';
					inputElement.id = 'value';
					inputElement.value = "{{ old('value') }}";
					break;

				case 'boolean':
					// Create a select element for Yes/No options
					inputElement = document.createElement('select');
					inputElement.className = 'form-control @error("value") is-invalid @enderror';
					inputElement.name = 'value';
					inputElement.id = 'value';

					// Create the Yes and No options
					const yesOption = document.createElement('option');
					yesOption.value = '1';
					yesOption.textContent = 'Yes';
					yesOption.selected = "{{ old('value') }}" === "1";

					const noOption = document.createElement('option');
					noOption.value = '0';
					noOption.textContent = 'No';
					noOption.selected = "{{ old('value') }}" === "0";

					// Append the options to the select element
					inputElement.appendChild(yesOption);
					inputElement.appendChild(noOption);
					break;

				case 'textarea':
					inputElement = document.createElement('textarea');
					inputElement.className = 'form-control @error("value") is-invalid @enderror';
					inputElement.name = 'value';
					inputElement.id = 'value';
					inputElement.rows = 3;
					inputElement.value = "{{ old('value') }}";
					break;

				default:
					inputElement = document.createElement('input');
					inputElement.type = 'text';
					inputElement.className = 'form-control @error("value") is-invalid @enderror';
					inputElement.name = 'value';
					inputElement.id = 'value';
					inputElement.value = "{{ old('value') }}";
					break;
			}

			valueContainer.appendChild(inputElement);
		}

		// Initial load
		updateValueField();

		// Update on change
		typeSelector.addEventListener('change', updateValueField);
	});
</script>

@endsection