<style>
    .serial {
        width: 30px;
        height: 30px;
        background: #F2F3F5;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<form action="{{ route('quiz.submit', $quiz->id) }}" method="post" class="quiz-submit-form">@csrf
    <input type="hidden" name="quiz_id" value="{{ $quiz->id }}">
    @foreach ($questions as $key => $question)
        <div class="question px-4 mb-4 @if ($key > 0) d-none @endif">
            <div class="mb-3 d-flex gap-3">
                <span class="serial">{{ ++$key }} </span>
                <div>{!! $question->title !!}</div>
            </div>

            <div class="row gap-0">
                @if ($question->type == 'mcq')
                    @php $options = json_decode($question->options, true) ?? []; @endphp
                    @foreach ($options as $index => $option)
                        <div class="col-sm-6">
                            <input class="form-check-input" type="radio" name="{{ $question->id }}[]"
                                value="{{ $option }}" id="{{ $option }}-{{ $question->id }}">
                            <label class="form-check-label text-capitalize"
                                for="{{ $option }}-{{ $question->id }}">{{ $option }}</label>
                        </div>
                    @endforeach
                @elseif($question->type == 'fill_blanks')
                    <input type="text" class="form-control tagify" name="{{ $question->id }}" data-role="tagsinput">
                @elseif($question->type == 'true_false')
                    <div class="col-sm-2">
                        <input class="form-check-input" type="radio" name="{{ $question->id }}" value="true"
                            id="question-{{ $question->id }}-true">
                        <label class="form-check-label"
                            for="question-{{ $question->id }}-true">{{ get_phrase('True') }}</label>
                    </div>
                    <div class="col-sm-2">
                        <input class="form-check-input" type="radio" name="{{ $question->id }}" value="false"
                            id="question-{{ $question->id }}-false">
                        <label class="form-check-label"
                            for="question-{{ $question->id }}-false">{{ get_phrase('False') }}</label>
                    </div>
                @endif
            </div>
        </div>
    @endforeach
</form>


@if ($questions->count() > 0)
    <div class="row">
        <div class="col-12 d-flex gap-3 justify-content-center">
            <button type="button" class="eBtn gradient border-0" id="prevBtn" onclick="prevQuestion()"><i
                    class="fi fi-rr-angle-small-left"></i>{{ get_phrase('Prev') }}</button>
            <button type="button" class="eBtn gradient border-0" id="nextBtn"
                onclick="nextQuestion()">{{ get_phrase('Next') }}<i class="fi fi-rr-angle-small-right"></i></button>
            @if ($submits->count() < $quiz->retake)
                <button type="button" class="eBtn gradient border-0 d-none" id="submitBtn"
                    onclick="submitQuiz()">{{ get_phrase('Submit') }}<i class="fi fi-rr-badge-check ms-2"></i></button>
            @endif
        </div>
    </div>
@endif

@include('course_player.init')

<script>
    let nextBtn = document.querySelector('#nextBtn');
    let prevBtn = document.querySelector('#prevBtn');
    let submitBtn = document.querySelector('#submitBtn');
    let submitForm = document.querySelector('.quiz-submit-form');
    // next question
    function nextQuestion() {
        let selectQuestion = document.querySelector('.question:not(.d-none)');
        let nextQuestion = selectQuestion.nextElementSibling;
        if (nextQuestion && nextQuestion.classList.contains('question')) {
            selectQuestion.classList.add('d-none');
            nextQuestion.classList.remove('d-none');
        }
        let nextNextQuestion = nextQuestion.nextElementSibling;
        if (!(nextNextQuestion && nextNextQuestion.classList.contains('question'))) {
            submitBtn.classList.remove('d-none');
            nextBtn.classList.add('d-none');
        }
    }

    // previous question
    function prevQuestion() {
        let selectQuestion = document.querySelector('.question:not(.d-none)');
        let prevQuestion = selectQuestion.previousElementSibling;
        if (prevQuestion && prevQuestion.classList.contains('question')) {
            selectQuestion.classList.add('d-none');
            prevQuestion.classList.remove('d-none');
        }
        if (nextBtn.classList.contains('d-none')) {
            nextBtn.classList.remove('d-none');
            submitBtn.classList.add('d-none');
        }
    }

    // submit quiz
    function submitQuiz() {
        submitForm.submit();
    }
</script>
