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

<div class="container mt-4">

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

<!-- ================= INFO CARDS ================= -->
<div class="row mb-4">

  <!-- STUDENT INFO -->
  <div class="col-md-4">
    <div class="card h-100 border-success">
      <div class="card-header bg-success text-white">
        <i class="fas fa-user-graduate"></i>
        Student Results Processing
      </div>
      <div class="card-body">
        <p class="mb-1"><b>This process will:</b></p>
        <ul class="mb-0 small">
          <li>Compute subject grades per student</li>
          <li>Calculate student average marks</li>
          <li>Apply best-subject point rules</li>
          <li>Assign divisions (I–IV / ABS)</li>
          <li>Generate full student result summaries</li>
        </ul>
        <div class="text-muted mt-2 small">
          ⚠ Uses processed subject scores
        </div>
      </div>
    </div>
  </div>

  <!-- SCHOOL INFO -->
  <div class="col-md-4">
    <div class="card h-100 border-primary">
      <div class="card-header bg-primary text-white">
        <i class="fas fa-school"></i>
        School Performance Processing
      </div>
      <div class="card-body">
        <p class="mb-1"><b>This process will:</b></p>
        <ul class="mb-0 small">
          <li>Aggregate student results by school</li>
          <li>Calculate school average & GPA</li>
          <li>Determine school average grade</li>
          <li>Assign school GPA grade & status</li>
          <li>Prepare data for school ranking</li>
        </ul>
        <div class="text-muted mt-2 small">
          ⚠ Requires completed student results
        </div>
      </div>
    </div>
  </div>

  <!-- SUBJECT INFO -->
  <div class="col-md-4">
    <div class="card h-100 border-info">
      <div class="card-header bg-info text-white">
        <i class="fas fa-book"></i>
        Subject Performance Processing
      </div>
      <div class="card-body">
        <p class="mb-1"><b>This process will:</b></p>
        <ul class="mb-0 small">
          <li>Analyze performance per subject</li>
          <li>Count grades (A–F / X)</li>
          <li>Calculate subject GPA</li>
          <li>Compute pass & failure rates</li>
          <li>Generate subject ranking tables</li>
        </ul>
        <div class="text-muted mt-2 small">
          ⚠ Uses student final & subject scores
        </div>
      </div>
    </div>
  </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 %}

<!-- ================= STUDENT RESULTS ================= -->
<div class="card mb-4">
  <div class="card-body">

    <h6 class="mb-2">Student Final Results</h6>




    <button class="btn btn-success"
            id="btnStudent"
            onclick="startStudentProcessing('student')">
      <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">
      View Report
    </a>

      <!-- Delete Student Final Results -->
      <button class="btn btn-outline-danger btn-md"
              data-bs-toggle="modal"
              data-bs-target="#deleteFinalResultsModal">
        <i class="fas fa-trash"></i> Student Final Results
      </button>

    <div class="progress mt-3 d-none" id="progress-student">
      <div class="progress-bar progress-bar-striped progress-bar-animated"
           style="width:0%">0%</div>
    </div>

    <div class="text-muted mt-1" id="status-student"></div>
  </div>
</div>

<!-- ================= SCHOOL PERFORMANCE ================= -->
<div class="card mb-4">
  <div class="card-body">

    <h6 class="mb-2">School Performance</h6>



    <button class="btn btn-primary"
            id="btnSchool"
            onclick="startSchoolProcessing('school')">
      <i class="fas fa-play"></i> Process School Performance
    </button>

    <a href="{% url 'exams:school_results_report' project.id %}"
       class="btn btn-outline-primary ms-2">
      View Report
    </a>

      <!-- Delete School Results -->
      <button class="btn btn-outline-danger btn-md"
              data-bs-toggle="modal"
              data-bs-target="#deleteSchoolResultsModal">
        <i class="fas fa-trash"></i> School Results
      </button>

    <div class="progress mt-3 d-none" id="progress-school">
      <div class="progress-bar progress-bar-striped progress-bar-animated"
           style="width:0%">0%</div>
    </div>

    <div class="text-muted mt-1" id="status-school"></div>
  </div>
</div>

<!-- ================= SUBJECT PERFORMANCE ================= -->
<div class="card mb-4">
  <div class="card-body">



    <h6 class="mb-2">Subject Performance</h6>

    <button class="btn btn-info"
            id="btnSubject"
            onclick="startSubjectProcessing('subject')">
      <i class="fas fa-play"></i> Process Subject Performance
    </button>

    <a href="{% url 'exams:subject_results_report' project.id %}"
       class="btn btn-outline-info ms-2">
      View Report
    </a>

      <!-- Delete Processed Subject Scores -->
      <button class="btn btn-outline-danger btn-md"
              data-bs-toggle="modal"
              data-bs-target="#deleteProcessedSubjectsModal">
        <i class="fas fa-trash"></i> Processed Subject Scores
      </button>

    <div class="progress mt-3 d-none" id="progress-subject">
      <div class="progress-bar progress-bar-striped progress-bar-animated"
           style="width:0%">0%</div>
    </div>

    <div class="text-muted mt-1" id="status-subject"></div>
  </div>
</div>

</div>



<div class="modal fade" id="deleteFinalResultsModal" 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">Delete Student Final Results</h5>
        <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <p class="text-danger fw-bold">
          This will delete ALL student final results (division, GPA, averages).
        </p>
        <p class="small text-muted">
          Subject scores will remain intact.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
          Cancel
        </button>
        <form method="post"
              action="{% url 'exams:delete_student_final_results' project.id %}">
          {% csrf_token %}
          <button class="btn btn-danger btn-sm">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="deleteSchoolResultsModal" 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">Delete School Results</h5>
        <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <p class="text-danger fw-bold">
          This will delete ALL school summaries, GPA, and rankings.
        </p>
        <p class="small text-muted">
          Student results will remain intact.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
          Cancel
        </button>
        <form method="post"
              action="{% url 'exams:delete_school_results' project.id %}">
          {% csrf_token %}
          <button class="btn btn-danger btn-sm">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="deleteProcessedSubjectsModal" 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">Delete Processed Subject Scores</h5>
        <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <p class="text-danger fw-bold">
          This will permanently delete ALL processed subject scores.
        </p>
        <p class="small text-muted">
          You can re-process subject scores afterward.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
          Cancel
        </button>
        <form method="post"
              action="{% url 'exams:delete_subject_results' project.id %}">
          {% csrf_token %}
          <button class="btn btn-danger btn-sm">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let timers = {};

function pollProgress(type, redirectUrl){

    clearInterval(timers[type]);

    timers[type] = setInterval(() => {

        fetch("{% url 'exams:upload_progress_status' project.id %}")
            .then(r => r.json())
            .then(data => {

                let bar = document.querySelector(`#progress-${type} .progress-bar`);
                let status = document.getElementById(`status-${type}`);

                if(!bar) return;

                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(timers[type]);
                    bar.classList.remove("progress-bar-animated");
                    bar.classList.add("bg-success");
                    status.innerHTML = "<b>Completed.</b> Redirecting…";

                    setTimeout(() => {
                        window.location.href = redirectUrl;
                    }, 1200);
                }

                if(data.status === "error"){
                    clearInterval(timers[type]);
                    bar.classList.add("bg-danger");
                    status.innerText = "Processing failed.";
                }
            });

    }, 1000);
}

function startStudentProcessing(){
    if(!confirm("Recalculate ALL student results?")) return;

    $("#progress-student").removeClass("d-none");
    $("#btnStudent").prop("disabled", true);

    pollProgress(
        "student",
        "{% url 'exams:student_final_results_report' project.id %}"
    );

    fetch("{% url 'exams:generate_student_final_results' project.id %}", {
        method: "POST",
        headers: {"X-CSRFToken": "{{ csrf_token }}"}
    });
}

function startSchoolProcessing(){
    if(!confirm("Process ALL school results?")) return;

    $("#progress-school").removeClass("d-none");
    $("#btnSchool").prop("disabled", true);

    pollProgress(
        "school",
        "{% url 'exams:school_results_report' project.id %}"
    );

    fetch("{% url 'exams:generate_school_results' project.id %}", {
        method: "POST",
        headers: {"X-CSRFToken": "{{ csrf_token }}"}
    });
}

function startSubjectProcessing(){
    if(!confirm("Process ALL subject results?")) return;

    $("#progress-subject").removeClass("d-none");
    $("#btnSubject").prop("disabled", true);

    pollProgress(
        "subject",
        "{% url 'exams:subject_results_report' project.id %}"
    );

    fetch("{% url 'exams:generate_subject_results' project.id %}", {
        method: "POST",
        headers: {
            "X-CSRFToken": "{{ csrf_token }}"
        }
    }).catch(() => {
        alert("Server error while processing subject results");
    });
}

</script>


{% endblock %}