{% extends 'base.html' %}
{% block title %}{{ quiz['title'] }} - MCQ Quiz Admin{% endblock %}
{% block content %}

{% if bridge_row and not bridge_row.launched_at %}
<div class="card" style="background:#fff8e6;border:1px solid #ffd57a;padding:18px;margin-bottom:18px;border-radius:12px;">
  <strong style="font-size:1.05rem;color:#7a4b00;">&#128221; Imported Cloud Examination: Ready to Launch</strong>
  <p style="margin:6px 0 12px;color:#555;">Start the countdown timer only when your students are seated in the classroom and connected to <strong>SSP@OUC</strong>.</p>
  <form method="post" action="{{ url_for('bridge.launch_quiz',quiz_id=quiz.id) }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <button type="submit" class="button primary" style="padding:11px 20px;font-weight:700;">Launch Quiz &amp; Display Classroom QR</button>
  </form>
</div>
{% endif %}

{% if quiz['owner_id'] and quiz['portfolio_id'] %}
<a class="back" href="{{url_for('teachers.admin_portfolio_workspace',teacher_id=quiz['owner_id'],portfolio_id=quiz['portfolio_id']) if actor.role=='admin' else url_for('teachers.portfolio_workspace',portfolio_id=quiz['portfolio_id'])}}">&larr; Back to teaching portfolio</a>
{% else %}
<a class="back" href="{{url_for('quiz.quizzes_admin')}}">&larr; All quizzes</a>
{% endif %}

<div class="page-heading" style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin:12px 0 20px;">
  <div>
    <div class="eyebrow">MCQ QUIZ #{{quiz['id']}}</div>
    <h1 style="margin:4px 0 6px;font-size:1.6rem;color:#08154c;">{{quiz['title']}}</h1>
    <p class="muted">Closes at: <strong>{{quiz['closes_at']|localtime}}</strong> &bull; Total Points: <strong>{{questions|sum(attribute='points')}}</strong></p>
  </div>
  <span class="pill {{'approved' if active else 'archived'}}" style="font-size:.9rem;padding:6px 14px;border-radius:20px;">{{'&#128994; Live / Open' if active else 'Closed'}}</span>
</div>

<div class="two-column" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;">
  <!-- QR Code & Link Card -->
  <section class="card qr-card" style="text-align:center;">
    {% if bridge_row and not bridge_row.launched_at %}
      <p class="notice">The QR code and student link will appear here once you launch the examination.</p>
    {% else %}
      <h2 style="font-size:1.2rem;color:#08154c;">Classroom Examination Access</h2>
      <img class="qr" src="{{qr_image}}" alt="QR code for student quiz" style="max-width:240px;width:100%;height:auto;margin:12px auto;display:block;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,0.06);">
      
      <!-- Six-Digit Numeric Access Code Directly Underneath QR Code -->
      <div class="six-digit-display" style="margin: 14px 0; padding: 14px 18px; background: #003366; border-radius: 12px; text-align: center; color: white; box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);">
        <div style="font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: 4px;">6-Digit Access Code / الرمز السداسي</div>
        <div style="font-size: 2.8rem; font-weight: 800; letter-spacing: 8px; font-family: monospace; color: #38bdf8; line-height: 1.1;">{{ six_digit_code or '------' }}</div>
        <div style="font-size: 0.82rem; color: #cbd5e1; margin-top: 4px;">Students can scan QR or enter this 6-digit code in the Student PWA</div>
      </div>

      <p class="muted small-text">Students connect to campus Wi-Fi (<strong>SSP@OUC</strong>), scan this QR code or enter code, and submit their answers.</p>
      <div class="url-box" style="word-break:break-all;font-size:.85rem;padding:8px 12px;margin:10px 0;background:#f3f6fa;border-radius:8px;border:1px solid #d9e3f0;">{{link}}</div>
      <div class="button-stack" style="display:flex;flex-direction:row;gap:8px;margin-top:10px;">
        <button class="button outline" type="button" onclick="window.print()" style="flex:1;">Project / Print QR</button>
        <button class="button outline" type="button" onclick="navigator.clipboard.writeText('{{link}}');alert('Link copied to clipboard.');" style="flex:1;">Copy Link</button>
      </div>
    {% endif %}
  </section>

  <!-- Quiz Administration & Live Controls Card -->
  <section class="card">
    <h2 style="font-size:1.2rem;color:#08154c;">Quiz Controls</h2>
    <div class="big-count" style="font-size:2.5rem;font-weight:800;color:#0b205c;margin:6px 0;">{{records|length}}</div>
    <p class="muted" style="margin-bottom:16px;">Student attempts registered &bull; {{questions|length}} questions</p>

    <div class="button-stack" style="display:flex;flex-direction:column;gap:10px;">
      <a href="{{url_for('quiz.quiz_export',quiz_id=quiz['id'])}}" class="button primary full" style="text-align:center;">Export Scores to Excel/CSV</a>
      <a href="{{url_for('quiz.quiz_detail',quiz_id=quiz['id'])}}" class="button outline full" style="text-align:center;">Refresh Live Results &#8635;</a>

      {% if active %}
        <!-- Live Open Controls -->
        <form method="post" action="{{url_for('quiz.quiz_extend',quiz_id=quiz['id'])}}" style="margin:0;">
          <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
          <button type="submit" class="button outline full" style="color:#0b205c;font-weight:700;width:100%;">Extend Timer (+5 Minutes) &#9201;</button>
        </form>
        <form method="post" action="{{url_for('quiz.quiz_close',quiz_id=quiz['id'])}}" onsubmit="return confirm('Close this quiz now? In-progress attempts will be graded using saved answers.')" style="margin:0;">
          <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
          <button type="submit" class="button danger full" style="font-weight:700;width:100%;">Close Quiz &amp; Grade Now</button>
        </form>
      {% else %}
        <!-- Reopen Quiz Section -->
        <div class="notice" style="background:#eef5ff;border:1px solid #b9d5fb;padding:16px;border-radius:12px;margin-top:6px;">
          <strong style="color:#0b205c;display:block;margin-bottom:8px;font-size:.96rem;">&#8635; Reopen Quiz for Retake / Extensions</strong>
          <form method="post" action="{{url_for('quiz.quiz_reopen',quiz_id=quiz['id'])}}">
            <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
              <label for="reopen_minutes" style="font-size:.88rem;margin:0;font-weight:600;white-space:nowrap;">Duration:</label>
              <select id="reopen_minutes" name="minutes" style="padding:8px 12px;border-radius:8px;border:1px solid #baccdb;font-size:.92rem;flex:1;">
                <option value="5">5 Minutes</option>
                <option value="10">10 Minutes</option>
                <option value="15" selected>15 Minutes</option>
                <option value="30">30 Minutes</option>
                <option value="60">1 Hour</option>
                <option value="120">2 Hours</option>
              </select>
            </div>
            <div style="margin-bottom:14px;font-size:.86rem;color:#333;">
              <label style="display:flex;align-items:center;gap:8px;font-weight:normal;cursor:pointer;">
                <input type="checkbox" name="clear_attempts" value="1" style="width:18px;height:18px;margin:0;">
                <span><strong>Fresh class retake:</strong> Clear all student scores and attempts for a complete retake</span>
              </label>
            </div>
            <button type="submit" class="button primary full" style="background:#0b205c;color:white;font-weight:700;padding:11px 16px;width:100%;">Reopen Quiz Now &#8635;</button>
          </form>
        </div>
      {% endif %}
    </div>
  </section>
</div>

<!-- Participants Table Card with Individual Resubmit Action -->
<section class="card table-card" style="margin-top:22px;">
  <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;">
    <h2 style="font-size:1.25rem;color:#08154c;margin:0;">Student Participants ({{records|length}})</h2>
    <span class="muted" style="font-size:.84rem;">Tap <strong>Allow Resubmit &#8635;</strong> on any student row to permit an individual retake.</span>
  </div>

  {% if records %}
  <div class="tablewrap">
    <table class="table" style="width:100%;">
      <thead>
        <tr>
          <th>Full Name (Arabic)</th>
          <th>Stage</th>
          <th>Group</th>
          <th>Status</th>
          <th>Score</th>
          <th>Submitted</th>
          <th style="text-align:center;min-width:180px;">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for a in records %}
        <tr>
          <td dir="rtl" lang="ar" style="font-weight:700;color:#0b205c;">{{a['full_name']}}</td>
          <td>{{a['student_grade']|stagelabel}}</td>
          <td>{{a['student_group'] or '&mdash;'}}</td>
          <td>
            {% if a['submitted_at'] %}
              <span class="pill approved" style="font-size:.78rem;padding:3px 9px;">Submitted</span>
            {% else %}
              <span class="pill pending" style="font-size:.78rem;padding:3px 9px;">In progress</span>
            {% endif %}
          </td>
          <td style="font-weight:700;">
            {% if a['score'] is not none %}
              {{a['score']}} / {{questions|sum(attribute='points')}}
            {% else %}
              <span class="muted">&mdash;</span>
            {% endif %}
          </td>
          <td style="font-size:.82rem;color:#666;">
            {{a['submitted_at']|localtime if a['submitted_at'] else '&mdash;'}}
          </td>
          <td style="text-align:center;">
            <div style="display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;">
              <!-- Individual Resubmit Button -->
              <form method="post" action="{{url_for('quiz.quiz_attempt_reset',quiz_id=quiz['id'],attempt_id=a['id'])}}" onsubmit="return confirm('Allow {{a.full_name}} to retake and resubmit their exam?')" style="margin:0;">
                <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
                <button type="submit" class="button outline sm" title="Allow this student to retake and resubmit" style="background:#f0f6ff;color:#0b205c;border-color:#b4cff6;padding:5px 10px;font-size:.82rem;font-weight:700;border-radius:7px;cursor:pointer;">
                  Allow Resubmit &#8635;
                </button>
              </form>
              <!-- Delete Attempt Button -->
              <form method="post" action="{{url_for('quiz.quiz_attempt_delete',quiz_id=quiz['id'],attempt_id=a['id'])}}" onsubmit="return confirm('Completely remove attempt for {{a.full_name}}? They will be able to join afresh on any device.')" style="margin:0;">
                <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
                <button type="submit" class="button danger sm" title="Remove attempt completely" style="background:#feecec;color:#b3261e;border-color:#f5c2c0;padding:5px 9px;font-size:.82rem;border-radius:7px;cursor:pointer;">
                  &times;
                </button>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p class="muted" style="padding:16px 0;margin:0;">No student attempts recorded yet. Direct students to scan the QR code to begin.</p>
  {% endif %}
</section>

{% endblock %}

{% block scripts %}
<script>
(function(){
  var bigCount = document.querySelector('.big-count');
  var quizId = {{ quiz['id'] | tojson }};
  
  async function pollQuizStatus() {
    try {
      var resp = await fetch('/admin/quizzes/' + quizId + '/status', { cache: 'no-store' });
      if (!resp.ok) return;
      var data = await resp.json();
      if (bigCount && typeof data.attempts_count !== 'undefined') {
        bigCount.textContent = data.attempts_count;
      }
    } catch (e) {}
  }
  setInterval(pollQuizStatus, 4000);
})();
</script>
{% endblock %}