@extends('layouts.admin')

@section('title', 'Preview · '.$exam->name)

@php
    $config = [
        'exam' => [
            'name' => $exam->name,
            'displayName' => $exam->display_name,
            'duration' => $exam->duration_minutes,
            'passing' => (float) $exam->passing_percentage,
            'allowSkip' => (bool) $exam->allow_skip,
            'showFeedback' => (bool) $exam->show_feedback,
            'randomize' => (bool) $exam->randomize_questions,
        ],
        'questions' => $questions,
    ];
@endphp

@section('content')
    <x-ui.page-header title="Exam Preview" :back="route('admin.exams.show', $exam)">
        <x-slot:subtitle>
            <strong>{{ $exam->display_name }}</strong> &middot; {{ $questions->count() }} question(s) &middot; {{ $exam->duration_minutes }} min &middot; pass {{ rtrim(rtrim(number_format($exam->passing_percentage, 2), '0'), '.') }}%
            &middot; <span class="badge text-bg-warning">Admin preview – nothing is recorded</span>
        </x-slot:subtitle>
        <x-slot:actions>
            <div class="form-check form-switch align-self-center me-2">
                <input class="form-check-input" type="checkbox" id="preview-show-target">
                <label class="form-check-label small" for="preview-show-target">Show target (debug)</label>
            </div>
            @can('manageQuestions', $exam)
                <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.exams.questions.builder', $exam) }}"><i class="bi bi-list-check"></i> Question Builder</a>
            @endcan
        </x-slot:actions>
    </x-ui.page-header>

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

    @if ($questions->isEmpty())
        <div class="xrt-card"><div class="xrt-card-body">
            <x-ui.empty-state icon="bi-play-circle" title="Nothing to preview" message="This exam has no questions yet." />
        </div></div>
    @else
        <div class="row g-3">
            <div class="col-lg-8">
                <div id="preview-viewer"></div>
            </div>
            <div class="col-lg-4">
                <div class="xrt-card">
                    <div class="xrt-card-header">
                        <span>Question <span id="preview-number">1</span> of {{ $questions->count() }}</span>
                        <span class="badge text-bg-light" id="preview-type"></span>
                    </div>
                    <div class="xrt-card-body">
                        <div class="progress mb-3" style="height: 6px;"><div class="progress-bar" id="preview-progress" style="width: 0%"></div></div>
                        <div class="fs-6 fw-semibold mb-1" id="preview-text"></div>
                        <div class="xrt-meta mb-3" id="preview-meta"></div>

                        <div id="preview-ok-controls" hidden>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-success flex-grow-1" data-answer="ok"><i class="bi bi-check-lg"></i> OK</button>
                                <button type="button" class="btn btn-danger flex-grow-1" data-answer="not_ok"><i class="bi bi-x-lg"></i> NOT OK</button>
                            </div>
                        </div>

                        <div id="preview-location-controls" hidden>
                            <div class="alert alert-light border py-2 small mb-0">
                                <i class="bi bi-mouse2 me-1"></i> Double-click the object on the x-ray. Switch views with the thumbnails if needed.
                            </div>
                        </div>

                        <div id="preview-feedback" class="mt-3" hidden></div>

                        <div class="d-flex justify-content-between mt-3 pt-2 border-top">
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="preview-prev"><i class="bi bi-chevron-left"></i> Previous</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="preview-skip" hidden>Skip</button>
                            <button type="button" class="btn btn-sm btn-primary" id="preview-next">Next <i class="bi bi-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('scripts')
    <script src="@xrtAsset('js/xray-viewer.js')"></script>
    <script src="@xrtAsset('js/xray-annotation-layer.js')"></script>
    <script src="@xrtAsset('js/exam-preview.js')"></script>
@endpush