@extends('front.principal')

@section('content')


<section class="conteudo-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <p class="mb-2 text-center"><b>Estamos quase lá!</b></p>
                <p class="text-center mb-5">Clique no botão <b>"Enviar Quiz"</b> para concluir sua participação.</p>

                <div class="text-center">
                    <form id="quizForm" action="{{ route('quiz.answer') }}" method="POST">
                        @csrf
                        @foreach ($dados as $key => $value)
                            @if (is_array($value))
                                @foreach ($value as $subKey => $subValue)
                                    <input type="hidden" name="{{ $key }}[{{ $subKey }}]" value="{{ $subValue }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endif
                        @endforeach
                    </form>

                    <a href="{{ route('quiz.front') }}" class="btn btn-secundario btn-lg me-2">Voltar</a>

                    <button type="button" class="btn btn-padrao btn-lg" id="enviarQuizBtn">
                        Enviar Quiz
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal de Confirmação -->
<div class="modal fade" id="modalConfirmar" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content p-5">
            <div class="modal-body modal-confirmar text-center">
                <i class="fa-regular fa-circle-check"></i>
                <h3 class="mt-4"><b>Quiz respondido</b></h3>
                {{-- <p>Você obteve <b>0%</b> de acerto</p> --}}
                <div class="text-center">
                    <button type="button" class="btn btn-padrao btn-lg mt-4" id="continuarBtn">continuar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('enviarQuizBtn').addEventListener('click', function () {
        // Abre o modal primeiro
        let modal = new bootstrap.Modal(document.getElementById('modalConfirmar'));
        modal.show();

        // Aguarda 5 segundos e então submete o formulário
        setTimeout(() => {
            document.getElementById('quizForm').submit();
        }, 5000);
    });

    document.getElementById('continuarBtn').addEventListener('click', function () {
        // Submete o formulário quando o botão "continuar" é clicado
        document.getElementById('quizForm').submit();
    });
</script>
@endsection