@extends('layouts.web')

@php 
$data = collect($paginator->items())->groupBy(function ($item, $key) {
    return date('d F Y', strtotime($item['examination']['start_at']));
});
@endphp

@section('content')
<div class="container py-3">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            @php $prev_date = null; @endphp
            <h1 class="fw-bolder fs-2 text-uppercase text-center my-3">Hasil Ujian</h1>
            @if (count($paginator->items()) > 0)
            <ul class="timeline">
                @foreach ($data as $date => $participants)
                    <li class="timeline-item">
                        <p class="fw-bold mb-3">{{ $date }}</p>
                        @foreach ($participants as $participant)
                        <div class="card mb-3 shadow-sm">
                            <div class="row g-0">
                                <div class="col-md-2 py-2">
                                    <img src="{{ asset('storage/' . $participant->examination->poster) }}" class="img-fluid rounded-start" alt="..."  width="150">
                                </div>
                                <div class="col-md-10">
                                    <div class="card-body h-100">
                                        <div class="row h-100">
                                            <div class="col-sm-9">
                                                <h5 class="fw-bolder">{{ $participant->examination->name }}</h5>
                                                {!! $participant->examination->description !!}
                                                <hr class="my-1">
                                                <dl class="row" style="font-size:0.85rem;">
                                                    <dt class="fw-normal col-5">Waktu Pengerjaan</dt>
                                                    <dd class="col-7 mb-0">: {{ $participant->examination->duration > 0 ? $participant->examination->duration / 60 : 0  }} Menit</dd>
                                                 </dl>
                                                <div class="d-flex justify-content-between">
                                                    
                                                </div>
                                            </div>
                                            <div class="col-sm-3 align-self-center align-self-center text-center">
                                                <span class="fs-3 fw-bolder d-inline-block mb-1 text-primary">#{{ $participant->result->rank }}</span><br/>
                                                {{-- <span class="d-inline-block mb-1 text-muted"><sup class="text-primary fs-5 fw-bolder">230</sup>/<sub class="fs-6">246</sub></span> --}}
                                                <a href="{{ route('results.show',['participant'=>$participant]) }}" class="btn btn-primary w-100">Rincian</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </li>
                @endforeach
            </ul>
            <div class="d-flex justify-content-center">
                {{ $paginator->links() }}
            </div>
            @else
            <x-card-data-empty title="Ooppss..." message="Tidak ada hasil ujian untuk anda saat ini" />
            @endif
        </div>
    </div>
</div>
@endsection

@push('css')
    
@endpush

@push('js')
<script>

</script>
@endpush