@extends('layout.layout')

@section('content')
    <div id="container">
        <div class="row">
            <div id="">
                @include('dashboard.quiz.questions.quiz-header')
                @include('dashboard.quiz.questions.quiz-modals')
                @include('dashboard.quiz.questions.quiz-question-interface')
                @include('dashboard.quiz.questions.quiz-footer')
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        #container {
            font-weight: 400 !important;
            line-height: 1.5 !important;
            color: #222cd0 !important;
            background: #fff7f0 !important;
            font-size: 14px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .width100 {
            width: 100% !important;
        }
    </style>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            window.authUserId = {{ auth()->check() ? auth()->id() : 'null' }};
            window.quizState = {
                questions: {!! json_encode($quiz->questions ?? []) !!},
                answers: {},
                currentQuestionIndex: 0,
                totalTimeInSeconds: {{ $quiz->questions->sum('default_time') ?? 3600 }},
                timeRemaining: 0,
                timerInterval: null,
                hasShown15MinuteWarning: false,
                quizId: {{ $quiz->id ?? 'null' }}
            };
            window.quizState.timeRemaining = window.quizState.totalTimeInSeconds;
            window.startTimer(window.quizState.totalTimeInSeconds);
            if (window.quizState.questions.length > 0) {
                window.displayQuestion(0);
                window.updateProgressBar();
            } else {
                $("#questionTitle").text("No questions available");
            }
        });

        window.addEventListener('load', function() {
            if (window.performance && window.performance.getEntriesByType("navigation")[0].type === "reload") {
                window.location.href = "{{ route('showAssignedQuizzes') }}";
            }
        });
    </script>
@endpush