@extends('Vzdelavanie::layout.integrated')

@section('content')
    @parent
    <section class="bg-white space-sm">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col">
                    <h1 class="h2 mb-2">Vyhodnotenie testu</h1>
                    <span>Výsledky vyhodnoteného testu</span>
                </div>
            </div>
        </div>
    </section>

    <section class="flush-with-above space-0">
        <div class="bg-white">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="tab-vyhodnotenie" data-toggle="tab" href="#vyhodnotenie" role="tab">Vyhodnotenie</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link @if($test->otazky->count() === 0) disabled @endif" id="tab-odpovede" data-toggle="tab" href="#odpovede" role="tab">
                                    Nesprávne zodpovedané otázky
                                    @if($test->otazky->count() > 0)
                                    <span class="badge badge-light">{{ $test->otazky->count() ?? 0 }}</span>
                                    @endif
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="flush-with-above d-block">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="vyhodnotenie" role="tabpanel">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-6">
                            <div class="card card-sm card-borderless shadow">
                                <div class="card-body">
                                    <blockquote class="blockquote text-left">
                                        <p class="h4 mb-0">"{{ $test->nazov }}"</p>
                                        <footer class="blockquote-footer">"{!!  $test->popis !!}"</footer>
                                    </blockquote>
                                </div>
                                <div class="list-group list-group-flush">
                                    <div class="list-group-item d-flex justify-content-between">
                                        <span>
                                            Celkový počet otázok
                                        </span>
                                        <span class="text-right">
                                            {{ $test->pocet_vsetkych_otazok ?? 0 }}
                                        </span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between">
                                        <span>
                                            Maximálny počet správnych odpovedí
                                        </span>
                                        <span class="text-right">
                                            {{ $test->max_pocet_spravnych_odpovedi ?? 0 }}
                                        </span>
                                    </div>
                                    <div class="card-header bg-secondary">
                                        <h6>Vyhodnotenie zodpovedaných otázok</h6>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between">
                                        <span>
                                            Počet zodpovedaných otázok
                                        </span>
                                        <span class="text-right">
                                            {{ $test->pocet_zodpovedanych_otazok ?? 0 }}
                                        </span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between">
                                        <span>
                                            Počet nezodpovedaných otázok
                                        </span>
                                        <span class="text-right">
                                            {{ $test->pocet_otazok_bez_odpovede ?? 0 }}
                                        </span>
                                    </div>
                                    <div class="list-group-item">
                                        <div class="progress" style="height: 3rem;">
                                            <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: {{ $test->zodpovedaneOtazkyPercentualne }}%;" aria-valuenow="{{ $test->zodpovedaneOtazkyPercentualne }}" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="Percentuálny podiel zodpovedaných otázok">{{ $test->zodpovedaneOtazkyPercentualne }}%</div>
                                            <div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: {{ $test->nezodpovedaneOtazkyPercentualne }}%;" aria-valuenow="{{ $test->nezodpovedaneOtazkyPercentualne }}" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="Percentuálny podiel nezodpovedaných otázok">{{ $test->nezodpovedaneOtazkyPercentualne }}%</div>
                                        </div>
                                    </div>
                                    <div class="list-group-item list-spacing-sm card-header bg-secondary">
                                        <h6>Vyhodnotenie správnosti odpovedí</h6>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between">
                                        <span>
                                            Počet správne zodpovedaných otázok
                                        </span>
                                        <span class="text-right">
                                            {{ $test->pocet_spravne_zodpovedanych_otazok ?? 0 }}
                                        </span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between">
                                        <span>
                                            Počet nesprávne zodpovedaných otázok
                                        </span>
                                        <span class="text-right">
                                            {{ $test->pocet_nespravne_zodpovedanych_otazok ?? 0 }}
                                        </span>
                                    </div>
                                    @if($test->pocet_vsetkych_otazok > $test->pocet_otazok_bez_odpovede)
                                    <div class="list-group-item">
                                        <div class="progress" style="height: 3rem;">
                                            <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: {{ $test->spravneZodpovedaneOtazkyPercentualne }}%;" aria-valuenow="{{ $test->spravneZodpovedaneOtazkyPercentualne }}" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="Percentuálny podiel správne zodpovedaných otázok">{{ $test->spravneZodpovedaneOtazkyPercentualne }}%</div>
                                            <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: {{ $test->nespravneZodpovedaneOtazkyPercentualne }}%;" aria-valuenow="{{ $test->nespravneZodpovedaneOtazkyPercentualne }}" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="Percentuálny podiel nesprávne zodpovedaných otázok">{{ $test->nespravneZodpovedaneOtazkyPercentualne }}%</div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                <div class="card-footer d-flex justify-content-between">
                                    <div data-toggle="tooltip" data-placement="top" title="Čas spustenia testu">
                                        <span class="icon-controller-play"></span>
                                        <span class="text-small text-muted">{{ $test->casova_znacka_spustenia->longRelativeDiffForHumans() }}</span>
                                    </div>
                                    <div data-toggle="tooltip" data-placement="top" title="Čas vyhodnotenia testu">
                                        <span class="icon-check"></span>
                                        <span class="text-small text-muted">{{ $test->casova_znacka_vyhodnotenia->longRelativeDiffForHumans() }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="odpovede" role="tabpanel">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-primary text-small">
                                <i class="icon-info mr-2"></i>
                                <span>Zobrazujú sa len otázky, ktoré neboli zodpovedané správne.</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                        @forelse($test->otazky as $otazka)
                            <div class="card card-borderless shadow">
                                <div class="card-body">
                                    <div class="card-title border-bottom">
                                        <span>
                                            <strong>{!! $otazka->znenie !!}</strong>
                                        </span>
                                    </div>
                                    <div class="card-text">
                                        <ul class="list-group list-group-flush">
                                        @forelse($otazka->odpovede as $odpoved)
                                            <li class="list-group-item d-flex @if($odpoved->jeSpravna()) text-success @else text-danger @endif">
                                                @if($odpoved->jeZvolena())<span class="icon-check"></span>@endif
                                                <span>{!! $odpoved->znenie !!}</span>
                                            </li>
                                        @empty
                                            <div class="alert alert-primary text-small">
                                                <i class="icon-info mr-2"></i>
                                                Žiadne odpovede...
                                            </div>
                                        @endforelse
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="alert alert-primary text-small">
                                <i class="icon-info mr-2"></i>
                                Žiadne otázky...
                            </div>
                        @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script type="text/javascript">
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>
@endpush