{% extends 'base.html' %}
{% load static %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div id="pdf-content" class="container mt-5">
    <h2>Quiz Completion</h2>
    <!-- Affirmative Wave1 Questions -->
    <div style="padding: 10px;">
        <h4>Colour Code</h4>
        <ul>
            <li><span style="color: darkgray; font-weight: bold;">Grey:</span> Not applicable (Non-affirmatively answered in Part 1)</li>
            <li><span style="color: darkgoldenrod; font-weight: bold;">Darkgold:</span> Non-Affirmatively answered (in Part 2)</li>
			<li><span style="color: #00CED1; font-weight: bold;">Blue:</span> Affirmatively answered</li>
        </ul>
		<h4>Terminology</h4>
        <ul>
			<li><span style="font-weight: bold;">No further recommendations</span>: Available Data was insufficient to give a particular advise.</li>
            <li><span style="font-weight: bold;">Warning</span>: Available Data indicates potentially urgent concern.</li>
            <li><span style="font-weight: bold;">Advise</span>: Available Data allows for a recommendation.</li>
        </ul>
    </div>    	
	<div class="wave-container">
        {% for wave1_question_data in wave1_questions_data %}
            <div class="wave1-question" style="background-color: {% if wave1_question_data.wave1_question.user_answer %}#00CED1{% else %}darkgray{% endif %};">
                <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                    <span class="plus-symbol">+</span>
                    {% if wave1_question_data.wave1_question.tense %}
                         {{ wave1_question_data.wave1_wave_id }} {{ wave1_question_data.wave1_question.wave1questionspresent|safe }}
                     {% else %}
                         {{ wave1_question_data.wave1_wave_id }} {{ wave1_question_data.wave1_question.wave1questions|safe }}
                     {% endif %}
                </div>
                <div class="content" style="display: none;">
                    <!-- Display related Wave2 questions -->
                    {% for wave2_question in wave1_question_data.related_wave2_questions %}
                        <div class="wave2-question" style="background-color: {% if wave2_question.user_answer == 1 %}#00CED1{% elif wave2_question.user_answer == 0 %}darkgoldenrod{% else %}darkgray{% endif %};">
                            <div class="collapsible-header" style="font-weight: bold; color: #000000;" tabindex="0" role="button" aria-expanded="false">
                                <span class="plus-symbol">+</span>
                                {{ wave2_question.wave_id }}
                                {% if wave2_question.tense %}
                                  {{ wave2_question.wave2_wave_id }} {{ wave2_question.wave2_question_present|safe }}
                                {% else %}
                                  {{ wave2_question.wave2_wave_id }} {{ wave2_question.wave2_question|safe }}
                                {% endif %}
                            </div>
                            {% if wave2_question.user_answer %}
                                {% for event_detail in wave1_question_data.related_event_details_yes %}
                                    {% if event_detail.wave_id == wave2_question.wave_id %}
                                        <div class="content" style="display: none;">
                                            <div class="wave2-question"  style="background-color: {% if event_detail.wave2_1_yes_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_1_yes_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_1_yes_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_1_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_1_yes_consequence == 1 %}#00CED1{% elif event_detail.wave2_1_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_1_yes_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                <div class="collapsible-header" style="font-weight: bold;">
                                                    <span class="plus-symbol {% if event_detail.wave2_1_yes_consequence == 3 or event_detail.wave2_1_yes_consequence == None %}hidden{% endif %}">+</span>
                                                    {{ event_detail.wave2_1_yes_details|safe }}
                                                </div>
                                                {% if event_detail.wave2_1_yes_consequence == 1 or event_detail.wave2_1_yes_consequence == 2 %}
                                                    <div class="content" style="display: none;">
                                                        <div class="wave2-question" style="background-color: {% if event_detail.wave2_2_yes_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_2_yes_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_2_yes_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_2_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_2_yes_consequence == 1 %}#00CED1{% elif event_detail.wave2_2_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_2_yes_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                            <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                                                                <span class="plus-symbol {% if event_detail.wave2_2_yes_consequence == 3 or event_detail.wave2_2_yes_consequence == None %}hidden{% endif %}">+</span>
                                                                {{ event_detail.wave2_2_yes_details|safe }}
                                                            </div>
                                                            {% if event_detail.wave2_2_yes_consequence == 1 or event_detail.wave2_2_yes_consequence == 2 %}
                                                                <div class="content" style="display: none;">
                                                                    <div class="wave2-question" style="background-color: {% if event_detail.wave2_3_yes_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_3_yes_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_3_yes_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_3_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_3_yes_consequence == 1 %}#00CED1{% elif event_detail.wave2_3_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_3_yes_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                                        <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                                                                            <span class="plus-symbol {% if event_detail.wave2_3_yes_consequence == 3 or event_detail.wave2_3_yes_consequence == None %}hidden{% endif %}">+</span>
                                                                            {{ event_detail.wave2_3_yes_details|safe }}
                                                                        </div>
                                                                        {% if event_detail.wave2_3_yes_consequence == 1 or event_detail.wave2_3_yes_consequence == 2 %}
                                                                            <div class="content" style="display: none;">
                                                                                <div class="wave2-question" style="background-color: {% if event_detail.wave2_4_yes_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_4_yes_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_4_yes_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_4_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_4_yes_consequence == 1 %}#00CED1{% elif event_detail.wave2_4_yes_details|slice:':7' == 'Follow-' and event_detail.wave2_4_yes_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                                                    <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                                                                                        <span class="plus-symbol {% if event_detail.wave2_4_yes_consequence == 3 or event_detail.wave2_4_yes_consequence == None %}hidden{% endif %}">+</span>
                                                                                        {{ event_detail.wave2_4_yes_details|safe }}
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        {% endif %}
                                                                    </div>
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% else %}
                                {% for event_detail in wave1_question_data.related_event_details_no %}
                                    {% if event_detail.wave_id == wave2_question.wave_id %}
                                        <div class="content" style="display: none;">
                                            <div class="wave2-question" style="background-color: {% if event_detail.wave2_1_no_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_1_no_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_1_no_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_1_no_details|slice:':7' == 'Follow-' and event_detail.wave2_1_no_consequence == 1 %}#00CED1{% elif event_detail.wave2_1_no_details|slice:':7' == 'Follow-' and event_detail.wave2_1_no_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                                                    <span class="plus-symbol {% if event_detail.wave2_1_no_consequence == 3 or event_detail.wave2_1_no_consequence == None %}hidden{% endif %}">+</span>
                                                    {{ event_detail.wave2_1_no_details|safe }}
                                                </div>
                                                {% if event_detail.wave2_1_no_consequence == 1 or event_detail.wave2_1_no_consequence == 2 %}
                                                    <div class="content" style="display: none;">
                                                        <div class="wave2-question" style="background-color: {% if event_detail.wave2_2_no_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_2_no_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_2_no_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_2_no_details|slice:':7' == 'Follow-' and event_detail.wave2_2_no_consequence == 1 %}#00CED1{% elif event_detail.wave2_2_no_details|slice:':7' == 'Follow-' and event_detail.wave2_2_no_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                            <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                                                                <span class="plus-symbol {% if event_detail.wave2_2_no_consequence == 3 or event_detail.wave2_2_no_consequence == None %}hidden{% endif %}">+</span>
                                                                {{ event_detail.wave2_2_no_details|safe }}
                                                            </div>
                                                            {% if event_detail.wave2_2_no_consequence == 1 or event_detail.wave2_2_no_consequence == 2 %}
                                                                <div class="content" style="display: none;">
                                                                    <div class="wave2-question" style="background-color: {% if event_detail.wave2_3_no_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_3_no_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_3_no_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_3_no_details|slice:':7' == 'Follow-' and event_detail.wave2_3_no_consequence == 1 %}#00CED1{% elif event_detail.wave2_3_no_details|slice:':7' == 'Follow-' and event_detail.wave2_3_no_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                                        <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                                                                            <span class="plus-symbol {% if event_detail.wave2_3_no_consequence == 3 or event_detail.wave2_3_no_consequence == None %}hidden{% endif %}">+</span>
                                                                            {{ event_detail.wave2_3_no_details|safe }}
                                                                        </div>
                                                                        {% if event_detail.wave2_3_no_consequence == 1 or event_detail.wave2_3_no_consequence == 2 %}
                                                                            <div class="content" style="display: none;">
                                                                                <div class="wave2-question" style="background-color: {% if event_detail.wave2_4_no_details == 'No further recommendations' %}#00CED1{% elif event_detail.wave2_4_no_details|slice:':8' == 'Warning:' %}#4B0082{% elif event_detail.wave2_4_no_details|slice:':7' == 'Advise:' %}sand{% elif event_detail.wave2_4_no_details|slice:':7' == 'Follow-' and event_detail.wave2_4_no_consequence == 1 %}#00CED1{% elif event_detail.wave2_4_no_details|slice:':7' == 'Follow-' and event_detail.wave2_4_no_consequence == 2 %}darkgoldenrod{% else %}black{% endif %};">
                                                                                    <div class="collapsible-header" style="font-weight: bold;" tabindex="0" role="button" aria-expanded="false">
                                                                                        <span class="plus-symbol {% if event_detail.wave2_4_no_consequence == 3 or event_detail.wave2_4_no_consequence == None %}hidden{% endif %}">+</span>
                                                                                        {{ event_detail.wave2_4_no_details|safe }}
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        {% endif %}
                                                                    </div>
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

    <!-- Negative Wave1 Questions -->
    {% for wave1_question in wave1_questions_negative %}
        <div class="wave1-question" style="background-color: darkgray;">
            <div class="collapsible-header" onclick="toggleCollapsible(this)">
                 {{ wave1_question.wave_id }}
                {% if wave1_question.tense %}
                    {{ wave1_question.wave1questionspresent|safe }}
                {% else %}
                    {{ wave1_question.wave1questions|safe }}
                {% endif %}
            </div>
        </div>
    {% endfor %}
    <div class="container mt-5">
	  <form id="personal-notes-form">
        <h4>Personal Notes</h4>
		<textarea id="personal-notes" name="personal-notes" rows="4" cols="50" placeholder="Submit before you save results..."></textarea><br>
        <button type="submit">Submit</button>
	  </form>
</div>
	<div class="container mt-5">
	<form id="rating-form">
        <strong><label for="rating" title="submit before you save results">Rate your experience</label></strong><br>
        <div id="rating-container">
            <input type="radio" name="rating" value="1"> 1 (waste of time)
            <input type="radio" name="rating" value="2"> 2 (did not help too much)
            <input type="radio" name="rating" value="3"> 3 (don't know)
            <input type="radio" name="rating" value="4"> 4 (was useful)
            <input type="radio" name="rating" value="5"> 5 (will use again)
        </div><br>
        <button type="submit">Submit Rating</button>
    </form>
	<br></br>
</div>
<button class="reset-button active-button" id="reset-and-redirect">Reset</button>
<button class="active-button" id="generate-pdf">Save Results</button>
<script>
$(document).ready(function () {
    function toggleCollapsible(element) {
        const content = $(element).next('.content');
        const isActive = $(element).toggleClass('active').hasClass('active');
        content.slideToggle();

        // Adjust margin-bottom of the expanded collapsible
        const container = $(element).closest('.wave-container');
        const followingCollapsibles = container.find('.wave1-question');
        const index = followingCollapsibles.index($(element).parent());
        const expandedHeight = isActive ? content.outerHeight() : 0;

        for (let i = index + 1; i < followingCollapsibles.length; i++) {
            const followingContent = $(followingCollapsibles[i]).find('.content');
            if (followingContent.length) {
                followingContent.css('margin-bottom', isActive ? `${expandedHeight}px` : '0');
            }
        }
    }

    // Initially hide all content
    $('.wave2-question .content, .wave1-question .content').hide();

    // Attach click event listeners to all collapsible headers
    $('.collapsible-header').click(function () {
        toggleCollapsible(this);
    });

    // Add keyboard support for collapsible headers
    $('.collapsible-header').keydown(function (event) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            toggleCollapsible(this);
        }
    }).attr('tabindex', 0) // Make the headers focusable
      .attr('role', 'button') // Indicate that the headers are interactive
      .attr('aria-expanded', 'false'); // Initial state of collapsible sections

    // Update aria-expanded attribute on click
    $('.collapsible-header').click(function () {
        const isActive = $(this).hasClass('active');
        $(this).attr('aria-expanded', !isActive);
    });

    // Add target="_blank" to open links in new tabs
    $('a:not([target])').attr('target', '_blank');

    // Add keyboard support for links
    $('a').on('keydown', function(event) {
        if (event.which === 13 || event.which === 32) { // Enter or Space key
            window.location.href = $(this).attr('href');
            event.preventDefault(); // Prevent default action
        }
    }).attr('tabindex', 0); // Ensure links are focusable


      // Function to handle form submission
      function savePersonalNotes(event) {
          event.preventDefault(); // Prevent default form submission
          const personalNotes = document.getElementById('personal-notes').value;
          sessionStorage.setItem('personalNotes', personalNotes);
          alert('Personal notes saved successfully!');
      }

      // Add event listener to the form
      document.getElementById('personal-notes-form').addEventListener('submit', savePersonalNotes);

	  // Function to handle rating submission
	  function saveRating(event) {
		event.preventDefault(); // Prevent default form submission
		const rating = document.querySelector('input[name="rating"]:checked').value;
		sessionStorage.setItem('userRating', rating);
		alert('Rating submitted successfully!');
	  }

	  // Add event listener to the rating form
	  document.getElementById('rating-form').addEventListener('submit', saveRating);


      // Function to generate PDF using pdfmake
      function generatePDF() {
        // Retrieve the saved personal notes from the session

        function extractAndFormatHyperlinks(text, originalColor = 'black') {
            // Decode HTML entities using a more efficient method
            function decodeHTMLEntities(str) {
                const textarea = document.createElement('textarea');
                textarea.innerHTML = str;
                return textarea.value;
            }

            // Use a more fault-tolerant approach to parsing HTML
            function parseHTML(input) {
                try {
                    const parser = new DOMParser();
                    return parser.parseFromString(input, 'text/html');
                } catch (error) {
                    console.error('Error parsing HTML:', error);
                    return null;
                }
            }

            try {
                // Decode HTML entities in the input text
                text = decodeHTMLEntities(text);

                // Parse the input text as HTML
                const doc = parseHTML(text);
                if (!doc) {
                    throw new Error('Invalid HTML structure');
                }

                // Find all anchor (a) elements in the document
                const links = doc.querySelectorAll('a');

                // Initialize the formatted text array and a variable to track the last match end
                let formattedText = [];
                let lastMatchEnd = 0;

                // Iterate through each link element
                links.forEach((link) => {
                    const linkText = link.textContent || link.innerText || '';
                    const href = link.getAttribute('href') || '';
                    const linkHTML = link.outerHTML || '';
                    const index = text.indexOf(linkHTML, lastMatchEnd);

                    // Add non-hyperlink text before the link with the original color
                    if (index > lastMatchEnd) {
                        formattedText.push({
                            text: text.substring(lastMatchEnd, index),
                            color: originalColor,
                        });
                    }

                    // Add the hyperlink text with blue color
                    formattedText.push({
                        text: linkText,
                        link: href,
                        decoration: 'underline',
                    });

                    // Update the last match end position
                    lastMatchEnd = index + linkHTML.length;
                });

                // Add remaining text after the last link with the original color
                if (lastMatchEnd < text.length) {
                    formattedText.push({
                        text: text.substring(lastMatchEnd),
                        color: originalColor,
                    });
                }

                return formattedText;
            } catch (error) {
                console.error('Error in extractAndFormatHyperlinks:', error);
                return []; // Return an empty array in case of an error
            }
        }

		  const timeTaken = "{{ time_taken }}";
          // Create an array to store content definition
          const contentDefinition = [];
		  const currentTime = moment().format('MMMM D, YYYY HH:mm:ss');
          const personalNotes = sessionStorage.getItem('personalNotes');
		  const userRating = sessionStorage.getItem('userRating') || 'No rating given'; // Default if no rating is submitted


          // Define the document definition for pdfmake
          const docDefinition = {
              content: [
                  { text: 'Quiz Completion Log', style: 'header' },
				  { text: 'Version September 2024', style: 'subheader'},
                  { text: `Generated on: ${currentTime}`, style: 'date'},
				  { text: `Time taken to complete the quiz: ${timeTaken}`, style: 'timeTaken' },
				  { text: 'User Experience Rating', style: 'subheader' },
				  { text: `${userRating} out of 5`, style: 'details' }, 				  
                  { text: 'Personal Notes', style: 'subheader'},
                  { text: personalNotes || 'No personal commentary.', style: 'details' },
                  {
                      stack: [
                          { text: 'Affirmative Wave1 Questions', style: 'wave1Header' },
                          {
                              ul: [
                                  {% for wave1_question_data in wave1_questions_data %}
                                      {
                                          stack: [
                                              {
                                                  text: [
                                                      { text: extractAndFormatHyperlinks(`{{ wave1_question_data.wave1_wave_id }} - {% if wave1_question_data.wave1_question.tense %}{{ wave1_question_data.wave1_question.wave1questionspresent }}{% else %}{{ wave1_question_data.wave1_question.wave1questions }}{% endif %}`, '#00CED1'),
                                                        style: 'wave1Question',
                                                        color: '#00CED1' },
                                                  ],
                                              },
                                              {
                                                  ul: [
                                                      {% for wave2_question in wave1_question_data.related_wave2_questions %}
                                                          {
                                                              stack: [
                                                                  {
                                                                      text: [
                                                                          {
                                                                              text: extractAndFormatHyperlinks(`{{ wave2_question.wave_id }} - {% if wave2_question.tense %}{{ wave2_question.wave2_question_present }}{% else %}{{ wave2_question.wave2_question }}{% endif %}`, {% if wave2_question.user_answer == 1 %}'#00CED1'{% else %}'darkgoldenrod'{% endif %}),
                                                                              style: 'wave2Question',
                                                                              color: {% if wave2_question.user_answer == 1 %}'#00CED1'{% else %}'darkgoldenrod'{% endif %},
                                                                          }
                                                                      ],
                                                                  },
                                                                  {% if wave2_question.user_answer %}
                                                                      {
                                                                          ul: [
                                                                              {% for event_detail in wave1_question_data.related_event_details_yes %}
                                                                                  {% if event_detail.wave_id == wave2_question.wave_id %}
                                                                                      {
                                                                                          stack: [
                                                                                              {
                                                                                                  text: [
                                                                                                  {
                                                                                                      text: '+',
                                                                                                      style: 'plusSymbol',
                                                                                                  },
                                                                                                      { text: extractAndFormatHyperlinks('{{ event_detail.wave2_1_yes_details }}', {% if event_detail.wave2_1_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_1_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_1_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_1_yes_details|slice:":7" == "Follow-" and event_detail.wave2_1_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_1_yes_details|slice:":7" == "Follow-" and event_detail.wave2_1_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                      style: 'eventDetails',
                                                                                                      color: {% if event_detail.wave2_1_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_1_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_1_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_1_yes_details|slice:":7" == "Follow-" and event_detail.wave2_1_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_1_yes_details|slice:":7" == "Follow-"  and event_detail.wave2_1_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                      ],
                                                                                                },
                                                                                              {% if event_detail.wave2_1_yes_consequence == 1 or event_detail.wave2_1_yes_consequence == 2 %}
                                                                                                  {
                                                                                                      text: [
                                                                                                      {
                                                                                                          text: '+',
                                                                                                          style: 'plusSymbol',
                                                                                                      },
                                                                                                          { text: extractAndFormatHyperlinks('{{ event_detail.wave2_2_yes_details }}', {% if event_detail.wave2_2_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_2_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_2_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_2_yes_details|slice:":7" == "Follow-" and event_detail.wave2_2_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_2_yes_details|slice:":7" == "Follow-" and event_detail.wave2_2_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                          style: 'eventDetails',
                                                                                                          color: {% if event_detail.wave2_2_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_2_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_2_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_2_yes_details|slice:":7" == "Follow-" and event_detail.wave2_2_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_2_yes_details|slice:":7" == "Follow-"  and event_detail.wave2_2_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                      ],
                                                                                                  },
                                                                                              {% endif %}
                                                                                              {% if event_detail.wave2_2_yes_consequence == 1 or event_detail.wave2_2_yes_consequence == 2 %}
                                                                                                  {
                                                                                                      text: [
                                                                                                      {
                                                                                                          text: '+',
                                                                                                          style: 'plusSymbol',
                                                                                                      },
                                                                                                          { text: extractAndFormatHyperlinks('{{ event_detail.wave2_3_yes_details }}', {% if event_detail.wave2_3_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_3_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_3_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_3_yes_details|slice:":7" == "Follow-" and event_detail.wave2_3_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_3_yes_details|slice:":7" == "Follow-"  and event_detail.wave2_3_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                          style: 'eventDetails',
                                                                                                          color: {% if event_detail.wave2_3_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_3_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_3_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_3_yes_details|slice:":7" == "Follow-" and event_detail.wave2_3_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_3_yes_details|slice:":7" == "Follow-"  and event_detail.wave2_3_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                      ],
                                                                                                  },
                                                                                              {% endif %}
                                                                                              {% if event_detail.wave2_3_yes_consequence == 1 or event_detail.wave2_3_yes_consequence == 2 %}
                                                                                                  {
                                                                                                      text: [
                                                                                                      {
                                                                                                          text: '+',
                                                                                                          style: 'plusSymbol',
                                                                                                      },
                                                                                                          { text: extractAndFormatHyperlinks('{{ event_detail.wave2_4_yes_details }}', {% if event_detail.wave2_4_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_4_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_4_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_4_yes_details|slice:":7" == "Follow-" and event_detail.wave2_4_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_4_yes_details|slice:":7" == "Follow-"  and event_detail.wave2_4_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                          style: 'eventDetails',
                                                                                                          color: {% if event_detail.wave2_4_yes_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_4_yes_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_4_yes_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_4_yes_details|slice:":7" == "Follow-" and event_detail.wave2_4_yes_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_4_yes_details|slice:":7" == "Follow-"  and event_detail.wave2_4_yes_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                      ],
                                                                                                  },
                                                                                              {% endif %}
                                                                                          ],
                                                                                      },
                                                                                  {% endif %}
                                                                              {% endfor %}
                                                                          ],
                                                                      },
                                                                  {% else %}
                                                                      {
                                                                          ul: [
                                                                              {% for event_detail in wave1_question_data.related_event_details_no %}
                                                                                  {% if event_detail.wave_id == wave2_question.wave_id %}
                                                                                      {
                                                                                          stack: [
                                                                                              {
                                                                                                  text: [
                                                                                                  {
                                                                                                      text: '+',
                                                                                                      style: 'plusSymbol',
                                                                                                  },
                                                                                                      { text: extractAndFormatHyperlinks('{{ event_detail.wave2_1_no_details }}', {% if event_detail.wave2_1_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_1_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_1_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_1_no_details|slice:":7" == "Follow-" and event_detail.wave2_1_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_1_no_details|slice:":7" == "Follow-" and event_detail.wave2_1_no_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                      style: 'eventDetails',
                                                                                                      color: {% if event_detail.wave2_1_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_1_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_1_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_1_no_details|slice:":7" == "Follow-" and event_detail.wave2_1_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_1_no_details|slice:":7" == "Follow-" %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                  ],
                                                                                              },
                                                                                              {% if event_detail.wave2_1_no_consequence == 1 or event_detail.wave2_1_no_consequence == 2 %}
                                                                                                  {
                                                                                                      text: [
                                                                                                      {
                                                                                                          text: '+',
                                                                                                          style: 'plusSymbol',
                                                                                                      },
                                                                                                          { text: extractAndFormatHyperlinks('{{ event_detail.wave2_2_no_details }}',{% if event_detail.wave2_2_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_2_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_2_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_2_no_details|slice:":7" == "Follow-" and event_detail.wave2_2_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_2_no_details|slice:":7" == "Follow-"  and event_detail.wave2_2_no_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                          style: 'eventDetails',
                                                                                                          color: {% if event_detail.wave2_2_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_2_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_2_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_2_no_details|slice:":7" == "Follow-" and event_detail.wave2_2_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_2_no_details|slice:":7" == "Follow-"  and event_detail.wave2_2_no_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                      ],
                                                                                                  },
                                                                                              {% endif %}
                                                                                              {% if event_detail.wave2_2_no_consequence == 1 or event_detail.wave2_2_no_consequence == 2 %}
                                                                                                  {
                                                                                                      text: [
                                                                                                      {
                                                                                                          text: '+',
                                                                                                          style: 'plusSymbol',
                                                                                                      },
                                                                                                          { text: extractAndFormatHyperlinks('{{ event_detail.wave2_3_no_details }}', {% if event_detail.wave2_3_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_3_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_3_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_3_no_details|slice:":7" == "Follow-" and event_detail.wave2_3_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_3_no_details|slice:":7" == "Follow-"  and event_detail.wave2_3_no_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                          style: 'eventDetails',
                                                                                                          color: {% if event_detail.wave2_3_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_3_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_3_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_3_no_details|slice:":7" == "Follow-" and event_detail.wave2_3_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_3_no_details|slice:":7" == "Follow-"  and event_detail.wave2_3_no_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                      ],
                                                                                                  },
                                                                                              {% endif %}
                                                                                              {% if event_detail.wave2_3_no_consequence == 1 or event_detail.wave2_3_no_consequence == 2 %}
                                                                                                  {
                                                                                                      text: [
                                                                                                      {
                                                                                                          text: '+',
                                                                                                          style: 'plusSymbol',
                                                                                                      },
                                                                                                          { text: extractAndFormatHyperlinks('{{ event_detail.wave2_4_no_details }}', {% if event_detail.wave2_4_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_4_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_4_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_4_no_details|slice:":7" == "Follow-" and event_detail.wave2_4_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_4_no_details|slice:":7" == "Follow-"  and event_detail.wave2_4_no_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %}),
                                                                                                          style: 'eventDetails',
                                                                                                          color: {% if event_detail.wave2_4_no_details == "No further recommendations" %}'#00CED1'{% elif event_detail.wave2_4_no_details|slice:":8" == "Warning:" %}'#4B0082'{% elif event_detail.wave2_4_no_details|slice:":7" == "Advise:" %}'sand'{% elif event_detail.wave2_4_no_details|slice:":7" == "Follow-" and event_detail.wave2_4_no_consequence == 1 %}'#00CED1'{% elif event_detail.wave2_4_no_details|slice:":7" == "Follow-"  and event_detail.wave2_4_no_consequence == 2 %}'darkgoldenrod'{% else %}'black'{% endif %},},
                                                                                                      ],
                                                                                                  },
                                                                                              {% endif %}
                                                                                          ],
                                                                                      },
                                                                                  {% endif %}
                                                                              {% endfor %}
                                                                          ],
                                                                      },
                                                                  {% endif %}
                                                              ],
                                                          },
                                                      {% endfor %}
                                                  ],
                                              },
                                          ],
                                      },
                                  {% endfor %}
                              ],
                          },
                          {
                            text: 'Non-Affirmative Wave1 Questions',
                            style: 'wave1Header',
                          },
                          {
                            ul: [
                                {% for wave1_question_negative in wave1_questions_negative %}
                                    {
                                        stack: [
                                            {
                                                text: extractAndFormatHyperlinks(`{{ wave1_question_negative.wave_id }} - {% if wave1_question_negative.tense %}{{ wave1_question_negative.wave1questionspresent }}{% else %}{{ wave1_question_negative.wave1questions }}{% endif %}`, 'darkgray'),
                                                style: 'wave1Question',
                                                color: 'darkgray'
                                            },
                                        ],
                                    },
                                {% endfor %}
                                ],
                              },
                              {
                                   text: 'Colour Code',
                                   style: 'wave1Header',
                               },
                               {
                                   ul: [
                                       {
                                           stack: [
                                               {
                                                   text: [
                                                       { text: 'Grey:', style: 'wave1Question', color: 'darkgray' },
                                                       'Not applicable (Non-affirmatively answered in Part 1)',
                                                   ],
                                               },
                                               {
                                                   text: [
                                                       { text: 'Blue:', style: 'wave1Question', color: '#00CED1' },
                                                       ' Affirmatively Answered ',
                                                   ],
                                               },
                                               {
                                                   text: [
                                                       { text: 'Darkgold:', style: 'wave1Question', color: 'darkgoldenrod' },
                                                       ' Non-affirmatively answered (from Part 2)',
                                                   ],
                                               },
                                           ],
                                       },
                                   ],
                               },
{
                                   text: 'Terminology',
                                   style: 'wave1Header',
                               },
                               {
                                   ul: [
                                       {
                                           stack: [
                                               {
                                                   text: [
                                                       { text: 'Warning:', style: 'wave1Question', color: '#4B0082' },
                                                       '  Available Data indicates potentially urgent concern.',
                                                   ],
                                               },
                                               {
                                                   text: [
                                                       { text: 'Advise:', style: 'wave1Question', color: 'sand' },
                                                       ' Advise: Available Data allows for a recommendation.',
                                                   ],
                                               },
                                               {
                                                   text: [
                                                       { text: 'No further recommendations:', style: 'wave1Question', color: '#00CED1' },
                                                       ' Available Data was insufficient to give a particular advise. ',
                                                   ],
                                               },
                                           ],
                                       },
                                   ],
                               },                          
						  ],
                       },
                   ],
                   styles: {
                     header: {
                       fontSize: 18,
                       bold: true,
                       margin: [0, 0, 0, 10],
                     },
                     date: {
                       fontSize: 12,
                       italics: true,
                       margin: [0, 0, 0, 10],
                     },
                     wave1Header: {
                       fontSize: 16,
                       bold: true,
                       margin: [0, 10, 0, 5],
                     },
                     plusSymbol: {
                       fontSize: 14,
                     },
                     wave1Question: {
                       fontSize: 14,
                       bold: true,
                     },
                     wave2Question: {
                       fontSize: 12,
                       bold: true,
                     },
                     eventDetails: {
                       fontSize: 10,
                     },
					timeTaken: {
						fontSize: 10,
						italics: true,
						margin: [0, 0, 0, 5]
					},
					details: {
						fontSize: 10,
						margin: [0, 0, 0, 5] // Smaller text for details
					}
                },
              };  // Add the missing closing curly brace

          // Open the PDF in a new tab
          pdfMake.createPdf(docDefinition).open();
      }

      // Add click event listener to the button
      $('#generate-pdf').click(generatePDF);
  });
  document.getElementById('reset-and-redirect').addEventListener('click', function() {
      // Make an AJAX request to perform the reset action on the server
      fetch('{% url 'reset_session_and_user_answers' %}', {
          method: 'GET', // or 'POST' depending on your server logic
          headers: {
              'Content-Type': 'application/json',
              // Add any additional headers if required
          },
      })
      .then(response => {
          // Check if the reset action was successful
          if (response.ok) {
              // Redirect to the 'select_game_mode' URL
              window.location.href = "{% url 'select_game_mode' %}";
          } else {
              // Handle errors if needed
              console.error('Reset action failed.');
          }
      })
      .catch(error => {
          console.error('Error occurred during the reset action:', error);
      });
   });
</script>
<style>
    a {
        color: gold;
        text-decoration: none;
    }
    a:hover {
        color: darkdarkgoldenrod;
        text-decoration: underline;
    }
</style>
{% endblock %}