@extends('main-site.partials.app')

@section('title', __('Start Exam'))

@section('content')
    <!-- Page Banner -->
    <div class="page-banner" style="background-image: url({{ asset('main-site/assets/img/course-banner.jpg') }});">
        <div class="container position-relative">
            <div class="banner-content">
                <div class="d-flex align-items-center flex-wrap gap-3">
                    <div class="progress-container">
                        <svg class="progress-circle" width="130" height="130">
                            <circle class="progress-background" cx="65" cy="65" r="55" />
                            <circle class="progress-bar" cx="65" cy="65" r="55" stroke-dasharray="345"
                                style="stroke-dashoffset: 100;" />
                        </svg>
                        <p class="mb-0 progress-text text-center">
                            <span class="def-color value" id="progress-text">{{ $time_remaining }}</span>
                            <span class="remaining small-text">{{ __("website_301.exams.Remain") }}</span>
                        </p>
                    </div>
                    <div>
                        <h1 class="page-banner-title fs-2 mb-2">
                            {{ $exam->lesson->title }}
                        </h1>
                        <p class="banner-desc mb-0 fs-4">
                            {{ __("website_301.exams.QuestionNo") }} - ({{ $exam->questions->count() }}) {{ __("website_301.exams.Question") }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- exam -->
    <section class="exam-section sec-padding bg-grey wow fadeInUp">
        <div class="container">
            <form class="exam-box" action="{{ route('course-details.exams.correction', $exam->id) }}" method="POST">
                @csrf
                @foreach ($exam->questions as $question)
                    <div class="question mb-46">
                        <h4 class="fw-600 dark-color mb-46">{{ $loop->iteration }}-{{ $question->title }}</h4>


                        <div class="question-check mb-3">
                            <label class="check-container dark-color" for="question_a_{{ $question->id }}">
                                {{ $question->type == 'choose' ? $question->a :  __("website_301.exams.True") }}
                                <input class="form-check-input" type="radio" name="question_{{ $question->id }}"
                                    value="a" id="question_a_{{ $question->id }}">
                                <span class="radiobtn"></span>
                            </label>
                        </div>


                        <div class="question-check mb-3">
                            <label class="check-container dark-color" for="question_b_{{ $question->id }}">
                                {{ $question->type == 'choose' ? $question->b : __("website_301.exams.False") }}
                                <input class="form-check-input" type="radio" name="question_{{ $question->id }}"
                                    value="b" id="question_b_{{ $question->id }}">
                                <span class="radiobtn"></span>
                            </label>
                        </div>


                        @if ($question->type == 'choose')
                            <div class="question-check mb-3">
                                <label class="check-container dark-color" for="question_c_{{ $question->id }}">
                                    {{ $question->type == 'choose' ? $question->c : __("website_301.exams.False") }}
                                    <input class="form-check-input" type="radio" name="question_{{ $question->id }}"
                                        value="c" id="question_c_{{ $question->id }}">
                                    <span class="radiobtn"></span>
                                </label>
                            </div>

                            <div class="question-check mb-3">
                                <label class="check-container dark-color" for="question_d_{{ $question->id }}">
                                    {{ $question->type == 'choose' ? $question->d : __("website_301.exams.False") }}
                                    <input class="form-check-input" type="radio" name="question_{{ $question->id }}"
                                        value="d" id="question_d_{{ $question->id }}">
                                    <span class="radiobtn"></span>
                                </label>
                            </div>
                        @endif
                    </div>
                @endforeach


                <div class="text-center pt-5">
                    <button type="submit" class="main-btn" data-bs-toggle="modal" data-bs-target="#confirmAnswers">{{ __("website_301.exams.Submit") }}</button>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {


          //  const desiredPercentage = 10;
            function updateProgress(value) {
                const progressText = document.getElementById('progress-text');
                const progressBar = document.querySelector('.progress-bar');

                // Define your desired percentage here



                const totalLength = 345; // Total length of the circle
                const offset = totalLength * (1 - value / 100);
                progressBar.style.strokeDashoffset = offset;
                //progressText.textContent = `${value}`;
            }

            // Initialize display with the desired percentage
            // updateProgress(desiredPercentage);




            var timeRemaining = parseInt($('#progress-text').text());

            // var progressBar = $('.progress-bar');

            var maxStrokeDashArray = 345;
            var examDuration = timeRemaining;
            var strokeStep = maxStrokeDashArray / examDuration;

            // Function to format time as MM:SS
            function formatTime(seconds) {
                var minutes = Math.floor(seconds / 60);
                var seconds = seconds % 60;
                return minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
            }

            // Update the displayed time initially
            $('#progress-text').text(formatTime(timeRemaining));

            // Start the countdown
            var countdown = setInterval(function() {
                // Decrease time by 1 second
                timeRemaining--;

                // Update the displayed time in MM:SS format
                $('#progress-text').text(formatTime(timeRemaining));


                // Update the progress bar
                // var newDashOffset = maxStrokeDashArray - (strokeStep * (examDuration - timeRemaining));
                // progressBar.css('stroke-dashoffset', newDashOffset);

                // If time is up, stop the countdown and display a message
                if (timeRemaining <= 0) {
                    clearInterval(countdown);
                    $('#progress-text').text('Time is up!');
                    // Optional: Trigger an action when time is up, such as submitting the exam
                    $(".exam-box").append(`<input type='hidden' value='1' name='end_time'>`)
                    $('.exam-box').submit();

                    localStorage.removeItem('studentAnswers');

                }



                // start  progress bar

                exam_duration_total = + "{{ $exam->time }}";
                exam_duration_total = exam_duration_total * 60;
                prec_progress = (timeRemaining / exam_duration_total) * 100;
                updateProgress(prec_progress)
                // end  progress bar


            }, 1000); // 1000 milliseconds = 1 second
        });
    </script>

    <script>
        $(document).ready(function() {











            // استرجاع الإجابات المخزنة من Local Storage
            var storedAnswers = JSON.parse(localStorage.getItem('studentAnswers')) || {};

            // تعيين الإجابات المحفوظة عند تحميل الصفحة
            $('input[type="radio"]').each(function() {
                var questionName = $(this).attr('name');
                var selectedAnswer = storedAnswers[questionName];

                if (selectedAnswer && $(this).val() === selectedAnswer) {
                    $(this).prop('checked', true);
                }
            });

            // حفظ الإجابات عند تغييرها
            $('input[type="radio"]').on('change', function() {
                var questionName = $(this).attr('name'); // اسم السؤال (مثلاً question_1)
                var selectedAnswer = $(this).val(); // الإجابة المختارة (a, b, c, d)

                // حفظ الإجابة في Local Storage
                storedAnswers[questionName] = selectedAnswer;
                localStorage.setItem('studentAnswers', JSON.stringify(storedAnswers));
            });



            $('#submit-exam').on('click', function() {
                // حذف الإجابات من Local Storage عند إتمام الامتحان
                localStorage.removeItem('studentAnswers');
            });
        });
    </script>
@endsection