{% extends 'admin_panel/base.html' %}
{% block title %}Wards{% endblock %}
{% block page_title %}Wards{% endblock %}

{% block content %}
<div class="row g-3">
  <!-- Add Form -->
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header p-3">
        <i class="bi bi-plus-circle me-2" style="color:#a855f7;"></i> Add Ward
      </div>
      <div class="card-body">
        <form method="post">
          {% csrf_token %}
          <div class="mb-3">
            <label class="form-label fw-semibold">District <span class="text-danger">*</span></label>
            <select name="district" class="form-select" required>
              <option value="">-- Select District --</option>
              {% for d in districts %}
              <option value="{{ d.pk }}">{{ d.region.name }} › {{ d.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Ward Name <span class="text-danger">*</span></label>
            <input type="text" name="name" class="form-control" required placeholder="e.g. Kinondoni">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Code</label>
            <input type="text" name="code" class="form-control" placeholder="e.g. KIN">
          </div>
          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-check-lg me-1"></i> Add Ward
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- List -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header p-3 d-flex align-items-center justify-content-between">
        <span><i class="bi bi-geo-alt me-2" style="color:#a855f7;"></i>All Wards</span>
        <span class="badge bg-secondary">{{ wards.count }}</span>
      </div>
      <div class="card-body p-0">
        <table class="table mb-0">
          <thead>
            <tr>
              <th class="ps-3">#</th>
              <th>Name</th>
              <th>Code</th>
              <th>District</th>
              <th>Region</th>
              <th>Villages</th>
              <th class="pe-3">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for w in wards %}
            <tr>
              <td class="ps-3 text-muted" style="font-size:.8rem;">{{ forloop.counter }}</td>
              <td class="fw-semibold">{{ w.name }}</td>
              <td><span class="badge bg-light text-dark border">{{ w.code|default:"—" }}</span></td>
              <td class="text-muted">{{ w.district.name }}</td>
              <td class="text-muted" style="font-size:.82rem;">{{ w.district.region.name }}</td>
              <td class="text-muted">{{ w.villages.count }}</td>
              <td class="pe-3">
                <button class="btn btn-sm btn-outline-primary me-1"
                        onclick="openEdit({{ w.pk }}, '{{ w.name|escapejs }}', '{{ w.code|escapejs }}', {{ w.district.pk }})">
                  <i class="bi bi-pencil"></i>
                </button>
                <a href="{% url 'admin_ward_delete' w.pk %}" class="btn btn-sm btn-outline-danger">
                  <i class="bi bi-trash"></i>
                </a>
              </td>
            </tr>
            {% empty %}
            <tr><td colspan="7" class="text-center text-muted py-4">No wards yet.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Ward</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="edit">
        <input type="hidden" name="pk" id="edit_pk">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">District</label>
            <select name="district" id="edit_district" class="form-select" required>
              {% for d in districts %}
              <option value="{{ d.pk }}">{{ d.region.name }} › {{ d.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Ward Name</label>
            <input type="text" name="name" id="edit_name" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Code</label>
            <input type="text" name="code" id="edit_code" class="form-control">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function openEdit(pk, name, code, districtPk) {
  document.getElementById('edit_pk').value = pk;
  document.getElementById('edit_name').value = name;
  document.getElementById('edit_code').value = code;
  document.getElementById('edit_district').value = districtPk;
  new bootstrap.Modal(document.getElementById('editModal')).show();
}
</script>
{% endblock %}