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

@section('title', __('Start Exam'))
@section('styles')
<style>
    .progress-bar {
    transition: stroke-dashoffset 1s ease-in-out;
}

</style>
@endsection
@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: 50;" />
                        </svg>
                        <p class="mb-0 progress-text text-center">
                            <span class="def-color value"
                                id="progress-text">{{ $quiz->questions()->sum('degree') }}/{{ number_format($quiz->auth_user_result->degree, 1) }}</span>
                            <span class="remaining small-text">{{ __("website_301.exams.TotalDegree") }}</span>
                            <input type="hidden" id="total_degree" value="{{ $total_degree }}">
                        </p>
                    </div>
                    <div>
                        <h1 class="page-banner-title fs-2 mb-2">
                            {{ $quiz->lesson->title }}
                        </h1>
                        <p class="banner-desc mb-0 fs-4">
                            {{ __("website_301.exams.QuestionNo") }} - ({{ $quiz->questions->count() }}) {{ __("website_301.exams.Question") }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- exam -->
    <section class="results-section exam-section sec-padding bg-grey wow fadeInUp">
        <div class="container">
            <div class="exam-box">
                @foreach ($results as $question)
                    <div class="question mb-46">
                        <h4 class="fw-600 dark-color mb-46">{{ $loop->iteration }}-{{ $question->quiz_question->title }}
                        </h4>

                        <div class="question-check mb-3">
                            <label class="check-container dark-color" for="question_a_{{ $question->id }}">
                                {{ $question->quiz_question->type == 'choose' ? $question->quiz_question->a : __("website_301.exams.True") }}
                                <input class="form-check-input" type="radio"  disabled @checked($question->user_answer == 'a')
                                    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->quiz_question->type == 'choose' ? $question->quiz_question->b : __("website_301.exams.False") }}
                                <input class="form-check-input" type="radio" disabled @checked($question->user_answer == 'b')
                                    name="question_{{ $question->id }}" value="b"
                                    id="question_b_{{ $question->id }}">
                                <span class="radiobtn"></span>
                            </label>
                        </div>


                        @if ($question->quiz_question->type == 'choose')
                            <div class="question-check mb-3">
                                <label class="check-container dark-color" for="question_c_{{ $question->id }}">
                                    {{ $question->quiz_question->type == 'choose' ? $question->quiz_question->c : __("website_301.exams.False") }}
                                    <input class="form-check-input" type="radio" disabled @checked($question->user_answer == 'c')
                                        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->quiz_question->type == 'choose' ? $question->quiz_question->d : __("website_301.exams.False") }}
                                    <input class="form-check-input" type="radio" disabled @checked($question->user_answer == 'd')
                                        name="question_{{ $question->id }}" value="d"
                                        id="question_d_{{ $question->id }}">
                                    <span class="radiobtn"></span>
                                </label>
                            </div>
                        @endif



                        @if ($question->is_correct)
                            <div class="answer correct">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle opacity="0.4" cx="12" cy="12" r="10"
                                        transform="rotate(180 12 12)" fill="#17A200" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M22.5018 2.44254C22.8096 2.71963 22.8346 3.19385 22.5575 3.50173L13.8199 13.0991C12.8454 14.1819 11.1955 14.3168 10.0579 13.4068L6.53151 10.5857C6.20806 10.3269 6.15562 9.85493 6.41438 9.53149C6.67313 9.20804 7.1451 9.1556 7.46855 9.41436L10.995 12.2355C11.512 12.6492 12.262 12.5878 12.705 12.0956L21.4426 2.49828C21.7197 2.1904 22.1939 2.16544 22.5018 2.44254Z"
                                        fill="#17A200" />
                                </svg>
                                {{ __("website_301.exams.CorrectAnswer") }}
                            </div>
                        @else
                            <div class="answer wrong">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.4"
                                        d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
                                        fill="#C32727" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8.64142 8.64106C8.93431 8.34816 9.40918 8.34816 9.70208 8.64106L12.0001 10.9391L14.2982 8.64106C14.591 8.34816 15.0659 8.34816 15.3588 8.64106C15.6517 8.93395 15.6517 9.40882 15.3588 9.70172L13.0608 11.9998L15.3589 14.2979C15.6518 14.5908 15.6518 15.0657 15.3589 15.3586C15.066 15.6515 14.5912 15.6515 14.2983 15.3586L12.0001 13.0604L9.70196 15.3586C9.40907 15.6515 8.93419 15.6515 8.6413 15.3586C8.34841 15.0657 8.34841 14.5908 8.6413 14.2979L10.9395 11.9998L8.64142 9.70172C8.34852 9.40882 8.34852 8.93395 8.64142 8.64106Z"
                                        fill="#C32727" />
                                </svg>
                                {{ __("website_301.exams.WrongAnswer") }}
                            </div>
                        @endif
                    </div>
                @endforeach


                <div class="text-center pt-5">
                    <a href="{{ route('course-details.show', $quiz->lesson->unit->course_id) }}" class="btn main-btn">{{ __("website_301.exams.GoBack") }}</a>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            // Get total exam degree and user's degree from the hidden input and the displayed value
            var totalDegree = parseFloat($('#total_degree').val()); // Total possible degree
            var userDegree = parseFloat(
            '{{ number_format($quiz->auth_user_result->degree, 1) }}'); // User's actual degree

            // Calculate the percentage of completion
            var percentage = (userDegree / totalDegree) * 100;

            // Get the SVG progress bar element
            var progressBar = $('.progress-bar');

            // Define maximum stroke dasharray and calculate stroke-dashoffset based on the percentage
            var maxStrokeDashArray = 345; // Maximum value for stroke-dasharray
            var strokeDashOffset = maxStrokeDashArray - (percentage / 100 * maxStrokeDashArray);

            // Update the stroke-dashoffset to reflect the percentage completion
            progressBar.css('stroke-dashoffset', strokeDashOffset);

            // Optionally, update the displayed progress text if needed
            $('#progress-text').text(totalDegree + '/' + userDegree);
        });
    </script>
@endsection