@extends('layouts.app')

@section('content')
<section class="cabecalho-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h2>Responder QUIZ1</h2>
            </div>
        </div>
    </div>
</section>

<section class="conteudo-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <h3 class="titulo-padrao text-center">Quiz do Dia</h3>
                <form action="{{ route('quiz.answer') }}" method="POST" id="quiz-form" class="formulario-step">
                    @csrf
                    <div id="questions-container">
                        @foreach ($questions as $index => $question)
                        <div class="question-card {{ $index === 0 ? '' : 'd-none' }}" data-question-index="{{ $index }}">
                            <p class="mb-1"><b>Pergunta {{ $index + 1 }}</b></p>
                            <p>{{ $question->title }}</p>

                            @foreach ($question->options as $option)
                            <div class="quizCheck">
                                <input
                                    class="form-check-input mt-0"
                                    type="radio"
                                    name="answers[{{ $question->id }}]"
                                    id="option-{{ $option->id }}"
                                    value="{{ $option->id }}"
                                    required>
                                <label for="option-{{ $option->id }}">{{ $option->text }}</label>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </div>

                    <div class="d-grid mt-4">
                        <button type="button" id="prev-btn" class="btn btn-secondary btn-lg" disabled>Anterior</button>
                        <button type="button" id="next-btn" class="btn btn-padrao btn-lg">Próximo</button>
                        <button type="submit" id="submit-btn" class="btn btn-success btn-lg d-none">Enviar Respostas</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const questions = document.querySelectorAll('.question-card');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const submitBtn = document.getElementById('submit-btn');
        let currentQuestionIndex = 0;

        function showQuestion(index) {
            questions.forEach((question, i) => {
                question.classList.toggle('d-none', i !== index);
            });

            // Atualizar estado dos botões
            prevBtn.disabled = index === 0;
            nextBtn.classList.toggle('d-none', index === questions.length - 1);
            submitBtn.classList.toggle('d-none', index !== questions.length - 1);
        }

        // Navegar para a pergunta anterior
        prevBtn.addEventListener('click', function () {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                showQuestion(currentQuestionIndex);
            }
        });

        // Navegar para a próxima pergunta
        nextBtn.addEventListener('click', function () {
            if (currentQuestionIndex < questions.length - 1) {
                currentQuestionIndex++;
                showQuestion(currentQuestionIndex);
            }
        });

        // Exibir a primeira pergunta
        showQuestion(currentQuestionIndex);
    });
</script>



@endsection