{% extends "exams/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">

<!-- ================= HEADER ================= -->
<div class="d-flex justify-content-between align-items-center mb-3">

  <div class="d-flex align-items-center gap-2">
    <h5 class="mb-0">{{ project.name }}</h5>

    <!-- Search -->
    <form method="get" class="ms-3">
      <div class="input-group input-group-sm" style="width:350px;">
        <input type="text"
               name="q"
               value="{{ search_query }}"
               placeholder="Search subject or paper..."
               class="form-control">
        <button class="btn btn-primary">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </form>
  </div>


  <div class="d-flex gap-2">
    <a href="{% url 'exams:project_list' %}"
       class="btn btn-outline-secondary btn-sm">
       <i class="fas fa-arrow-left"></i> Back
    </a>

    <!-- MAIN PROCESS BUTTON -->
    <button class="btn btn-success btn-sm"
            data-bs-toggle="modal"
            data-bs-target="#processModal">
      <i class="fas fa-cogs"></i> Process Subject Scores
    </button>

<!-- DELETE PROCESSED SCORES BUTTON -->
<button class="btn btn-danger btn-sm"
        data-bs-toggle="modal"
        data-bs-target="#deleteProcessedModal">
  <i class="fas fa-trash"></i> Delete Processed Scores
</button>

  </div>


</div>


{% if messages %}
<div class="container mt-3">
  {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
      {{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}
</div>
{% endif %}

<!-- ================= SUMMARY ================= -->
<div class="alert alert-info small">
  <strong>What this process will do:</strong>
  <ul class="mb-0">
    <li>✔ Combine paper scores per subject</li>
    <li>✔ Apply rules for 1 / 1.5 / 2 / 2.5 papers</li>
    <li>✔ Compute <b>Final Subject Score</b></li>
    <li>✔ Assign <b>Grade & Point</b> using grading rules</li>
    <li>✔ Save results into <b>ProcessedSubjectScore</b></li>
    <li class="text-danger">✖ Does NOT calculate division or ranking</li>
  </ul>
</div>

<!-- ================= TABLE ================= -->
<table class="table table-bordered table-sm">
<thead class="table-primary">
<tr>
  <th>Subject</th>
  <th>Paper Code</th>
  <th>Total Scripts</th>
  <th>Scores Filled</th>
  <th>Progress</th>
  <th>Action</th>
</tr>
</thead>

<tbody>
{% for p in page_obj %}
<tr>
  <td>{{ p.subject.subject_name_eng }}</td>
  <td>{{ p.paper_code }}</td>

  <td>
    <span class="badge bg-info">{{ p.total_scripts }}</span>
  </td>

  <td>
    <span class="badge bg-success">{{ p.filled_scores }}</span>
  </td>

  <td style="width:200px;">
    <div class="progress">
      <div class="progress-bar"
           role="progressbar"
           style="width: {{ p.completion_percent|floatformat:1 }}%;">
        {{ p.completion_percent|floatformat:1 }}%
      </div>
    </div>
  </td>

  <td>
    <a href="{% url 'exams:marks_schools' project.id p.id %}"
       class="btn btn-primary btn-sm">
       Schools
    </a>

    <a href="{% url 'exams:download_paper_registrations' project.id p.id %}"
       class="btn btn-info btn-sm">
       Download Template
    </a>
  </td>
</tr>
{% empty %}
<tr>
  <td colspan="6" class="text-center text-muted">
    No subject papers found
  </td>
</tr>
{% endfor %}
</tbody>
</table>

<!-- ================= PAGINATION ================= -->
<nav>
<ul class="pagination pagination-sm">

{% if page_obj.has_previous %}
<li class="page-item">
  <a class="page-link"
     href="?q={{ search_query }}&page={{ page_obj.previous_page_number }}">
     Previous
  </a>
</li>
{% endif %}

<li class="page-item active">
  <span class="page-link">
    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
  </span>
</li>

{% if page_obj.has_next %}
<li class="page-item">
  <a class="page-link"
     href="?q={{ search_query }}&page={{ page_obj.next_page_number }}">
     Next
  </a>
</li>
{% endif %}

</ul>
</nav>

</div>

<!-- ================= PROCESS MODAL ================= -->
<div class="modal fade" id="processModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fas fa-cogs"></i> Confirm Subject Processing
        </h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <p>
          This will process <b>ALL subjects</b> in this project and
          overwrite existing subject results.
        </p>
        <p class="text-danger mb-0">
          Are you sure you want to continue?
        </p>

        <!-- Progress -->
        <div class="progress mt-3 d-none" id="processProgress">
          <div class="progress-bar progress-bar-striped progress-bar-animated"
               style="width:100%">
            Processing…
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm"
                data-bs-dismiss="modal">
          Cancel
        </button>

<button type="button"
        id="confirmProcessBtn"
        class="btn btn-success btn-sm">
          Yes, Process Now
        </button>
      </div>

    </div>
  </div>
</div>







<!-- ================= DELETE PROCESSED SCORES MODAL ================= -->
<div class="modal fade" id="deleteProcessedModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-danger">

      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title">
          <i class="fas fa-exclamation-triangle"></i>
          Danger: Delete Processed Scores
        </h5>
        <button type="button" class="btn-close btn-close-white"
                data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <p class="mb-2">
          You are about to <strong class="text-danger">
          permanently delete ALL processed subject scores</strong>
          for this project:
        </p>

        <div class="alert alert-warning">
          <strong>{{ project.name }}</strong>
        </div>

        <ul class="small text-muted">
          <li>❌ This action cannot be undone</li>
          <li>❌ All <b>ProcessedSubjectScore</b> rows will be removed</li>
          <li>✔ Raw ExamScore data will remain intact</li>
          <li>✔ You can re-process scores afterward</li>
        </ul>
      </div>

      <div class="modal-footer">
        <button class="btn btn-outline-secondary btn-sm"
                data-bs-dismiss="modal">
          Cancel
        </button>

        <form method="post"
              action="{% url 'exams:delete_processed_subject_scores' project.id %}">
          {% csrf_token %}
          <button class="btn btn-danger btn-sm">
            <i class="fas fa-trash"></i> Yes, Delete All
          </button>
        </form>
      </div>

    </div>
  </div>
</div>

<!-- 🔥 INLINE SCRIPT (NO base.html CHANGE REQUIRED) -->
<script>
document.addEventListener("DOMContentLoaded", function () {

  console.log("🔥 Subject process JS loaded");

  const btn = document.getElementById("confirmProcessBtn");
  if (!btn) {
    console.warn("Process button not found");
    return;
  }

  btn.addEventListener("click", function (e) {
    e.preventDefault();

    btn.disabled = true;

    const progress = document.getElementById("processProgress");
    if (progress) progress.classList.remove("d-none");

    fetch("{% url 'exams:process_subject_scores' project.id %}", {
      method: "POST",
      headers: {
        "X-CSRFToken": "{{ csrf_token }}",
        "Content-Type": "application/json"
      }
    })
    .then(r => {
      if (!r.ok) throw new Error("Server error");
      return r.json();
    })
    .then(() => {
      alert("Subject processing completed");
      location.reload();
    })
    .catch(err => {
      console.error(err);
      alert("Processing failed");
      btn.disabled = false;
    });
  });

});
</script>

{% endblock %}