@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title])

    <div class="container mt-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{{ $exam->exam_title }}</h4>
                <div class="d-flex">
                    <h6 class="me-3">{{ $question_bank->subject->subject_name }}</h6>
                    <h6 class="me-2"><strong>/</strong></h6>
                    <h6>Duration {{ $exam->duration }}</h6>
                </div>
            </div>
            <div class="text-center">
                <h4>Exam ends in <span id="timer"></span></h4>
            </div>
            <div class="card-body">
                <form id="exam-form" action="{{ route('lms_student_exam_submit') }}" method="POST">
                    @csrf
                    <input type="hidden" name="staff_subject_assoc_sid" value="{{ $exam->cms_subject_sid }}">
                    <input type="hidden" name="cms_exam_sid" value="{{ $exam->cms_exams_sid }}">
                    <input type="hidden" name="cms_question_bank_sid" value="{{ $exam->cms_question_bank_sid }}">
                    <input type="hidden" name="passing_score" value="{{ $exam->passing_score }}">
                    @foreach ($questions as $question)
                        <div class="question-item mb-4 row p-2 d-flex justify-content-between">
                            <div class="col-md-10">
                                <strong style="white-space: normal; display: inline-block;">{{ $loop->iteration }}.
                                    {{ $question->question }}</strong>
                                <input type="hidden" name="actual_question_{{ $question->cms_question_bank_details_sid }}"
                                    value="{{ $question->cms_question_bank_details_sid }}">
                                <input type="hidden"
                                    name="question_bank_detail_sid_{{ $question->cms_question_bank_details_sid }}"
                                    value="{{ $question->cms_question_bank_details_sid }}">
                            </div>
                            <div class="col-md-2">
                                (<strong>Marks:</strong> {{ $question->default_mark ?? 'N/A' }})
                            </div>
                        </div>

                        @if ($question->question_type === 'M')
                            <!-- Multiple Choice Question -->

                            <div class="row px-2">
                                <div class="col-3">
                                    <ul class="list-unstyled p-0">
                                        <li class="d-flex align-items-center">
                                            <input type="hidden" name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="null#M">
                                            <input type="radio" name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="1#M" id="option_1_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2">
                                            <label for="option_1_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">
                                                {{ $question->option_1 }}</label>
                                        </li>
                                        <br>
                                        <li class="d-flex align-items-center">
                                            <input type="radio" name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="3#M" id="option_3_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2">
                                            <label for="option_3_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">
                                                {{ $question->option_3 }}</label>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-3">
                                    <ul class="list-unstyled p-0">
                                        <li class="d-flex align-items-center">
                                            <input type="radio" name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="2#M" id="option_2_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2">
                                            <label for="option_2_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">
                                                {{ $question->option_2 }}</label>
                                        </li>
                                        <br>
                                        <li class="d-flex align-items-center">
                                            <input type="radio" name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="4#M" id="option_4_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2">
                                            <label for="option_4_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">
                                                {{ $question->option_4 }}</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @elseif ($question->question_type === 'W')
                            <!-- Written Question -->
                            <textarea name="question_{{ $question->cms_question_bank_details_sid }}" rows="4"
                                class="form-control mt-2" placeholder="Write your answer here"></textarea>
                        @endif
                    @endforeach

                    <button type="submit" class="btn btn-primary mt-4">Submit</button>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        let durationString = "{{ $exam->duration }}";
        let [hours, minutes, seconds] = durationString.split(":").map(num => parseInt(num));
        if (isNaN(hours)) {
            hours = 0;
        }
        let examDuration = (hours * 3600) + (minutes * 60) + seconds;
        let timerDisplay = document.getElementById('timer');
        let form = document.getElementById('exam-form');
        let displayedMessage = false;

        function startTimer() {
            let timeRemaining = examDuration;
            let timerInterval = setInterval(function () {
                let hours = Math.floor(timeRemaining / 3600);
                let minutes = Math.floor((timeRemaining % 3600) / 60);
                let seconds = timeRemaining % 60;

                // Display the remaining time in HH:MM:SS format
                timerDisplay.innerHTML =
                    `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;

                // Display SweetAlert when less than 1 minute is remaining
                if (timeRemaining <= 60 && timeRemaining > 0 && !displayedMessage) {

                    displayedMessage = true;
                    Swal.fire({
                        icon: 'warning',
                        title: 'Exam ends in 1 minute!',
                        toast: true,
                        position: 'top-end',
                        timer: 5000,
                        timerProgressBar: true,
                        showConfirmButton: false
                    });
                }

                // Once the timer runs out
                if (timeRemaining <= 0) {
                    clearInterval(timerInterval);
                    timerDisplay.innerHTML = "Time's up!";
                    form.submit();
                }

                timeRemaining--;
            }, 1000);
        }

        window.onload = function () {
            startTimer();
        };
    </script>
@endpush