var numberOfQuestionsAttempted = 0;
$(".container img").addClass("img-responsive");
$("table").addClass("table table-hover").wrap("<div class='table-responsive'></div>");

var allquestions = $(".question");
var totalQuestions = allquestions.size();

function scrollToTop() {
    window.scrollTo({top: 0, behavior: 'smooth'});
}


function showOnlyQuestion(number) {
	thisquestion = $(".question[data-questionnumber='" + number + "']");
	allquestions.hide();
	allquestions.removeClass("active");
	thisquestion.show();
	thisquestion.addClass("active");
	$(".bottombar-highlight").removeClass("bottombar-highlight");
	$(".bottombar-questions[data-questionnumber='" + number + "']").addClass("bottombar-highlight");

	updateButtons();
	scrollToTop();
}

function initialiseQuestions() {
	firstquestion = $(".question").first().data("questionnumber");
	showOnlyQuestion(firstquestion);
}

function nextQuestion() {
	const activeQuestion = $(".question.active").data("questionnumber");
	const newQuestion = activeQuestion + 1;
	if (newQuestion <= totalQuestions) {
		showOnlyQuestion(newQuestion);
	}
}

function previousQuestion() {
	const activeQuestion = $(".question.active").data("questionnumber");
	const newQuestion = activeQuestion - 1;
	if (newQuestion >= 1) {
		showOnlyQuestion(newQuestion);
	}
}

function updateButtons() {
	const activeQuestion = $(".question.active").data("questionnumber");
	$(".nextButton").show();
	$(".previousButton").hide();
	$(".fakeSubmitButton").hide();

	if (activeQuestion == totalQuestions) {
		$(".nextButton").hide();
		$(".fakeSubmitButton").show();
	}

	if (activeQuestion == 1) {
		$(".previousButton").hide();
	} else {
		$(".previousButton").show();
	}
}

function handleSelectAnswer(element) {
	let questionType = $(element).parents(".question").first().attr("data-question-type");
	if (questionType == "single-choice") {
		handleSelectAnswerSingleChoice(element);
	} else if (questionType == "multiple-choice") {
		handleSelectAnswerMultipleChoice(element);
	}
	$(".bottombar-questions.bottombar-highlight").css("color", "green");
	numberOfQuestionsAttempted++;
	// nextQuestion();
}

function handleSelectAnswerSingleChoice(element) {
	const questionName = $(element).attr("data-question-id");
	const value = $(element).attr("data-answer-value");
	$('input[type="radio"][name="' + questionName + '"][value="' + value + '"]').prop("checked", true);
	$(element).prop("checked", false);
	$('.selected-answer[data-question-id="' + questionName + '"]').removeClass("selected-answer");
	$(element).addClass("selected-answer");
}

function handleSelectAnswerMultipleChoice(element) {
	let questionName = $(element).attr("data-question-id");
	let answerValue = $(element).attr("data-answer-value");

	let checkBox = $('input[type="checkbox"][name="' + questionName + '"][value="' + answerValue + '"]');

	let isSelected = checkBox.prop("checked");
	if (!isSelected) {
		checkBox.prop("checked", true);
		$(element).addClass("selected-answer");
	} else {
		checkBox.prop("checked", false);
		$(element).removeClass("selected-answer");
	}
}

$(window).resize(function () {
	if (34 * $(".bottombar-questions").length > $(window).width() - 2 * $(".nextButton").width()) {
		$(".pagination").width($(window).width() - 2 * $(".nextButton").width() - 2 * $(".backscroll").width());
	} else {
		$(".forwardscroll").hide();
		$(".backscroll").hide();
	}
});

$(document).ready(function () {
	if (34 * $(".bottombar-questions").length > $(window).width() - 2 * $(".nextButton").width()) {
		$(".pagination").width($(window).width() - 2 * $(".nextButton").width() - 2 * $(".backscroll").width());
	} else {
		$(".forwardscroll").hide();
		$(".backscroll").hide();
	}

	$("body").on("click touchend tap", ".forwardscroll", function () {
		$(".pagination").animate(
			{
				scrollLeft: "+=150",
			},
			350
		);
	});

	$("body").on("click touchend tap", ".backscroll", function () {
		$(".pagination").animate(
			{
				scrollLeft: "-=150",
			},
			350
		);
	});

	initialiseQuestions();

	$("body").on("click touchend", ".question_answer", function () {
		handleSelectAnswer(this);
	});

	$("body").keydown(function (event) {
		if (event.which == 37) {
			event.preventDefault();
			$(".previousButton").click();
		}
		if (event.which == 39) {
			event.preventDefault();
			$(".nextButton").click();
		}
	});

	$(".nextButton").click(function (e) {
		nextQuestion();
		e.preventDefault();
	});

	$(".previousButton").click(function (e) {
		previousQuestion();
		e.preventDefault();
	});

	$(".btn-submit-completed").click(function () {
		$(".submitButton").click();
	});

	$(".fakeSubmitButton").click(function (e) {
		$(".submitButton").click();
	});

	$(".solutionButton").click(function (e) {
		$(this).parent().parent().find(".solution").slideToggle();
		e.preventDefault();
	});

	var submitted = 0;
	console.log(submitted);
	if (submitted == 0) {
		$("#calibrationtest_form").on("submit", function (e) {
			var form = this;
			e.preventDefault();
			$("body").addClass("loading");

			var questions = [];

			$(".question").each(function (i) {
				// Make an object for each question
				// This should have the question ID, the user Answer and the time taken.

				var question_type = $(this).attr("data-question-type");
				let selected_answer = "";

				let questionObj = {};

				var question_id = $(this).data("questionid");
				var time_taken = $(this).find(".timer").text();

				if (question_type == "single-choice") {
					selected_answer = $(this).find("input:checked").val();
				}

				if (question_type == "multiple-choice") {
					let answers = [];
					$(this)
						.find("input:checked")
						.each(function () {
							answers.push($(this).val());
						});
					selected_answer = answers.join(",");
				}

				if (question_type == "essay") {
					let id = 'selected_answer' + question_id;
					selected_answer = CKEDITOR.instances[id].getData();
				}

				if(question_type == "multiple-dropdown"){
					let answers = [];
					$(this).find('.dropdownquestion').each(function() {
						let answer = $(this).find('option:selected').val();
						// Check if answer is not undefined (meaning an option is selected)
						if (answer !== undefined) {
							answers.push(answer);
						} else {
							// If no option is selected, push 'N/A'
							answers.push('null');
    }
					})
					selected_answer = answers.join(',');
				}

				if(question_type == "multiple-answer"){
					let answers = [];
					$(this).find('.subquestion').each(function() {
						let checkedInputs = $(this).find('input[type="radio"]:checked');
						let checkedValues = Array.from(checkedInputs).map(input => input.value);
						// console.log(checkedInputs,checkedValues,'checkers');
				
						// Determine how to format the answer based on the number of checked items
						//this was brought in because of groupbycolumn functionality
						if (checkedValues.length > 1) {
							// If multiple items, wrap in brackets
							answers.push('[' + checkedValues.join(',') + ']');
						} else if (checkedValues.length === 1) {
							// If only one item, add it directly
							answers.push(checkedValues[0]);
						} else {
							// If no items are checked, add 'N/A'
							answers.push('N/A');
						}
					});
				
					// Join all answers into a single string with commas
					user_answer = answers.join(',');
					// console.log(user_answer,'ma');
				}

				questionObj["question_id"] = question_id;
				questionObj["selected_answer"] = selected_answer;
				questionObj["time_taken"] = time_taken;
				questionObj["question_type"] = question_type;

				// Now we want to put that object within the array of questions

				questions.push(questionObj);

				console.log("Logged a question");
			});
			console.log(questions);
			console.log($("input[name=_token]").val());

			var input = $("<input>").attr("type", "hidden").attr("name", "questiondata").val(JSON.stringify(questions));

			$("#calibrationtest_form").append($(input));

			submitted = 1;
			console.log(submitted);
			form.submit();
		});
	}
});