@extends('layouts.exam')

@php
    use App\Support\ExamText;
    $total = count($paper);
    $saved = $attempt->answers ?? [];
    $flags = array_map('intval', $attempt->flagged ?? []);
    $level = $exam->proctor_level ?: 'none';
    $strict = $level === 'strict';
    $answeredCount = collect($paper)->filter(fn ($q) => ! empty($saved[$q['id']] ?? []))->count();
    $rules = collect(preg_split('/\R/', (string) $exam->instructions))->map(fn ($l) => trim(ltrim(trim($l), "•-* \t")))->filter()->values();
    $candidate = $attempt->user?->name ?? auth()->user()->name;
    $fmtSeconds = fn ($s) => sprintf($s >= 3600 ? '%d:%02d:%02d' : '%2$d:%3$02d', intdiv($s, 3600), intdiv($s % 3600, 60), $s % 60);
@endphp

@section('content')
<div class="exam-shell ex-shell" id="exam-app" data-level="{{ $level }}">
  <a class="skip" href="#ex-stage">Skip to question</a>
  <noscript><div class="ex-alert danger" role="alert">JavaScript is required to sit this exam. Please enable it and reload this page.</div></noscript>

  <header class="exam-top">
    <div class="ex-id">
      <span class="brand-mark" aria-hidden="true"></span>
      <div class="title">{{ $exam->title }}<small>Candidate: {{ $candidate }} · {{ $attempt->code }}</small></div>
    </div>
    <div class="ex-qpos" aria-hidden="true">Question <b data-cur>1</b> of {{ $total }}</div>
    <div class="ex-save" data-save-status role="status" aria-live="polite"><x-icon name="check" :size="14"/> <span data-save-text>All answers saved</span></div>
    <div class="timer" role="timer" aria-label="Time remaining" data-timer-box><x-icon name="timer" :size="18"/> <span data-timer>{{ $fmtSeconds($secondsLeft) }}</span></div>
    <button type="button" class="btn btn-primary btn-sm ex-submit" data-open-review>Review &amp; submit</button>
    <div class="ex-bar" aria-hidden="true"><i data-bar style="width:{{ $total ? round($answeredCount / $total * 100) : 0 }}%"></i></div>
  </header>

  <div class="ex-banners" id="ex-banners">
    @if($level !== 'none')
      <div class="ex-notice" data-proctor-note>
        <x-icon name="shield" :size="18"/>
        <span>@if($strict)<b>Strict proctoring.</b> The exam runs in full screen. Switching tabs, leaving full screen, copying or pasting are integrity violations; the attempt is submitted automatically after {{ $exam->max_violations }}.
        @else<b>Proctored exam.</b> Switching tabs or windows, copying and pasting are recorded and shown on your score report.@endif</span>
      </div>
    @endif
    <div class="ex-alert danger" data-alert hidden role="alert"><x-icon name="shield-alert" :size="20"/><div class="grow" data-alert-text></div><button type="button" class="ex-alert-x" data-alert-close aria-label="Dismiss warning"><x-icon name="x" :size="16"/></button></div>
    <div class="ex-alert warn" data-net hidden role="status"><x-icon name="wifi" :size="20"/><div class="grow"><b>Connection problem.</b> Your latest answers are kept in this browser and will be sent automatically when you are back online. The timer keeps running.</div></div>
    <div class="ex-alert danger" data-auth hidden role="alert"><x-icon name="lock" :size="20"/><div class="grow"><b>Your sign-in session has expired.</b> Open the sign-in page in a new tab, log in with the same account, then return here. Your answers are safe and will be saved automatically.</div>
      <a class="btn btn-secondary btn-sm" href="{{ route('login') }}" target="_blank" rel="noopener">Sign in again</a><button type="button" class="btn btn-secondary btn-sm" data-auth-retry>Retry now</button></div>
  </div>

  <div class="exam-body">
    <main id="ex-stage" aria-label="Exam questions">
      @foreach($paper as $i => $q)
        @php $sel = $saved[$q['id']] ?? []; $isFlag = in_array($q['id'], $flags, true); $count = count($q['options']); @endphp
        <section class="q-card ex-q" id="q-{{ $q['id'] }}" data-q="{{ $q['id'] }}" data-multiple="{{ $q['multiple'] ? 1 : 0 }}" data-select="{{ $q['select'] }}" tabindex="-1" @if($i > 0) hidden @endif>
          <div class="q-meta">
            <span class="pill pill-blue">Question {{ $q['no'] }} of {{ $total }}</span>
            @if($q['domain'])<span class="ex-domain">{{ $q['domain'] }}</span>@endif
            <span class="pill pill-amber ex-flagtag" data-flagtag @unless($isFlag) hidden @endunless><x-icon name="flag" :size="12"/> Flagged for review</span>
          </div>
          <fieldset class="ex-fieldset">
            <legend class="q-text">{{ ExamText::html($q['question']) }}</legend>
            <p class="ex-hint" id="hint-{{ $q['id'] }}">@if($q['multiple'])Select {{ $q['select'] }} answers.@elseif($q['type'] === 'truefalse')Select true or false.@else Select one answer.@endif</p>
            <div class="ex-opts" aria-describedby="hint-{{ $q['id'] }}">
              @foreach($q['options'] as $j => $o)
                <label class="q-opt {{ in_array($o['key'], $sel, true) ? 'selected' : '' }}">
                  <input type="{{ $q['multiple'] ? 'checkbox' : 'radio' }}" name="q{{ $q['id'] }}" value="{{ $o['key'] }}" @checked(in_array($o['key'], $sel, true))>
                  <span class="k" aria-hidden="true">{{ chr(65 + $j) }}</span>
                  <span class="grow ex-opt-text">{{ ExamText::option($o['text']) }}</span>
                </label>
              @endforeach
            </div>
          </fieldset>
          <div class="q-nav ex-nav">
            <button type="button" class="btn btn-secondary" data-act="prev" @if($i === 0) disabled @endif><x-icon name="arrow-left" :size="16"/> Previous</button>
            <div class="ex-tools">
              <button type="button" class="btn btn-secondary btn-sm" data-act="flag" aria-pressed="{{ $isFlag ? 'true' : 'false' }}"><x-icon name="flag" :size="15"/> <span data-flag-label>{{ $isFlag ? 'Remove flag' : 'Flag for review' }}</span></button>
              <button type="button" class="btn btn-secondary btn-sm" data-act="clear"><x-icon name="x" :size="15"/> Clear answer</button>
            </div>
            <button type="button" class="btn btn-primary" data-act="next"><span data-next-label>{{ $i === $total - 1 ? 'Review & submit' : 'Next' }}</span> <x-icon name="arrow-right" :size="16"/></button>
          </div>
        </section>
      @endforeach
      <p class="ex-keys small muted"><b>Shortcuts:</b> <kbd>←</kbd> <kbd>→</kbd> previous / next · <kbd>1</kbd>–<kbd>9</kbd> or <kbd>A</kbd>–<kbd>D</kbd> choose an answer · <kbd>F</kbd> flag · <kbd>Delete</kbd> clear.</p>
    </main>

    <aside class="card palette ex-palette" aria-label="Question palette">
      <h2 class="ex-pal-title">Question palette</h2>
      <p class="ex-counts"><b data-count-answered>{{ $answeredCount }}</b> of {{ $total }} answered · <b data-count-flagged>{{ count($flags) }}</b> flagged</p>
      <div class="palette-grid" role="group" aria-label="Jump to question">
        @foreach($paper as $i => $q)
          @php $ans = ! empty($saved[$q['id']] ?? []); $fl = in_array($q['id'], $flags, true); @endphp
          <button type="button" class="pal {{ $ans ? 'answered' : '' }} {{ $fl ? 'flagged' : '' }} {{ $i === 0 ? 'current' : '' }}" data-goto="{{ $i }}" aria-label="Question {{ $i + 1 }}{{ $ans ? ', answered' : ', not answered' }}{{ $fl ? ', flagged' : '' }}" @if($i === 0) aria-current="true" @endif>{{ $i + 1 }}</button>
        @endforeach
      </div>
      <div class="legend"><span><i class="a"></i>Answered</span><span><i></i>Not answered</span><span><i class="f"></i>Flagged</span><span><i class="c"></i>Current</span></div>
      <button type="button" class="btn btn-primary btn-block mt-2" data-open-review>Review &amp; submit</button>
      @if($rules->isNotEmpty())
        <button type="button" class="btn btn-secondary btn-block btn-sm mt-1" data-open-rules><x-icon name="info" :size="15"/> Exam instructions</button>
      @endif
      <p class="xs muted mt-2 mb-0">Pass mark {{ $exam->pass_percent }}% · {{ $total }} questions · {{ $exam->duration_minutes }} minutes{{ $exam->negative_marking > 0 ? ' · negative marking applies' : '' }}</p>
    </aside>
  </div>

  <div id="ex-live" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>

  {{-- review before submit --}}
  <div class="modal" id="ex-review" role="dialog" aria-modal="true" aria-labelledby="ex-review-title">
    <div class="modal-box ex-review-box">
      <h2 id="ex-review-title" class="ex-modal-h">Review your answers</h2>
      <p class="ex-review-sum" data-review-sum></p>
      <div data-review-group="unanswered" hidden><h3 class="ex-group-h">Not answered <span data-review-n></span></h3><div class="ex-chips" data-review-list></div></div>
      <div data-review-group="flagged" hidden><h3 class="ex-group-h">Flagged for review <span data-review-n></span></h3><div class="ex-chips" data-review-list></div></div>
      <div class="callout warn mt-2" data-review-unsaved hidden><x-icon name="alert" :size="18"/><div>Some answers are still waiting to be saved. Wait a moment, or submit anyway.</div></div>
      <div class="callout mt-2"><x-icon name="info" :size="18"/><div>After you submit you cannot change your answers. Unanswered questions score zero.</div></div>
      <div class="ex-modal-actions">
        <button type="button" class="btn btn-secondary" data-review-close>Return to exam</button>
        <button type="button" class="btn btn-primary" data-review-submit>Submit exam</button>
      </div>
    </div>
  </div>

  @if($rules->isNotEmpty())
  <div class="modal" id="ex-rules" role="dialog" aria-modal="true" aria-labelledby="ex-rules-title">
    <div class="modal-box ex-review-box">
      <h2 id="ex-rules-title" class="ex-modal-h">Exam instructions</h2>
      <ul class="ex-rules">@foreach($rules as $r)<li>{{ $r }}</li>@endforeach</ul>
      <div class="ex-modal-actions"><button type="button" class="btn btn-primary" data-rules-close>Back to exam</button></div>
    </div>
  </div>
  @endif

  {{-- full-screen gate (strict) / time-up: not dismissible, so not .modal --}}
  <div class="ex-overlay {{ $strict ? 'open' : '' }}" id="ex-gate" role="dialog" aria-modal="true" aria-labelledby="ex-gate-title">
    <div class="ex-overlay-box">
      <span class="ex-overlay-ico"><x-icon name="maximize" :size="28"/></span>
      <h2 id="ex-gate-title" class="ex-modal-h" data-gate-title>Start in full screen</h2>
      <p data-gate-text>This is a strictly proctored exam. It runs in full screen. Leaving full screen, switching tabs or windows, copying, pasting or right-clicking counts as an integrity violation, and the attempt is submitted automatically after {{ $exam->max_violations }} violations. Your timer is already running.</p>
      <button type="button" class="btn btn-primary btn-lg" data-gate-go>Continue in full screen</button>
    </div>
  </div>
  <div class="ex-overlay" id="ex-timeup" role="alertdialog" aria-modal="true" aria-labelledby="ex-timeup-title">
    <div class="ex-overlay-box">
      <span class="ex-overlay-ico bad"><x-icon name="timer" :size="28"/></span>
      <h2 id="ex-timeup-title" class="ex-modal-h">Time is up</h2>
      <p>Your answers are being submitted and graded. Please do not close this window.</p>
      <p class="muted small mb-0"><span class="spin" style="display:inline-block;vertical-align:-3px"><x-icon name="refresh" :size="16"/></span> Submitting…</p>
    </div>
  </div>

  <form method="post" action="{{ route('exams.submit', $attempt->code) }}" id="ex-submit-form" hidden>@csrf</form>
</div>
@endsection

@push('scripts')
<script nonce="{{ csp_nonce() }}">window.EXAM = @js([
    'code' => $attempt->code,
    'secondsLeft' => (int) $secondsLeft,
    'total' => $total,
    'level' => $level,
    'maxViolations' => (int) $exam->max_violations,
    'violations' => (int) $attempt->violations,
    'heartbeat' => (int) config('infotics.exam.heartbeat_seconds', 20),
    'urls' => [
        'answer' => route('exams.answer', $attempt->code),
        'event' => route('exams.event', $attempt->code),
        'take' => route('exams.take', $attempt->code),
        'result' => route('exams.result', $attempt->code),
    ],
]);</script>
<script src="{{ asset_v('assets/js/exam.js') }}" defer nonce="{{ csp_nonce() }}"></script>
@endpush