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

<div class="container mt-4">

  <h4 class="mb-3">
    <i class="fas fa-edit"></i>
    Update Scores – {{ project.name }}
  </h4>

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

    <form method="get" class="d-flex" style="width:300px;">
      <input type="text"
             name="q"
             value="{{ search_query }}"
             class="form-control form-control-sm"
             placeholder="Search student or paper…">
    </form>

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

      <button class="btn btn-primary btn-sm"
              onclick="openBulkUploadModal()">
        <i class="fas fa-upload"></i> Bulk Update
      </button>


          <!-- Back to Projects -->
    <a href="{% url 'exams:project_list' %}"
       class="btn btn-outline-secondary btn-sm">
       <i class="fas fa-arrow-left"></i> Back
    </a>

    </div>

  </div>

  <!-- TABLE CARD -->
  <div class="card shadow-sm">
    <div class="card-body table-responsive p-0">

      <table class="table table-sm table-bordered mb-0">
        <thead class="table-dark">
          <tr>
            <th>Student No</th>
            <th>Paper Code</th>
            <th>Paper Name</th>
            <th width="80">Score</th>
            <th width="80">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for s in page_obj %}
          <tr>
            <td>{{ s.student.student_number }}</td>
            <td>{{ s.paper.paper_code }}</td>
            <td>{{ s.paper.paper_name }}</td>
            <td class="text-center">
              <span class="badge bg-info">{{ s.score }}</span>
            </td>
            <td class="text-center">
              <button class="btn btn-sm btn-primary"

                     onclick="openEditModal({{ s.id }}, '{{ s.score|default_if_none:'' }}')"

                      >
                Edit
              </button>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="5" class="text-center text-muted">
              No records found
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

    </div>
  </div>

  <!-- PAGINATION -->
  <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 }} 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>

<!-- ================= MODALS ================= -->

<!-- EDIT SCORE MODAL -->
<div class="modal fade" id="editScoreModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Edit Score</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <input type="text"
               id="editScoreInput"
               class="form-control"
               placeholder="0–100 or X"
               pattern="^(100(\.0+)?|[0-9]{1,2}(\.[0-9]+)?|X)$"
               title="Enter 0–100 (integer or decimal) or X for absent"
               autocomplete="off">
        <input type="hidden" id="editScoreId">
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary"
                data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary"
                onclick="saveScore()">Save</button>
      </div>

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

<!-- BULK UPLOAD MODAL -->
<div class="modal fade" id="bulkUploadModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Bulk Update Scores</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <input type="file" id="bulkFileInput"
               class="form-control"
               accept=".xlsx">
        <div class="progress mt-3 d-none" id="bulkProgress">
          <div class="progress-bar progress-bar-striped progress-bar-animated"
               style="width:0%">0%</div>
        </div>
        <div id="bulkResult" class="mt-3"></div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary"
                data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary"
                onclick="uploadBulk()">Upload</button>
      </div>

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

<!-- ================= JS ================= -->

<!-- jQuery -->
<!-- Bootstrap JS (REQUIRED for modals) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<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>
function openEditModal(id, score){
    $("#editScoreId").val(id);
    $("#editScoreInput").val(score);

    new bootstrap.Modal(
        document.getElementById("editScoreModal")
    ).show();
}

function saveScore(){
    let id = $("#editScoreId").val();
    let score = $("#editScoreInput").val();

    $.post(
        "{% url 'exams:update_single_score' 0 %}".replace("0", id),
        {
            score: score,
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        function(){
            location.reload();
        }
    );
}

function openBulkUploadModal(){
    new bootstrap.Modal(
        document.getElementById("bulkUploadModal")
    ).show();
}

function uploadBulk(){
    let file = $("#bulkFileInput")[0].files[0];
    if(!file){
        alert("Select Excel file");
        return;
    }

    let fd = new FormData();
    fd.append("excel_file", file);
    fd.append("csrfmiddlewaretoken", "{{ csrf_token }}");


    $("#bulkProgress").removeClass("d-none");
    pollBulkProgress();   // ✅ START POLLING FIRST

    $.ajax({
        url: "{% url 'exams:bulk_update_scores' project.id %}",
        method: "POST",
        data: fd,
        processData: false,
        contentType: false,
        success: function(resp){
            clearInterval(bulkTimer);

            $("#bulkResult").html(
              `<div class="alert alert-success">
                Updated: <b>${resp.updated}</b><br>
                Skipped: <b>${resp.skipped}</b>
              </div>`
            );

            setTimeout(() => location.reload(), 1500);
        },
        error: function(){
            clearInterval(bulkTimer);
            $("#bulkResult").html(
              `<div class="alert alert-danger">Upload failed</div>`
            );
        }
    });

}

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

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

    pollProgress(); // ✅ START FIRST

    $.ajax({
        url: window.location.pathname,
        method: "POST",
        data: fd,
        processData: false,
        contentType: false
    });
});




let bulkTimer = null;

function pollBulkProgress(){
    bulkTimer = setInterval(() => {
        fetch("{% url 'exams:upload_progress_status' project.id %}")
            .then(r => r.json())
            .then(data => {
                let bar = $("#bulkProgress .progress-bar");

                let percent = data.total > 0
                    ? Math.floor((data.processed / data.total) * 100)
                    : 0;

                bar.css("width", percent + "%");
                bar.text(percent + "%");

                if(data.status === "done"){
                    clearInterval(bulkTimer);
                    bar.removeClass("progress-bar-animated")
                       .addClass("bg-success");
                }

                if(data.status === "error"){
                    clearInterval(bulkTimer);
                    bar.addClass("bg-danger");
                }
            });
    }, 800);
}


</script>

{% endblock %}