{% extends "base.html" %}
{% block judul %}Susun ujian {{ ujian.judul }} — Atlas Histo{% endblock %}

{% block isi %}
<nav class="remah" aria-label="Remah roti">
  <a href="{{ url_for('belajar.rekap', kelas_id=ujian.kelas_id) }}">{{ ujian.kelas_nama }}</a>
  <span aria-hidden="true">/</span><span aria-current="page">{{ ujian.judul }}</span>
</nav>

<header class="halaman-kepala">
  <div>
    <p class="eyebrow">Susun ujian · status {{ ujian.status }}</p>
    <h1>{{ ujian.judul }}</h1>
    <p class="hero-teks kecil">{{ soal|length }} soal · kelas {{ ujian.kelas_nama }}</p>
  </div>
  <div class="aksi-kepala">
    <a class="tombol tombol-garis tombol-kecil" href="{{ url_for('dosen_ujian.tinjau', ujian_id=ujian.id) }}">Tinjau jawaban</a>
    <a class="tombol tombol-garis tombol-kecil" href="{{ url_for('dosen_ujian.rekap', ujian_id=ujian.id) }}">Rekap nilai</a>
  </div>
</header>

<div class="dua-kolom">
  <section class="kartu-panel">
    <h2>Tambah soal</h2>
    <form method="post" action="{{ url_for('dosen_ujian.tambah_soal', ujian_id=ujian.id) }}" class="form" data-form-soal>
      {{ csrf_input() }}
      <div class="bidang">
        <label for="gambar_id">Preparat</label>
        <select id="gambar_id" name="gambar_id" required data-pilih-preparat>
          {% for p in preparat %}
            <option value="{{ p.id }}"
                    data-foto="{{ url_for('foto', nama=(p.file_proxy or p.file_gambar)) }}">{{ p.judul }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="panggung-tunjuk" data-panggung-tunjuk>
        <img data-foto-tunjuk src="" alt="Preparat untuk soal" draggable="false">
        <span class="titik-tunjuk" data-titik hidden></span>
      </div>
      <p class="bantuan">Klik pada gambar untuk menandai struktur yang ditanyakan.</p>
      <input type="hidden" name="x_pos" value="50" data-x>
      <input type="hidden" name="y_pos" value="50" data-y>
      <div class="bidang">
        <label for="pertanyaan">Pertanyaan</label>
        <input id="pertanyaan" name="pertanyaan" required maxlength="255"
               placeholder="Sebutkan nama struktur yang ditunjuk">
      </div>
      <div class="baris-bidang">
        <div class="bidang">
          <label for="tipe">Jenis soal</label>
          <select id="tipe" name="tipe" data-tipe>
            <option value="isian_tunjuk">Isian (tunjuk → ketik)</option>
            <option value="pilihan_ganda">Pilihan ganda</option>
          </select>
        </div>
        <div class="bidang">
          <label for="skor">Skor</label>
          <input id="skor" name="skor" type="number" min="1" max="100" value="10">
        </div>
      </div>
      <div class="bidang" data-isian>
        <label for="kunci_teks">Kunci jawaban</label>
        <input id="kunci_teks" name="kunci_teks" maxlength="255" placeholder="mis. Tunica mucosa">
      </div>
      <div class="bidang" data-isian>
        <label for="sinonim">Sinonim (dipisah koma)</label>
        <input id="sinonim" name="sinonim" placeholder="mukosa, tunika mukosa, mucosal layer">
      </div>
      <div class="bidang" data-pg hidden>
        <label for="pilihan">Opsi jawaban (dipisah tanda |)</label>
        <input id="pilihan" name="pilihan" placeholder="Glomerulus|Tubulus|Kapsula">
      </div>
      <div class="bidang" data-pg hidden>
        <label for="jawaban_pg">Nomor opsi benar (mulai 0)</label>
        <input id="jawaban_pg" name="jawaban_pg" type="number" min="0" max="4" value="0">
      </div>
      <div class="bidang">
        <label for="pembahasan">Pembahasan (opsional)</label>
        <input id="pembahasan" name="pembahasan" maxlength="255">
      </div>
      <button class="tombol tombol-utama lebar" type="submit">Tambah soal</button>
    </form>
  </section>

  <section class="kartu-panel">
    <h2>Pengaturan ujian</h2>
    <form method="post" action="{{ url_for('dosen_ujian.sunting', ujian_id=ujian.id) }}" class="form">
      {{ csrf_input() }}
      <input type="hidden" name="aksi" value="meta">
      <div class="bidang">
        <label for="judul">Judul</label>
        <input id="judul" name="judul" value="{{ ujian.judul }}" required maxlength="200">
      </div>
      <div class="bidang">
        <label for="petunjuk">Petunjuk</label>
        <textarea id="petunjuk" name="petunjuk" rows="3">{{ ujian.petunjuk or '' }}</textarea>
      </div>
      <div class="baris-bidang">
        <div class="bidang">
          <label for="mulai">Mulai</label>
          <input id="mulai" name="mulai" type="datetime-local"
                 value="{{ ujian.mulai.strftime('%Y-%m-%dT%H:%M') if ujian.mulai else '' }}">
        </div>
        <div class="bidang">
          <label for="tutup">Tutup</label>
          <input id="tutup" name="tutup" type="datetime-local"
                 value="{{ ujian.tutup.strftime('%Y-%m-%dT%H:%M') if ujian.tutup else '' }}">
        </div>
        <div class="bidang">
          <label for="durasi_menit">Durasi (menit)</label>
          <input id="durasi_menit" name="durasi_menit" type="number" min="1" max="600"
                 value="{{ ujian.durasi_menit or '' }}">
        </div>
      </div>
      <p class="bantuan">Batas pengerjaan = yang lebih dulu antara jam tutup dan durasi.</p>
      <label class="pilihan"><input type="checkbox" name="acak" value="1" {{ 'checked' if ujian.acak else '' }}>
        <span>Acak urutan soal per mahasiswa</span></label>
      <label class="pilihan"><input type="checkbox" name="tampilkan_kunci" value="1"
             {{ 'checked' if ujian.tampilkan_kunci else '' }}>
        <span>Tampilkan kunci setelah ujian ditutup</span></label>
      <button class="tombol tombol-utama lebar" type="submit">Simpan pengaturan</button>
    </form>

    <form method="post" action="{{ url_for('dosen_ujian.sunting', ujian_id=ujian.id) }}" class="form">
      {{ csrf_input() }}
      <input type="hidden" name="aksi" value="status">
      <div class="baris-bidang">
        <button class="tombol tombol-garis lebar" name="status" value="draf" type="submit">Draf</button>
        <button class="tombol tombol-utama lebar" name="status" value="terbit" type="submit">Terbitkan</button>
        <button class="tombol tombol-hapus lebar" name="status" value="tutup" type="submit">Tutup</button>
      </div>
    </form>
  </section>
</div>

<section class="kartu-panel">
  <div class="panel-kepala"><h2>Daftar soal</h2><span class="hitung">{{ soal|length }}</span></div>
  {% if soal %}
    <ol class="daftar-soal">
      {% for s in soal %}
        <li>
          <span class="nomor" aria-hidden="true">{{ loop.index }}</span>
          <div class="daftar-teks">
            <strong>{{ s.pertanyaan }}</strong>
            <small>{{ s.judul }} · titik {{ s.x_pos }}%, {{ s.y_pos }}% · skor {{ s.skor }}
              · {{ 'isian' if s.tipe == 'isian_tunjuk' else 'pilihan ganda' }}</small>
            <small class="bantuan">Kunci: {{ s.kunci_teks or '-' }}{% if s.sinonim %} ·
              sinonim: {{ s.sinonim }}{% endif %}</small>
          </div>
          <form method="post" action="{{ url_for('dosen_ujian.hapus_soal', ujian_id=ujian.id, soal_id=s.id) }}"
                data-konfirmasi="Hapus soal ini?">
            {{ csrf_input() }}
            <button class="tombol tombol-hapus tombol-kecil" type="submit">Hapus</button>
          </form>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="kosong-kecil">Belum ada soal. Tambahkan lewat formulir di atas.</p>
  {% endif %}
</section>
{% endblock %}

{% block skrip %}
<script src="{{ url_for('static', filename='tunjuk.js') }}?v=1"></script>
{% endblock %}