@extends('student.layouts.test')
@section('titlePage', 'Take Test')
@php
   $brand = $dataConfigs['brand'] ?? null;
@endphp
@push('style')
@endpush
@section('content-detail')
    <section id="m-app-loading">
        <!-- [ Content ] Start -->
        <div class="authentication-wrapper authentication-2 px-4">
            <div class="authentication-inner py-5 test-block">
                <div class="card">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="test-bg-img bg-primary"> 
                                <img src="{{ asset('assets/b2c_img/test.svg') }}" alt="images">
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="p-4">
                                <h3 class="mb-2 text-primary text-capitalize">{{$test->title ?? null}}</h3>
                                <p class="mb-4"></p>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <p><i class="fas fa-lock text-primary"></i> Lock Section : <b>Yes</b></p>
                                    </div>
                                    <div class="col-sm-4">
                                        <p><i class="fas fa-clipboard-list text-primary"></i> Attempts : <b>01</b></p>
                                    </div>
                                    <div class="col-sm-4">
                                        <p><i class="fas fa-shield-alt text-primary"></i> Monitoring : <b>No</b></p>
                                    </div>
                                </div>
                                <hr class="" style="border-color:rgb(var( --primary-rgb))">
                                <h4 class="mb-3 text-primary"><b>Test Summary</b></h4>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <h5 class="mb-2"><b>Duration</b></h5>
                                        <p class="mb-3">{{$data['total_time_section'] ?? $test->duration ?? 0}} Minutes</p>
                                    </div>
                                                                      <div class="col-sm-4">
                                        <h5 class="mb-2"><b>No. of questions</b></h5>
                                        <p class="mb-3">{{$test->total_questions ?? 0}}</p>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5 class="mb-2"><b>Maximum Marks</b></h5>
                                        <p class="mb-3">{{$test->total_marks ?? 0}}</p>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5 class="mb-2"><b>Subject</b></h5>
                                        <p class="mb-3">{{$test->category->category}}</p>
                                    </div>
                                </div>
                                <hr class="" style="border-color:rgb(var( --primary-rgb))">
                                <h4 class="mb-3 text-primary"><b>System Performance</b></h4>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <h5 class="mb-2"><b>Your IP Address</b></h5>
                                        <p class="mb-3">{{request()->ip()}}</p>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5 class="mb-2"><b>Plugins</b></h5>
                                        <p class="mb-3">Ready</p>
                                    </div>
                                    <div class="col-sm-4">
                                    <a href="{{url()->previous()}}" class="btn btn-danger mr-2">Cancel</a>
                                    <button type="button" class="btn btn-secondary" id="start-test">Start Test</button>
                                    </div>
                                </div>
                                {{--<div class="text-right footerbutton">
                                    <a href="{{url()->previous()}}" class="btn btn-danger mr-2">Cancel</a>
                                    <button type="button" class="btn btn-secondary" id="start-test">Start Test</button>
                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- / Content -->
    </section>
    @include('student.test.layouts.common.modals')
@endsection

@section('content-test')
<section id="test-app">
    @include($view, $data)
</section>
@endsection

@push('script')
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
	chtml: {
        scale: 1.3,
		minScale: 1,                  // smallest scaling factor to use
		mtextInheritFont: true,       // true to make mtext elements use surrounding font
		merrorInheritFont: false,       // true to make merror text use surrounding font
		mathmlSpacing: true,          // true for MathML spacing rules, false for TeX rules
		skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
		matchFontHeight: true,         // true to match ex-height of surrounding font
		fontURL: '{{asset("assets/fonts/math")}}',   // The URL where the fonts are found
		adaptiveCSS: true              // true means only produce CSS that is used in the processed equations
	}
};
var screen_height = screen.height-280;
$('#test_screen_right').css({"maxHeight":screen_height+"px"});
$('#test_screen_left').css({"maxHeight":screen_height+"px"});
</script>
<style>
.MathJax {
	font-size: 1.3em;
}
.MJX-TEX{
	font-family: "Mada", sans-serif;
}
mjx-c.mjx-c221A::before {
    padding: 0.626em 0.543em 0.2em 0;
    content: "\221A";
	font-size: 23px;
}

.warning_alert .ajs-header{
	background: red;
	color: #fff;
	font-size: large;
	animation: blinker 1.5s step-start infinite;
}
@keyframes blinker {
  50% {
    opacity: .50;
  }
}
#test_screen_left, #test_screen_right{
	overflow: auto;
}
mjx-stretchy-h > mjx-ext > mjx-c::before {
	zoom: 0.8;
}
</style>
@endpush