@extends('layouts.admin')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <a href="javascript:void(0)" onclick="printDiv('preview_pane')" class="float-right btn btn-primary print btn-square shadow mb-2">
                Print <i class="fa fa-print"></i>
            </a>
        </div>
        <div class="col-sm-8">
            <div class="card shadow" id="preview_pane">
                <div class="card-body">
                    <h2 class="text-center surround text-dark">
                        {{$percentage}}%
                        <small class="text-muted">
                            @if ($percentage < 45)
                                FAIL
                            @else
                                PASS
                            @endif
                        </small> 
                    </h2>
                    <h5 class="text-center text-dark">
                        <small class="font-weight-bold">{{ceil($over_detail)}} / {{$over_score}}</small>
                    </h5>
                    <table class="table table-bordered">
                        <tr class="text-dark">
                            <th class="text-success text-right">Correct answers:&nbsp;{{$correct}}</th>
                            <th class="text-danger">Wrong answers:&nbsp;{{$wrong}}</th>
                        </tr>
                    </table> 
                    <h4 class="text-center">SECTIONS</h4>
                    <div class="sections-evaluation row"></div>
                </div>
            </div>
            <hr>
            <h5 class="text-center surround text-black mt-2 text-uppercase">Corrections</h5>
            <div class="paged-height">
                <ul class="list-group">
                    @php
                        $i = 0;
                    @endphp
                    @foreach ($result_questions as $questions)
                    @php
                        $i++;
                    @endphp
                        <li class="list-group-item">
                            <small class="text-dark">
                                <span class="badge badge-primary rounded-circle">{{$i}}</span>
                                {{$questions->textual_question}}
                            </small>
                            <small data-toggle="tooltip" title="Correct answer" class="text-success">{{$questions->answer}}</small>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection