@extends('web.layouts.container')

@section('content')
    <section class="page_header">
        <div class="container">
            <div class="content">
                <ul class="links">
                    <li class="li_link">
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a>
                    </li>
                    <li class="li_link">
                        <span>{{$title}}</span>
                    </li>
                </ul>

            </div>
        </div>
        <img src="{{asset('assets/web/images/heading-pattern-l.png')}}" class="pattern-l">
        <img src="{{asset('assets/web/images/heading-pattern-r.png')}}" class="pattern-r">

    </section>

    <section class="quiz-sec faq-sec section-padding">
        <div class="container">
            <div class="quiz-heading">
                <div class="text-content">
                    <h4>الاختبار</h4>
                    <p>بناء علي ماتعلمته من فضلك أجب عن الأسئلة التالية</p>
                    <h6>مدة الاختبار <span class="timer dir-l"><span id="countdown">{{$test->test_time}}</span></span>
                    </h6>
                </div>
                <button class="end-exam end_exam_button" data-toggle="modal" data-target="#qestions_warning_modal"><i class="fas fa-power-off"></i> إنهاء الاختبار </button>
            </div>
            <div class="quiz-body">
                <div class="questions-wrapper ">
                    <ul class="nav nav-tabs">
                        @if(count($questions))
                            @for($i = 0 ; $i < count($questions); $i++)
                                <li>
                                    <a href="#tab_{{($i+1)}}" data-toggle="tab"></a>
                                </li>
                            @endfor
                        @endif

                    </ul>
                    <div class="tab-content">
                        @if(count($questions))
                            @foreach($questions as $question)
                                <div class="tab-pane" id="tab_{{$loop->iteration}}">
                                    <div class="items_white">
                                        <div class="faq_card mt-5 border-0">
                                            <div class="card_head active">
                                                <h6> <span class="icon"></span>{{__('main.question').$loop->iteration}}</h6>
                                                <span class="num dir-l">{{$loop->iteration .'/'. count($questions)}}</span>
                                            </div>
                                            <div class="card_body show">
                                                @if($question->type == 'question_with_image')
                                                    <img class="question-img" src="{{asset($question->question)}}" alt="">
                                                    @else
                                                    <h6 class="question">{{$question->question}}</h6>
                                                @endif
                                                <div class="mcq answers_container" data-question="{{$question->id}}">
                                                    @foreach($question->answers['answers'] as $key => $answer)
                                                        <div class="custom-control custom-radio">
                                                            <input data-question="{{$question->id}}" value="{{($key+1)}}" type="radio" id="answer_{{$question->id.'_'.$key}}" name="answer_{{$question->id}}" class="custom-control-input">
                                                            <label class="custom-control-label" for="answer_{{$question->id.'_'.$key}}">{{$answer}}</label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Nvigation buttons--}}
                                        <div class="butns">
                                            <button class="butn subb {{$loop->iteration == 1 ? 'disabled' : 'btnPrevious'}}" {{$loop->iteration == 1 ? 'disabled' : ''}}><span>السابق</span></button>
                                        @if($loop->iteration < count($questions))
                                            <button class="butn sub_back btnNext next_button"><span>التالي</span></button>
                                        @else
                                            <button class="butn color exam_result_button" data-toggle="modal" data-target="#end_exam_modal"> <span> <i class="far fa-question-circle"></i> نتيجه الاختبار </span> </button>
                                        @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach()
                        @endif

                    </div>
                </div>
            </div>
            <div class="quiz-reminds mt-5">
                {!! __('electronicTests.important_alerts') !!}
            </div>

        </div>
    </section>


    <div class="modal fade" id="qestions_warning_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="qestions_warning_modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content ">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8 m-auto">
                            <div class="qestions_warning_content">
                                <img src="{{asset('assets/web/images/icons/warning.png')}}" alt="" class="icon">
                                <h5 class="end_test_alert_text">لم يتم إكتمال الاسئله بعد</h5>
                                <p class="end_test_alert_hint">هناك <span class="remaining_questions"></span> أسئلة لم يتم الإجابة عليها هل انت متأكد من إرسال الإجابات؟</p>
                                <button class="submit-btn approve_test_button">إعتماد </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade end_exam_modal" id="end_exam_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="end_exam_modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content ">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8 m-auto">
                            <div class="end_exam_content qestions_warning_content">
                                <img src="{{asset('assets/web/images/icons/warning.png')}}" alt="" class="icon">
                                <h5 class="test_result_alert_text">لا بأس عاود المحاولة</h5>
                                <h6 class="quiz-result"><span class="right_answer_count"></span>/<span class="answer_count">10</span></h6>
                                <p>الوقت المستغرق في حل الإمتحان</p>
                                <span class="timer mt-3 remaining_timer">00:50:30</span>
                                <a href="#" class="submit-btn submit_answers">التأكد من الاجابات </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


@endsection

@section('inner_js')
    <script>
        let electronic_test_id = "{{$test->id}}",
            questionCount = "{{count($questions)}}",
            testTime = "{{$test->test_time}}",
            saveAnswersRoute = "{{route('saveAnswers')}}",
            questions_complete = "{{__('electronicTestQuestions.questions_complete')}}",
            are_you_sure_finish_test = "{{__('electronicTestQuestions.are_you_sure_finish_test')}}",
            questions_not_complete = "{{__('electronicTestQuestions.questions_not_complete')}}",
            try_again = "{{__('electronicTestQuestions.try_again')}}";
    </script>
    <script src="{{asset('assets/web/js/electronic_tests.quiz.js')}}"></script>
@endsection