{% 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-book"></i> Subjects
    </h4>

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


<a href="{% url 'exams:subject_template_download' %}"
   class="btn btn-outline-secondary btn-sm">
  <i class="fas fa-download"></i> Download Template
</a>


    <a href="{% url 'exams:subject_add' %}" class="btn btn-primary btn-sm">
      <i class="fas fa-plus"></i> Add Subject
    </a>
  </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>Name (EN)</th>
  <th>Short</th>
  <th>Level</th>
  <th>Papers</th>
  <th>Principal</th>
  <th>Practical</th>
  <th>Status</th>
  <th>Color</th>
  <th width="120">Actions</th>
</tr>
</thead>


<tbody>
{% for s in subjects %}
<tr>
  <td>{{ s.subject_code }}</td>
  <td>{{ s.subject_name_eng }}</td>
  <td>{{ s.subject_shortname }}</td>
  <td>{{ s.subject_level }}</td>
  <td class="text-center">{{ s.number_of_papers }}</td>

  <td class="text-center">
    {% if s.is_principal %}
      <span class="badge bg-primary">Yes</span>
    {% else %}
      <span class="badge bg-secondary">No</span>
    {% endif %}
  </td>

  <td class="text-center">
    {% if s.is_practical %}
      <span class="badge bg-warning text-dark">Yes</span>
    {% else %}
      <span class="badge bg-secondary">No</span>
    {% endif %}
  </td>

  <td>
    {% if s.is_active %}
      <span class="badge bg-success">Active</span>
    {% else %}
      <span class="badge bg-danger">Inactive</span>
    {% endif %}
  </td>

  <td>
    <span class="badge"
          style="background-color: {{ s.color_code }}">
      {{ s.color_code }}
    </span>
  </td>

  <td>
    <a href="{% url 'exams:subject_edit' s.subject_id %}"
       class="btn btn-sm btn-info">
      <i class="fas fa-edit"></i>
    </a>

    <a href="{% url 'exams:subject_delete' s.subject_id %}"
       class="btn btn-sm btn-danger"
       onclick="return confirm('Delete this subject?');">
      <i class="fas fa-trash"></i>
    </a>
  </td>
</tr>
{% empty %}
<tr>
  <td colspan="10" class="text-center text-muted">
    No subjects found
  </td>
</tr>
{% endfor %}
</tbody>

    
  </table>



<!-- ================= BULK SUBJECT UPLOAD ================= -->
<div class="modal fade" id="bulkSubjectModal">
  <div class="modal-dialog">
    <div class="modal-content">

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

        {% csrf_token %}

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

        <div class="modal-body">
          <p class="fw-bold">Excel columns required:</p>
          <pre class="bg-light p-2 small">
subject_code | subject_name_eng | subject_name_sw | is_active
          </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">
            <i class="fas fa-upload"></i> Upload Subjects
          </button>
        </div>

      </form>

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


</div>

{% endblock %}