{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3 class="mb-0">Panel Admin</h3>
  <a class="btn btn-outline-danger" href="{{ url_for('admin_logout') }}">Logout</a>
</div>

<div class="row g-3">
  <div class="col-lg-3">
    <div class="card shadow-sm sticky-top" style="top: 1rem;">
      <div class="card-header bg-white fw-semibold">Menu Admin</div>
      <div class="list-group list-group-flush">
        <div class="list-group-item">
          <div class="fw-semibold mb-2">1. Mapel</div>
          <div class="d-grid gap-2">
            <a class="btn btn-sm btn-success" href="{{ url_for('admin_new_subject') }}">a. Tambah Mapel</a>
            <a class="btn btn-sm btn-secondary" href="{{ url_for('admin_new_question') }}">a. Soal (Tambah Manual)</a>
            <a class="btn btn-sm btn-dark" href="{{ url_for('admin_bulk_questions') }}">a. Bulk Upload Soal</a>
          </div>
        </div>
        <div class="list-group-item">
          <div class="fw-semibold mb-2">2. Daftar Mapel untuk Soal</div>
          <form method="get" action="{{ url_for('admin_dashboard') }}" class="d-grid gap-2">
            <label class="form-label mb-0 small text-muted">a. Filter Lihat Soal per Mapel</label>
            <select name="subject_id" class="form-select form-select-sm">
              <option value="">Semua mata pelajaran</option>
              {% for s in subjects %}
                <option value="{{ s.id }}" {% if selected_subject_id == s.id %}selected{% endif %}>{{ s.name }}</option>
              {% endfor %}
            </select>
            <button type="submit" class="btn btn-sm btn-primary">Tampilkan Soal</button>
            <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin_dashboard') }}#daftar-mapel-soal">Lihat Daftar Soal</a>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-9">
    <div class="row g-3 mb-3">
      <div class="col-md-6">
        <div class="card shadow-sm h-100">
          <div class="card-header bg-white fw-semibold">Pengaturan Mata Pelajaran</div>
          <div class="card-body">
            {% if subjects %}
            <div class="table-responsive">
              <table class="table table-bordered align-middle">
                <thead>
                  <tr>
                    <th>Mapel</th>
                    <th>Soal</th>
                    <th>Status</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  {% for s in subjects %}
                  <tr>
                    <td>
                      <strong>{{ s.name }}</strong><br>
                      <small class="text-muted">{{ s.description or '-' }}</small>
                    </td>
                    <td>{{ s.total_questions }}</td>
                    <td>
                      {% if s.is_active == 1 %}
                        <span class="badge text-bg-success">Aktif</span>
                      {% else %}
                        <span class="badge text-bg-secondary">Nonaktif</span>
                      {% endif %}
                    </td>
                    <td>
                      <a
                        class="btn btn-sm {% if s.is_active == 1 %}btn-danger{% else %}btn-success{% endif %}"
                        href="{{ url_for('admin_toggle_subject', subject_id=s.id) }}"
                      >
                        {% if s.is_active == 1 %}
                          INACTIVE
                        {% else %}
                          ACTIVE
                        {% endif %}
                      </a>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% else %}
              <p class="text-muted mb-0">Belum ada mapel.</p>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card shadow-sm h-100">
          <div class="card-header bg-white fw-semibold">Riwayat Hasil Tes (50 Terbaru)</div>
          <div class="card-body">
            {% if attempts %}
            <div class="table-responsive">
              <table class="table table-striped table-sm align-middle">
                <thead>
                  <tr>
                    <th>Nama</th>
                    <th>Mapel</th>
                    <th>Skor</th>
                    <th>Waktu</th>
                  </tr>
                </thead>
                <tbody>
                  {% for a in attempts %}
                  <tr>
                    <td>
                      <strong>{{ a.full_name }}</strong><br>
                      <small class="text-muted">{{ a.email }}</small>
                    </td>
                    <td>{{ a.subject_name }}</td>
                    <td>{{ a.score }} / 100</td>
                    <td><small>{{ a.created_at }}</small></td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% else %}
              <p class="text-muted mb-0">Belum ada peserta tes.</p>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <div class="card shadow-sm" id="daftar-mapel-soal">
      <div class="card-header bg-white fw-semibold">2. Daftar Mapel untuk Soal — Daftar Soal (100 Terbaru)</div>
      <div class="card-body">
        <form method="get" class="row g-2 mb-3">
          <div class="col-md-6">
            <select name="subject_id" class="form-select">
              <option value="">Semua mata pelajaran</option>
              {% for s in subjects %}
                <option value="{{ s.id }}" {% if selected_subject_id == s.id %}selected{% endif %}>{{ s.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-auto d-flex gap-2">
            <button class="btn btn-primary" type="submit">Filter</button>
            <a href="{{ url_for('admin_dashboard') }}" class="btn btn-outline-secondary">Reset</a>
          </div>
        </form>

        {% if questions %}
        <div class="table-responsive">
          <table class="table table-sm table-bordered align-middle">
            <thead>
              <tr>
                <th style="width: 70px;">ID</th>
                <th style="width: 180px;">Mapel</th>
                <th>Pertanyaan</th>
                <th style="width: 120px;">Kunci</th>
                <th style="width: 110px;">Aksi</th>
              </tr>
            </thead>
            <tbody>
              {% for q in questions %}
              <tr>
                <td>{{ q.id }}</td>
                <td>{{ q.subject_name }}</td>
                <td>{{ q.question_text }}</td>
                <td><span class="badge text-bg-primary">{{ q.correct_option }}</span></td>
                <td>
                  <a href="{{ url_for('admin_edit_question', question_id=q.id) }}" class="btn btn-sm btn-outline-warning">Edit</a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
          <p class="text-muted mb-0">Belum ada soal tersimpan.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}