{% extends 'base_dashboard.html' %}

{% block title %}Practical submission — {{ course.title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm rounded-4 p-4">
      <h4 class="fw-bold mb-1">Practical assessment</h4>
      <p class="text-muted mb-3">{{ course.title }}</p>

      <div class="alert alert-info small">
        You passed the MCQ. This track requires a <strong>Theory + Practical Assessment</strong>
        before a certificate is issued.
      </div>

      {% if course.practical_instructions %}
      <div class="border rounded-3 p-3 mb-3 bg-light">
        <div class="fw-semibold small mb-1">Instructions</div>
        <div class="small" style="white-space:pre-wrap;">{{ course.practical_instructions }}</div>
      </div>
      {% endif %}

      {% if practical and practical.reviewer_notes and practical.can_resubmit %}
      <div class="alert alert-warning">
        <div class="fw-semibold mb-1">
          {% if practical.status == 'needs_revision' %}Resubmission requested{% else %}Rejected{% endif %}
        </div>
        <div class="small mb-0" style="white-space:pre-wrap;">{{ practical.reviewer_notes }}</div>
      </div>
      {% endif %}

      {% if awaiting_review %}
        <div class="text-center py-3">
          <div class="display-6 text-warning mb-2"><i class="bi bi-hourglass-split"></i></div>
          <h5 class="fw-bold">Awaiting review</h5>
          <p class="text-muted small mb-2">
            Submitted {{ practical.submitted_at|date:"d M Y H:i" }} ·
            {{ practical.get_submission_type_display }}
          </p>
          {% if practical.submission_url %}
          <a href="{{ practical.submission_url }}" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm">
            Open your submission
          </a>
          {% elif practical.submission_file %}
          <a href="{{ practical.submission_file.url }}" class="btn btn-outline-primary btn-sm">Download file</a>
          {% endif %}
        </div>
      {% elif form %}
        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="mb-3">
            <label class="form-label fw-semibold">Submission type</label>
            {{ form.submission_type }}
          </div>
          <div class="mb-3" id="url-field">
            <label class="form-label fw-semibold">Link</label>
            {{ form.submission_url }}
            <div class="form-text">GitHub repo or Figma file URL.</div>
          </div>
          <div class="mb-3 d-none" id="file-field">
            <label class="form-label fw-semibold">Upload ZIP</label>
            {{ form.submission_file }}
          </div>
          <button type="submit" class="btn btn-success w-100 fw-semibold">Submit for review</button>
        </form>
      {% endif %}

      <a href="{% url 'courses:exam_result' attempt_id=attempt.pk %}" class="btn btn-link mt-3">Back to exam result</a>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
{% if form %}
<script>
(function () {
  var typeEl = document.getElementById('id_submission_type');
  var urlField = document.getElementById('url-field');
  var fileField = document.getElementById('file-field');
  function sync() {
    var v = typeEl.value;
    var isFile = v === 'file_upload';
    urlField.classList.toggle('d-none', isFile);
    fileField.classList.toggle('d-none', !isFile);
  }
  typeEl.addEventListener('change', sync);
  sync();
})();
</script>
{% endif %}
{% endblock %}