{% extends 'layout.html' %}
{% block title %} Custom Form {% endblock %}
{% block link %}  {% endblock %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<br><br><br>
	<div class="flexContainer">
		<div class="flex1">
			<div class="forminfo-result">
            	<div id="name" style="padding:20px; text-align:center; font-size: 28px; font-weight:700;">Happy Index</div>
				<div class="happy-score">{{ res4 }}</div>
            	<p id="name" style="padding:20px;"><b>Name of Assessment : </b><br>{{ res8[1] }}</p>
            	<p id="name" style="padding:20px;"><b>Description :</b> {{ res8[2] }}</p>
        	</div>
		</div>

		<div id="flex2" class="flex2">
			<div class="text-content-congo"><img src="static/party-popper.png" alt="Congo" width="35px"> &nbsp; Congratulations! You've completed the SmileCheck assessment.</div>
			<script>
				const congo = document.querySelector(".text-content-congo");
				const parent = document.getElementById("flex2");
				setTimeout(() => {
					parent.removeChild(congo);
				}, 3000);
			</script>
			<div class="text-content-header" style="font-size:28px; font-weight:700; padding:10px;"> Assessment Analysis</div>
			<div class="flexsub">
				<div class="navsub1">
					<p id="change">Result Graph</p>
				</div>
				<div class="navsub2">
					<button class="sub1" id="myButton"><p id="buttontext">See Responses <i class="uil uil-arrow-right"></i></button>
					<button class="sub1" id="myButton2" style="display:none;"><p id="buttontext">Check Result Graph <i class="uil uil-arrow-right"></i></button>
				</div>
			</div>

			<div id="graph" style="display:block;">
				<div class="chart">
					<canvas id="myChart"></canvas>
					<p class="caption">Assessment Analysis</p>
				</div>
				<script>
					// Chart configuration
					var ctx = document.getElementById('myChart').getContext('2d');
					var chart = new Chart(ctx, {
						type: 'bar',
						data: {
							labels: {{ques|safe}},
							datasets: [{
								barPercentage: 0.5,
								minBarLength: 5,
								borderRadius:5,
								label: ' Your Score',
								data: {{res2.decode('utf-8')}},
								backgroundColor: [
									'rgba(255, 206, 86, 0.6)',
								],
								borderColor: [
									'rgba(255, 206, 86, 1)',
								],
								borderWidth: 1
							},
							{
								barPercentage: 0.5,
								minBarLength: 5,
								borderRadius:5,
								label: ' Average Score',
								data: {{res5}},
								backgroundColor: [
									'rgba(255, 206, 86, 0.2)',
								],
								borderColor: [
									'rgba(255, 206, 86, 1)',
								],
								borderWidth: 1
							}]
						},
						options: {
							scales: {
								yAxes: [{
									ticks: {
										beginAtZero: true
									},
									scaleLabel: {
										display: true,
										labelString: '% Compared to Average'
									}
								}],
								xAxes: [{
									scaleLabel: {
										display: true,
										labelString: 'Data Points'
									}
								}]
							}
						}
					});
				</script>
			</div>

			<div id="questions" style="display:none;">
				{% set questions_list = res9[0].decode('utf-8')[2:-2].split('", "') %}
				{% for i in range(1, questions_list|count+1) %}
				{% set j = res9[1].decode('utf-8')[2:-2].split('", "') %}
				{% set k = res9[2].decode('utf-8')%}
				{% set l = res2.decode('utf-8')[1:-1].split(', ') %}
				<div class="qres">
					<div class="qflex1">
						<div id="progressdiv{{loop.index}}" class="progressdiv"></div>
						<script>
							const progressDiv{{loop.index}} = document.getElementById('progressdiv{{loop.index}}');
							var temp = eval({{ k }})[{{loop.index-1}}];
							if (eval({{ k }})[{{loop.index-1}}] > 0) {
								progressDiv{{loop.index}}.style.background = 'linear-gradient(to top, #00ff00 {{l[loop.index-1]}}%, white 50%, white 100%)';
							}
							else if (eval({{ k }})[{{loop.index-1}}] < 0) {
								progressDiv{{loop.index}}.style.background = 'linear-gradient(to bottom, red {{l[loop.index-1]}}%, white 50%, white 100%)';
							}
						</script>
						<p>{{l[loop.index-1]}}</p>
					</div>

					<div class="qflex2">
						<div class="quest">
							<b>Question {{ loop.index }}: </b>{{ questions_list[i-1] }}
						</div>
						<div class="response">
							{{ j[loop.index-1] }}
						</div>
					</div>
				</div>
				{% endfor %}
			</div>

			<button class="accordion"><a href="#previous-data" id="jump-link5" style="text-decoration: none !important;"><b>Suggestions</b></a></button>
			<div class="panel">
                    <div class="domains">
						{% for key, value in res7.items() %}
							<div class="each-domain">
								<div class="average-score"><span style="display:flex; justify-content:space-around;"><img src="/static/parameters/{{ key }}.png" alt="wellbeing" width="45px;" style="flex-basis:20%;"><span style="flex-basis:50%;">{{ value['average_score'] }}</span></span></div>
								<div class="name">{{ value['name'] }}</div>
								<div class="description">{{ value['description'] }}</div><br>
								<div class="suggestions-text">
									{% for suggestion in value['suggestions_text'][0] %}
									<p><img src="/static/chat.png" style="height:20px; width:20px;"> &nbsp; <b>Suggestion {{ loop.index }} :</b> {{ suggestion }}</p>
									{% endfor %}
								</div>
							</div>
						{% endfor %}
					</div>
                </div>
		</div>
	</div>
	<div class="text-content-end">Remember, improving your happiness is a journey, and we're here to support you every step of the way. <br>Thank you for using SmileCheck. <br>We wish you all the best on your journey to greater happiness and wellbeing.</div>

	<script>
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight) {
              panel.style.maxHeight = null;
            } else {
              panel.style.maxHeight = panel.scrollHeight + "px";
            }
          });
        }
    </script>
	<script>
		const myButton = document.getElementById("myButton");
		const pText = document.getElementById("change");
		const buttonText = document.getElementById("buttontext");
        const graphDiv = document.getElementById("graph");
        const questionsDiv = document.getElementById("questions");

        myButton.addEventListener("click", () => {
			graphDiv.style.display = "none";
			questionsDiv.style.display = "block";

			myButton.style.display = "none";
			myButton2.style.display = "block";
		    pText.innerText = "Questions";
        });

        myButton2.addEventListener("click", () => {
			graphDiv.style.display = "block";
			questionsDiv.style.display = "none";
			myButton.style.display = "block";
			myButton2.style.display = "none";
		    pText.innerText = "Result Graph";
        });

	</script>
{% endblock %}