@extends('layouts.app')

@section('styles')

   <style type="text/css">
       .options p{
        margin-bottom: 0px;
       }
   </style>

@endsection

@section('content')



                            <div class="row w-100">
                                <div class="col-lg-8">
                                <!-- PAGE-HEADER -->
                                    <div class="page-header">
                                        <div class="row w-100 align-items-center">
                                            <div class="col-lg-3">
                                                <h5><b>{{$test_datas->test_number}} - {{$test_datas->test_name}}</b></h5>
                                                <p>Total Questions - {{$test_questions->count()}}</p>
                                            </div>
                                            <div class="col-lg-6 text-center">
                                                <h3>{{$test_datas->section_name}}</h3>
                                                <p>Section {{ array_search($test_datas->test_sec_id, $test_section_order_arr)+1 }} of {{count($test_section_order_arr)}}</p>
                                            </div>
                                            <div class="col-lg-3" style="text-align:right;">
                                                <button type="button" class="btn btn-icon btn-twitter mb-3"><i class="fa fa-search-plus" aria-hidden="true"></i></button>
                                                <button type="button" class="btn btn-icon btn-twitter mb-3"><i class="fa fa-search-minus" aria-hidden="true"></i></button>
                                                <p>Time Remaining</p>
                                                <h5 id="counter">{{$test_datas->rem_time_test}}</h5>
                                            </div>
                                        </div>
                                    </div>
                                <!-- PAGE-HEADER END -->
                                    <div class="row row-sm">
                                        <div class="col-lg-12">
                                            <div class="card">
                                                <div class="card-body">
                                                    <h5>Question <span id="q_no"></span></h5>
                                                    <div id="display_question" style="margin-bottom:60px;">
                                                        
                                                    </div>
                                                    <div id="display_options" style="margin-bottom:60px;">
                                                        
                                                    </div>
                                                    <div class="action-buttons text-center">
                                                        <input type="hidden" id="current_question" value="">
                                                        <button type="button" onclick="get_previous_question({{$test_datas->test_attempt_id}})" class="btn btn-outline-info mx-2">Previous</button>
                                                        <button type="button" id="next_btn" onclick="save_get_next_question({{$test_datas->test_attempt_id}})" class="btn btn-secondary mx-2">Save & Next</button>
                                                        <button onclick="skip_this_question({{$test_datas->test_attempt_id}})" type="button" class="btn custom-btn-info mx-2">Review Later</button>
                                                        <button type="button" onclick="clear_question_opt()" class="btn btn-danger mx-2">Clear</button>
                                                    </div>
                                                </div>
                                    

                                            </div>
                               
                            </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="row row-sm">
                                        <div class="col-lg-12">
                                            <div class="card">
                                                <div class="card-body">
                                                @foreach($test_section_order_arr as $section_ids)