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

<div class="container mt-4">
  <h4><i class="fas fa-map"></i> Import Regions / Districts / Wards / Schools</h4>

  <div class="card shadow-sm mt-3">
    <div class="card-body">

      <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}

<p class="fw-bold">Required columns:</p>
<pre class="bg-light p-2 small">
REGION | COUNCIL | WARD | SCHOOL NAME | SCHOOL_CODE | OWNERSHIP | SCHOOL_REGNO | LATITUDE | LONGITUDE
</pre>



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

        <button class="btn btn-primary mt-3 w-100">
          <i class="fas fa-upload"></i> Import GEO Data
        </button>

      </form>

    </div>
  </div>

<hr>

<div class="d-flex justify-content-between align-items-center mt-4 mb-2">
  <h5 class="mb-0">
    <i class="fas fa-school"></i> Schools List
  </h5>

  <a href="{% url 'exams:export_schools_excel' %}"
     class="btn btn-success btn-sm">
    <i class="fas fa-file-excel"></i> Export to Excel
  </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 id="MasterTable" class="table table-bordered table-striped table-sm mt-4">
  <thead class="table-dark">
    <tr>
      <th>Code</th>
      <th>Reg No</th>
      <th>Name</th>
      <th>Ward</th>
      <th>District</th>
      <th>Region</th>
      <th>Ownership</th>
      <th>Lat</th>
      <th>Lng</th>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    {% for s in schools %}
    <tr>
      <td>{{ s.school_code }}</td>
      <td>{{ s.school_regno|default:"—" }}</td>
      <td>{{ s.name }}</td>
      <td>{{ s.ward.name }}</td>
      <td>{{ s.district.name }}</td>
      <td>{{ s.region.name }}</td>
      <td>{{ s.ownership }}</td>
      <td>{{ s.latitude|default:"—" }}</td>
      <td>{{ s.longitude|default:"—" }}</td>

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

        {% if s.can_delete %}
        <a href="{% url 'exams:school_delete' s.id %}"
           class="btn btn-sm btn-danger"
           onclick="return confirm('Delete this school?');">
          <i class="fas fa-trash"></i>
        </a>
        {% else %}
        <button class="btn btn-sm btn-secondary" disabled>
          <i class="fas fa-lock"></i>
        </button>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>


</div>

<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>
$(document).ready(function () {

    let table = $('#MasterTable').DataTable({
        pageLength: 50,
        lengthMenu: [10,20,50,100],
        ordering: true,
        autoWidth: false,
        responsive: true
    });

});
</script>

{% endblock %}