@extends('backend.layouts.master')

@section('styles')
	<!-- RANGESLIDER CSS -->
	<link rel="stylesheet" href="{{ asset('build/backend/assets/libs/nouislider/nouislider.min.css') }}">

	<style>
		/*Height*/
		.noUi-horizontal {
			height: 8px;
		}

		.noUi-horizontal .noUi-handle {
			top: -5px !important;
		}

		.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
			top: 14px;
			left: 50%;
			border: transparent;
			background: transparent;
		}

		.noUi-horizontal .noUi-handle {
			border-style: solid;
			border-color: rgb(90 102 241);
			height: 16px;
			width: 16px;
			right: -8px;
		}

		.noUi-handle:after,
		.noUi-handle:before {
			display: none;
		}
	</style>
@endsection

@section('content')
	@php
		$selectedOptionIds = $selectedOptionIds ?? [];
		$additionalInputs = $additionalInputs ?? [];
		$sliderValues = $sliderValues ?? [];
		$unansweredQuestions = session('unansweredQuestions', []);
	@endphp

	<div class="content" x-data="questionForm">
		<div class="main-content">
			<div class="bg-white p-6 rounded shadow">
				<!-- Progress Indicator -->
				<div class="flex items-center justify-center mb-6">
					@for ($step = 1; $step <= $totalSteps; $step++)
						<div class="flex items-center">
							<a href="{{ route('questionnaire.question', ['step' => $step, 'entity_id' => $entity->id]) }}">
								<div
									class="hs-tooltip ti-main-tooltip [--trigger:hover] w-4 h-4 flex items-center justify-center rounded-full {{ $step == $currentStep ? 'bg-blue-500 text-white' : (in_array($step, $answeredQuestions) ? 'bg-green-200 text-gray-700' : 'bg-red-200 text-white') }}">
									<span
										class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
										role="tooltip">{{ $step }}</span>
								</div>
							</a>
							@if ($step < $totalSteps)
								<div class="w-4 h-1 {{ in_array($step, $answeredQuestions) ? 'bg-gray-300' : 'bg-red-200' }} mx-0"></div>
							@endif
						</div>
					@endfor
				</div>

				<h1 class="text-4xl font-bold py-6 mb-4 dark:text-gray-500">{{ $question->text }}</h1>

				@if (session()->has('error'))
					<div class="bg-red-100 text-red-700 p-2 mb-4 rounded">
						{{ session('error') }}
						@if (!empty($unansweredQuestions))
							<p class="mt-2">Unanswered Questions: {{ implode(', ', $unansweredQuestions) }}</p>
						@endif
					</div>
				@endif

				@if ($errors->any())
					<div class="bg-red-100 text-red-700 p-2 mb-4 rounded">
						<ul>
							@foreach ($errors->all() as $error)
								<li>{{ $error }}</li>
							@endforeach
						</ul>
					</div>
				@endif

				<form action="{{ route('questionnaire.submitQuestion', ['step' => $currentStep, 'entity_id' => $entity->id]) }}"
					method="POST">
					@csrf

					{{-- Radio questions --}}
					@if ($question->type == 'radio')
						@foreach ($question->answerOptions as $option)
							<div class="mb-4 answer-item">
								<label class="inline-flex items-center">
									{{-- For Q5, add data-is-employment if needed --}}
									<input type="radio" name="answer_option_id" value="{{ $option->id }}" class="form-radio answer-option"
										data-requires-input="{{ $option->requires_input ? '1' : '0' }}"
										@if ($question->id == 5 && $option->text == 'Zaposlen/a (redovno radno vreme)') data-is-employment="1" @endif
										{{ old('answer_option_id', $userAnswer->answer_option_id ?? '') == $option->id ? 'checked' : '' }}>
									<span class="text-2xl font-semibold ml-2 dark:text-gray-500">{{ $option->text }}</span>
									{{-- <span class="ml-2 text-red-700">[{{ $option->score }}]</span> --}}
								</label>
								@if ($option->requires_input && $question->id != 5)
									<input type="{{ $option->input_type }}" name="additional_input"
										class="text-2xl font-semibold mt-2 p-2 border rounded w-full input-field dark:text-gray-500"
										placeholder="Please specify" value="{{ old('additional_input', $userAnswer->additional_input ?? '') }}"
										{{ old('answer_option_id', $userAnswer->answer_option_id ?? '') == $option->id ? '' : 'disabled' }}>
									@error('additional_input')
										<span class="text-red-500">{{ $message }}</span>
									@enderror
								@endif
								{{-- Q5 Employment Fields --}}
								@if ($question->id == 5 && $option->text == 'Zaposlen/a (redovno radno vreme)')
									<div class="mt-2 employment-fields"
										style="display: {{ old('answer_option_id', $userAnswer->answer_option_id ?? '') == $option->id ? 'block' : 'none' }};">
										<input type="text" name="employment_company" class="text-2xl font-semibold mt-2 p-2 border rounded w-full"
											placeholder="Employment Company"
											value="{{ old('employment_company', $entity->entityable->employment_company ?? '') }}">
										@error('employment_company')
											<span class="text-red-500">{{ $message }}</span>
										@enderror
										<input type="text" name="employment_position" class="text-2xl font-semibold mt-2 p-2 border rounded w-full"
											placeholder="Employment Position"
											value="{{ old('employment_position', $entity->entityable->employment_position ?? '') }}">
										@error('employment_position')
											<span class="text-red-500">{{ $message }}</span>
										@enderror
									</div>
								@endif
							</div>
						@endforeach

						{{-- Checkbox questions --}}
					@elseif ($question->type == 'checkbox')
						@if ($isSliderQuestion)
							@foreach ($question->answerOptions as $option)
								@php
									$value = isset($sliderValues[$option->id]) ? $sliderValues[$option->id] * 4 + 1 : 0;
								@endphp
								<div class="mb-4 answer-item">
									<label class="text-2xl font-semibold block mb-2 dark:text-gray-500">{{ $option->text }}</label>
									<div class="mb-6 slider-container" data-option-id="{{ $option->id }}">
										<div id="slider-{{ $option->id }}"></div>
										<input type="hidden" name="slider_values[{{ $option->id }}]"
											value="{{ old('slider_values.' . $option->id, $value) }}">
										<div class="invisible slider-value dark:text-gray-500">
											Value: <span id="slider-value-{{ $option->id }}">{{ old('slider_values.' . $option->id, $value) }}</span>
										</div>
									</div>
									@error('slider_values.' . $option->id)
										<span class="text-red-500">{{ $message }}</span>
									@enderror
								</div>
							@endforeach
						@else
							@if ($question->id == 34)
								@php
									$oldAnswers = old('answer_option_ids', $selectedOptionIds);
									$option1Id = $question->answerOptions[0]->id;
									$option2Id = $question->answerOptions[1]->id;
									$option3Id = $question->answerOptions[2]->id;
									if (
									    (in_array($option1Id, $oldAnswers) || in_array($option2Id, $oldAnswers)) &&
									    !in_array($option3Id, $oldAnswers)
									) {
									    $oldAnswers[] = $option3Id;
									    $oldAnswers = array_unique($oldAnswers);
									}
								@endphp
								<div id="q34-container" class="mb-4 answer-item">
									@foreach ($question->answerOptions as $index => $option)
										@php $optionNumber = $loop->iteration; @endphp
										<div class="mb-2">
											<label class="inline-flex items-center">
												<input type="checkbox" name="answer_option_ids[]" value="{{ $option->id }}"
													class="form-checkbox answer-option q34-option" data-option-number="{{ $optionNumber }}"
													data-requires-input="{{ $option->requires_input ? '1' : '0' }}"
													{{ in_array($option->id, $oldAnswers) ? 'checked' : '' }}>
												<span class="text-2xl font-semibold ml-2 dark:text-gray-500">{{ $option->text }}</span>
												<span class="ml-2 text-red-700">[{{ $option->score }}]</span>
											</label>
											@if ($option->requires_input || $optionNumber == 2 || $optionNumber == 3)
												<input type="{{ $option->input_type ?? 'text' }}" name="additional_inputs[{{ $option->id }}]"
													class="text-2xl font-semibold mt-2 p-2 border rounded w-full input-field q34-input"
													data-option-number="{{ $optionNumber }}" placeholder="Please specify"
													value="{{ old('additional_inputs.' . $option->id, $additionalInputs[$option->id] ?? '') }}"
													{{ in_array($option->id, $oldAnswers) ? '' : 'disabled' }}>
												@error('additional_inputs.' . $option->id)
													<span class="text-red-500">{{ $message }}</span>
												@enderror
											@endif
										</div>
									@endforeach
									<p class="mt-2 text-sm text-gray-500">
										Flow instructions: Option 1 (predetermined 400 EUR per person) or Option 2 (custom amount)
										may be selected – not both. In either case, Option 3 (number of persons) will be auto‑selected and must be
										filled.
									</p>
								</div>
							@else
								@php
									$oldAnswers = old('answer_option_ids', $selectedOptionIds);
								@endphp
								@foreach ($question->answerOptions as $option)
									<div class="mb-4 answer-item">
										<label class="inline-flex items-center">
											<input type="checkbox" name="answer_option_ids[]" value="{{ $option->id }}"
												class="form-checkbox answer-option" data-requires-input="{{ $option->requires_input ? '1' : '0' }}"
												{{ in_array($option->id, $oldAnswers) ? 'checked' : '' }}>
											<span class="text-2xl font-semibold ml-2 dark:text-gray-500">{{ $option->text }}</span>
											<span class="ml-2 text-red-700">[{{ $option->score }}]</span>
										</label>
										@if ($option->requires_input)
											<input type="{{ $option->input_type }}" name="additional_inputs[{{ $option->id }}]"
												class="text-2xl font-semibold mt-2 p-2 border rounded w-full input-field dark:text-gray-500"
												placeholder="Please specify"
												value="{{ old('additional_inputs.' . $option->id, $additionalInputs[$option->id] ?? '') }}"
												{{ in_array($option->id, $oldAnswers) ? '' : 'disabled' }}>
											@error('additional_inputs.' . $option->id)
												<span class="text-red-500">{{ $message }}</span>
											@enderror
										@endif
									</div>
								@endforeach
							@endif
						@endif
					@endif

					<div class="max-w space-y-3">
						<textarea name="note" id="note" class="ti-form-input" rows="3" placeholder="Note (optional)">{{ old('note', $userAnswer->note ?? '') }}</textarea>
					</div>

					<!-- Navigation Buttons -->
					<div class="flex justify-between mt-6">
						@if ($currentStep > 1)
							<button type="submit" name="navigation" value="previous" class="px-4 py-2 bg-gray-500 text-white rounded">
								Previous
							</button>
						@else
							<div></div>
						@endif
						<button type="submit" name="navigation" value="{{ $currentStep < $totalSteps ? 'next' : 'finish' }}"
							class="px-4 py-2 bg-blue-500 text-white rounded">
							{{ $currentStep < $totalSteps ? 'Next' : 'Finish' }}
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
@endsection

@section('scripts')
	<!-- noUiSlider JS -->
	<script src="{{ asset('build/backend/assets/libs/nouislider/nouislider.min.js') }}"></script>
	<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>
	<script>
		document.addEventListener('alpine:init', () => {
			Alpine.data('questionForm', () => ({
				init() {
					this.setupSliders();
					this.setupListeners();
				},
				setupSliders() {
					const sliders = document.querySelectorAll('.slider-container');
					sliders.forEach(sliderContainer => {
						const optionId = sliderContainer.dataset.optionId;
						const sliderElement = sliderContainer.querySelector('#slider-' + optionId);
						const sliderValueElement = sliderContainer.querySelector('#slider-value-' +
							optionId);
						const hiddenInput = sliderContainer.querySelector(
							'input[name="slider_values[' + optionId + ']"]');
						noUiSlider.create(sliderElement, {
							start: parseFloat(hiddenInput.value),
							animate: true,
							connect: [true, false],
							range: {
								'min': 1,
								'max': 5
							},
							step: 1,
							behaviour: 'drag-tap',
							tooltips: true,
						});
						sliderElement.noUiSlider.on('update', function(values, handle) {
							const value = values[handle];
							sliderValueElement.textContent = value;
							hiddenInput.value = value;
						});
					});
				},
				setupListeners() {
					// Radio button listener for all radios.
					document.querySelectorAll('input[name="answer_option_id"]').forEach(radio => {
						radio.addEventListener('change', function() {
							// Disable inputs for all unselected radios.
							document.querySelectorAll('input[name="answer_option_id"]')
								.forEach(otherRadio => {
									if (!otherRadio.checked) {
										const otherInput = otherRadio.closest(
											'.answer-item').querySelector(
											'.input-field');
										if (otherInput) {
											otherInput.value = '';
											otherInput.disabled = true;
										}
									}
								});

							// For Q5: if this radio has data-is-employment="1", show employment fields;
							// otherwise, hide and clear them.
							const questionHeading = document.querySelector('h1.text-4xl');
							const isQ5 = questionHeading && questionHeading.textContent
								.includes('Koji je vaš trenutni status zaposlenja?');
							if (isQ5) {
								if (this.getAttribute('data-is-employment') === '1') {
									const employmentDiv = document.querySelector(
										'.employment-fields');
									if (employmentDiv) {
										employmentDiv.style.display = 'block';
									}
								} else {
									const employmentDiv = document.querySelector(
										'.employment-fields');
									if (employmentDiv) {
										employmentDiv.style.display = 'none';
										employmentDiv.querySelectorAll('input').forEach(
											input => {
												input.value = '';
											});
									}
								}
							}

							// For any radio that requires additional input, enable its input field.
							if (this.checked && this.dataset.requiresInput === '1') {
								const inputField = this.closest('.answer-item')
									.querySelector('.input-field');
								if (inputField) {
									inputField.disabled = false;
									inputField.focus();
								}
							}
						});
					});

					// Trigger change event on already checked radios.
					document.querySelectorAll('input[name="answer_option_id"]:checked').forEach(radio => {
						radio.dispatchEvent(new Event('change'));
					});

					// Q34 specific behavior.
					const q34Container = document.getElementById('q34-container');
					if (q34Container) {
						const q34Options = q34Container.querySelectorAll('.q34-option');
						q34Options.forEach(option => {
							option.addEventListener('change', function() {
								const option1 = q34Container.querySelector(
									'.q34-option[data-option-number="1"]');
								const option2 = q34Container.querySelector(
									'.q34-option[data-option-number="2"]');
								const option3 = q34Container.querySelector(
									'.q34-option[data-option-number="3"]');
								if (this.dataset.optionNumber === "1" && this.checked) {
									if (option2.checked) {
										option2.checked = false;
										const input2 = q34Container.querySelector(
											'.q34-input[data-option-number="2"]');
										if (input2) {
											input2.disabled = true;
											input2.value = '';
										}
									}
									option3.checked = true;
									option3.disabled = true;
									const input3 = q34Container.querySelector(
										'.q34-input[data-option-number="3"]');
									if (input3) {
										input3.disabled = false;
									}
								}
								if (this.dataset.optionNumber === "2" && this.checked) {
									if (option1.checked) {
										option1.checked = false;
										const input1 = q34Container.querySelector(
											'.q34-input[data-option-number="1"]');
										if (input1) {
											input1.disabled = true;
											input1.value = '';
										}
									}
									option3.checked = true;
									option3.disabled = true;
									const input3 = q34Container.querySelector(
										'.q34-input[data-option-number="3"]');
									if (input3) {
										input3.disabled = false;
									}
								}
								if (!option1.checked && !option2.checked) {
									option3.checked = false;
									option3.disabled = true;
									const input3 = q34Container.querySelector(
										'.q34-input[data-option-number="3"]');
									if (input3) {
										input3.disabled = true;
										input3.value = '';
									}
								}
								const input2 = q34Container.querySelector(
									'.q34-input[data-option-number="2"]');
								if (option2.checked && input2) {
									input2.disabled = false;
									input2.focus();
								} else if (input2) {
									input2.disabled = true;
								}
							});
						});
						q34Options.forEach(option => {
							if (option.checked) {
								option.dispatchEvent(new Event('change'));
							}
						});
					}

					// Checkbox listener for non-Q34 checkboxes.
					document.querySelectorAll('input[type="checkbox"]:not(.q34-option)').forEach(
						checkbox => {
							checkbox.addEventListener('change', function() {
								if (this.dataset.requiresInput === '1') {
									const inputField = this.closest('.answer-item')
										.querySelector('.input-field');
									if (this.checked) {
										if (inputField) {
											inputField.disabled = false;
											inputField.focus();
										}
									} else {
										if (inputField) {
											inputField.disabled = true;
											inputField.value = '';
										}
									}
								}
							});
						});
				}
			}));
		});
	</script>
@endsection