@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 class="section_head text-center">
                <h2>{{__('electronicTests.answers')}}</h2>
            </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>
    <!--Start quiz-sec -->
    <section class="quiz-sec faq-sec section-padding">
        <div class="container">
            <div class="quiz-heading">
                <div class="text-content">
                    <h4>التأكد من الاجابات</h4>
                </div>
                <h6 class="quiz-result">{{count($userElectronicTest['answers'])}}/<span>{{count($userElectronicTest->questions)}}</span></h6>
            </div>
            <div class="quiz-body">
                @if(count($electronicTestQuestions))
                    @foreach($electronicTestQuestions as $testKey => $electronicTestQuestion)
                        @if(($electronicTestQuestion['answers']['right_answer'] == $userElectronicTest['answers'][$testKey]) &&
                        $electronicTestQuestion->id == $userElectronicTest['questions'][$testKey])
                            <div class="items_white mt-5">
                                <div class="faq_card border-0">
                                    <div class="card_head ">
                                        <h6> <span class="icon"></span>{{__('main.question').$loop->iteration}}</h6>
                                        <span class="num dir-l"> {{ $loop->iteration . '/' . count($userElectronicTest->questions) }}</span>

                                    </div>
                                    <div class="card_body show">
                                        @if($electronicTestQuestion->type == 'question_with_image')
                                            <img class="question-img" src="{{asset($electronicTestQuestion->question)}}" alt="">
                                            @else
                                            <h6 class="question">{{$electronicTestQuestion->question}}</h6>
                                        @endif
                                        <h5 class="correct">إجابتك صحيحه</h5>
                                        <div class="mcq">
                                            @foreach($electronicTestQuestion['answers']['answers'] as $key => $answer)
                                                @if(($userElectronicTest['answers'][$testKey] == $electronicTestQuestion['answers']['right_answer']) &&
                                                 ($userElectronicTest['answers'][$testKey] == ($key+1)))
                                                    <div class="custom-control custom-radio correct-answer">
                                                        <input disabled type="radio" id="customRadio_{{$testKey . '_' . $key}}" name="answer_{{$testKey . '_' . $key}}" class="custom-control-input" checked>
                                                        <label class="custom-control-label" for="customRadio_{{$testKey . '_' . $key}}">{{$answer}}</label>
                                                    </div>
                                                @else
                                                    <div class="custom-control custom-radio">
                                                        <input disabled type="radio" id="customRadio_{{$testKey . '_' . $key}}" name="answer_{{$testKey . '_' . $key}}" class="custom-control-input">
                                                        <label class="custom-control-label" for="customRadio_{{$testKey . '_' . $key}}">{{$answer}}</label>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                        <div class="butns mt-4 p-0">
                                            <button data-solve=".solve_way_{{$electronicTestQuestion->id}}" type="button" class="butn sub_back solve_modal_button" data-toggle="modal" data-target="#answer_explain_modal"><span>التأكد من الاجابه</span></button>
                                                <div class="d-none solve_way_{{$electronicTestQuestion->id}}">
                                                    <h5>طريقة الحل</h5>
                                                    @if($electronicTestQuestion->question_solve_image)
                                                    <div class="img">
                                                        <img src="{{asset($electronicTestQuestion->question_solve_image)}}" alt="">
                                                    </div>
                                                    @else
                                                        <iframe style="height: 400px; width: 100%" src="{{$electronicTestQuestion->question_solve_video}}" frameborder="0"></iframe>
{{--                                                    <video class="video-content" controls><source src="{{$electronicTestQuestion->question_solve_video}}"></video>--}}
                                                    @endif
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @else
                            <div class="items_white mt-5">
                                <div class="faq_card 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($userElectronicTest->questions) }}</span>
                                    </div>
                                    <div class="card_body show">
                                        @if($electronicTestQuestion->type == 'question_with_image')
                                            <img class="question-img" src="{{asset($electronicTestQuestion->question)}}" alt="">
                                        @else
                                            <h6 class="question">{{$electronicTestQuestion->question}}</h6>
                                        @endif
                                        <div class="mcq">
                                            <h5 class="wrong">إجابتك خاطئه</h5>

                                            @foreach($electronicTestQuestion['answers']['answers'] as $key => $answer)
                                                @if($electronicTestQuestion['answers']['right_answer'] == ($key+1))
                                                    <div class="custom-control custom-radio corrected-answer">
                                                        <input disabled type="radio" id="customRadio_{{$testKey . '_' . $key}}" name="answer_{{$testKey . '_' . $key}}" class="custom-control-input">
                                                        <label class="custom-control-label" for="customRadio_{{$testKey . '_' . $key}}">{{$answer}}</label>
                                                    </div>
                                                @else
                                                    @if($userElectronicTest['answers'][$testKey] == 'null')
                                                        <div class="custom-control custom-radio">
                                                            <input disabled type="radio" id="customRadio_{{$testKey . '_' . $key}}" name="answer_{{$testKey . '_' . $key}}" class="custom-control-input">
                                                            <label class="custom-control-label" for="customRadio_{{$testKey . '_' . $key}}">{{$answer}}</label>
                                                        </div>
                                                        @else
                                                            @if($userElectronicTest['answers'][$testKey] == ($key+1))
                                                            <div class="custom-control custom-radio wrong-answer">
                                                                <input disabled type="radio" id="customRadio_{{$testKey . '_' . $key}}" name="answer_{{$testKey . '_' . $key}}" class="custom-control-input" checked>
                                                                <label class="custom-control-label" for="customRadio_{{$testKey . '_' . $key}}">{{$answer}}</label>
                                                            </div>
                                                                @else
                                                            <div class="custom-control custom-radio wrong-answer">
                                                                <input disabled type="radio" id="customRadio_{{$testKey . '_' . $key}}" name="answer_{{$testKey . '_' . $key}}" class="custom-control-input">
                                                                <label class="custom-control-label" for="customRadio_{{$testKey . '_' . $key}}">{{$answer}}</label>
                                                            </div>
                                                            @endif
                                                    @endif
                                                @endif
                                            @endforeach

                                        </div>
                                            <div class="butns mt-4 p-0">
                                                <button data-solve=".solve_way_{{$electronicTestQuestion->id}}" type="button" class="butn sub_back solve_modal_button" data-toggle="modal" data-target="#answer_explain_modal"><span>التأكد من الاجابه</span></button>
                                                <div class="d-none solve_way_{{$electronicTestQuestion->id}}">
                                                    <h5>طريقة الحل</h5>
                                                    @if($electronicTestQuestion->question_solve_image)
                                                        <div class="img">
                                                            <img src="{{asset($electronicTestQuestion->question_solve_image)}}" alt="">
                                                        </div>
                                                    @else
                                                        <iframe style="height: 400px; width: 100%" src="{{$electronicTestQuestion->question_solve_video}}" frameborder="0"></iframe>
{{--                                                        <video class="video-content" controls><source src="{{$electronicTestQuestion->question_solve_video}}"></video>--}}
                                                    @endif
                                                </div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <div class="modal fade answer_explain_modal" id="answer_explain_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="answer_explain_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="answer_explain_content"></div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('inner_js')
    <script src="{{asset('assets/web/js/electronic_tests.test_result.js')}}"></script>
@endsection