@extends('layouts.student')

@section('title', 'Exam instructions')

@section('content')
    <div class="mb-3">
        <a class="btn btn-sm btn-link px-0 text-decoration-none" href="{{ route('student.exams.index') }}"><i class="bi bi-arrow-left"></i> Back to my exams</a>
        <h1 class="xrt-page-title">{{ $exam->display_name }}</h1>
        <div class="xrt-meta">Read the instructions before you start.</div>
    </div>

    <div class="row g-3">
        <div class="col-lg-7">
            <div class="xrt-card">
                <div class="xrt-card-header"><span>Exam details</span></div>
                <div class="xrt-card-body">
                    <div class="row">
                        <x-ui.detail-row label="Exam">{{ $exam->display_name }}</x-ui.detail-row>
                        <x-ui.detail-row label="Questions">{{ $questionCount }}</x-ui.detail-row>
                        <x-ui.detail-row label="Total points">{{ $totalPoints }}</x-ui.detail-row>
                        <x-ui.detail-row label="Duration">{{ $exam->duration_minutes }} minutes (guideline)</x-ui.detail-row>
                        <x-ui.detail-row label="Passing percentage">{{ rtrim(rtrim(number_format((float) $exam->passing_percentage, 2), '0'), '.') }}%</x-ui.detail-row>
                        <x-ui.detail-row label="Attempts allowed">{{ $assignment->attempts_allowed }}</x-ui.detail-row>
                        <x-ui.detail-row label="Attempts used">{{ $attemptsUsed }}</x-ui.detail-row>
                        <x-ui.detail-row label="Attempts remaining">{{ $attemptsRemaining }}</x-ui.detail-row>
                        <x-ui.detail-row label="Due date">{{ $assignment->due_at?->format('d M Y H:i') ?? 'No due date' }}</x-ui.detail-row>
                        <x-ui.detail-row label="Question types">
                            @foreach ($questionTypes as $type)
                                <span class="badge text-bg-light"><i class="bi {{ $type->icon() }}"></i> {{ $type->label() }}</span>
                            @endforeach
                        </x-ui.detail-row>
                    </div>

                    @if ($exam->description)
                        <div class="border-top pt-2">
                            <div class="xrt-label mb-1">Description</div>
                            <div>{{ $exam->description }}</div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="xrt-card">
                <div class="xrt-card-header"><span>Instructions</span></div>
                <div class="xrt-card-body">
                    <ul class="mb-3 ps-3">
                        <li>Each question shows one x-ray. Zoom, pan and switch views with the viewer controls.</li>
                        <li><strong>OK / NOT OK</strong> questions: decide whether the baggage is safe.</li>
                        <li><strong>Object location</strong> questions: <strong>double-click</strong> the object on the x-ray to place your marker.</li>
                        <li>Press <strong>Commit Answer</strong> to submit. A committed answer is final and cannot be changed.</li>
                        <li>Your progress is saved on the server; you may safely reload the page.</li>
                        <li>Answer every question, then press <strong>Finish Exam</strong>.</li>
                    </ul>

                    @if ($issues !== [])
                        <div class="alert alert-warning py-2">
                            <ul class="mb-0 ps-3">
                                @foreach ($issues as $issue)
                                    <li>{{ $issue }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('student.exams.start', $assignment) }}">
                        @csrf
                        <button class="btn btn-primary w-100" type="submit" @disabled($issues !== [])>
                            <i class="bi bi-play-fill"></i> {{ $openAttempt ? 'Continue Exam' : 'Start Exam' }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection