@extends('layouts.app')

@section('content')
    <div id="container">
        <div>
            <div class="row">
                <div class="col-sm-12">
                    <div id="examInfo">
                        <div id="examOptions">
                            <div class="text-center" id="sessionArea">
                                @forelse ($exams as $exam)
                                    <div class="">
                                        <a class="text-decoration-none load-exam" data-exam-id="{{ $exam->id }}">
                                            <div class="input-button fw-bold fs-5 btn btn-primary">
                                                {{ $exam->title }}
                                                <span>({{ count($exam->questions) }} Questions)</span>
                                            </div>
                                        </a>
                                        <br />
                                    </div>
                                @empty
                                    <p class="">No Exams available at this time.</p>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12"></div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {
            $('.load-exam').on('click', function(e) {
                e.preventDefault();
                const examId = $(this).data('exam-id');

                $.ajax({
                    url: '{{ route('user.exam', ['id' => ':id']) }}'.replace(':id', examId),
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        loadExamContent(response, examId);
                    },
                    error: function(xhr) {
                        toastr.error('Failed to load the exam. Please try again.', xhr);
                                            }
                });
            });

            function loadExamContent(examData, examId) {
                const examTitle = examData.title || 'Untitled Assessment';
                const examHtml = `
                    <div class="row">
                        <div id="welcomeHeader" class="fw-bold fs-5">Welcome to your ${examTitle} Exam</div>
                        <div id="startText" class="my-1">Please select the Start Exam button below to begin</div>
                        <div id="btns"><button class="input-button start-exam btn btn-primary" data-exam-id="${examId}">Start Exam</button></div>
                    </div>
                `;

                $('#container').removeClass('exam-container').html(examHtml).addClass('exam-container');


                $('.start-exam').on('click', function(e) {
                    e.preventDefault();
                    const examId = $(this).data('exam-id');

                    $.ajax({
                        url: '{{ route('user.start-exam') }}',
                        type: 'POST',
                        data: {
                            examId: examId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                window.location.href =
                                    '{{ route('user.questions', ['examId' => ':id']) }}'
                                    .replace(':id', examId);
                            } else {
                                toastr.error('Exam start failed. Please try again.');
                            }
                        },
                        error: function(xhr) {
                            toastr.error('Failed to start the exam. Please try again.');
                        }
                    });
                });

            }
        });
    </script>
@endpush