@extends('layouts.admin')

@section('content')
    <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                            {{ $quiz->title }}
                        </h2>
                    </div>
                    <!-- Page title actions -->
                </div>
            </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
            <div class="container-xl">
                <div class="row g-4">
                    {{-- <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <b>Time Left:</b>
                                    </div>
                                    <div class="col-md-6">
                                        <div id="timer" style="color: red"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div> --}}
                </div>

                <!-- Quiz Form -->
                <form id="quizForm" action="#" method="POST">
                    @csrf
                    <div id="quiz-container">
                        @foreach ($quiz->questions as $question)
                            <div class="question" id="question{{ $loop->iteration }}">
                                <h4>Question {{ $loop->iteration }} of {{ $quiz->questions->count() }}</h4>
                                <p>{{ $question->title }}</p>
                                @if($question->question_type->type == 'image')
                                <img src="{{ asset('storage/' . $question->image) }}" style="    max-width: 300px;max-height: 300px;">
                                @endif
                                <input type="hidden" name="questions[{{ $question->id }}][question_id]"
                                    value="{{ $question->id }}">
                                @if ($question->question_type->type == 'dropdown')
                                    <select name="questions[{{ $question->id }}][answer]" class="form-control">
                                        @foreach ($question->question_options as $option)
                                            <option value="{{ $option->option_text }}">{{ $option->option_text }}</option>
                                        @endforeach
                                    </select>
                                @elseif($question->question_type->type == 'checkbox')
                                    @foreach ($question->question_options as $option)
                                        <label>
                                            <input type="checkbox" name="questions[{{ $question->id }}][answer][]"
                                                value="{{ $option->option_text }}">
                                            {{ $option->option_text }}
                                        </label><br>
                                    @endforeach
                                @elseif($question->question_type->type == 'radio')
                                    @foreach ($question->question_options as $option)
                                        <label>
                                            <input type="radio" name="questions[{{ $question->id }}][answer]"
                                                value="{{ $option->option_text }}">
                                            {{ $option->option_text }}
                                        </label><br>
                                    @endforeach
                                @elseif($question->question_type->type == 'text')
                                    <input type="text" name="questions[{{ $question->id }}][answer]"
                                        class="form-control">
                                @elseif($question->question_type->type == 'image')
                                    <input type="text" name="questions[{{ $question->id }}][answer]"
                                        class="form-control">
                                @elseif($question->question_type->type == 'file')
                                    <input type="file" name="questions[{{ $question->id }}][answer]"
                                        class="form-control">
                                @endif
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-3">
                        <button id="backBtn" type="button" class="btn btn-secondary" onclick="showPreviousQuestion()"
                            style="display: none;">
                            Back
                        </button>
                        <button id="nextBtn" type="button" class="btn btn-primary" onclick="showNextQuestion()">
                            Next
                        </button>
                    </div>
                </form>
            </div>
        </div>
        @include('includes.admin_footer')
    </div>
@endsection

@section('scripts')
    <script>
        let currentQuestion = 0;
        const questions = document.querySelectorAll('.question');
        const quizForm = document.getElementById('quizForm');

        function showQuestion(index) {
            questions.forEach((question, i) => {
                question.style.display = (i === index) ? 'block' : 'none';
            });
            document.getElementById('backBtn').style.display = (index > 0) ? 'inline-block' : 'none';
            document.getElementById('nextBtn').textContent = (index === questions.length - 1) ? 'Finish' : 'Next';
        }

        function showNextQuestion() {
            if (currentQuestion < questions.length - 1) {
                currentQuestion++;
                showQuestion(currentQuestion);
            } else if (currentQuestion === questions.length - 1) {
                // quizForm.submit();
            }
        }

        function showPreviousQuestion() {
            if (currentQuestion > 0) {
                currentQuestion--;
                showQuestion(currentQuestion);
            }
        }

        showQuestion(currentQuestion);

        // Timer function
        function startTimer(minutes) {
            let time = minutes * 60; // Convert minutes to seconds
            const timerElement = document.getElementById('timer');

            const interval = setInterval(() => {
                let minutes = Math.floor(time / 60);
                let seconds = time % 60;

                // Add a leading zero if the number is less than 10
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;

                // Display the timer
                timerElement.textContent = `${minutes}:${seconds}`;

                // Decrease time by one second
                time--;

                // Stop the timer when it reaches zero and submit the form
                if (time < 0) {
                    clearInterval(interval);
                    timerElement.textContent = "Time's up!";
                    quizForm.submit();
                }
            }, 1000);
        }

        // Start the timer with the specified number of minutes
        // startTimer({{ $quiz->duration }});
    </script>
@endsection