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


<div class="container mt-4">
<section class="content-header">
  <div class="d-flex justify-content-between">


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



    <h3>School Timetable</h3>
    <form method="post">
      {% csrf_token %}
      <button name="generate"
        class="btn btn-success btn-lg rounded-circle">
        GENERATE
      </button>
    </form>
  </div>
</section>

<section class="content">

<div class="row">
  <!-- MANAGEMENT PANEL -->
  <div class="col-md-3">
    <div class="card card-primary">
      <div class="card-header">Setup</div>
      <div class="card-body">



<button class="btn btn-outline-primary btn-block"
        data-bs-toggle="modal"
        data-bs-target="#addClassModal">
  Add Class
</button>

<!-- <button class="btn btn-outline-primary btn-block"
        data-bs-toggle="modal"
        data-bs-target="#bulkClassModal">
  Add Class (Bulk)
</button> -->

<button class="btn btn-outline-info btn-block mt-2"
        data-bs-toggle="modal"
        data-bs-target="#addStreamModal">
  Add Stream
</button>

<!-- <button class="btn btn-outline-info btn-block"
        data-bs-toggle="modal"
        data-bs-target="#bulkStreamModal">
  Add Stream (Bulk)
</button> -->

<button class="btn btn-outline-success btn-block mt-2"
        data-bs-toggle="modal"
        data-bs-target="#addSubjectModal">
  Add Subject
</button>

<button class="btn btn-outline-warning btn-block mt-2"
        data-bs-toggle="modal"
        data-bs-target="#addTeacherModal">
  Add Teacher
</button>

<button class="btn btn-outline-secondary btn-block mt-2"
        data-bs-toggle="modal"
        data-bs-target="#assignTeacherModal">
  Assign Teacher → Subject → Stream
</button>




<div class="modal fade" id="addClassModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post">
        {% csrf_token %}
        <div class="modal-header">
          <h5>Add Class</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          {{ class_form.as_p }}
        </div>
        <div class="modal-footer">
          <button name="add_class" class="btn btn-primary">
            Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="addStreamModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post">
        {% csrf_token %}
        <div class="modal-header">
          <h5>Add Stream</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          {{ stream_form.as_p }}
        </div>
        <div class="modal-footer">
          <button name="add_stream" class="btn btn-info">
            Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="addSubjectModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post">
        {% csrf_token %}
        <div class="modal-header">
          <h5>Add Subject</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          {{ subject_form.as_p }}
        </div>
        <div class="modal-footer">
          <button name="add_subject" class="btn btn-success">
            Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="addTeacherModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post">
        {% csrf_token %}
        <div class="modal-header">
          <h5>Add Teacher</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          {{ teacher_form.as_p }}
        </div>
        <div class="modal-footer">
          <button name="add_teacher" class="btn btn-warning">
            Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="assignTeacherModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post">
        {% csrf_token %}
        <div class="modal-header">
          <h5>Assign Teacher</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          {{ assign_form.as_p }}
        </div>
        <div class="modal-footer">
          <button name="assign_teacher" class="btn btn-secondary">
            Assign
          </button>
        </div>
      </form>
    </div>
  </div>
</div>


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





<div class="col-md-9">

{% if display_table %}

<div class="card card-secondary">

  <div class="card-header text-center">
    <h4 class="mb-0">{{ school.school_code }} - {{ school.name }}</h4>
    <small>
      {{ school.region }} | {{ school.district }} | {{ school.ward }}
    </small>

    <div class="mt-2">
      <a href="{% url 'exams:timetable_pdf' %}" class="btn btn-sm btn-danger">PDF A3</a>
      <a href="{% url 'exams:timetable_excel' %}" class="btn btn-sm btn-success">Excel</a>
    </div>
  </div>

  <div class="card-body table-responsive">
    <table class="table table-bordered table-sm">

      <thead>
        <tr>
          <th>Day</th>
          <th>Stream</th>
          {% for p in periods %}
            <th>{{ p }}</th>
          {% endfor %}
        </tr>
      </thead>

      <tbody>
        {% for row in display_table %}
        <tr>
          <td>{{ row.day }}</td>
          <td>{{ row.stream }}</td>

          {% for cell in row.cells %}
            <td style="
              background-color: {{ cell.color }};
              text-align: center;
              font-weight: bold;
            ">
              {{ cell.name|default:"-" }}
            </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>

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

{% else %}
<div class="alert alert-info">
  Click <b>GENERATE</b> to create timetable
</div>
{% endif %}

</div>


</div>

</div>

</section>
{% endblock %}