@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($questions)}}</h6>

            </div>
            <div class="quiz-body">

                @if(count($questions))
                    @foreach($questions as $question)
                        <div class="items_white mt-5">
                            <div class="faq_card border-0">
                                <div class="card_head active">
                                    <h6> <span class="icon"></span> السؤال رقم ({{$loop->iteration}})</h6>
                                    <span class="num dir-l">{{$loop->iteration . '/' . count($questions)}}</span>
                                </div>
                                <div class="card_body show">
                                    <h6 class="question">
                                        @if($question->type == 'question_with_text')
                                            {{$question->question}}
                                        @endif
                                        @if($question->type == 'question_with_image')
                                            <a href="{{asset($question->question)}}" data-fancybox ><img src="{{asset($question->question)}}" alt=""></a>
                                        @endif
                                    </h6>
                                    <div class="mcq">
                                        @if(count($question->answers['answers']))
                                            @foreach($question->answers['answers'] as $key => $answer)
                                                <div class="custom-control custom-radio {{($key+1) == $question->answers['right_answer'] ? 'corrected-answer' : ''}}">
                                                    <input type="radio" id="customRadio2" name="question1" class="custom-control-input">
                                                    <label class="custom-control-label" for="customRadio2">{{$answer}}</label>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <div class="butns mt-4 p-0">
                                        <button data-solve=".solve_way_{{$question->id}}" type="button" class="butn sub_back answer_explain_button" data-toggle="modal" data-target="#answer_explain_modal"><span>التأكد من الاجابه</span></button>
                                        <div class="solve_way_{{$question->id}} d-none">
                                            <h5>طريقة الحل</h5>
                                            @if($question->question_solve_image)
                                                <div class="img">
                                                    <img src="{{asset($question->question_solve_image)}}" alt="">
                                                </div>
                                            @endif
                                            @if($question->question_solve_video)
                                                <iframe style="height: 400px; width: 100%" src="{{$question->question_solve_video}}" frameborder="0"></iframe>
                                                {{--                                                <video class="video-content" controls><source src="{{$question->question_solve_video}}"></video>--}}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @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>
        $('.answer_explain_button').click(function () {
            $('.answer_explain_modal .answer_explain_content').html($($(this).data('solve')).html())
        });

        $('.answer_explain_modal').on('hidden.bs.modal', function () {
            $('.answer_explain_modal .answer_explain_content').html('');
        });
    </script>
@endsection