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

<div class="container mt-4">

  <!-- TITLE + ACTIONS -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="fas fa-upload"></i>
      Final Processed Scores – {{ project.name }}
    </h4>

    <div class="btn-group">
      <a href="{% url 'exams:final_scores_template_download' project.id %}"
         class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-download"></i> Template
      </a>

      <button class="btn btn-danger btn-sm"
              onclick="confirmDeleteAll()">
        <i class="fas fa-trash"></i> Delete All
      </button>
    </div>
  </div>





  <div class="card card-outline card-success mb-4">
    <div class="card-header">
      <b><i class="fas fa-file-excel"></i> Upload Excel File</b>
    </div>

    <form id="uploadForm" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="card-body">

        <div class="alert alert-info">
          <b>Excel format</b>
          <ul class="mb-0">
            <li>Row 1: Subject codes</li>
            <li>Row 2: Subject names (ignored)</li>
            <li>Row 3+: Student scores</li>
            <li>Column B: Student number</li>
            <li>Allowed: <b>0–100, decimals, X</b></li>
          </ul>
        </div>

        <div class="row g-2 align-items-center">
          <div class="col-md-6">
            <input type="file"
                   name="excel_file"
                   class="form-control"
                   accept=".xlsx"
                   required>
          </div>

          <div class="col-md-6 text-end">
            <button class="btn btn-success">
              <i class="fas fa-upload"></i> Upload
            </button>
            <a href="{% url 'exams:project_list' %}"
               class="btn btn-secondary ms-2">
              Back
            </a>
          </div>
        </div>

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




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

<div id="errorBox" class="alert alert-danger d-none"></div>





<div class="card mb-3">
  <div class="card-body py-2">

    <form method="get" class="d-flex gap-2">
      <input type="text"
             name="q"
             value="{{ search_query }}"
             class="form-control form-control-sm"
             placeholder="Search student or subject…">

      <button class="btn btn-sm btn-primary">
        <i class="fas fa-search"></i>
      </button>
    </form>

    {% if search_query %}
      <small class="text-muted">
        Showing results for: <b>{{ search_query }}</b>
      </small>
    {% endif %}

  </div>
</div>







<div class="card">
  <div class="card-header">
    <b>Uploaded Results Preview</b>
  </div>

  <div class="card-body table-responsive p-0">

    <table class="table table-bordered table-sm mb-0">
      <thead class="table-dark">
        <tr>
          <th>C.REG</th>
          <th>C/NO</th>
          <th>NAME</th>
          <th>SEX</th>
          <th>COMB</th>
          {% for sc in subjects %}
            <th>{{ sc }}</th>
          {% endfor %}
        </tr>
      </thead>

      <tbody>
      {% for student, marks in table.items %}
        <tr>
          <td>{{ student.school.school_code }}</td>
          <td>{{ student.student_number }}</td>
          <td>{{ student.full_name }}</td>
          <td>{{ student.sex }}</td>
          <td>{{ student.combination.code }}</td>

          {% for sc in subjects %}
            <td>{{ marks|get_item:sc }}</td>
          {% endfor %}
        </tr>
      {% empty %}
        <tr>
          <td colspan="10" class="text-center text-muted">
            No matching records found
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

  </div>
</div>






<nav class="mt-3">
  <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 }} / {{ 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>




<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
let timer = null;

function showErrors(errors){
    let errorBox = document.getElementById("errorBox");
    errorBox.classList.remove("d-none");

    let html = "<b>Upload failed:</b><ul>";
    errors.forEach(e => {
        html += `<li>${e}</li>`;
    });
    html += "</ul>";

    errorBox.innerHTML = html;
}

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

            let bar = document.querySelector(".progress-bar");
            bar.style.width = data.percent + "%";
            bar.innerText = data.percent + "%";

            if(data.status === "done"){
                clearInterval(timer);
                bar.classList.add("bg-success");
                setTimeout(() => location.reload(), 800);
            }

            if(data.status === "error"){
                clearInterval(timer);
            }
        });
    }, 5000);
}

$("#uploadForm").on("submit", function(e){
    e.preventDefault();

    let formData = new FormData(this);
    $(".progress").removeClass("d-none");

    pollProgress();   // start polling immediately

    $.ajax({
        url: window.location.pathname,
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,

        success: function(resp){
            // SUCCESS path (ok=true)
            if(resp.ok !== true){
                clearInterval(timer);
                showErrors(resp.errors || ["Unknown validation error"]);
            }
        },
        error: function(xhr){
            clearInterval(timer);

            let resp = xhr.responseJSON;
            if(resp && resp.errors){
                showErrors(resp.errors);
            } else if(resp && resp.error){
                showErrors([resp.error]);
            } else {
                showErrors(["Unknown validation error"]);
            }
        }
    });
});
</script>


<script>
function confirmDeleteAll(){
    if(!confirm(
        "⚠ WARNING!\n\n" +
        "This will permanently delete ALL uploaded scores for this project.\n\n" +
        "This action CANNOT be undone.\n\n" +
        "Do you want to continue?"
    )){
        return;
    }

    $.ajax({
        url: "{% url 'exams:delete_all_processed_scores' project.id %}",
        method: "POST",
        data: {
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        success: function(resp){
            if(resp.ok){
                alert(resp.message);
                location.reload();
            }else{
                alert("Delete failed.");
            }
        },
        error: function(){
            alert("Server error while deleting scores.");
        }
    });
}
</script>


{% endblock %}