{% extends 'base.html' %}
{% block title %}{{ class_session['title'] }} - Student Smart Portal{% endblock %}
{% block content %}
{% if class_session['owner_id'] and class_session['portfolio_id'] %}
<a class="back" href="{{url_for('teachers.admin_portfolio_workspace',teacher_id=class_session['owner_id'],portfolio_id=class_session['portfolio_id']) if actor.role=='admin' else url_for('teachers.portfolio_workspace',portfolio_id=class_session['portfolio_id'])}}">&larr; Back to teaching portfolio</a>
{% else %}<a class="back" href="{{url_for('dashboard')}}">&larr; All lectures</a>{% endif %}
<div class="page-heading"><div><div class="eyebrow">LECTURE #{{ class_session['id'] }}</div><h1>{{ class_session['title'] }}</h1><p class="muted">Started {{ class_session['created_at'] | localtime }}</p></div><span id="live-status" class="pill {{ 'open' if active else '' }}">{{ 'Open' if active else 'Closed' }}</span></div>
<div class="two-column session-grid">
  <section class="card qr-card" style="text-align: center;">
    <div class="eyebrow">PROJECT THIS CODE TO STUDENTS</div>
    <h2>Student Attendance Access</h2>
    <img class="qr" src="{{ qr_image }}" alt="QR code for the student attendance form" style="max-width: 240px; margin: 10px auto; display: block; border-radius: 10px;">
    
    <!-- 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;">Scan QR with phone camera OR enter this code in the Student PWA</div>
    </div>

    <p class="muted small-text">Students must connect to classroom Wi-Fi (<strong>SSP@OUC</strong>).</p>
    <div class="url-box">{{ student_url }}</div>
    <div class="actions">
      <button class="button outline" type="button" onclick="window.print()">Print / Project</button>
      <button class="button outline" type="button" onclick='copyStudentLink()'>Copy link</button>
    </div>
  </section>
  <section class="card controls-card">
    <div class="eyebrow">LIVE CLASSROOM STATUS</div>
    <div class="big-count" id="attendance-count">{{ attendees | length }}</div><div class="muted">Students checked in</div>
    <div class="summary-line"><span>Closes at</span><strong>{{ class_session['closes_at'] | localtime }}</strong></div>
    <div class="summary-line"><span>Session state</span><strong id="session-label">{{ 'Accepting check-ins' if active else 'Not accepting check-ins' }}</strong></div>
    <div class="button-stack">
      {% if not class_session['closed'] %}
        <form method="post" action="{{ url_for('extend_session',session_id=class_session['id']) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="button outline full" type="submit">Extend by 5 minutes</button></form>
        {% if active %}<form method="post" action="{{ url_for('close_session',session_id=class_session['id']) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="button danger full" type="submit">Close attendance now</button></form>{% endif %}
      {% endif %}
      <a class="button primary full" href="{{ url_for('export_csv',session_id=class_session['id']) }}">Download attendance CSV</a>
    </div>
    <p class="muted small-text">The live count updates automatically every 4 seconds.</p>
  </section>
</div>
<section class="card table-card">
  <div class="section-heading"><h2>Recorded students ({{ attendees | length }})</h2><a href="{{ url_for('session_detail', session_id=class_session['id']) }}" class="button small outline">Refresh list</a></div>
  {% if attendees %}
  <div class="table-scroll"><table><thead><tr><th>#</th><th>Student full name (Arabic)</th><th>Student Stage</th><th>Group</th><th>Time (Baghdad)</th><th>Correction</th></tr></thead><tbody>
    {% for person in attendees %}<tr><td>{{ loop.index }}</td><td dir="rtl" lang="ar">{{ person['full_name'] }}</td><td>{{ person['student_grade']|stagelabel }}</td><td>{{ person['student_group'] or '—' }}</td><td>{{ person['submitted_at'] | localtime }}</td><td><details><summary>Remove</summary><form class="remove-form" method="post" action="{{ url_for('remove_attendance',session_id=class_session['id'], attendance_id=person['id']) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="reason" minlength="5" maxlength="200" required placeholder="Reason for correction"><button class="button small danger" type="submit">Confirm removal</button></form></details></td></tr>{% endfor %}
  </tbody></table></div>
  {% else %}<p class="muted">No students have checked in yet.</p>{% endif %}
</section>
{% endblock %}
{% block scripts %}
<script>
(function(){
  window.copyStudentLink = async function(){
    var text = {{ student_url | tojson }};
    try { await navigator.clipboard.writeText(text); alert('Student link copied.'); }
    catch(e) { window.prompt('Copy this student link:', text); }
  };
  var count = document.getElementById('attendance-count');
  var state = document.getElementById('live-status');
  var label = document.getElementById('session-label');
  async function update(){
    try {
      var result = await fetch({{ url_for('session_status',session_id=class_session['id']) | tojson }}, {cache:'no-store'});
      if(!result.ok) return;
      var data = await result.json();
      count.textContent = data.count;
      state.textContent = data.active ? 'Open' : 'Closed';
      state.classList.toggle('open', data.active);
      label.textContent = data.active ? 'Accepting check-ins' : 'Not accepting check-ins';
    } catch (e) {}
  }
  setInterval(update, 5000);
})();
</script>
{% endblock %}