@extends('layouts.web')

@section('content')
<div class="container py-3">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <h1 class="fw-bolder fs-2 text-uppercase text-center my-3">{{ $participant->examination->name }}</h1>
            <div class="card shadow-sm">
                <div class="text-center">
                    <img src="{{ asset('storage/' . $participant->examination->poster) }}" class="card-img-top" alt="..." style="width: 40%; height: 40%">
                </div>
                <div class="card-body">
                    {!! $participant->examination->description !!}
                </div>
                <div class="list-group list-group-flush">
                    @php 
                    $section_ready      = collect($participant->participant_sections->toArray())->firstWhere('status', 'Ready');
                    $active_section_id  = isset($participant_section_active) && !empty($participant_section_active) ? $participant_section_active->id : (!empty($section_ready) ? $section_ready['id'] : 0);
                    @endphp
                    @foreach ($participant->participant_sections as $participant_section)
                        @php 
                        $condition  = ($participant->examination->duration - $participant->duration_used) > 0;
                        $url        = route('examinations.sections.show', ['participant'=>$participant, 'section' => $participant_section]);
                        @endphp
                    <div 
                        @class([
                            'list-group-item',
                            'disabled' => ($condition === FALSE)
                        ])>
                        <div class="row">
                            <div class="col-lg-9">
                                <div class="d-flex">
                                    <span class="fw-bold text-end me-3" style="width:20px;">{{ $participant_section->section->number }}.</span>
                                    <div class="w-100">
                                        <span class="fw-bold">{{ $participant_section->section->script->title }}</span>
                                        <dl class="row" style="font-size:0.85rem;">
                                            <dt class="fw-normal col-4">Jumlah Soal</dt>
                                            <dd class="col-8 mb-0">: {{ $participant_section->section->script->questions_count }}</dd>
    
                                            {{-- <dt class="fw-normal col-4">Durasi</dt>
                                            <dd class=" col-8 mb-0">: {{ ($participant_section->section->script->questions_sum_duration + $participant_section->section->additional_duration) / 60 }} Menit</dd>
    
                                            <dt class="fw-normal col-4">Mode</dt>
                                            <dd class=" col-8 mb-0">: {{ str($participant_section->section->duration_mode)->replace(['Flexible','Strict'],['Fleksible','Ketat']) }}</dd> --}}
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 text-end">
                                <a href="{{ $condition ? $url : '' }}"
                                    @class([
                                        "btn",
                                        "btn-sm",
                                        "w-100",
                                        "rounded-pill",
                                        "btn-primary" => ($condition),
                                        "btn-outline-secondary" => (!$condition),
                                        "disabled" => (!$condition)
                                    ])>
                                    {{ ($participant_section->status == 'Finish') ? 'Sudah Selesai' : ( $participant_section->status == 'Running' ? 'Lanjutkan' : 'Mulai Ujian') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-4">
                @if($condition)
                <button type="button" class="btn btn-primary rounded-pill w-100 mb-3" data-bs-toggle="modal" data-bs-target="#modalStore">Kirim Lembar Jawaban</button>
                @endif
                <a href="{{ route('examinations.index') }}" class="btn btn-outline-primary rounded-pill w-100">Kembali</a>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalStore" tabindex="-1" aria-labelledby="modalStoreLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="fw-bolder">Peringatan !</h5>
                    <span id="count-answered" class="text-center"></span>
                    <br/>Lembar jawaban yang dikirim tidak dapat diubah kembali, pastikan anda sudah yakin dengan jawaban anda.
                    <br/>Apakah anda yakin ingin melanjutkan ?
                </div>
                <div class="modal-footer">
                    <button id="btn-cancel" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button id="btn-store" type="button" class="btn btn-primary">Kirim !</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('css')
    
@endpush

@push('js')
<script>
$(function(){
    $('#btn-store').click(function(){
        $.post(`{{ route('examinations.update',['participant' => $participant_section->participant]) }}`,{
            _method:'PUT',
            duration_used : {{ $participant->examination->duration }}
        }).done(function(){
            // location.reload();
        });
    });

})
</script>
@endpush