@extends('web.layouts.main')
@section('content')

    <main>

        <!-- ---------- test ----------- -->
        <section class="test test_style3">
            <div class="container">
                <form id="form" >
                    @CSRF
                <div class="row justify-content-center" >
                    <div class="col-lg-9">
                        <div class="test_content">
                            @foreach($questions as $key=>$row)
                                <div id="question{{$key}}" @if($key != 0) style="display:none" @endif>
                                    <div class="ques_title">
                                        <h5> {{$row->descriptions()->name}}  </h5>
                                    </div>
                                    <div class="ques_numb"> {{$key+1}} of {{count($questions)}} </div>
                                    <div class="ques_card">
                                        <div class="ques_body">
                                            @foreach($row->answers as $answer)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" question-id="{{$key}}" onclick="nextQuestion(this)" type="radio" id="test{{$row->id}}answer{{$answer->id}}" value="{{$answer->id}}" name="questions[{{$row->id}}][answer]">
                                                    <label class="form-check-label" for="test{{$row->id}}answer{{$answer->id}}"> {{$answer->descriptions()->name}}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <!--<div class="text-center p-5">-->
                            <!--    <a href="#" question-id="0" onclick="nextQuestion(this)" class="butn"> next question </a>-->
                            <!--</div>-->

        
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </section>

    </main>

@push('js')
<script>
    function nextQuestion(elem)
    {
        let question_id = $(elem).attr('question-id');
        let current = '#question'+question_id;
        if(question_id == 4)
        {
            var urls = {!! json_encode(url(getCurrentLocale().'/exam/result/'.$exam->id)) !!};
            let dataform = $('#form').serialize();
            $.ajax
            ({
                url : urls,
                type: 'GET',              
                data: dataform,
                dataType:"json",
                contentType: false, 
                processData: false, 
                success:function(data)
                {
                    window.location.href = data
                }
            })
        }
        let valuedata = $('input[type=radio]:checked', current).val();
        
        if(valuedata)
        {
            // if(question_id == 3)
            // {
            //     $(elem).html('Show Result');
            // }
            let newquestion_id = parseInt(question_id)+1; 
            $(elem).attr('question-id', newquestion_id);
            $('#question'+question_id).fadeOut(400);
            $('#question'+newquestion_id).fadeIn(1000);
        }
    }
</script>
@endpush
@stop