{% extends 'base.html' %}
{% block title %}{{ quiz['title'] }} - Student MCQ Exam{% endblock %}
{% block content %}
<section class="card quiz-student">
  <div class="student-brand">
    <img src="{{ url_for('static', filename='ouc-logo.jpg') }}" alt="College logo" class="college-logo">
    <div>
      <strong>OSOL AL-ELM UNIVERSITY COLLEGE</strong>
      <span>Pharmacy Department &bull; Student Smart Portal</span>
    </div>
  </div>

  <div class="eyebrow">STUDENT MCQ EXAMINATION</div>
  <h1 style="margin: 6px 0 10px; font-size: 1.55rem; color: #08154c;">{{ quiz['title'] }}</h1>

  {% if quiz['owner_id'] %}
    <p class="muted small-text" style="margin-bottom: 12px;">Instructor: <strong lang="ar" dir="auto">{{ instructor_for(quiz['owner_id']) }}</strong></p>
  {% endif %}

  {% if quiz['instructions'] %}
    <div class="notice" style="white-space: pre-wrap; margin-bottom: 16px;" dir="auto"><strong>Examination instructions:</strong> {{ quiz['instructions'] }}</div>
  {% endif %}

  {% if error %}
    <div class="alert error" style="margin-bottom: 16px;">{{ error }}</div>
  {% endif %}

  {% if attempt and attempt['submitted_at'] %}
    <div class="success-panel" style="text-align: center; padding: 32px 18px; background: #eef8f1; border: 1px solid #c3e6cb; border-radius: 16px; margin: 20px 0;">
      <div class="success-icon" style="font-size: 3rem; color: #155724; line-height: 1; margin-bottom: 12px;">&#10003;</div>
      <h2 style="color: #155724; margin-bottom: 8px;">Examination Submitted Successfully</h2>
      <p style="font-size: 1.05rem; color: #1e4620; margin-bottom: 6px;">Your answers have been securely recorded and graded.</p>
      <p class="muted" style="font-size: 0.9rem;">Thank you, <strong lang="ar" dir="auto">{{ attempt['full_name'] }}</strong>. The instructor will release final results separately.</p>
    </div>

  {% elif attempt and active %}
    <div class="student-session-meta" style="background: #f0f5fc; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
      <div>
        <span lang="ar" dir="rtl" style="font-weight: 700; color: #08154c;">{{ attempt['full_name'] }}</span>
        <span class="muted" style="margin: 0 4px;">&bull;</span>
        <span style="font-size: 0.9rem;">{{ attempt['student_grade']|stagelabel }}</span>
        {% if attempt['student_group'] %}
          <span class="muted" style="margin: 0 4px;">&bull;</span>
          <span style="font-size: 0.88rem;">Group: <strong>{{ attempt['student_group'] }}</strong></span>
        {% endif %}
      </div>
      <div style="font-size: 0.85rem; color: #174ea6; font-weight: 600;">
        Deadline: {{ quiz['closes_at']|localtime }}
      </div>
    </div>

    {% if finish_screen %}
      <div class="exam-finish" role="region" aria-label="Finish examination" style="text-align: center; background: #f6faff; border: 1px solid #cde1f7; padding: 32px 20px; border-radius: 18px; margin: 18px 0;">
        <div class="finish-badge" style="display: inline-flex; width: 60px; height: 60px; border-radius: 50%; background: #e2eefa; align-items: center; justify-content: center; font-size: 1.8rem; color: #0b205c; margin-bottom: 14px;">&#128221;</div>
        <h2 style="color: #0b205c; margin-bottom: 8px;">End of Examination</h2>
        <p style="font-size: 1.08rem; color: #1a2e56; margin-bottom: 14px;">
          You have answered <strong style="color: #0b205c;">{{ answered }} of {{ total }}</strong> questions.
        </p>

        {% if answered < total %}
          <div class="notice" style="background: #fff8e6; border: 1px solid #ffd57a; color: #734c00; margin: 14px auto; max-width: 480px; text-align: start;">
            &#9888; You have <strong>{{ total - answered }}</strong> unanswered question(s). You can return to review them before submitting.
          </div>
        {% else %}
          <div class="notice" style="background: #edf7ee; border: 1px solid #c0e6c5; color: #155724; margin: 14px auto; max-width: 480px; text-align: center;">
            &#10003; All {{ total }} questions answered. Ready to submit!
          </div>
        {% endif %}

        <form method="post" action="{{ url_for('quiz.submit_quiz', token=quiz['token']) }}" onsubmit="return confirm('Submit your examination now? You will not be able to modify answers after submission.');" style="margin-top: 22px;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="confirm" value="yes">
          <button class="button primary" type="submit" style="padding: 14px 32px; font-size: 1.05rem; font-weight: 700; border-radius: 10px; min-height: 50px;">
            Submit Examination Now
          </button>
        </form>

        <div style="margin-top: 14px;">
          <a class="button outline" href="{{ url_for('quiz.student_quiz', token=quiz['token'], step=total-1) }}" style="padding: 10px 18px; font-size: 0.92rem; border-radius: 8px;">
            &larr; Back to Question {{ total }}
          </a>
        </div>
      </div>

    {% elif question %}
      <div class="exam-progress" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
        <strong>Question {{ step + 1 }} of {{ total }}</strong>
        <span id="answered-count-text">{{ answered }} of {{ total }} answered</span>
      </div>
      <progress class="exam-progressbar" value="{{ step + 1 }}" max="{{ total }}" aria-label="Examination progress"></progress>

      <!-- Dual-layer live save status banner -->
      <div id="save-status-indicator" style="display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;padding:4px 10px;border-radius:20px;background:#eef7ee;color:#1e4620;margin:6px 0 12px;">
        <span id="save-icon">&#10003;</span>
        <span id="save-text">Saved to classroom server (تم الحفظ)</span>
      </div>

      <form method="post" action="{{ url_for('quiz.navigate_quiz', token=quiz['token']) }}" class="exam-one-question" id="quizNavForm">
        <input type="hidden" name="csrf_token" id="quizCsrfToken" value="{{ csrf_token() }}">
        <input type="hidden" name="step" value="{{ step }}">

        <fieldset class="quiz-item">
          <legend><strong dir="auto">{{ question['prompt'] }}</strong></legend>
          <div class="quiz-options-group">
            {% for choice in question['options'] %}
              <label class="quiz-option">
                <input type="radio" name="option" value="{{ loop.index0 }}" {% if selected.get(question['id']) == loop.index0 %}checked{% endif %} onchange="onAnswerSelected({{ question['id'] }}, {{ loop.index0 }})">
                <span class="choice-letter">{{ 'ABCD'[loop.index0] }}</span>
                <span class="choice-text" dir="auto">{{ choice }}</span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        <div class="exam-nav exam-nav-sticky">
          {% if step > 0 %}
            <button class="button outline" name="direction" value="previous" type="submit">&larr; Previous</button>
          {% else %}
            <span></span>
          {% endif %}
          <button class="button primary" name="direction" value="next" type="submit">
            {{ 'Review &amp; Submit &rarr;' if step + 1 == total else 'Next &rarr;' }}
          </button>
        </div>

        <p class="muted small-text" style="text-align: center; margin-top: 12px;">
          Your choice is automatically preserved on this device and synced to the classroom server.
        </p>
      </form>
    {% endif %}

  {% elif not active %}
    <div class="notice" style="background: #fbf2f2; border: 1px solid #f2c7c7; color: #842029; padding: 22px; border-radius: 12px; text-align: center; margin: 18px 0;">
      <h3 style="color: #842029; margin-bottom: 6px;">This Examination is Closed</h3>
      <p style="margin: 0;">The deadline has expired and no further submissions are accepted. If you experienced technical issues, please notify your instructor.</p>
    </div>

  {% else %}
    <div style="background: #edf5fe; border: 1px solid #c2dbf8; border-radius: 12px; padding: 16px 18px; margin-bottom: 18px;">
      <h3 style="color: #0b205c; margin: 0 0 6px;">Registration &amp; Entry</h3>
      <p style="margin: 0; font-size: 0.92rem; color: #354a6b;">
        Please enter your full name <strong>in Arabic</strong>, select your student stage, and optionally enter your group. Only one attempt is permitted per student.
      </p>
    </div>

    <form class="form-stack" action="{{ url_for('quiz.join_quiz', token=quiz['token']) }}" method="post">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      {% include 'student_fields.html' %}
      <p class="topspace">
        <button class="button primary full" type="submit" style="min-height: 48px; font-size: 1.05rem; font-weight: 700; border-radius: 10px;">
          Start MCQ Examination &rarr;
        </button>
      </p>
    </form>
  {% endif %}
</section>

{% endblock %}

{% block scripts %}
<script>
(function() {
  var token = {{ quiz['token'] | tojson }};
  var csrfToken = document.getElementById('quizCsrfToken') ? document.getElementById('quizCsrfToken').value : '';
  var statusBadge = document.getElementById('save-status-indicator');
  var statusIcon = document.getElementById('save-icon');
  var statusText = document.getElementById('save-text');

  var draftKey = 'ssp_quiz_' + token + '_draft';

  // 1. Dual-layer answer persistence function
  window.onAnswerSelected = function(questionId, optionIndex) {
    // Layer 1: Instant local storage backup
    try {
      var saved = JSON.parse(localStorage.getItem(draftKey) || '{}');
      saved[questionId] = optionIndex;
      localStorage.setItem(draftKey, JSON.stringify(saved));
    } catch(e) {}

    // Update UI indicator to saving state
    if (statusBadge) {
      statusBadge.style.background = '#eff6ff';
      statusBadge.style.color = '#1e40af';
      statusIcon.textContent = '⏳';
      statusText.textContent = 'Saving to classroom server... (جاري الحفظ)';
    }

    // Layer 2: Non-blocking async background autosave to server
    var formData = new FormData();
    formData.append('csrf_token', csrfToken);
    formData.append('question_id', questionId);
    formData.append('option', optionIndex);

    fetch('/api/quiz/' + encodeURIComponent(token) + '/autosave', {
      method: 'POST',
      body: formData
    })
    .then(function(res) {
      if (!res.ok) throw new Error('Autosave status: ' + res.status);
      return res.json();
    })
    .then(function(data) {
      if (data && data.ok) {
        if (statusBadge) {
          statusBadge.style.background = '#eef7ee';
          statusBadge.style.color = '#1e4620';
          statusIcon.textContent = '✓';
          statusText.textContent = 'Saved to classroom server (تم الحفظ بنجاح)';
        }
      }
    })
    .catch(function(err) {
      console.warn('Network autosave failed, answer is preserved in local draft:', err);
      if (statusBadge) {
        statusBadge.style.background = '#fef3c7';
        statusBadge.style.color = '#92400e';
        statusIcon.textContent = '💾';
        statusText.textContent = 'Saved on device. Reconnecting... (محفوظ في جهازك)';
      }
    });
  };

  // Re-sync pending drafts on page load or reconnection
  window.addEventListener('online', function() {
    try {
      var saved = JSON.parse(localStorage.getItem(draftKey) || '{}');
      for (var qId in saved) {
        window.onAnswerSelected(parseInt(qId), saved[qId]);
      }
    } catch(e) {}
  });
})();
</script>
{% endblock %}