{% extends "layout.html" %}
{% block title %}School Admin{% endblock %}
{% block content %}
<section class="panel page-banner">
  <div class="page-header">
    <div>
      <p class="eyebrow">Admin tools</p>
      <h1>School management</h1>
    </div>
    <div class="admin-actions">
      <button class="btn" type="button" id="open-deleted">Recently deleted <span class="badge">{{ deleted_count }}</span></button>
      <a class="btn pri" href="{{ url('school_admin') }}?new=1">Add school</a>
    </div>
  </div>
</section>

{% if show_form %}
<section class="panel">
  <h2>{{ "Edit school" if school else "Add new school" }}</h2>
  <form method="post">
    {{ csrf_input }}
    {% if school %}<input type="hidden" name="school_id" value="{{ school.pk }}">{% endif %}
    {{ form.non_field_errors() }}
    <div class="grid">
      <label class="f">{{ form.organization_id.label }} {{ form.organization_id }}</label>
      <label class="f">{{ form.name.label }} {{ form.name }}</label>
      <label class="f">{{ form.district_id.label }} {{ form.district_id }}</label>
      <label class="f">{{ form.district_name.label }} {{ form.district_name }}</label>
      <label class="f">{{ form.municipality.label }} {{ form.municipality }}</label>
      <label class="f">{{ form.school_type.label }} {{ form.school_type }}</label>
      <label class="f">{{ form.total_students.label }} {{ form.total_students }}</label>
      <label class="f">{{ form.up_to_class.label }} {{ form.up_to_class }}</label>
    </div>
    {% if form.field_groups %}
    <div style="margin-top: 18px;">
      <h3>Imported detail fields</h3>
      {% for group in form.field_groups %}
      <div style="margin-top: 14px;">
        <h4 style="margin: 0 0 8px;">{{ group.title }}</h4>
        <div class="grid">
          {% for field in group.fields %}
            <label class="f">
              {{ field.label }}
              {{ form[field.name] }}
            </label>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="bar" style="margin-top: 14px; justify-content: flex-start;">
      <button class="pri" type="submit">Save school</button>
      <a class="btn" href="{{ url('school_admin') }}">Cancel</a>
    </div>
  </form>
</section>
{% endif %}

<section class="panel">
  <div class="list-heading">
    <h2>School list</h2>
    <form method="get" action="{{ url('school_admin') }}" class="school-search">
      <label class="f" for="school-search">Search schools</label>
      <div class="search-controls">
        <input id="school-search" type="text" name="q" value="{{ school_search }}" placeholder="Name, district, type, or ID">
        <button class="pri" type="submit">Search</button>
        {% if school_search %}<a class="btn" href="{{ url('school_admin') }}">Clear</a>{% endif %}
      </div>
    </form>
  </div>
  <p class="pub">Showing {{ school_page.start_index() }}–{{ school_page.end_index() }} of {{ school_page.paginator.count }} schools</p>
  <div class="tw">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>District</th>
          <th>Municipality</th>
          <th>Type</th>
          <th>Students</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for s in schools %}
          <tr>
            <td>{{ s.organization_id }}</td>
            <td>{{ s.name }}</td>
            <td>{{ s.district_name or '-' }}</td>
            <td>{{ s.municipality or '-' }}</td>
            <td>{{ s.school_type or '-' }}</td>
            <td>{{ s.total_students if s.total_students is not none else '-' }}</td>
            <td>
              <a class="btn" href="{{ url('school_admin') }}?edit={{ s.pk }}">Edit</a>
              <form method="post" style="display:inline;">
                {{ csrf_input }}
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="school_id" value="{{ s.pk }}">
                <button type="submit" onclick="return confirm('Move this school to Recently deleted? Its CRM history will be kept and you can restore it later.')">Delete</button>
              </form>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if school_page.has_other_pages() %}
  <nav class="page-controls" aria-label="School list pages">
    {% if school_previous_url %}<a class="btn" href="{{ school_previous_url }}">Previous</a>{% endif %}
    <span>Page {{ school_page.number }} of {{ school_page.paginator.num_pages }}</span>
    {% if school_next_url %}<a class="btn" href="{{ school_next_url }}">Next</a>{% endif %}
  </nav>
  {% endif %}
</section>
<dialog class="deleted-dialog" id="deleted-dialog" aria-labelledby="deleted-title">
  <div class="dialog-heading">
    <div>
      <p class="eyebrow">School recovery</p>
      <h2 id="deleted-title">Recently deleted</h2>
      <p class="pub">Deleted schools are hidden from normal views. Restoring keeps their CRM history.</p>
    </div>
    <form method="dialog"><button class="dialog-close" type="submit" aria-label="Close recently deleted" title="Close">&times;</button></form>
  </div>
  {% if deleted_schools %}
  <div class="tw">
    <table>
      <thead>
        <tr><th>ID</th><th>Name</th><th>District</th><th>Deleted</th><th>Action</th></tr>
      </thead>
      <tbody>
        {% for s in deleted_schools %}
        <tr>
          <td>{{ s.organization_id }}</td>
          <td>{{ s.name }}</td>
          <td>{{ s.district_name or '-' }}</td>
          <td>{{ s.deleted_at.strftime("%Y-%m-%d %H:%M") }}</td>
          <td>
            <form method="post">
              {{ csrf_input }}
              <input type="hidden" name="action" value="restore">
              <input type="hidden" name="school_id" value="{{ s.pk }}">
              <button class="pri" type="submit">Restore</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <nav class="page-controls" aria-label="Recently deleted pages">
    {% if deleted_previous_url %}<a class="btn" href="{{ deleted_previous_url }}">Previous</a>{% endif %}
    <span>Page {{ deleted_page.number }} of {{ deleted_page.paginator.num_pages }}</span>
    {% if deleted_next_url %}<a class="btn" href="{{ deleted_next_url }}">Next</a>{% endif %}
  </nav>
  {% else %}
  <p class="empty">There are no recently deleted schools.</p>
  {% endif %}
</dialog>
<script>
  const deletedDialog = document.getElementById("deleted-dialog");
  document.getElementById("open-deleted").addEventListener("click", () => deletedDialog.showModal());
  deletedDialog.addEventListener("click", (event) => {
    if (event.target !== deletedDialog) return;
    const bounds = deletedDialog.getBoundingClientRect();
    if (event.clientX < bounds.left || event.clientX > bounds.right ||
        event.clientY < bounds.top || event.clientY > bounds.bottom) {
      deletedDialog.close();
    }
  });
  if (new URLSearchParams(window.location.search).get("show_deleted") === "1") deletedDialog.showModal();
</script>
{% endblock %}