{% extends "base.html" %}
{% load static %}
{% block content %}
<div class="wave2-quiz-container">
    <div id="wave-questions-container" class="wave-container">
        <!-- Display the current Wave1Question and Wave2Questions -->
        <div class="message wave1-question" id="wave1">
            <h3>Part 1 Question</h3>
            <p id="wave1-question-content">
                {% if current_wave1_question.tense %}
                    {{ current_wave1_question.wave_id }} {{ current_wave1_question.wave1questionspresent|safe }}
                {% else %}
                    {{ current_wave1_question.wave_id }} {{ current_wave1_question.wave1questions|safe }}
                {% endif %}
            </p>
        </div>
        <div id="wave2-question" class="card wave2-question">
            <h3>Part 2 Question</h3>
            <div class="card-body">
              <label class="switch">
                  <input type="checkbox" name="switch_state" id="toggle-switch" value="0" aria-labelledby="switch-label" tabindex="0">
                  <span class="slider round"></span>
              </label>
              <span id="switch-label" tabindex="0" role="button" aria-pressed="false" aria-label="Switch to Present">Switch to Present</span>
                <!-- Include the pk in the data-wave2-question-id attribute -->
                <p id="wave2-question-content" data-wave2-question-id="{{ current_wave2_question.id }}">
                    {{ current_wave2_question.wave_id }} {{ current_wave2_question.wave2_question|safe }}
                </p>
                <p id="wave2-question-present-content" data-wave2-question-present-id="{{ current_wave2_question.id }}" style="display:none">
                    {{ current_wave2_question.wave_id }} {{ current_wave2_question.wave2_question_present|safe }}
                </p>
                <div class="answer-buttons">
                    {% csrf_token %}
                    <button type="button" name="wave2-yes" value="yes" class="btn-yes">Yes</button>
                    <button type="button" name="wave2-no" value="no" class="btn-no">No</button>
                </div>
            </div>
        </div>
    </div>
</div>
    <div id="event-yes-1-container" class="wave-container">
        <div class="card event-details hidden" id="event-yes-1" data-order="1">
            <p>{{ event_details.wave2_1_yes_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_1_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_1_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_1_yes_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>
    </div>
    <div id="event-no-1-container" class="wave-container">
        <div class="card event-details hidden" id="event-no-1" data-order="1">
            <p>{{ event_details.wave2_1_no_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_1_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_1_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_1_no_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>
    </div>
    <div id="event-yes-2-container" class="wave-container">
        <div class="card event-details hidden" id="event-yes-2" data-order="2">
            <p>{{ event_details.wave2_2_yes_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_2_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_2_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_2_yes_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>
    </div>
    <div id="event-no-2-container" class="wave-container">
        <div class="card event-details hidden" id="event-no-2" data-order="2">
            <p>{{ event_details.wave2_2_no_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_2_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_2_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_2_no_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>
    </div>
    <div id="event-yes-3-container" class="wave-container">
        <div class="card event-details hidden" id="event-yes-3" data-order="3">
            <p>{{ event_details.wave2_3_yes_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_3_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_3_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_3_yes_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>
    </div>
    <div id="event-no-3-container" class="wave-container">
        <div class="card event-details hidden" id="event-no-3" data-order="3">
            <p>{{ event_details.wave2_3_no_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_3_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_3_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_3_no_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>
    </div>
    <div id="event-yes-4-container" class="wave-container">
        <div class="card event-details hidden" id="event-yes-4" data-order="4">
            <p>{{ event_details.wave2_4_yes_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_4_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_4_yes_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_4_yes_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>
    </div>
    <div id="event-no-4-container" class="wave-container">
        <div class="card event-details hidden" id="event-no-4" data-order="4">
            <p>{{ event_details.wave2_4_no_details }}</p>
            <div class="answer-buttons">
                <button class="btn-yes {% if event_details.wave2_4_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">Yes</button>
                <button class="btn-no {% if event_details.wave2_4_no_details|slice:":1" == "F" %}visible{% else %}hidden{% endif %}">No</button>
                <button class="btn-ok {% if event_details.wave2_4_no_details|slice:":1" != "F" %}visible{% else %}hidden{% endif %}">OK</button>
            </div>
        </div>    
	<div class="progress-container">
		<div class="progress-circle">
			<div class="progress-circle-inner" id="progressCircleInner" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
				<span id="progressText">0 / {{ total_wave2_questions }}</span>
	</div>	
</div>	
<script>

// Push a new state to the history when the page loads
window.onload = function () {
    history.pushState(null, null, window.location.href);
};

// Handle back/forward navigation
window.onpopstate = function (event) {
    // Prevent back navigation when Part 2 is active
    let confirmationMessage = "Going back will reset all answers and results for Part 2. Are you sure you want to do this?";
    
    // Display a confirmation dialog when the user presses the back button
    if (!confirm(confirmationMessage)) {
        // User doesn't want to go back; push the current state back into the history
        history.pushState(null, null, window.location.href);
    } else {
        // User confirmed going back; call the reset function
        fetch('/reset_user_answers_part_2_only/', {
            method: 'POST', 
            headers: {
                'X-CSRFToken': getCookie('csrftoken') // Ensure you have CSRF token handling
            }
        })
        .then(response => {
            if (response.ok) {
                window.location.href = '/';
            }
        })
        .catch(error => console.error('Error:', error));

    }
};
// Function to get CSRF token for AJAX requests (if using Django)
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Check if this cookie string begins with the name we want
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
  document.addEventListener('DOMContentLoaded', function () {
      const wave2QuestionIds = {{ wave2_question_ids|safe }};
      console.log('wave2QuestionIds:', wave2QuestionIds);

      const toggleSwitch = document.getElementById('toggle-switch');
      const switchLabel = document.getElementById('switch-label');
      const wave2QuestionContentElement = document.getElementById('wave2-question-content');
      const wave2QuestionPresentElement = document.getElementById('wave2-question-present-content');
      const switchStateInput = toggleSwitch;
    // Existing variable definitions
      const progressBar = document.querySelector('.progress-bar');
      const wave2YesButton = document.querySelector('[name="wave2-yes"]');
      const wave2NoButton = document.querySelector('[name="wave2-no"]');
      const eventDetails = document.querySelectorAll('.event-details');
      const eventDetailButtons = document.querySelectorAll('.event-details .btn-yes, .event-details .btn-no');
      const totalWave2Questions = {{ request.session.total_wave2_questions|default:0 }};
      // Track the number of answered Wave 2 questions
      let answeredWave2Questions = {{ request.session.answered_wave2_questions|default:0 }};
      let okButtons = document.querySelectorAll('.btn-ok');
      let targetOrder;


      function updateProgressCircle() {
          const percentage = (answeredWave2Questions / totalWave2Questions) * 100;
          const progressCircle = document.querySelector('.progress-circle');
          const progressText = document.getElementById('progressText');
    
          // Update the CSS variable for the progress circle
          progressCircle.style.setProperty('--percentage', `${percentage}%`);
    
          // Update the text
          progressText.innerText = `${answeredWave2Questions} / ${totalWave2Questions}`;
      }

      // Call updateProgressCircle initially to set the correct state
      updateProgressCircle();

      function toggleSwitchHandler() {
          // Toggle the display style attribute
          const isContentVisible = wave2QuestionContentElement.style.display !== 'none';
          wave2QuestionContentElement.style.display = isContentVisible ? 'none' : 'block';
          wave2QuestionPresentElement.style.display = isContentVisible ? 'block' : 'none';

          // Update the label based on the switch state
          switchLabel.textContent = isContentVisible ? 'Switch to Past' : 'Switch to Present';

          // Update the hidden field value
          switchStateInput.value = isContentVisible ? '1' : '0';

          // Update aria-pressed for accessibility
          switchLabel.setAttribute('aria-pressed', isContentVisible ? 'true' : 'false');
      }

      // Handle click event for the switch
      toggleSwitch.addEventListener('click', toggleSwitchHandler);

      // Handle click event for the label
      switchLabel.addEventListener('click', toggleSwitchHandler);

      // Enable keyboard interaction for the label
      switchLabel.addEventListener('keydown', function (event) {
          if (event.key === 'Enter' || event.key === ' ') {
              event.preventDefault();
              toggleSwitch.checked = !toggleSwitch.checked; // Toggle the checkbox state
              toggleSwitchHandler();  // Trigger the handler
          }
      });

      // Add focus outline for accessibility
      toggleSwitch.addEventListener('focus', function () {
          toggleSwitch.style.boxShadow = '0 0 5px #FFD700'; // Gold focus outline
      });

      toggleSwitch.addEventListener('blur', function () {
          toggleSwitch.style.boxShadow = ''; // Remove focus outline on blur
      });

      switchLabel.addEventListener('focus', function () {
          switchLabel.style.outline = '2px solid #FFD700'; // Add focus outline on label
      });

      switchLabel.addEventListener('blur', function () {
          switchLabel.style.outline = ''; // Remove focus outline on blur
      });

      // Event listeners for "Yes" and "No" buttons
      wave2YesButton.addEventListener('click', function (event) {
          event.preventDefault();
          console.log('Wave 2 Yes Button Clicked!');
          showEventDetails(eventDetails, 1);
          handleWave2Answer('yes');
          hideWave2Buttons();
      });

      wave2NoButton.addEventListener('click', function (event) {
          event.preventDefault();
          showEventDetails(eventDetails, 2);
          handleWave2Answer('no');
          hideWave2Buttons();
      });

      // Event listeners for event detail buttons
      const eventNoButtons = document.querySelectorAll('.event-details .btn-no');
      eventNoButtons.forEach(function (eventNoButton) {
          eventNoButton.addEventListener('click', function (event) {
              event.preventDefault();
              const targetOrder = parseInt(eventNoButton.closest('.event-details').getAttribute('data-order'));
              console.log('No Button Clicked. Target Order:', targetOrder);
              showNextHigherOrderEventDetails(targetOrder, 'no');
              handleEventDetailsConsequences(targetOrder, 2);
          });
      });

      const eventYesButtons = document.querySelectorAll('.event-details .btn-yes');
      eventYesButtons.forEach(function (eventYesButton) {
          eventYesButton.addEventListener('click', function (event) {
              event.preventDefault();
              const targetOrder = parseInt(eventYesButton.closest('.event-details').getAttribute('data-order'));
              showNextHigherOrderEventDetails(targetOrder, 'yes');
              handleEventDetailsConsequences(targetOrder, 1);
          });
      });

      eventDetailButtons.forEach(function (button) {
          button.addEventListener('click', function (event) {
              event.preventDefault();
              const dataOrder = button.closest('.event-details').getAttribute('data-order');
              const buttonsWithSameOrder = document.querySelectorAll(`.event-details[data-order="${dataOrder}"] .btn-yes, .event-details[data-order="${dataOrder}"] .btn-no`);
              buttonsWithSameOrder.forEach(function (btn) {
                  btn.classList.add('hidden');
              });
          });
      });

      okButtons.forEach(function (okButton) {
          okButton.addEventListener('click', function () {
              // 1. Hide all event details
              hideAllEventDetails(eventDetails);
              handleEventDetailsConsequences(targetOrder, 3);
              // 2. Make an AJAX request and display new wave2 question
              makeAjaxRequestAndDisplayNewData();
              showWave2Buttons();
              answeredWave2Questions++;
			  console.log('Answered Wave2 Questions:', answeredWave2Questions);
			  updateProgressCircle()

          });
      });

      function hideWave2Buttons() {
        wave2YesButton.style.display = 'none';
        wave2NoButton.style.display = 'none';
      }

      function showWave2Buttons() {
        wave2YesButton.style.display = '';
        wave2NoButton.style.display = '';
      }
      // Function to handle Wave 2 answer submission
      function handleWave2Answer(userAnswer) {
          console.log('Function triggered!');
          const wave2QuestionId = document.querySelector('.card.wave2-question #wave2-question-content').getAttribute('data-wave2-question-id');
          // Convert userAnswer to boolean
          const booleanUserAnswer = (userAnswer.toLowerCase() === "yes");
          // Retrieve the value of 'tense' from the toggle switch
          const tenseValue = toggleSwitch.checked;
          console.log('Before fetch, tenseValue:', tenseValue);
          console.log('Before fetch, wave2QuestionId:', wave2QuestionId);
          fetch('/update_user_answer/', {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
              },
              body: JSON.stringify({
                  wave2_question_id: wave2QuestionId,
                  user_answer: booleanUserAnswer,
                  tense: tenseValue,
              }),
          })
          .then(response => response.json())
          .then(data => {

          })
          .catch(error => {
              console.error('Error:', error);
              alert('An unexpected error occurred. Please try again.');
          });

      }

        function showEventDetails(eventDetails, index) {
            eventDetails.forEach(function (eventDetail, i) {
                if (i === index - 1) {
                    eventDetail.classList.add('active');
                } else {
                    eventDetail.classList.remove('active');
                }
            });
            console.log('Showing Event Details at Index:', index);
            console.log('Current Wave 1 Question:', '{{ current_wave1_question }}');
            console.log('Current Wave 2 Question:', '{{ current_wave2_question }}');
            console.log('Event Details:', '{{ event_details }}');

        }

        function hideAllEventDetails(eventDetails) {
            eventDetails.forEach(function (eventDetail) {
                eventDetail.classList.remove('active');
            });
        }

        function areAllQuestionsAnswered() {
            return answeredWave2Questions >= totalWave2Questions;
        }


        function makeAjaxRequestAndDisplayNewData() {
            console.log('Making AJAX request...');
            // Make an AJAX request to fetch new data

            fetch('/wave2-quiz/data/', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            })
            .then(response => {
              if (response.headers.get('content-type') === 'application/json') {
                  return response.json();
              } else {
                  // Handle HTML response (quiz completion)
                  window.location.href = '/quiz-completion/';
              }
          })
          .then(data => {
              // Define the wave1WaveId and wave2WaveId variables using the data received from the server
              const wave1WaveId = data.wave1_wave_id;
              const wave2WaveId = data.wave2_wave_id;
              // Check if there is a new Wave 1 question
              if (data.wave1_question !== undefined) {
              // Update the Wave 1 question
                  updateWave1Question(data.wave1_question, data.wave1_tense, wave1WaveId);
              }

              console.log('Wave2 Question ID:', data.wave2_question_id);
              updateWave2Question(data.wave2_question, data.wave2_question_id, wave2WaveId);
              updateWave2QuestionPresent(data.wave2_question_present, data.wave2_question_id, wave2WaveId);

              // Update the event details
              updateEventDetails(data);

              // Update the wave2QuestionId variable
              wave2QuestionId = data.wave2_question_id;
              // Optionally, you can call additional functions or perform other actions based on the new data
              // For example: updateOtherElements(data);
          })
          .catch(error => {
              console.error('Error:', error);
          });
        }


        function updateWave1Question(wave1QuestionContent, wave1Tense, wave1WaveId) {
            const wave1QuestionTextElement = document.getElementById('wave1-question-content');

            // Determine which content to update based on the tense value
            const updatedContent = wave1Tense ? wave1QuestionContent.wave1questionspresent : wave1QuestionContent.wave1questions;

            // Create a temporary element to parse the HTML content
            const tempElement = document.createElement('div');
            tempElement.innerHTML = updatedContent;

            const links = tempElement.querySelectorAll('a[href]');
            links.forEach(link => {
                link.setAttribute('target', '_blank');
            });

            // Update the wave_id value and content in the UI
            wave1QuestionTextElement.innerHTML = `<strong>${wave1WaveId}</strong><br>${tempElement.innerHTML}`;
        }

        function updateWave2Question(wave2QuestionContent, wave2QuestionId, wave2WaveId) {
            const wave2QuestionElement = document.getElementById('wave2-question-content');
            const currentWave2Question = wave2QuestionElement.textContent.trim();
            const currentWave2QuestionId = wave2QuestionElement.getAttribute('data-wave2-question-id');

            if (wave2QuestionContent !== currentWave2Question  || wave2QuestionId !== currentWave2QuestionId) {
                // Update the wave_id value and content in the UI
                wave2QuestionElement.innerHTML = `<strong>${wave2WaveId}</strong><br>${wave2QuestionContent}`;
                wave2QuestionElement.setAttribute('data-wave2-question-id', wave2QuestionId);

                // Increment the order for the next question
                resetTargetOrder();

            } else {
                // If the new question is the same, increment the order and retry fetching new data
                console.log('Same Wave 2 question. Incrementing order and retrying fetching new data.');
                // Immediately call makeAjaxRequestAndDisplayNewData to proceed with the next question
                makeAjaxRequestAndDisplayNewData();
            }
            // Normalize IDs by converting them to strings for comparison
            const currentId = currentWave2QuestionId.toString();
            const newId = wave2QuestionId.toString();

            console.log('Current question ID:', currentId);
            console.log('New question ID:', newId);

            // Create a temporary element to parse the HTML content
            const tempElement = document.createElement('div');
            tempElement.innerHTML = wave2QuestionContent;

            // Add target="_blank" to each <a> element in the content
            const links = tempElement.querySelectorAll('a[href]');
            links.forEach(link => {
                link.setAttribute('target', '_blank');
            });

            // Loop until we find a different question ID
            while (currentId === newId) {
                console.log('Current and new question IDs are the same. Fetching a new question...');
                makeAjaxRequestAndDisplayNewData();
                return; // Stop execution here since the next question is being fetched
            }

            // Update the Wave 2 question content and ID if they are different
            wave2QuestionElement.innerHTML = `<strong>${wave2WaveId}</strong><br>${tempElement.innerHTML}`;
            wave2QuestionElement.setAttribute('data-wave2-question-id', wave2QuestionId);
        }


        function updateWave2QuestionPresent(wave2QuestionPresent, wave2QuestionId, wave2WaveId) {
            const wave2QuestionPresentElement = document.getElementById('wave2-question-present-content');

            // Create a temporary element to parse the HTML content
            const tempElement = document.createElement('div');
            tempElement.innerHTML = wave2QuestionPresent;

            // Add target="_blank" to each <a> element in the content
            const links = tempElement.querySelectorAll('a[href]');
            links.forEach(link => {
                link.setAttribute('target', '_blank');
            });

            // Update the alternative phrasing of Wave 2 question
            wave2QuestionPresentElement.innerHTML = `<strong>${wave2WaveId}</strong><br>${tempElement.innerHTML}`;
            wave2QuestionPresentElement.setAttribute('data-wave2-question-present-id', wave2QuestionId);
        }


        function updateEventDetails(data) {
            for (let i = 1; i <= totalWave2Questions; i++) {
                const eventDetailElementYes = document.getElementById(`event-yes-${i}`);
                const eventDetailElementNo = document.getElementById(`event-no-${i}`);

                // Check if the elements exist before updating
                if (eventDetailElementYes && eventDetailElementNo) {
                    const eventDetailTextElementYes = eventDetailElementYes.querySelector('p');
                    const eventDetailTextElementNo = eventDetailElementNo.querySelector('p');

                    const eventDetailsContentYes = data.event_details[`wave2_${i}_yes_details`] || '';
                    const eventDetailsContentNo = data.event_details[`wave2_${i}_no_details`] || '';

                    // Create a temporary element to parse the HTML content
                    const tempElementYes = document.createElement('div');
                    const tempElementNo = document.createElement('div');

                    // Set the inner HTML with the data content
                    tempElementYes.innerHTML = eventDetailsContentYes;
                    tempElementNo.innerHTML = eventDetailsContentNo;

                    // Add target="_blank" to each <a> element in the content
                    const linksYes = tempElementYes.querySelectorAll('a[href]');
                    const linksNo = tempElementNo.querySelectorAll('a[href]');

                    linksYes.forEach(link => {
                        link.setAttribute('target', '_blank');
                    });

                    linksNo.forEach(link => {
                        link.setAttribute('target', '_blank');
                    });

                    // Update the event detail elements with the modified HTML content
                    eventDetailTextElementYes.innerHTML = tempElementYes.innerHTML;
                    eventDetailTextElementNo.innerHTML = tempElementNo.innerHTML;

                    // Call the updateButtonVisibility function for button visibility
                    updateButtonVisibility(eventDetailsContentYes, eventDetailElementYes);
                    updateButtonVisibility(eventDetailsContentNo, eventDetailElementNo);
                }
            }
        }


        function updateButtonVisibility(eventDetailsContent, eventDetailElement) {
            // Determine whether the current event details begin with "Follow-Up"
            const isFollowUp = eventDetailsContent.startsWith('Follow-Up:');

            // Get all the Yes and No buttons within the event detail
            const eventYesButtons = eventDetailElement.querySelectorAll('.btn-yes');
            const eventNoButtons = eventDetailElement.querySelectorAll('.btn-no');
            const eventOkButtons = eventDetailElement.querySelectorAll('.btn-ok');

            if (isFollowUp) {
                // Show Yes and No buttons for the event
                eventYesButtons.forEach(button => button.classList.remove('hidden'));
                eventNoButtons.forEach(button => button.classList.remove('hidden'));
                eventOkButtons.forEach(button => button.classList.add('hidden'));
            } else {
                // Hide Yes and No buttons for the event
                eventYesButtons.forEach(button => button.classList.add('hidden'));
                eventNoButtons.forEach(button => button.classList.add('hidden'));
                eventOkButtons.forEach(button => button.classList.remove('hidden'));
            }
        }

        function showNextHigherOrderEventDetails(currentOrder, lastButtonClicked) {
            const nextHigherOrder = currentOrder + 1;
            const nextHigherOrderEventDetails = document.querySelector(`.event-details[data-order="${nextHigherOrder}"]`);

            // Check if the next higher-order event-details exists
            if (nextHigherOrderEventDetails) {
                // Determine the prefix based on the last button clicked
                const prefix = lastButtonClicked === 'yes' ? 'event-yes-' : 'event-no-';

                // Form the ID for the next higher-order event-details
                const nextHigherOrderEventId = `${prefix}${nextHigherOrder}`;

                // Show the next higher-order event-details
                const nextHigherOrderEventElement = document.getElementById(nextHigherOrderEventId);
                nextHigherOrderEventElement.classList.add('active');
                targetOrder = nextHigherOrder;
            } else {
                // Handle the case when there are no more higher-order event-details
                console.log('No more higher-order event-details');
            }
        }

        function resetTargetOrder() {
            targetOrder = 1;
        }
        function handleEventDetailsConsequences(targetOrder, consequenceValue) {
            // Make an AJAX request to handle the consequences and save in the database
            // Use the targetOrder and consequenceValue in your request

            const wave2QuestionId = document.querySelector('.card.wave2-question #wave2-question-content').getAttribute('data-wave2-question-id');
            if (!targetOrder) {
                targetOrder = 1;
            }

            fetch('/handle_event_details_consequences/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
                },
                body: JSON.stringify({
                    wave2_question_id: wave2QuestionId,
                    target_order: targetOrder,
                    consequence_value: consequenceValue,
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Additional success logic if needed
                } else {
                    alert('Error handling consequences. Please try again.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An unexpected error occurred. Please try again.');
            });
        }
    });
</script>
<style>
 a {
      color: gold;  /* Gold color */
  }

 a:hover {
      color: darkgoldenrod;  /* A slightly darker shade of gold on hover */
  }
  .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.progress-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.progress-circle {
    position: relative;
    width: 150px; 
    height: 150px; 
    border-radius: 50%;
    background: conic-gradient(#4db8ff var(--percentage), #e0e0e0 0);
    border: 10px solid #e0e0e0; /* Background of the circle */
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-circle-inner {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.progress-circle span {
    font-size: 1.2em;
    color: #333; /* Text color */
}

/* Accessible label focus outline */
#switch-label:focus {
  outline: 2px solid #FFD700;
}

/* Responsive Design */
@media (max-width: 600px) {
    .switch {
        width: 50px;
        height: 28px;
    }
    .slider:before {
        height: 22px;
        width: 22px;
    }
</style>
{% endblock %}