@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']))
                        @if(session('question_'.$question['id'])['correct'] == $answer->id)
                            <label for="t1" id="t{{$answer->id}}" class="correct">
                                <input type="radio"  name="answer" value="{{$answer->id}}" >
                                {{$answer->title}}
                            </label>
                        @elseif(session('question_'.$question['id'])['worng'] == $answer->id)
                            <label for="t1" id="t{{$answer->id}}" class="worng">
                                <input type="radio"  name="answer" value="{{$answer->id}}" >
                                {{$answer->title}}
                            </label>
                        @else
                            <label for="t1" id="t{{$answer->id}}">
                                <input type="radio"  name="answer" value="{{$answer->id}}" >
                                {{$answer->title}}
                            </label>


                        @endif

                    @else
                            <label for="t1" id="t{{$answer->id}}">
                                <input type="radio"  name="answer" value="{{$answer->id}}" >
                                {{$answer->title}}
                            </label>
                    @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" data-question = "{{$question['id']}}" id="click_answer">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 () {
            $('#click_answer').click(function (e) {
                e.preventDefault();

                var answer = $('input[name="answer"]:checked').val();
                var question = $(this).data('question');

                $.ajax({
                    url: "{{url('saveDemoAnswer')}}",
                    dataType: "json",
                    type: "Post",
                    async: true,
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'answer': answer,
                        'question': question,
                    },
                    success: function (data) {

                            $("#t"+data.correct).addClass('correct');
                            $("#t"+data.worng).addClass('worng');

                        // if($('input[name="answer"]').val() == data.worng) {
                        //     $($this).addClass('worng');
                        // }
                            // $('.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