{% extends "base.html" %}
{% block title %}Add House{% endblock %}
{% block page_title %}Add New House{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">
        <i class="bi bi-house-add me-1"></i>House Details
      </div>
      <div class="card-body">
        <form method="post" novalidate>
          {% csrf_token %}

          <!-- Location Section -->
          <h6 class="text-muted text-uppercase small fw-bold mb-3">
            <i class="bi bi-geo-alt me-1"></i>Location (TAMISEMI)
          </h6>
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Region <span class="text-danger">*</span></label>
              {{ form.region }}
              {% if form.region.errors %}<div class="text-danger small mt-1">{{ form.region.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">District <span class="text-danger">*</span></label>
              {{ form.district }}
              {% if form.district.errors %}<div class="text-danger small mt-1">{{ form.district.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Ward <span class="text-danger">*</span></label>
              {{ form.ward }}
              {% if form.ward.errors %}<div class="text-danger small mt-1">{{ form.ward.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Village <span class="text-danger">*</span></label>
              {{ form.village }}
              {% if form.village.errors %}<div class="text-danger small mt-1">{{ form.village.errors }}</div>{% endif %}
            </div>
          </div>

          <hr class="my-3">
          <h6 class="text-muted text-uppercase small fw-bold mb-3">
            <i class="bi bi-building me-1"></i>House Info
          </h6>
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Type <span class="text-danger">*</span></label>
              {{ form.location_type }}
              <div class="form-text">
                Market → House No. starts with <strong>LEG/MAR/XXX</strong><br>
                Home → House No. starts with <strong>HOME/XXX</strong>
              </div>
              {% if form.location_type.errors %}<div class="text-danger small mt-1">{{ form.location_type.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Total Rooms <span class="text-danger">*</span></label>
              {{ form.total_rooms }}
              <div class="form-text">Rooms will be auto-generated on save.</div>
              {% if form.total_rooms.errors %}<div class="text-danger small mt-1">{{ form.total_rooms.errors }}</div>{% endif %}
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Description</label>
              {{ form.description }}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Owner</label>
              {{ form.owner }}
              <div class="form-text">Optional – the user who owns this property.</div>
              {% if form.owner.errors %}<div class="text-danger small mt-1">{{ form.owner.errors }}</div>{% endif %}
            </div>
          </div>

          <div class="d-flex gap-2 justify-content-end">
            <a href="{% url 'house_list' %}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>Save & Generate Rooms
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const API = {
  districts: '/locations/districts/?region_id=',
  wards:     '/locations/wards/?district_id=',
  villages:  '/locations/villages/?ward_id=',
};

function populateSelect(selectEl, data, emptyLabel) {
  selectEl.innerHTML = `<option value="">${emptyLabel}</option>`;
  data.forEach(item => {
    const opt = document.createElement('option');
    opt.value = item.id;
    opt.textContent = item.name;
    selectEl.appendChild(opt);
  });
}

document.getElementById('id_region').addEventListener('change', async function () {
  const rid = this.value;
  document.getElementById('id_district').innerHTML = '<option value="">-- Select District --</option>';
  document.getElementById('id_ward').innerHTML = '<option value="">-- Select Ward --</option>';
  document.getElementById('id_village').innerHTML = '<option value="">-- Select Village --</option>';
  if (!rid) return;
  const res = await fetch(API.districts + rid);
  const data = await res.json();
  populateSelect(document.getElementById('id_district'), data, '-- Select District --');
});

document.getElementById('id_district').addEventListener('change', async function () {
  const did = this.value;
  document.getElementById('id_ward').innerHTML = '<option value="">-- Select Ward --</option>';
  document.getElementById('id_village').innerHTML = '<option value="">-- Select Village --</option>';
  if (!did) return;
  const res = await fetch(API.wards + did);
  const data = await res.json();
  populateSelect(document.getElementById('id_ward'), data, '-- Select Ward --');
});

document.getElementById('id_ward').addEventListener('change', async function () {
  const wid = this.value;
  document.getElementById('id_village').innerHTML = '<option value="">-- Select Village --</option>';
  if (!wid) return;
  const res = await fetch(API.villages + wid);
  const data = await res.json();
  populateSelect(document.getElementById('id_village'), data, '-- Select Village --');
});
</script>
{% endblock %}