@extends('layouts.app')

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

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

        window.addEventListener('beforeunload', function(e) {
            if (window.authUserId && window.authUserId !== 'null') {

                const confirmationMessage = 'Refreshing the page will log you out. Are you sure?';
                e.returnValue = confirmationMessage;

                fetch('/user/logout', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    keepalive: true
                }).then(response => {}).catch(error => {
                    toastr.error('Logout error:', error);
                });
            }
        });
    </script>
@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