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

<div class="container mt-4">

  <h4>
    <i class="fas fa-file-excel"></i>
    Bulk Paper Registration - {{ project.name }}
  </h4>
 
  <!-- Upload Card -->
  <div class="card shadow-sm mt-3">
    <div class="card-body">

      <div class="alert alert-info small">
        Excel format:
        <pre class="mb-0">
student_number | paper_code1 | paper_code2 | ... | paper_code16
        </pre> 

<a href="{% url 'exams:download_papers_upload_template' project.id %}"
   class="btn btn-success mb-2">
  <i class="fas fa-download"></i> Download Excel Template
</a>


      </div>

      <input type="file" id="fileInput" class="form-control mb-3">

      <button id="uploadBtn" class="btn btn-primary">
        <i class="fas fa-upload"></i> Upload Papers
      </button>

      <div class="progress mt-3" style="height:25px; display:none;" id="progressBox">
        <div class="progress-bar progress-bar-striped progress-bar-animated"
             id="progressBar"
             role="progressbar"
             style="width:0%">0%</div>
      </div>

      <div id="resultMessage" class="mt-3"></div>

    </div>
  </div>

  <!-- Student List -->
  <div class="card mt-4">
    <div class="card-header">
      <h5>Registered Students & Papers</h5>
    </div>

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

<table id="studentsTable" class="table table-striped text-nowrap">
    <thead class="table-dark">
       <tr>
            <th>#</th>
            <th>School</th>
            <th>Student No</th>
            <th>Name</th>
            <th>Subjects</th>
       </tr>
    </thead>

    <tbody>
      {% for s in page_obj %}
       <tr>
            <td>{{ forloop.counter0|add:page_obj.start_index }}</td>
            <td>{{ s.school.school_code }}</td>
            <td>{{ s.student_number }}</td>
            <td>{{ s.full_name }}</td>

            <td>
              {% for score in s.examscore_set.all %}
                <span class="badge bg-secondary me-1">
                  {{ score.paper.paper_code }}
                </span>
              {% empty %}
                <span class="badge bg-warning">No subjects</span>
              {% endfor %}
            </td>

       </tr>
      {% empty %}
       <tr>
            <td colspan="5" class="text-center text-muted py-4">
                No students found matching your search.
            </td>
       </tr>
      {% endfor %}
    </tbody>
</table>

<!-- Pagination Controls -->
{% if page_obj.paginator.num_pages > 1 %}
<nav aria-label="Page navigation" class="mt-3">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="First">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% else %}
            <li class="page-item disabled">
                <span class="page-link">&laquo;&laquo;</span>
            </li>
            <li class="page-item disabled">
                <span class="page-link">&laquo;</span>
            </li>
        {% endif %}
        
        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ num }}</a>
                </li>
            {% endif %}
        {% endfor %}
        
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="Last">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
        {% else %}
            <li class="page-item disabled">
                <span class="page-link">&raquo;</span>
            </li>
            <li class="page-item disabled">
                <span class="page-link">&raquo;&raquo;</span>
            </li>
        {% endif %}
    </ul>
</nav>
<div class="text-center text-muted small">
    Showing {{ page_obj.start_index }} - {{ page_obj.end_index }} of {{ page_obj.paginator.count }} students
</div>
{% endif %}

    </div>
  </div>

</div>

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

<script>
document.getElementById("uploadBtn").onclick = function() {

    let fileInput = document.getElementById("fileInput");
    if (!fileInput.files.length) {
        alert("Select file first");
        return;
    }

    let formData = new FormData();
    formData.append("file", fileInput.files[0]);
    formData.append("csrfmiddlewaretoken", "{{ csrf_token }}");

    let xhr = new XMLHttpRequest();
    xhr.open("POST", "{% url 'exams:bulk_student_paper_upload' project.id %}", true);

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            let percent = Math.round((e.loaded / e.total) * 100);
            document.getElementById("progressBox").style.display = "block";
            document.getElementById("progressBar").style.width = percent + "%";
            document.getElementById("progressBar").innerHTML = percent + "%";
        }
    };

    xhr.onload = function() {
        let response = JSON.parse(xhr.responseText);

        document.getElementById("resultMessage").innerHTML =
            "<div class='alert alert-success'>" +
            "Registered: " + response.registered +
            " | Skipped Students: " + response.skipped_students +
            " | Skipped Papers: " + response.skipped_papers +
            "</div>";
        setTimeout(function(){
            location.reload();
        }, 5000);

    };

    xhr.send(formData);
};
</script>

{% endblock %}