{% extends "base.html" %}
{% block content %}
<h1>Select Application Mode</h1>
<br></br>
<!-- Collapsible Tutorials -->
<div class="tutorials-container">
    <button class="collapsible custom-collapsible" style="font-weight: bold;">Quality Assurance Mode Description</button>
    <div class="collapsible-content">
        <p>The Quality Assurance Mode will provide you with a streamlined interactive questionnaire, that consists of two parts. Part 1 asks for context, while Part 2 will specify questions. All of your answers will be treated anonymously and directly responded to, by the software. You can only proceed through this application mode, by answering all questions. Questions can be answered both in present or past tense to reflect your individual situation. After each milestone on your way to answering all questions (after each category and at the end of the complete quiz), a detailed log about all of your interactions with the software can be saved and downloaded as PDF. Before you convert your results to PDF, you can add further notes, manually. The process can be interrupted and picked up again, later, so feel free to get distracted!</p>
		<p style="font-weight:bold;">Estimated duration for the first run: 60 minutes</p>
	</div>
    <br></br>
    <button class="collapsible custom-collapsible" style="font-weight: bold;">Exploration Mode Description</button>
    <div class="collapsible-content">
        <p>In the Exploration Mode, you are free to explore the diverse realms of (alleged) Ethical Misconduct in Research. Look at fictional scenarios, based on actual reports and discourses and make up your own mind, if you can spare the time. The Exploration Mode will feel dissatisfying and perhaps even painful. With the integrated search tool you can look for scenarios and sources connected to particular problematized phenomena you might know already.</p>
    </div>
</div>
<form method="post">
    {% csrf_token %}
    <label for="game_mode"></label>
    <select name="game_mode" id="game_mode">
        <option value="Quality Assurance Mode">Quality Assurance Mode</option>
        <option value="Exploration Mode">Exploration Mode</option>
    </select>
    <button type="submit">Start</button>
</form>
<div class="wrapper-container">
    {% if all_wave2_questions_answered and all_categories_completed %}
        <div class="reminder-box" onclick="redirectToCompletion()">
            <p class="reminder-text">You completed the quiz! Click to see your results.</p>
        </div>
    {% elif current_category %}
        <div class="reminder-box{% if current_category == None %} invisible{% endif %}" onclick="resumeWave1()">
            <p class="reminder-text">You left at: {{ current_category }} - {{ previous_index }} Click to Resume</p>
        </div>
    {% endif %}
</div>
<script>
// Define a JavaScript variable and assign the value of completed_categories to it
// Define a JavaScript variable and assign the value of completed_categories to it
var completedCategories = {{ completed_categories|safe }};
var allCategoriesCompleted = {{ all_categories_completed|lower }};
var allQuestionsAnswered = {{ all_wave2_questions_answered|lower}};
var currentCategory =  "{{ current_category }}";

// JavaScript for collapsible sections
document.addEventListener('DOMContentLoaded', function () {
    var coll = document.getElementsByClassName("collapsible");
    for (var i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
                content.style.padding = '0';
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
                content.style.padding = '15px';
            }
        });
    }

    // Apply reminder box styles
    applyReminderBoxStyles();
});

document.addEventListener('DOMContentLoaded', applyReminderBoxStyles);

// Function to apply styles and event listeners to reminder boxes
function applyReminderBoxStyles() {
    if (currentCategory != "None") {  // Check if currentCategory is not empty
        const reminderBoxes = document.querySelectorAll('.reminder-box');
        reminderBoxes.forEach(function(reminderBox) {
            // Apply styles
            reminderBox.style.backgroundColor = 'lightblue';
            reminderBox.style.color = '#FFFFFF';
            reminderBox.style.padding = '20px';
            reminderBox.style.margin = '20px auto';
            reminderBox.style.borderRadius = '10px';
            reminderBox.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
            reminderBox.style.fontWeight = 'bold';
            reminderBox.style.textAlign = 'center';
            reminderBox.style.width = '80%';
            reminderBox.style.maxWidth = '400px';
            reminderBox.style.display = 'block';
            reminderBox.style.textDecoration = 'none';
            reminderBox.style.cursor = 'pointer';

            // Add hover effect
            reminderBox.addEventListener('mouseover', function() {
                reminderBox.style.backgroundColor = '#FFD700';
            });

            reminderBox.addEventListener('mouseout', function() {
                reminderBox.style.backgroundColor = 'lightblue';
            });

            // Update reminder box text based on condition
            var reminderText = reminderBox.querySelector('.reminder-text');

            if (allQuestionsAnswered) {
                reminderText.textContent = "Finished! See your results";
            } else if (allCategoriesCompleted && !allQuestionsAnswered) {
                reminderText.textContent = "You left at Part 2. Continue.";
            } else if (completedCategories.includes(currentCategory)) {
                reminderText.textContent = "You finished Category " + currentCategory + ". Pick the next one.";
            }
        });
    }
}

// Function to resume Wave1 quiz
function resumeWave1() {
    if (allQuestionsAnswered && allCategoriesCompleted) {
        window.location.href = "{% url 'quiz_completion' %}";
    } else if (allCategoriesCompleted && !allQuestionsAnswered) {
        // Redirect to the bringiton view
        window.location.href = "{% url 'bringiton' %}";
    } else if (completedCategories.includes(currentCategory)) {
        // Redirect to the select_category view
        window.location.href = "{% url 'select_category' %}";
    } else {
        // If the current category is not completed, resume the Wave1 quiz
        window.location.href = "{% url 'wave1_quiz' category=current_category %}";
    }
}

    // Function to redirect to the quiz completion screen
    function redirectToCompletion() {
        window.location.href = "{% url 'quiz_completion' %}";
    }

// Apply styles and event listeners to reminder boxes when DOM is loade
</script>
<style>
/* Collapsible button styles */
.collapsible {
    background-color: #0056b3;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.collapsible.active, .collapsible:hover {
    background-color: #0056b3;
}

/* Collapsible content styles */
.collapsible-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: #393939;
}

.wrapper-container {
    margin: 20px;
}

/* Reminder box styles */
.reminder-box {
    background-color: #0056b3;
    color: #FFFFFF;
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    text-align: center;
    width: 80%;
    max-width: 400px;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

/* Footer */
footer {
    background-color: #F68E55;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 14px;
    z-index: 1;
}

.invisible {
    display: none;
}

</style>
{% endblock %}