{% extends "exams/base.html" %}
{% block content %}
<div class="container mt-4">

  <!-- ================= ACADEMIC LEVEL SELECTOR ================= -->
  <form method="get" class="mb-4">
    <label class="fw-bold mb-1">Academic Level</label>
    <select name="level" class="form-select" onchange="this.form.submit()">
      <option value="">-- Select Academic Level --</option>
      {% for l in academic_levels %}
        <option value="{{ l.id }}" {% if selected_level == l %}selected{% endif %}>
          {{ l.name }}
        </option>
      {% endfor %}
    </select>
  </form>

  {% if not selected_level %}
    <div class="alert alert-warning">
      Please select an academic level to manage rules.
    </div>
  {% else %}

  <!-- ========================================================= -->
  <!-- ==================== GRADING RULES ====================== -->
  <!-- ========================================================= -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between">
      <b>Grading Rules</b>
      <button class="btn btn-sm btn-success" onclick="openGradingModal()">
        <i class="fas fa-plus"></i> Add
      </button>
    </div>

    <div class="card-body p-0">
      <table class="table table-sm table-bordered mb-0">
        <thead class="table-dark">
          <tr>
            <th>Min</th>
            <th>Max</th>
            <th>Grade</th>
            <th>Points</th>
            <th>Weight</th>
            <th>Status</th>
            <th width="80">Action</th>
          </tr>
        </thead>
        <tbody>
        {% for r in grading_rules %}
          <tr>
            <td>{{ r.min_score }}</td>
            <td>{{ r.max_score }}</td>
            <td>{{ r.grade }}</td>
            <td>{{ r.points }}</td>
            <td>{{ r.weight }}</td>
            <td>{{ r.status }}</td>
            <td class="text-center">
              <button class="btn btn-sm btn-primary"
                onclick="editGrading('{{ r.id }}','{{ r.min_score }}','{{ r.max_score }}',
                                     '{{ r.grade }}','{{ r.points }}','{{ r.weight }}','{{ r.status }}')">
                Edit
              </button>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="6" class="text-center text-muted">No rules</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- ========================================================= -->
  <!-- ==================== DIVISION RULES ===================== -->
  <!-- ========================================================= -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between">
      <b>Division Rules</b>
      <button class="btn btn-sm btn-success" onclick="openDivisionModal()">
        <i class="fas fa-plus"></i> Add
      </button>
    </div>

    <div class="card-body p-0">
      <table class="table table-sm table-bordered mb-0">
        <thead class="table-dark">
          <tr>
            <th>Min Points</th>
            <th>Max Points</th>
            <th>Division</th>
            <th width="80">Action</th>
          </tr>
        </thead>
        <tbody>
        {% for r in division_rules %}
          <tr>
            <td>{{ r.min_points }}</td>
            <td>{{ r.max_points }}</td>
            <td>{{ r.division }}</td>
            <td class="text-center">
              <button class="btn btn-sm btn-primary"
                onclick="editDivision('{{ r.id }}','{{ r.min_points }}',
                                      '{{ r.max_points }}','{{ r.division }}')">
                Edit
              </button>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="4" class="text-center text-muted">No rules</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>





<!-- ========================================================= -->
<!-- ======================= GPA RULES ====================== -->
<!-- ========================================================= -->
<div class="card mb-5">
  <div class="card-header d-flex justify-content-between">
    <b>GPA Rules</b>
    <button class="btn btn-sm btn-success" onclick="openGpaModal()">
      <i class="fas fa-plus"></i> Add
    </button>
  </div>

  <div class="card-body p-0">
    <table class="table table-sm table-bordered mb-0">
      <thead class="table-dark">
        <tr>
          <th>Min GPA</th>
          <th>Max GPA</th>
          <th>Grade</th>
          <th>Points</th>
          <th>Status</th>
          <th>Colour</th>
          <th width="80">Action</th>
        </tr>
      </thead>
      <tbody>
      {% for r in gpa_rules %}
        <tr>
          <td>{{ r.min_gpa }}</td>
          <td>{{ r.max_gpa }}</td>
          <td>{{ r.gpa_grade }}</td>
          <td>{{ r.gpa_points }}</td>
          <td>{{ r.gpa_status }}</td>
			<td>
			  <span style="
			      display:inline-block;
			      width:16px;
			      height:16px;
			      background:{{ r.gpa_colour }};
			      border:1px solid #ccc;
			      vertical-align:middle;
			      margin-right:6px;">
			  </span>
			  {{ r.gpa_colour }}
			</td>

          <td class="text-center">
            <button class="btn btn-sm btn-primary"
              onclick="editGpa(
                '{{ r.id }}',
                '{{ r.min_gpa }}',
                '{{ r.max_gpa }}',
                '{{ r.gpa_grade }}',
                '{{ r.gpa_points }}',
                '{{ r.gpa_status }}',
                '{{ r.gpa_colour }}'
              )">
              Edit
            </button>
          </td>
        </tr>
      {% empty %}
        <tr>
          <td colspan="6" class="text-center text-muted">No GPA rules</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>


  <!-- ========================================================= -->
  <!-- ============= SUBJECT PROCESSING RULES ================== -->
  <!-- ========================================================= -->
  <div class="card mb-5">
    <div class="card-header d-flex justify-content-between">
      <b>Subject Processing Rules</b>
      <button class="btn btn-sm btn-success" onclick="openSubjectModal()">
        <i class="fas fa-plus"></i> Add
      </button>
    </div>

    <div class="card-body p-0">
      <table class="table table-sm table-bordered mb-0">
        <thead class="table-dark">
          <tr>
            <th>Subject</th>
            <th>Total Max Marks</th>
            <th>Formula</th>
            <th width="80">Action</th>
          </tr>
        </thead>
        <tbody>
        {% for r in subject_rules %}
          <tr>
            <td>{{ r.subject.subject_name_eng }}</td>
            <td>{{ r.total_max_marks }}</td>
            <td><code>{{ r.formula }}</code></td>
            <td class="text-center">
              <button class="btn btn-sm btn-primary"
                onclick="editSubject('{{ r.id }}','{{ r.subject.id }}',
                                    '{{ r.total_max_marks }}','{{ r.formula }}')">
                Edit
              </button>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="4" class="text-center text-muted">No rules</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% endif %}
</div>




<div class="modal fade" id="gradingModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5>Grading Rule</h5></div>
      <div class="modal-body">
        <input type="hidden" id="grading_id">
        <input type="hidden" id="grading_level" value="{{ selected_level.id }}">
        <input class="form-control mb-2" id="min_score" placeholder="Min score">
        <input class="form-control mb-2" id="max_score" placeholder="Max score">
        <input class="form-control mb-2" id="grade" placeholder="Grade">
        <input class="form-control mb-2" id="points" placeholder="Points">
        <input class="form-control mb-2" id="weight" placeholder="Weight">
        <input class="form-control mb-2" id="status" placeholder="Status(i.e Good")>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" onclick="saveGrading()">Save</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="divisionModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5>Division Rule</h5></div>
      <div class="modal-body">
        <input type="hidden" id="division_id">
        <input type="hidden" id="division_level" value="{{ selected_level.id }}">
        <input class="form-control mb-2" id="min_points" placeholder="Min points">
        <input class="form-control mb-2" id="max_points" placeholder="Max points">
        <input class="form-control mb-2" id="division" placeholder="Division">
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" onclick="saveDivision()">Save</button>
      </div>
    </div>
  </div>
</div>


<!-- ================= GPA MODAL ================= -->
<div class="modal fade" id="gpaModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5>GPA Rule</h5>
      </div>

      <div class="modal-body">
        <input type="hidden" id="gpa_id">
        <input type="hidden" id="gpa_level" value="{{ selected_level.id }}">

        <input class="form-control mb-2" id="min_gpa" placeholder="Min GPA">
        <input class="form-control mb-2" id="max_gpa" placeholder="Max GPA">
        <input class="form-control mb-2" id="gpa_grade" placeholder="GPA Grade">
        <input class="form-control mb-2" id="gpa_points" placeholder="GPA Points">
        <input class="form-control mb-2" id="gpa_status" placeholder="Status (PASS / FAIL)">
        <input class="form-control mb-2" id="gpa_colour" placeholder="Colour Hex code (i.e 03fcfc)">
      </div>

      <div class="modal-footer">
        <button class="btn btn-primary" onclick="saveGpa()">Save</button>
      </div>

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


<div class="modal fade" id="subjectModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5>Subject Processing Rule</h5></div>
      <div class="modal-body">
        <input type="hidden" id="subject_rule_id">
        <input type="hidden" id="subject_level" value="{{ selected_level.id }}">

        <select class="form-select mb-2" id="subject_id">
          {% for s in subjects %}
            <option value="{{ s.id }}">{{ s.subject_name_eng }}</option>
          {% endfor %}
        </select>

        <input class="form-control mb-2" id="total_max_marks"
               placeholder="Total max marks">
        <input class="form-control mb-2" id="formula"
               placeholder="Formula e.g (P1 + P2) / 150 * 100">
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" onclick="saveSubjectRule()">Save</button>
      </div>
    </div>
  </div>
</div>


<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>
<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 openGradingModal(){ $("#grading_id").val(""); $("#gradingModal").modal("show"); }
function editGrading(id,min,max,g,p,w,s){
  $("#grading_id").val(id); $("#min_score").val(min); $("#max_score").val(max);
  $("#grade").val(g); $("#points").val(p); $("#weight").val(w); $("#status").val(s);
  $("#gradingModal").modal("show");
}
function saveGrading(){
  $.post("{% url 'exams:save_grading_rule' %}",{
    csrfmiddlewaretoken:"{{ csrf_token }}",
    id:$("#grading_id").val(), academic_level:$("#grading_level").val(),
    min_score:$("#min_score").val(), max_score:$("#max_score").val(),
    grade:$("#grade").val(), points:$("#points").val(), weight:$("#weight").val(), status:$("#status").val()
  },()=>location.reload());
}

/* Division */
function openDivisionModal(){ $("#division_id").val(""); $("#divisionModal").modal("show"); }
function editDivision(id,min,max,d){
  $("#division_id").val(id); $("#min_points").val(min);
  $("#max_points").val(max); $("#division").val(d);
  $("#divisionModal").modal("show");
}
function saveDivision(){
  $.post("{% url 'exams:save_division_rule' %}",{
    csrfmiddlewaretoken:"{{ csrf_token }}",
    id:$("#division_id").val(), academic_level:$("#division_level").val(),
    min_points:$("#min_points").val(), max_points:$("#max_points").val(),
    division:$("#division").val()
  },()=>location.reload());
}

/* Subject */
function openSubjectModal(){ $("#subject_rule_id").val(""); $("#subjectModal").modal("show"); }
function editSubject(id,sid,tm,f){
  $("#subject_rule_id").val(id); $("#subject_id").val(sid);
  $("#total_max_marks").val(tm); $("#formula").val(f);
  $("#subjectModal").modal("show");
}
function saveSubjectRule(){
  $.post("{% url 'exams:save_subject_rule' %}",{
    csrfmiddlewaretoken:"{{ csrf_token }}",
    id:$("#subject_rule_id").val(), academic_level:$("#subject_level").val(),
    subject:$("#subject_id").val(),
    total_max_marks:$("#total_max_marks").val(),
    formula:$("#formula").val()
  },()=>location.reload());
}
</script>



<script>
/* ================= GPA ================= */
function openGpaModal(){
  $("#gpa_id").val("");
  $("#min_gpa, #max_gpa, #gpa_grade, #gpa_points, #gpa_status").val("");
  $("#gpaModal").modal("show");
}

function editGpa(id,min,max,grade,points,status,gpa_colour){
  $("#gpa_id").val(id);
  $("#min_gpa").val(min);
  $("#max_gpa").val(max);
  $("#gpa_grade").val(grade);
  $("#gpa_points").val(points);
  $("#gpa_status").val(status);
  $("#gpa_colour").val(gpa_colour);
  $("#gpaModal").modal("show");
}

function saveGpa(){
  $.post("{% url 'exams:save_gpa_rule' %}",{
    csrfmiddlewaretoken: "{{ csrf_token }}",
    id: $("#gpa_id").val(),
    academic_level: $("#gpa_level").val(),
    min_gpa: $("#min_gpa").val(),
    max_gpa: $("#max_gpa").val(),
    gpa_grade: $("#gpa_grade").val(),
    gpa_points: $("#gpa_points").val(),
    gpa_status: $("#gpa_status").val(),
    gpa_colour: $("#gpa_colour").val()
  }, function(){
    location.reload();
  });
}
</script>

{% endblock %}