{% extends "exams/base.html" %}
{% block content %}

<div class="container mt-4">

  <h4 class="mb-3">
    <i class="fas fa-cogs"></i>
    Process Final Results – {{ project.name }}
  </h4>

  <!-- INFO CARD -->
  <div class="card mb-4">
    <div class="card-body">
      <p class="mb-1"><b>This process will:</b></p>
      <ul class="mb-0">
        <li>Compute student averages & grades</li>
        <li>Apply best-subject point rules</li>
        <li>Assign divisions</li>
        <li>Generate final student results</li>
      </ul>
    </div>
  </div>

  <!-- ACTION - STUDENT Process -->
  <div class="mb-3">
    <button class="btn btn-success"
            id="processBtn"
            onclick="startProcessing()">
      <i class="fas fa-play"></i> Process Student Results
    </button>

    <a href="{% url 'exams:student_final_results_report' project.id %}"
       class="btn btn-outline-success ms-2">
      <i class="fas fa-table"></i> View Results Report
    </a>
  </div>

  <!-- PROGRESS BAR -->
  <div class="progress d-none" id="progressBox">
    <div class="progress-bar progress-bar-striped progress-bar-animated"
         style="width:0%">0%</div>
  </div>

  <div id="statusText" class="mt-2 text-muted"></div>


</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
let timer = null;

function pollProgress(){
    timer = setInterval(() => {
        fetch("{% url 'exams:upload_progress_status' project.id %}")
            .then(r => r.json())
            .then(data => {
                let bar = document.querySelector(".progress-bar");
                let percent = data.total > 0
                    ? Math.floor((data.processed / data.total) * 100)
                    : 0;

                bar.style.width = percent + "%";
                bar.innerText = percent + "%";

                if(data.status === "done"){
                    clearInterval(timer);
                    bar.classList.remove("progress-bar-animated");
                    bar.classList.add("bg-success");

                    document.getElementById("statusText").innerHTML =
                        "<b>Processing completed.</b> Redirecting to report…";

                    setTimeout(() => {
                        window.location.href =
                          "{% url 'exams:student_final_results_report' project.id %}";
                    }, 1200);
                }

                if(data.status === "error"){
                    clearInterval(timer);
                    bar.classList.add("bg-danger");
                    document.getElementById("statusText").innerText =
                        "Processing failed. Check logs.";
                }
            });
    }, 1000);
}

function startProcessing(){
    if(!confirm(
        "This will recalculate ALL student final results.\n\nContinue?"
    )){
        return;
    }

    document.getElementById("progressBox").classList.remove("d-none");
    document.getElementById("processBtn").disabled = true;

    pollProgress(); // start polling first

    fetch("{% url 'exams:generate_student_final_results' project.id %}", {
        method: "POST",
        headers: {
            "X-CSRFToken": "{{ csrf_token }}"
        }
    })
    .catch(() => {
        clearInterval(timer);
        alert("Server error while processing.");
    });
}
</script>

{% endblock %}