@extends('front.principal')
@section('content')
    <div class="modal fade" id="modalOps2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content p-5">
                <div class="modal-body modal-confirmar">
                    <img src="./assets/img/icon-close.png" alt="">
                    <h3 class="mt-4"><b>Ops!</b></h3>
                    <p>Você não conseguiu responder a tempo</p>
                    <div class="text-center">
                        <a href="{{ route('index.front') }}" class="btn btn-padrao btn-lg mt-4">continuar</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="cabecalho-internas">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2>Responder QUIZ</h2>

                </div>
            </div>
        </div>
    </section>
    <style>
        #timer {
            font-weight: bold;
        }
    </style>







    {{-- @php
        dd($resposta);
    @endphp --}}
    <section class="conteudo-internas">
        <div class="container">
            <div class="row">
                @foreach ($questions as $index => $question)
                    @if ($question->ativo === '1')
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        @if (session('message'))
                            <div class="alert alert-success">
                                {{ session('message') }}
                            </div>
                        @endif

                        <div class="col-sm-6 offset-sm-3" style="text-align: center;" {{ $index === 0 ? '' : 'd-none' }}
                             data-question-index="{{ $index }}">
                            <h3 class="titulo-padrao text-center">{{ $question->title }}</h3>
                            <div class="d-grid mb-3">
                                <div class="btn btn-padrao btn-lg rounded-5 d-flex justify-content-center align-items-center gap-2">
                                    <i class="fa-regular fa-clock"></i>
                                    <span id="timer">120</span>
                                </div>
                            </div>
                            <p>{{ $question->description }}</p>
                            <form action="{{ route('quiz.confirmacao') }}" method="POST" class="formulario-step" id="quizForm">
                                @csrf
                                <input type="hidden" name="time_left" id="timeLeft" value="120">
                                <input type="hidden" name="question_id" value="{{ $question->id }}">
                                <input type="hidden" name="correct_option_id" value="{{ $question->options->firstWhere('correta', 'true') ? $question->options->firstWhere('correta', 'true')->id : '' }}">


                                @foreach ($question->options as $option)
                                    <div class="quizCheck">
                                        <input class="form-check-input mt-0" name="answer[{{ $question->id }}]"
                                               type="checkbox" value="{{ $option->id }}" id="option-{{ $option->id }}"
                                               aria-label="Porem ipsum dolor sit amet, consectetur adipiscing elit">
                                        <label for="option-{{ $option->id }}"> {{ $option->text }}</label>
                                    </div>
                                @endforeach

                                <div class="d-grid">
                                    <button type="submit" class="btn btn-padrao btn-lg">Enviar</button>
                                </div>
                            </form>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
        <script>
            const totalTime = 120; // 2 minutos
            let timeLeft = totalTime; // Tempo restante
            const timerElement = document.getElementById("timer");
            const hiddenTimeInput = document.getElementById("timeLeft"); // Campo oculto no formulário
            const form = document.getElementById('quizForm'); // Seleciona o formulário
            const options = form.querySelectorAll('input[type="checkbox"]'); // Seleciona todas as opções de resposta
            const submitButton = form.querySelector('button[type="submit"]'); // Botão de envio

            // Obtém o ID da pergunta atual
            const questionId = form.querySelector('input[name="question_id"]').value;

            // Verificar se o tempo expirou para a pergunta atual ao recarregar a página
            const expiredQuestionId = localStorage.getItem('expiredQuestionId');
            if (expiredQuestionId === questionId) {
                disableForm();
                showTimeExpiredMessage();

                // Redireciona imediatamente após 4 segundos de espera
                setTimeout(redirectToAguardeQuiz, 4000); // Aguarda 4 segundos antes de redirecionar
            }

            // Contador regressivo
            const interval = setInterval(() => {
                timeLeft--;
                timerElement.textContent = timeLeft;
                hiddenTimeInput.value = timeLeft; // Atualiza o valor do campo oculto

                if (timeLeft <= 0) {
                    clearInterval(interval);

                    // Desabilita o formulário da pergunta atual
                    disableForm();

                    // Exibe a mensagem de tempo expirado
                    showTimeExpiredMessage();

                    // Armazena o ID da pergunta que expirou
                    localStorage.setItem('expiredQuestionId', questionId);

                    // Redireciona o usuário para a página de aguardo após 4 segundos
                    setTimeout(redirectToAguardeQuiz, 4000); // Aguarda 4 segundos antes de redirecionar
                }
            }, 1000);

            // Função para desabilitar o formulário
            function disableForm() {
                options.forEach(option => {
                    option.disabled = true; // Desabilita as opções
                });
                if (submitButton) {
                    submitButton.disabled = true; // Desabilita o botão de envio
                }
            }

            // Função para exibir a mensagem de tempo expirado
            function showTimeExpiredMessage() {
                const messageDiv = document.createElement('div');
                messageDiv.classList.add('alert', 'alert-warning');
                messageDiv.innerHTML = 'O tempo para esta pergunta expirou! Você será redirecionado em breve.';

                // Adiciona a mensagem na tela
                form.parentElement.appendChild(messageDiv);

                // Esconde o formulário
                form.style.display = 'none';
            }

            // Função para redirecionar o usuário para a página de "aguarde"
            function redirectToAguardeQuiz() {
                window.location.href = '{{ route('quiz.aguarde') }}'; // Redireciona para a página de aguardo
            }
        </script>






        {{-- <script>
            const totalTime = 120; // 2 minutos
            let timeLeft = totalTime; // Tempo restante
            const timerElement = document.getElementById("timer");
            const hiddenTimeInput = document.getElementById("timeLeft"); // Campo oculto no formulário
            const form = document.getElementById('quizForm'); // Seleciona o formulário

            // Contador regressivo
            const interval = setInterval(() => {
                timeLeft--;
                timerElement.textContent = timeLeft;
                hiddenTimeInput.value = timeLeft; // Atualiza o valor do campo oculto

                if (timeLeft <= 0) {
                    clearInterval(interval);

                    // Exibe o modal
                    let modal = new bootstrap.Modal(document.getElementById('modalOps2'));
                    modal.show();

                    // Altera o valor de 'question_true' para 'false' quando o tempo acabar
                    const questionTrueInput = document.querySelector('input[name="question_true"]');
                    if (questionTrueInput) {
                        questionTrueInput.value = 'false'; // Define 'false' quando o tempo acabar
                    }

                    // Verifica se o usuário não selecionou nenhuma opção e envia o valor falso
                    const selectedAnswers = form.querySelectorAll('input[name^="answer"]:checked');
                    if (selectedAnswers.length === 0) {
                        // Se nenhuma opção foi marcada, define question_true como 'false'
                        questionTrueInput.value = 'false';
                    }

                    // Realiza o submit do formulário automaticamente
                    form.submit();
                }
            }, 1000);
        </script> --}}
    </section>




































    {{-- <section class="cabecalho-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h2 class="titulo-padrao">Responder QUIZ</h2>
            </div>
        </div>
    </div>
</section>
<div class="container mt-4">
    <h1 class="mb-4 text-center">Quiz do Dia</h1>
    <form action="{{ route('quiz.answer') }}" method="POST" id="quiz-form">
        @csrf
        <div id="questions-container">
            @foreach ($questions as $index => $question)
            <div class="question-card card mb-4 {{ $index === 0 ? '' : 'd-none' }}" data-question-index="{{ $index }}">
                <h5 class="card-header">{{ $question->title }}</h5>
                <span class="card-header">{{ $question->description }}</span>
                <div class="card-body">
                    @foreach ($question->options as $option)
                    <div class="form-check">
                        <input
                            class="form-check-input"
                            type="radio"
                            name="answers[{{ $question->id }}]"
                            id="option-{{ $option->id }}"
                            value="{{ $option->id }}"
                            required>
                        <label class="form-check-label" for="option-{{ $option->id }}">
                            {{ $option->text }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>

        <div class="d-flex justify-content-between mt-4">
            <button type="button" id="prev-btn" class="btn btn-secondary" disabled>Anterior</button>
            <button type="button" id="next-btn" class="btn btn-primary">Próximo</button>
            <button type="submit" id="submit-btn" class="btn btn-success d-none">Enviar Respostas</button>
        </div>
    </form>
</div>

<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);
            });

            // Habilitar/desabilitar botões de navegação
            prevBtn.disabled = index === 0;
            nextBtn.classList.toggle('d-none', index === questions.length - 1);
            submitBtn.classList.toggle('d-none', index !== questions.length - 1);
        }

        // Botão "Anterior"
        prevBtn.addEventListener('click', function () {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                showQuestion(currentQuestionIndex);
            }
        });

        // Botão "Próximo"
        nextBtn.addEventListener('click', function () {
            if (currentQuestionIndex < questions.length - 1) {
                currentQuestionIndex++;
                showQuestion(currentQuestionIndex);
            }
        });

        // Mostrar a primeira pergunta
        showQuestion(currentQuestionIndex);
    });
</script> --}}
@endsection