{% extends "main/base.html" %}

{% block content %}

<div class="container mt-5">
    <h2 class="text-center">Tools Feedback</h2>
    <p class="text-center">Please share your feedback on the tools you explored.</p>

    <form id="feedbackForm" method="POST" action="{% url 'submit_tools_feedback' %}">
        {% csrf_token %}
        
        <div class="card shadow p-4">
            <div id="question-container">
                
                <div class="question active">
                    <h5>1. Benefits of Using These Tools</h5>
                    <label>How do these tools benefit you, your teams, and individuals?</label>
                    <textarea class="form-control" name="q1_teams" rows="3"></textarea>
                    
                    <label>How do these tools benefit your organisation?</label>
                    <textarea class="form-control" name="q1_org" rows="3"></textarea>
                </div>

                <div class="question">
                    <h5>2. How would you evaluate the different installation procedures?</h5>
                    <label>What are your thoughts on the ease of installation?</label>
                    <textarea class="form-control" name="q2_feasibility" rows="3"></textarea>

                    <p><strong>Rate the feasibility of the following installation methods:</strong></p>

                    {% for install_type in installation_types %}
                        <label>{{ install_type }}:</label>
                        <div class="d-flex align-items-center">
                            <span>Least Feasible</span>
                            <input type="range" name="q2_{{ install_type|slugify }}" min="1" max="10" value="5" class="form-range mx-2">
                            <span>Highly Feasible</span>
                        </div>
                    {% endfor %}
                </div>

                <div class="question">
                    <h5>3. How do you perceive the data collected by these tools?</h5>
                    <label>What are your thoughts on the type and amount of data collected?</label>
                    <textarea class="form-control" name="q3_thoughts" rows="3"></textarea>

                    <p><strong>Rate the feasibility of providing access to the following data types:</strong></p>

                    {% for data_type in data_types %}
                        <label>{{ data_type }}:</label>
                        <div class="d-flex align-items-center">
                            <span>Least Feasible</span>
                            <input type="range" name="q3_{{ data_type|slugify }}" min="1" max="10" value="5" class="form-range mx-2">
                            <span>Highly Feasible</span>
                        </div>
                    {% endfor %}
                </div>

                <div class="question">
                    <h5>4. How useful are the outputs generated by these tools?</h5>
                    <label>How effective are these outputs for your specific use case?</label>
                    <textarea class="form-control" name="q4_effectiveness" rows="3"></textarea>

                    <label>How do the generated outputs compare to your expectations?</label>
                    <textarea class="form-control" name="q4_comparison" rows="3"></textarea>

                    <p><strong>Rate the feasibility of the following output formats:</strong></p>

                    {% for output_type in output_types %}
                        <label>{{ output_type }}:</label>
                        <div class="d-flex align-items-center">
                            <span>Least Feasible</span>
                            <input type="range" name="q4_{{ output_type|slugify }}" min="1" max="10" value="5" class="form-range mx-2">
                            <span>Highly Feasible</span>
                        </div>
                    {% endfor %}
                </div>

                <div class="question">
                    <h5>5. Challenges & Improvements</h5>
                    <label>What are the challenges in embedding these tools?</label>
                    <textarea class="form-control" name="q5_challenges" rows="3"></textarea>

                    <label>Are there any changes you would suggest to make these tools more feasible to be embedded into the workplace?</label>
                    <textarea class="form-control" name="q5_improvements" rows="3"></textarea>

                    <label>Who are the facilitators for successful adoption of these tools?</label>
                    <textarea class="form-control" name="q5_facilitators" rows="3"></textarea>
                </div>

            </div>

            <div class="d-flex justify-content-between mt-4">
                <button type="button" class="btn btn-secondary" id="prevBtn" onclick="changeQuestion(-1)" disabled>Previous</button>
                <button type="button" class="btn btn-primary" id="nextBtn" onclick="changeQuestion(1)">Next</button>
                <button type="submit" class="btn btn-success" id="submitBtn" style="display: none;">Submit</button>
            </div>
        </div>
    </form>
</div>

<script>
    let currentQuestion = 0;
    const questions = document.querySelectorAll(".question");
    const nextBtn = document.getElementById("nextBtn");
    const prevBtn = document.getElementById("prevBtn");
    const submitBtn = document.getElementById("submitBtn");

    function changeQuestion(step) {
        questions[currentQuestion].classList.remove("active");
        currentQuestion += step;
        questions[currentQuestion].classList.add("active");

        prevBtn.disabled = currentQuestion === 0;
        nextBtn.style.display = currentQuestion === questions.length - 1 ? "none" : "inline-block";
        submitBtn.style.display = currentQuestion === questions.length - 1 ? "inline-block" : "none";
    }

    questions.forEach((q, index) => {
        if (index !== 0) q.classList.remove("active");
    });
</script>

<style>
    .question {
        display: none;
    }
    .question.active {
        display: block;
    }
</style>

{% endblock %}