@extends('../student_layout/' . $layout)

@section('subhead')
<title>Atarud MIS - Question</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }
</style>

@section('subcontent')

<div class="grid grid-cols-12 gap-6">
    @php $time = explode(':',$exam->exam_time); @endphp
    <div class="col-span-12 lg:col-span-8 2xl:col-span-9">

        <div class="intro-y box mt-5">
            <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <h2 class="font-medium text-base mr-auto">Exit Exam Questions</h2>
                <h2 class="font-medium text-base mr-auto time">{{$exam->exam_time}}</h2>
            </div>
            <form method="post" action="{{route('student.exitexam.save')}}" id="exam_form">
                @csrf
                @method('post')
                @php $c = 0; @endphp
                @foreach($examQuestionSetting as $row)
                @php
                $q = App\Models\QuestionBank::where('id', $row->question_id)->first();
                $examType = App\Models\ExamType::where('id', $row->exam_type_id)->first();

                $multis = App\Models\QuestionBank::where('type', 'Multi Choice')
                                        ->where('exam_type_id', $row->exam_type_id)
                                        // ->where('section_id', $examSetting->section_id)
                                        ->inRandomOrder()
                                        ->limit($row->multi_choice)
                                        ->get();

                $opens = App\Models\QuestionBank::where('type', 'Open')
                                        ->where('exam_type_id', $row->exam_type_id)
                                        // ->where('section_id', $examSetting->section_id)
                                        ->inRandomOrder()
                                        ->limit($row->open)
                                        ->get();

                $true_false = App\Models\QuestionBank::where('type', 'True or False')
                                        ->where('exam_type_id', $row->exam_type_id)
                                        // ->where('section_id', $examSetting->section_id)
                                        ->inRandomOrder()
                                        ->limit($row->true_false)
                                        ->get();
                @endphp
                <div class="intro-y box col-span-12 2xl:col-span-6">
                    <div class="py-5" id="projects">
                        <div class="font-medium text-lg text-center">{{ $examType != null ? $examType->name : '' }}</div>
                        <div class="px-5">
                    @foreach($multis as $m)
                             @php ++$c; @endphp
                             <div class="box p-5 mt-5">
                                <div class="flex">
                                    <div class="mr-auto font-medium text-lg">{{ $m->question }}</div>
                                </div>
                                <div class="flex mt-4">
                                    <div class="mr-auto">
                                            <input type="hidden" name="question{{$c}}" value="{{$m->id}}" style="margin-top: 10px;">
                                        @if($m->file != null)
                                        <audio controls>
                                            <source src="{{asset('question_bank/'.$m->file)}}" type="audio/mpeg">
                                        </audio>
                                        @endif

                                    </div>
                                </div>
                                <div class="flex mt-4 pt-4 border-t border-slate-200/60 dark:border-darkmode-400">
                                    <div class="mr-auto font-medium text-base">
                                        <div class="flex flex-col sm:flex-row mt-2">
                                            <div class="form-check mr-2">
                                                <input id="answer{{$c}}" class="form-check-input" type="radio"
                                                    name="answer{{$c}}" value="{{$m->choice_a}}">
                                                <label class="form-check-label" for="answer{{$c}}">{{$m->choice_a}}</label>
                                            </div>
                                            <div class="form-check mr-2 mt-2 sm:mt-0">
                                                <input id="answer{{$c}}" class="form-check-input" type="radio"
                                                    name="answer{{$c}}" value="{{$m->choice_b}}">
                                                <label class="form-check-label" for="answer{{$c}}">{{$m->choice_b}}</label>
                                            </div>
                                            <div class="form-check mr-2 mt-2 sm:mt-0">
                                                <input id="answer{{$c}}" class="form-check-input" type="radio"
                                                    name="answer{{$c}}" value="{{$m->choice_c}}">
                                                <label class="form-check-label" for="answer{{$c}}">{{$m->choice_c}}</label>
                                            </div>
                                            <div class="form-check mr-2 mt-2 sm:mt-0">
                                                <input id="answer{{$c}}" class="form-check-input" type="radio"
                                                    name="answer{{$c}}" value="{{$m->choice_d}}">
                                                <label class="form-check-label" for="answer{{$c}}">{{$m->choice_d}}</label>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            @endforeach

                            @foreach($true_false as $t)
                            @php ++$c; @endphp
                            <div class="box p-5 mt-5">
                               <div class="flex">
                                   <div class="mr-auto font-medium text-lg">{{ $t->question }}</div>
                               </div>
                               <div class="flex mt-4">
                                   <div class="mr-auto">
                                    <input type="hidden" name="question{{$c}}" value="{{$t->id}}">
                                       @if($t->file != null)
                                       <audio controls>
                                           <source src="{{asset('question_bank/'.$t->file)}}" type="audio/mpeg">
                                       </audio>
                                       @endif

                                   </div>
                               </div>
                               <div class="flex mt-4 pt-4 border-t border-slate-200/60 dark:border-darkmode-400">
                                   <div class="mr-auto font-medium text-base">
                                    <div class="flex flex-col sm:flex-row mt-2">
                                        <div class="form-check mr-2">
                                            <input id="answer{{$c}}" class="form-check-input" type="radio"
                                                name="answer{{$c}}" value="True">
                                            <label class="form-check-label" for="answer{{$c}}">True</label>
                                        </div>
                                        <div class="form-check mr-2 mt-2 sm:mt-0">
                                            <input id="answer{{$c}}" class="form-check-input" type="radio"
                                                name="answer{{$c}}" value="False">
                                            <label class="form-check-label" for="answer{{$c}}">False</label>
                                        </div>
                                    </div>

                                   </div>

                               </div>
                           </div>

                           @endforeach
                           @foreach($opens as $o)
                           @php ++$c; @endphp
                           <div class="box p-5 mt-5">
                              <div class="flex">
                                  <div class="mr-auto font-medium text-lg">{{ $o->question }}</div>
                              </div>
                              <div class="flex mt-4">
                                  <div class="mr-auto">
                                   <input type="hidden" name="question{{$c}}" value="{{$o->id}}">
                                      @if($o->file != null)
                                      <audio controls>
                                          <source src="{{asset('question_bank/'.$o->file)}}" type="audio/mpeg">
                                      </audio>
                                      @endif

                                  </div>
                              </div>
                              <div class="flex mt-4 pt-4 border-t border-slate-200/60 dark:border-darkmode-400">
                                  <div class="mr-auto font-medium text-base">
                                    <div class="flex flex-col sm:flex-row mt-2">
                                        <div class="form-check mr-2">
                                            <textarea name="answer{{$c}}" id="" cols="100" rows="4"
                                                value="{{ old('description') }}"></textarea>
                                        </div>
                                    </div>

                                  </div>

                              </div>
                          </div>

                          @endforeach

                            <hr class="mt-5" />
                        </div>
                    </div>
                    @endforeach
                    <input type="hidden" name="counter" value="{{$c}}">
                    <input type="hidden" name="student_id" value="{{$student->id}}">
                    <input type="hidden" name="exam_id" value="{{$exam->id}}">
                    {{-- <input type="hidden" name="course_id" value="{{$exam->course_id}}"> --}}
                    <div class="flex justify-end flex-col md:flex-row gap-2 mt-5">

                        <button type="submit" class="btn py-3 btn-primary w-full md:w-52 mb-2 mr-2">Save</button>
                    </div>
            </form>

        </div>
        <!-- END: Tusion Information -->
    </div>
</div>

@endsection
@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function(){
            var time = @json($time);
            var seconds = 60;
            var hours = parseInt(time[0]);
            var minutes = parseInt(time[1]);

           var timer =  setInterval(()=>{

              if(hours == 0 && minutes == 0 && seconds == 0){
                alert(123);
                clearInterval(timer);
                $('#exam_form').submit();
              }

                if(seconds <= 0){
                    minutes--;
                    seconds = 60;
                }

                if(minutes <= 0 && hours != 0){
                    hours--;
                    minutes = 59;
                    seconds = 60;
                }
                let tempHours = hours.toString().length > 1 ? hours : '0' + hours;
                let tempMinutes = minutes.toString().length > 1 ? minutes : '0' + minutes;
                let tempSeconds = seconds.toString().length > 1 ? seconds : '0' + seconds;
                $('.time').text(tempHours + ':' + tempMinutes+ ':' + tempSeconds + ' Left Time');
                seconds--;
            }, 1000);

        });
</script>
<script>
    document.addEventListener('keydown', function (event) {
        // Check if the pressed key is F5 (Refresh) or combination keys like Ctrl+R / Cmd+R
          if ((event.key === 'F5') ||
              (event.ctrlKey && event.key === 'r') ||
              (event.metaKey && event.key === 'r')) {

              event.preventDefault();  // Prevent the default action (refresh)
              Swal.fire('Browser refresh is disabled!');
          }
    });
</script>
@endsection