@extends('layout')

@section('content')
    <link href="css/questionnare.css" rel="stylesheet">
    <div class="container"></div>
    <div class="questionnaire">
        <form method="POST" action="{{ route('questionnaire.store') }}" id="surveyForm">
            @csrf
            <input type="hidden" name="participant_id" value="{{ $participant_Id }}">
            <div class="questions" id="questions-container">
                @include('survey::questions.single', [
                    'question' => $survey->questions()->withoutSection()->first(),
                ])
            </div>
    </div>
    <div class="progress" style="margin-top: 20px;">
        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0"
            aria-valuemax="{{ $survey->questions()->withoutSection()->count() }}"></div>
    </div>
    <div class="btn-cont">
        <button type="button" id="next-question" class="btn btn-primary">Next Question</button>
        <button type="submit" id="submit-survey" class="btn btn-primary" style="display: none;">Submit</button>
    </div>
    </form>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let currentQuestionIndex = 0;
            let questions = @json($survey->questions()->withoutSection()->get());
            console.log(questions)
            let responses = [];


            document.getElementById('next-question').addEventListener('click', function() {
                // Capture user response and add it to the array
                let response = captureResponse();
                 if (response === null) {
        alert('Please select an option before proceeding.');
        return;
    }
                responses.push(response);
                let currentIndex = currentQuestionIndex
                currentIndex = currentQuestionIndex + 1

                let responsesInput = document.createElement('input');
                responsesInput.type = 'hidden';
                responsesInput.name = "q" + currentIndex;
                responsesInput.value = response;
                console.log(responsesInput.value);

                document.getElementById('surveyForm').appendChild(responsesInput);

                // if (currentQuestionIndex < questions.length - 1) {
                if (currentQuestionIndex < questions.length - 1) {
                    currentQuestionIndex++;
                    let progressBar = document.querySelector('.progress-bar');
                        if (progressBar) {
                            let percentage = (currentQuestionIndex) / (questions.length - 1) * 100;
                            console.log(percentage);
                            progressBar.style.width = `${percentage}%`;
                            progressBar.setAttribute('aria-valuenow', currentQuestionIndex + 1);
                        }
                    updateQuestion();
                } else {
                    // If it's the last question, show the submit button
                    document.getElementById('submit-survey').style.display = 'block';
                    document.getElementById('next-question').style.display = 'none';
                }
            });

            document.getElementById('surveyForm').addEventListener('submit', function() {
                // Capture the response of the last question before submitting the form
                let response = captureResponse();
                //responses.push(response);

                let totalPoints = 0;
                for (let i = 0; i < responses.length; i++) {
                    // Map the response to its corresponding point
                    let point = mapResponseToPoint(responses[i]);

                    // Add the point to the total
                    totalPoints += point;

                    // Add the collected responses to the form as hidden fields
                    let hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = "q" + (i + 1); // Adjust the name as needed
                    hiddenInput.value = responses[i];
                    document.getElementById('surveyForm').appendChild(hiddenInput);
                }


                // Add an additional hidden field for user_result
                let userResultInput = document.createElement('input');
                userResultInput.type = 'hidden';
                userResultInput.name = 'user_result';
                userResultInput.value = totalPoints;
                document.getElementById('surveyForm').appendChild(userResultInput);

                console.log(responses);



                // Add the responses as a hidden field in the form

            });

            function captureResponse() {
                // Implement logic to capture the user's response (e.g., from a form input)
                let question = questions[currentQuestionIndex];
                let response;
                let currentIndex = currentQuestionIndex
                currentIndex = currentQuestionIndex + 1

                let qIndex = "input[name=q" + currentIndex + "]:checked"
                console.log(qIndex);

                // Adjust the logic based on the type of question
                // Assuming the response comes from radio buttons
                let selectedRadio = document.querySelector(qIndex);
                response = selectedRadio.value;
                console.log(response);
                // Add cases for other question types as needed

                return response;
            }

            function mapResponseToPoint(response) {
                const options = {
                    "1": "Not at all",
                    "2": "A little bit",
                    "3": "Quite often",
                    "4": "Moderately",
                    "5": "Quite a bit"
                };
                return parseInt(Object.keys(options).find(key => options[key] === response));
            }

            function updateQuestion() {
                let question = questions[currentQuestionIndex];
                let url = `/get-question/${question.id}`;

                fetch(url)
                    .then(response => response.text())
                    .then(html => {
                        // Extract and append the new question's content to the container
                        let container = document.getElementById('questions-container');
                        console.log(html);
                        if (container) {
                            let newContent = new DOMParser().parseFromString(html, 'text/html').getElementById(
                                'questions-container').innerHTML;
                            container.innerHTML = newContent;
                            console.log(newContent);
                            // Additional JavaScript logic if needed

                            console.log('Question updated successfully.');
                        } else {
                            console.error('Container element not found.');
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching question:', error);
                    });
            }
        });
    </script>
@endsection