@extends('website.layout.master')
@section('title', 'الرئيسية')
@section('content')

    <div class="container">
        <div class="header">
            <h3>Demo</h3>
            <ul>
                <li><a href="{{url('/')}}">Home </a></li>
                <li>/</li>


                <li> Question </li>
            </ul>
        </div>
    </div>
    </header>
  <!--  -->
  <div class="body-content">
    <div class="container">

      <div class="row mb-5  justify-content-center">

        <div class="col-12">
          <div class="form-content">
            <div class="co-q-hed">
              <div class="cq-img">
                <img src="{{\App\Models\Category::find($question['category_id'])->image}}" width="50" alt="">
                <div class="">
                  <h6>{{\App\Models\Category::find($question['category_id'])->name}}</h6>
                  <span>{{\App\Models\Category::find($question['category_id'])->slug}}</span>
                </div>
              </div>
              <div class="cq-time">
                <h6>Questions:{{$question_number}}</h6>
                <span>00:39</span>
              </div>
            </div>
            <div class="vido-img">
              <img class="img-fluid" src="{{$question['image']}}" alt="">
            </div>
            <div class="vid-inf">
                {!! $question['description_image'] !!}
              <h6 class="question_name">{{$question['question']}}?</h6>
            </div>
            <hr>

            <ul class="list-ans list-ans2">

                @foreach(\App\Models\Answer::where('question_id',$question['id'])->get() as $answer)
                    @if(session()->has('question_'.$question['id']) && session('question_'.$question['id']) == $answer->id)

                        @if(\App\Models\Answer::find(session()->get('question_'.$question['id']))->is_correct == 1)
                            <li class="answer correct" data-question = "{{$question['id']}}" data-answer="{{$answer->id}}">
                                {{$answer->title}}
                            </li>
                        @else

                            <li class="answer worng" data-question = "{{$question['id']}}" data-answer="{{$answer->id}}">
                                {{$answer->title}}
                            </li>
                        @endif
                    @else

                        <li class="answer" data-question = "{{$question['id']}}" data-answer="{{$answer->id}}">
                            {{$answer->title}}
                        </li>
                    @endif
                @endforeach

            </ul>
            <div class="vid-inf item-hide">
              <h6>answer</h6>
              <p></p>
                {!! $question['long_answer'] !!}
            </div>

            <div class="button-footer">
              <div class="bf-l">
                <div class="try-it">
                  <a href="{{url('demo-question/'.$prev)}}" class="try-free">Previous  </a>
                  <a href="" class="try-dengr" data-toggle="modal" data-target="#exampleModal1">  End session</a>
                </div>
              </div>
              <div class="bf-r">
                <div class="try-it">
                  <a href="" class="try-worng see-an">See answer  </a>
                  <!-- <a href="" class="try-worng disabled">See answer  </a> -->
                  <a href="{{url('demo-question/'.$next)}}" class="try-right">   Next</a>
                </div>
              </div>
            </div>
          </div>
        </div>



      </div>
    </div>

      <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
           aria-hidden="true">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header d-none">
                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      <div class="content-end">
                          <img src="{{asset('web')}}/img/end-co.svg" alt="">
                          <h6>Ending revision Session</h6>
                          <p>This will end your current session and show your results. Do you wish to continue?</p>

                          <div class="try-it">
                              <a href="{{url('demo-questions-revision-session')}}" class="try-right">   Confirm</a>
                              <a href="" class=" ">Cancel   </a>
                          </div>
                      </div>
                  </div>

              </div>
          </div>

      </div>




  @stop

@push('script')
    <script>
        $(document).ready(function () {
            $('.answer').click(function (e) {
                e.preventDefault();
                var answer = $(this).data('answer');
                var question = $(this).data('question');
                console.log(question);
                $.ajax({
                    url: "{{url('saveDemoAnswer')}}",
                    dataType: "json",
                    type: "Post",
                    async: true,
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'answer': answer,
                        'question': question,
                    },
                    success: function (data) {
                        console.log(data);
                        if(data.className == 'correct'){
                            $('.answer').removeClass('correct');
                            $('.answer').removeClass('worng');
                            $('.answer[data-answer="'+data.answer+'"]').addClass('correct');

                        }else{
                            $('.answer').removeClass('correct');
                            $('.answer').removeClass('worng');
                            $('.answer[data-answer="'+data.answer+'"]').addClass('worng');
                        }





                    }
                });

            })
        })
    </script>


@endpush