@extends('layouts.portal')
@section('title', $exam->title)
@section('subtitle', ($exam->course?->title ?? 'Not linked to a course').' · '.$exam->code)
@section('actions')
  <a class="btn btn-secondary" href="{{ route('admin.exams.attempts', $exam) }}"><x-icon name="users" :size="16"/> Attempts</a>
  <a class="btn btn-secondary" href="{{ route('admin.exams.edit', $exam) }}"><x-icon name="settings" :size="16"/> Settings</a>
  <button class="btn btn-primary" type="button" data-modal-open="#add-question"><x-icon name="plus" :size="16"/> Add question</button>
@endsection

@section('content')
@php
  $drawn = $exam->drawSize();
  $short = $stats['active'] < $exam->question_count;
  $passRate = $stats['attempts'] ? round($stats['passed'] / $stats['attempts'] * 100) : null;
  $openAdd = old('_form') === 'add-question';
@endphp

@if($short)
  <div class="callout warn mb-2"><x-icon name="alert" :size="20"/><div><b>The question bank is smaller than the draw size.</b> Each attempt is set to draw {{ $exam->question_count }} questions but only {{ $stats['active'] }} {{ \Illuminate\Support\Str::plural('is', $stats['active']) === 'is' ? 'is' : 'are' }} active, so learners will get {{ $drawn }}. Add questions below or import a CSV.</div></div>
@endif

<div class="kpis">
  <div class="card kpi"><span class="ico"><x-icon name="list-checks" :size="22"/></span><span>Questions</span><b>{{ $stats['total'] }}</b><small>{{ $stats['active'] }} active · {{ $stats['total'] - $stats['active'] }} retired</small></div>
  <div class="card kpi violet"><span class="ico"><x-icon name="clipboard-check" :size="22"/></span><span>Completed attempts</span><b>{{ $stats['attempts'] }}</b><small><a href="{{ route('admin.exams.attempts', $exam) }}">View all attempts</a></small></div>
  <div class="card kpi green"><span class="ico"><x-icon name="check-circle" :size="22"/></span><span>Pass rate</span><b>{{ $passRate !== null ? $passRate.'%' : '—' }}</b><small>{{ $stats['attempts'] ? 'Average score '.$stats['avg'].'%' : 'No results yet' }}</small></div>
  <div class="card kpi {{ $stats['flagged'] ? 'amber' : '' }}"><span class="ico"><x-icon name="shield-alert" :size="22"/></span><span>Flagged attempts</span><b>{{ $stats['flagged'] }}</b><small>@if($stats['flagged'])<a href="{{ route('admin.exams.attempts', [$exam, 'flagged' => 1]) }}">Review integrity events</a>@else No integrity events @endif</small></div>
</div>

<div class="ab-cols">
  <div class="ab-main">
    <section class="panel" id="bank">
      <div class="panel-head">
        <h2>Question bank</h2>
        <form class="filters" method="get" action="{{ route('admin.exams.show', $exam) }}" style="margin:0">
          <div class="searchbox" style="min-width:200px"><x-icon name="search" :size="17"/><input class="input" type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search questions" aria-label="Search questions"></div>
          <select class="select" name="domain" aria-label="Filter by domain" data-autosubmit>
            <option value="">All domains</option>
            @foreach($domains as $d)<option value="{{ $d }}" @selected(($filters['domain'] ?? '') === $d)>{{ $d }}</option>@endforeach
          </select>
          <button class="btn btn-secondary btn-sm" type="submit">Search</button>
          @if(array_filter($filters))<a class="btn btn-ghost btn-sm" href="{{ route('admin.exams.show', $exam) }}">Clear</a>@endif
        </form>
      </div>
      <div class="table-wrap" style="border:0;border-radius:0">
        <table class="table">
          <thead><tr><th>#</th><th>Question</th><th>Domain</th><th>Type</th><th>Level</th><th class="num">Marks</th><th>Status</th><th></th></tr></thead>
          <tbody>
          @forelse($questions as $q)
            <tr>
              <td class="muted">{{ $q->id }}</td>
              <td style="min-width:260px;max-width:460px"><a class="ab-q-text" href="{{ route('admin.exams.questions.edit', [$exam, $q]) }}" title="{{ $q->question }}">{{ \Illuminate\Support\Str::limit($q->question, 150) }}</a><span class="ab-sub">{{ count((array) $q->options) }} options · answer {{ implode(', ', (array) $q->correct) }}</span></td>
              <td>{{ $q->domain ?: '—' }}</td>
              <td><span class="pill pill-gray">{{ $q->type === 'truefalse' ? 'True/False' : ucfirst($q->type) }}</span></td>
              <td><span class="pill {{ ['easy' => 'pill-green', 'medium' => 'pill-amber', 'hard' => 'pill-red'][$q->difficulty] ?? 'pill-gray' }}">{{ ucfirst($q->difficulty) }}</span></td>
              <td class="num">{{ rtrim(rtrim(number_format((float) $q->marks, 2), '0'), '.') }}</td>
              <td><x-pill :status="$q->active ? 'active' : 'archived'"/></td>
              <td class="actions">
                <a class="icon-btn" href="{{ route('admin.exams.questions.edit', [$exam, $q]) }}" aria-label="Edit question {{ $q->id }}" title="Edit"><x-icon name="edit" :size="16"/></a>
                <form method="post" action="{{ route('admin.exams.questions.destroy', [$exam, $q]) }}" style="display:inline" data-confirm="Delete this question? If it was used in attempts it is retired instead.">
                  @csrf @method('DELETE')
                  <button class="icon-btn" type="submit" aria-label="Delete question {{ $q->id }}" title="Delete"><x-icon name="trash" :size="16"/></button>
                </form>
              </td>
            </tr>
          @empty
            <tr><td colspan="8"><x-empty icon="list-checks" :title="array_filter($filters) ? 'No questions match these filters' : 'This bank has no questions yet'" text="Add a question by hand or import many at once from a CSV file."><button class="btn btn-primary" type="button" data-modal-open="#add-question">Add the first question</button></x-empty></td></tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </section>
    {{ $questions->links() }}
  </div>

  <aside class="ab-side">
    <section class="panel">
      <div class="panel-head"><h2>Exam settings</h2><a class="small" href="{{ route('admin.exams.edit', $exam) }}">Edit</a></div>
      <div class="panel-body">
        <dl class="kv" style="grid-template-columns:118px 1fr">
          <dt>Status</dt><dd><x-pill :status="$exam->published ? 'published' : 'draft'"/> @if($exam->published && ! $exam->isOpen())<span class="pill pill-amber">Outside window</span>@endif</dd>
          <dt>Duration</dt><dd>{{ $exam->duration_minutes }} minutes</dd>
          <dt>Questions</dt><dd>{{ $exam->question_count }} drawn per attempt</dd>
          <dt>Pass mark</dt><dd>{{ $exam->pass_percent }}%</dd>
          <dt>Attempts</dt><dd>{{ $exam->max_attempts ?: 'Unlimited' }}@if($exam->cooldown_hours) · {{ $exam->cooldown_hours }}h cool-down @endif</dd>
          <dt>Negative marks</dt><dd>{{ (float) $exam->negative_marking ? $exam->negative_marking.' per wrong answer' : 'Off' }}</dd>
          <dt>Proctoring</dt><dd>{{ ucfirst($exam->proctor_level) }}@if($exam->proctor_level === 'strict') · auto-submit at {{ $exam->max_violations }}@endif</dd>
          <dt>Answer review</dt><dd>{{ ['none' => 'Never', 'after_submit' => 'After each attempt', 'after_pass' => 'Only after passing'][$exam->show_review] ?? $exam->show_review }}</dd>
          <dt>Randomised</dt><dd>{{ $exam->shuffle_questions ? 'Questions' : '' }}{{ $exam->shuffle_questions && $exam->shuffle_options ? ' + ' : '' }}{{ $exam->shuffle_options ? 'options' : '' }}{{ ! $exam->shuffle_questions && ! $exam->shuffle_options ? 'No' : '' }}</dd>
          <dt>Enrollment</dt><dd>{{ $exam->requires_enrollment ? 'Required' : 'Open to any learner' }}</dd>
          @if($exam->opens_at || $exam->closes_at)
            <dt>Window</dt><dd>{{ $exam->opens_at?->format('d M Y, g:i A') ?? 'Now' }} → {{ $exam->closes_at?->format('d M Y, g:i A') ?? 'no end' }}</dd>
          @endif
          <dt>Badge</dt><dd>@if($exam->badge)<a href="{{ route('admin.badges.edit', $exam->badge) }}">{{ $exam->badge->name }}</a>@else<span class="muted">None linked</span>@endif</dd>
        </dl>
      </div>
    </section>

    <section class="panel" id="import">
      <div class="panel-head"><h2>Import from CSV</h2></div>
      <div class="panel-body">
        <form method="post" action="{{ route('admin.exams.import', $exam) }}" enctype="multipart/form-data">
          @csrf
          <div class="dropzone">
            <input type="file" name="file" accept=".csv,text/csv,text/plain" data-max-mb="2" required aria-label="CSV file">
            <x-icon name="upload" :size="26"/>
            <div class="bold" data-dz-label>Choose a CSV file or drag it here</div>
            <div class="xs muted">Up to 2 MB · UTF-8</div>
          </div>
          @error('file')<div class="field-error">{{ $message }}</div>@enderror
          <div class="row mt-2">
            <button class="btn btn-primary btn-sm" type="submit"><x-icon name="upload" :size="15"/> Import questions</button>
            <a class="btn btn-secondary btn-sm" href="{{ route('admin.exams.sample', $exam) }}"><x-icon name="download" :size="15"/> Sample CSV</a>
          </div>
        </form>
        <details class="ab-help mt-2">
          <summary>CSV format</summary>
          <p class="small">First row is the header. Required columns: <code>question</code> and <code>correct</code>. Optional: <code>domain</code>, <code>type</code> (single, multiple, truefalse), <code>option_a</code> … <code>option_f</code>, <code>explanation</code>, <code>marks</code>, <code>difficulty</code> (easy, medium, hard).</p>
          <ul class="small">
            <li><code>correct</code> holds option letters, e.g. <code>B</code> or <code>A,C</code> for multiple answers.</li>
            <li>True/False rows need no options; use <code>A</code> for True, <code>B</code> for False.</li>
            <li>Rows that are invalid are skipped and reported by line number.</li>
          </ul>
        </details>
      </div>
    </section>
  </aside>
</div>

<div class="modal {{ $openAdd ? 'open' : '' }}" id="add-question" role="dialog" aria-modal="true" aria-labelledby="add-q-title">
  <form class="modal-box ab-modal-wide" method="post" action="{{ route('admin.exams.questions.store', $exam) }}" novalidate>
    @csrf
    <input type="hidden" name="_form" value="add-question">
    <div class="between mb-2"><h2 id="add-q-title" style="margin:0;font-size:1.2rem">Add a question</h2><button class="icon-btn" type="button" data-modal-close aria-label="Close"><x-icon name="x" :size="18"/></button></div>
    @include('admin.exams._question-fields', ['q' => null, 'domains' => $domains])
    <div class="row" style="justify-content:flex-end">
      <button class="btn btn-secondary" type="button" data-modal-close>Cancel</button>
      <button class="btn btn-primary" type="submit"><x-icon name="plus" :size="16"/> Add question</button>
    </div>
  </form>
</div>
@endsection

@push('scripts')<script src="{{ asset_v('assets/js/admin-exam.js') }}" defer nonce="{{ csp_nonce() }}"></script>@endpush