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

<div class="container mt-4">


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


  <h5 class="mb-0">
    {{ paper.subject.subject_name_eng }} -
    {{ paper.paper_code }} |
    {{ school.name }}
  </h5>
  
  <a href="{% url 'exams:marks_schools' project.id paper.id %}"
     class="btn btn-outline-secondary btn-sm">
     <i class="fas fa-arrow-left"></i> Back to Schools
  </a>


</div>





<table class="table table-bordered" id="marksTable">
  <thead class="table-success">
    <tr>
      <th>Student Number</th>
      <th>Name</th>
      <th>Score</th>
      <th>Grade</th>
    </tr>
  </thead>

  <tbody>
    {% for s in scores %}
    <tr>
      <td>{{ s.student.student_number }}</td>
      <td>{{ s.student.full_name }}</td>

<td>
  <input type="text"
         class="form-control score-input text-center"
         value="{{ s.score|default_if_none:'' }}"
         data-id="{{ s.id }}"
         data-row="{{ forloop.counter0 }}"
         data-max="{{ paper.max_marks }}"
         maxlength="5"
         inputmode="decimal">
</td>





      <td>
        <span class="grade-display">
          {{ s.grade }}
        </span>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<button class="btn btn-primary" id="saveMarksBtn">
  Save Marks
</button>

</div>




<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<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 type="text/javascript">

function calculateGrade(score){
    if(score >= 75) return "A";
    if(score >= 65) return "B";
    if(score >= 45) return "C";
    if(score >= 30) return "D";
    if(score >= 0) return "F";
    if(score == 'X') return "X";
    if(score == 'x') return "X";
    return "";
}

$(document).on("input", ".score-input", function(){

    let score = parseFloat($(this).val());
    let gradeCell = $(this).closest("tr").find(".grade-display");

    if(!isNaN(score)){
        gradeCell.text(calculateGrade(score));
    } else {
        gradeCell.text("-");
    }
});


$("#saveMarksBtn").click(function(){

    let data = [];

    $(".score-input").each(function(){
        data.push({
            id: $(this).data("id"),
            score: $(this).val()
        });
    });

    $.post(
        "{% url 'exams:save_marks_ajax' project.id %}",
        {
            data: JSON.stringify(data),
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        function(response){
            alert("Marks saved successfully.");
        }
    );
});



$(document).on("keydown", ".score-input", function(e){

    if(e.key === "Enter"){

        e.preventDefault();  // stop form submit

        let currentRow = parseInt($(this).data("row"));
        let inputs = $(".score-input");

        let nextInput = inputs.eq(currentRow + 1);

        if(nextInput.length){
            nextInput.focus();
            nextInput.select();
        } else {
            // Last row reached
            if(allFieldsFilled()){
                saveMarks();
            }
        }
    }
});


function allFieldsFilled(){

    let filled = true;

    $(".score-input").each(function(){

        if($(this).val() === ""){
            filled = false;
            return false;
        }
    });

    return filled;
}


function saveMarks(){

    let data = [];

    $(".score-input").each(function(){
        data.push({
            id: $(this).data("id"),
            score: $(this).val()
        });
    });

    $.post(
        "{% url 'exams:save_marks_ajax' project.id %}",
        {
            data: JSON.stringify(data),
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        function(response){
            if(response.status === "success"){
                alert("Marks saved successfully.");
            }
        }
    );
}

$("#saveMarksBtn").click(function(){
    saveMarks();
});


$(document).on("focus", ".score-input", function(){
    $("tr").removeClass("table-warning");
    $(this).closest("tr").addClass("table-warning");
});

</script>















<script>
document.addEventListener("DOMContentLoaded", function () {

    const inputs = document.querySelectorAll(".score-input");

    function isValidScore(value, maxMarks) {

        if (!value || value.trim() === "") return false;

        value = value.trim();

        if (value.toUpperCase() === "X") return true;

        // Proper decimal validation
        if (!/^\d+(\.\d{1,2})?$/.test(value)) return false;

        let num = parseFloat(value);
        let max = parseFloat(maxMarks);

        if (num < 0 || num > max) return false;

        return true;
    }

    inputs.forEach((input, index) => {

        // Allow only valid characters while typing
        input.addEventListener("input", function () {

            let val = this.value;

            // Allow digits, dot, X only
            if (!/^[0-9xX.]*$/.test(val)) {
                this.value = val.slice(0, -1);
                return;
            }

            // Only one dot allowed
            if ((val.match(/\./g) || []).length > 1) {
                this.value = val.slice(0, -1);
                return;
            }

            // Auto uppercase X
            if (val.toLowerCase() === "x") {
                this.value = "X";
            }
        });

        input.addEventListener("keydown", function (e) {

            if (e.key === "Enter") {

                e.preventDefault();

                let value = this.value.trim();
                let maxMarks = this.dataset.max;

                if (!isValidScore(value, maxMarks)) {
                    this.classList.add("is-invalid");
                    this.focus();
                    return false;
                }

                this.classList.remove("is-invalid");

                let next = inputs[index + 1];
                if (next) next.focus();
            }
        });

    });

});
</script>



{% endblock %}