@extends('layouts.student')

@section('title', 'Review & finish')

@section('content')
    <div class="xrt-exam-bar">
        <div>
            <div class="fw-semibold">{{ $attempt->exam->display_name }}</div>
            <div class="xrt-meta">Attempt {{ $attempt->attempt_number }} &middot; review before submitting</div>
        </div>
        <div class="d-flex align-items-center gap-2 ms-auto">
            <a class="btn btn-sm btn-outline-secondary" href="{{ route('student.attempts.show', $attempt) }}">
                <i class="bi bi-arrow-left"></i> Return to Exam
            </a>
            <div class="xrt-timer" id="timer">
                <span class="xrt-timer-label">Time remaining</span>
                <span class="xrt-timer-value" id="timer-value">--:--:--</span>
            </div>
        </div>
    </div>

    @php
        $reviewConfig = [
            'remainingSeconds' => $timing['remainingSeconds'],
            'urls' => [
                'time' => route('student.attempts.time', $attempt),
                'result' => route('student.attempts.result', $attempt),
            ],
        ];
    @endphp

    <script type="application/json" id="review-config">@json($reviewConfig)</script>

    <div class="row g-3">
        <div class="col-lg-4">
            <div class="xrt-card">
                <div class="xrt-card-header"><span>Summary</span></div>
                <div class="xrt-card-body">
                    <div class="row text-center">
                        <div class="col-4"><div class="fs-4 fw-semibold">{{ $progress['total'] }}</div><div class="xrt-meta">Questions</div></div>
                        <div class="col-4"><div class="fs-4 fw-semibold text-success">{{ $progress['answered'] }}</div><div class="xrt-meta">Answered</div></div>
                        <div class="col-4"><div class="fs-4 fw-semibold {{ count($progress['unanswered']) ? 'text-danger' : '' }}">{{ count($progress['unanswered']) }}</div><div class="xrt-meta">Unanswered</div></div>
                    </div>

                    @if (count($progress['unanswered']) > 0)
                        <div class="alert alert-warning py-2 mt-3 mb-0">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            You still have <strong>{{ count($progress['unanswered']) }}</strong> unanswered question(s).
                            Unanswered questions score zero.
                        </div>
                    @else
                        <div class="alert alert-success py-2 mt-3 mb-0">
                            <i class="bi bi-check-circle me-1"></i> Every question has been answered.
                        </div>
                    @endif

                    <button type="button" class="btn btn-success w-100 mt-3" data-bs-toggle="modal" data-bs-target="#finish-modal">
                        <i class="bi bi-flag"></i> Finish Exam
                    </button>
                    <a class="btn btn-outline-secondary w-100 mt-2" href="{{ route('student.attempts.show', $attempt) }}">Return to Exam</a>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="xrt-card">
                <div class="xrt-card-header">
                    <span>Questions</span>
                    <span class="xrt-meta">Select a question to go back to it.</span>
                </div>
                <div class="xrt-card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr><th style="width:4rem">#</th><th>Question</th><th>Type</th><th>Points</th><th>Status</th><th></th></tr>
                            </thead>
                            <tbody>
                                @foreach ($questions as $question)
                                    <tr class="{{ $question['answered'] ? '' : 'table-warning' }}">
                                        <td class="fw-semibold">{{ $question['number'] }}</td>
                                        <td>{{ $question['text'] }}</td>
                                        <td class="xrt-meta">{{ $question['typeLabel'] }}</td>
                                        <td>{{ $question['points'] }}</td>
                                        <td>
                                            @php
                                                // Skipped is an answer, so it is never "Unanswered";
                                                // it is named separately so the student can see what
                                                // they reported as not found. No correctness here.
                                                $state = $question['skipped']
                                                    ? ['Skipped', 'text-bg-warning']
                                                    : ($question['answered']
                                                        ? ['Answered', 'text-bg-success']
                                                        : ['Unanswered', 'text-bg-secondary']);
                                            @endphp
                                            <span class="badge {{ $state[1] }}">{{ $state[0] }}</span>
                                        </td>
                                        <td class="text-end">
                                            <a class="btn btn-sm btn-outline-primary"
                                               href="{{ route('student.attempts.show', $attempt) }}#q{{ $question['number'] }}">Go to question</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="finish-modal" tabindex="-1" aria-labelledby="finish-modal-title" aria-hidden="true">
        <div class="modal-dialog">
            <form class="modal-content" method="POST" action="{{ route('student.attempts.complete', $attempt) }}" id="finish-form">
                @csrf
                <div class="modal-header py-2">
                    <h5 class="modal-title h6 mb-0" id="finish-modal-title">Finish examination?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">Answered: <strong>{{ $progress['answered'] }} / {{ $progress['total'] }}</strong></p>
                    @if (count($progress['unanswered']) > 0)
                        <p class="mb-2 text-danger">Unanswered: <strong>{{ count($progress['unanswered']) }}</strong> (these score zero)</p>
                    @endif
                    <p class="mb-0 fw-semibold">Once submitted, you cannot change your answers.</p>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Return to Exam</button>
                    <button type="submit" class="btn btn-sm btn-success" id="finish-submit"><i class="bi bi-flag"></i> Submit Exam</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="@xrtAsset('js/student-review.js')"></script>
@endpush