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

<div class="container mt-4">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4>
      <i class="fas fa-layer-group"></i> Exam Combinations
    </h4>

    <div>
      <!-- Add Button -->
      <button class="btn btn-primary btn-sm"
              data-bs-toggle="modal"
              data-bs-target="#addCombinationModal">
        <i class="fas fa-plus"></i> Add Combination
      </button>

      <!-- Bulk Upload -->
      <button class="btn btn-success btn-sm"
              data-bs-toggle="modal"
              data-bs-target="#bulkCombinationModal">
        <i class="fas fa-file-excel"></i> Bulk Upload
      </button>
    </div>
  </div>

  {% if messages %}
      {% for message in messages %}
          <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
              {{ message }}
              <button type="button" class="btn-close"
                      data-bs-dismiss="alert"></button>
          </div>
      {% endfor %}
  {% endif %}

<table class="table table-bordered table-striped">
  <thead class="table-dark">
    <tr>
      <th>Code</th>
      <th>Academic Level</th>
      <th>Subjects</th>
      <th>Papers</th>
      <th>Papers</th>
      <th width="120">Action</th>
    </tr>
  </thead>

 <tbody>
{% for c in combinations %}
<tr>
  <td>{{ c.code }}</td>

  <td>{{ c.academic_level.name }}</td>

<td>
  {% regroup c.papers.all by paper.subject as subject_list %}

  {% for group in subject_list %}
      <span class="badge bg-primary me-1 mb-1">
          {{ group.grouper.subject_name_eng }}
      </span>
  {% empty %}
      <span class="text-muted">No subjects</span>
  {% endfor %}
</td>




  <!-- Papers List -->
  <td>
    {% for cp in c.papers.all %}
        <span class="badge bg-secondary">
            {{ cp.paper.paper_code }}
        </span>
    {% empty %}
        <span class="text-muted">No papers</span>
    {% endfor %}
  </td>

  <!-- Papers Count -->
  <td>
    <span class="badge bg-info">
        {{ c.papers_count }}
    </span>
  </td>

  <td>
    <button class="btn btn-success btn-sm"
            onclick="openCombinationModal({{ c.id }})">
      <i class="fa fa-plus"></i>
    </button>
  </td>

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

</table>


<div class="modal fade" id="combinationModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" id="combinationModalContent">
    </div>
  </div>
</div>


</div>


<!-- ADD MODAL -->
<div class="modal fade" id="addCombinationModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <form method="POST"
            action="{% url 'exams:combination_add' %}">

        {% csrf_token %}

        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title">Add Combination</h5>
          <button class="btn-close btn-close-white"
                  data-bs-dismiss="modal"></button>
        </div>

<div class="modal-body">

  <div class="mb-3">
    <label>Combination Code</label>
    <input type="text"
           name="code"
           class="form-control"
           required>
  </div>

  <div class="mb-3">
    <label>Combination Name</label>
    <input type="text"
           name="name"
           class="form-control"
           required>
  </div>

  <div class="mb-3">
    <label>Combination Category</label>

    <select name="combination_category"
            class="form-control"
            required>
      <option value="">Select Level</option>
        <option value="Social Science">Social Science</option>
        <option value="Language">Language</option>
        <option value="Business">Business</option>
        <option value="Science">Science</option>
        <option value="Sports and Games">Sports and Games</option>
        <option value="Arts">Arts</option>
        <option value="Religious Education">Religious Education</option>
    </select>
  </div>

  <div class="mb-3">
    <label>Academic Level</label>
    <select name="academic_level"
            class="form-control"
            required>
      <option value="">Select Level</option>
      {% for l in levels %}
        <option value="{{ l.id }}">{{ l.name }}</option>
      {% endfor %}
    </select>
  </div>

</div>


        <div class="modal-footer">
          <button class="btn btn-primary w-100">
            Save
          </button>
        </div>

      </form>

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


<!-- BULK MODAL -->
<div class="modal fade" id="bulkCombinationModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <form method="POST"
            action="{% url 'exams:combination_bulk_upload' %}"
            enctype="multipart/form-data">

        {% csrf_token %}

        <div class="modal-header bg-success text-white">
          <h5 class="modal-title">Bulk Upload Combinations</h5>
          <button class="btn-close btn-close-white"
                  data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">

          <p class="fw-bold">Excel format:</p>
          <pre class="bg-light p-2 small">
code |Name | combination_category | academic_level_code
HGE | HGE | Economics | ALEVEL
          </pre>

          <input type="file"
                 name="excel_file"
                 accept=".xlsx"
                 class="form-control"
                 required>

        </div>

        <div class="modal-footer">
          <button class="btn btn-success w-100">
            Upload
          </button>
        </div>

      </form>

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


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

// ---- CSRF FUNCTION FIRST ----
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// ---- SAVE FUNCTION AFTER ----
window.saveCombinationPapers = function(combinationId){

    console.log("Triggered for:", combinationId);

    let selected = [];

    $(".combo-paper-checkbox:checked").each(function(){
        selected.push($(this).val());
    });

    console.log("Selected:", selected);

    $.ajax({
        url: "{% url 'exams:combination_papers_save_ajax' 0 %}".replace('0', combinationId),
        type: "POST",
        data: {
            "papers[]": selected
        },
        headers: {
            "X-CSRFToken": getCookie('csrftoken')
        },
        success: function(response){
            console.log("Response:", response);
            location.reload();
        },
        error: function(xhr){
            console.log("AJAX ERROR:", xhr.status, xhr.responseText);
        }
    });
}

// ---- MODAL LOADER ----
function openCombinationModal(combinationId){

    $.get(
        `/combinations/${combinationId}/papers/modal/`,
        function(data){
            $("#combinationModalContent").html(data);

            var modal = new bootstrap.Modal(
                document.getElementById('combinationModal')
            );
            modal.show();
        }
    );
}

</script>

{% endblock %}