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

{% block content %}

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

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

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

                    <label>Are there any changes you would suggest to make these techniques 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 techniques?</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 %}