@extends('layouts.admin')
@section('content')
@php
    
    $total_questions = $result_test['total_questions'];
    $i = 0;
    $k = 0;
@endphp
<div class="container">
    <div class="row">
        <div class="col-sm-3 mb-4">
            <div class="card shadow">
                <div class="px-2 pt-2">
                    <h5>
                        <small>
                            <small class="text-black">{{$result_test['book']}}: {{$result_test['title']}}</small>
                        </small>
                    </h5>
                    <hr>
                    <h6 class="up-space text-muted text-uppercase">
                        <small>Questions:</small>
                    </h6>
                </div>
                <div class="row mx-2 mb-2">
                    @while ($k < $result_test['total_questions'])
                        {{-- <div class="col-2" style="margin:2px"> --}}
                        @php
                            $k++;
                        @endphp
                        <div class="col-3 px-1 py-1">
                            <a onclick="gotoQuestion('.each-question', '.each-question-{{$k-1}}', {{$k-1}})" href="javascript:void(0)" class="btn cbt-nav disabled cbt-nav-{{$k}} btn-outline-primary btn-sm w-100">
                                {{$k}}
                            </a>
                        </div>
                    @endwhile
                </div>
            </div>
        </div>
        <div class="col-sm-6" id="cbt_arena">
            <div class="card shadow">
                <div class="card-body py-1">
                    <div class="surround text-center">
                        <h5 class="text-dark">
                            {{-- Test on {{$result_test['subject']}}:
                            <small class="text-underline text-thick">{{$result_test['class']}}</small> --}}
                        </h5>
                        <h3 class="text-primary up-space surround">
                            {{$result_test['duration']}} minutes
                        </h3>
                        <div class="btn-group" onclick="initCBT({{$result_questions}}, {{$result_test['duration']}}, '{{$result_test['id']}}')">
                            <a href="javascript:void(0)" class="btn btn-outline-primary full-width btn-square text-thick">
                                Start test
                            </a>
                            <a href="javascript:void(0)" class="btn btn-primary active">
                                <i class="fa fa-clock"></i>
                            </a>
                        </div>
                        <p class="mt-4">
                            <small class="">
                                [
                                    <strong>Total score:</strong> {{$result_test['total_score']}}&nbsp;|
                                    <strong>Total questions:</strong> {{$result_test['total_questions']}}&nbsp;|
                                    <strong>Option:</strong> {{$result_test['total_options']}}
                                ]
                            </small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="down-space-20">
                <h2 class="text-thick">
                    <span class="minutes">{{$result_test['duration']}}</span>:<span class="seconds">00</span>
                </h2>
            </div>
            <div class="btn-group" onclick="endTest({{$result_test}})">
                <a href="javascript:void(0)" class="btn btn-danger btn-sm disabled active font-weight-bold" id="btn_end_test">
                    End test
                </a>
                <a href="javascript:void(0)" class="btn btn-outline-danger btn-sm disabled" id="btn_end_test">
                    <i class="fa fa-times-circle"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection